刪除Magento 2中的默認產品庫

Question

如您所知，Magento 2的產品頁面中有fotorama JavaScript庫和放大鏡。我需要知道如何從我的產品頁面中刪除它。我只需要產品圖片。

在我app\design\frontend\Mypackage\mytheme\Magento_Catalog\templates\product\view\gallery.phtml文件我刪除了：

<script type="text/x-magento-init"> 
{ 
    "[data-gallery-role=gallery-placeholder]": { 
     "mage/gallery/gallery": { 
      "mixins":["magnifier/magnify"], 
      "magnifierOpts": <?php /* @escapeNotVerified */ 
echo $block->getMagnifier(); ?>, 
      "data": <?php /* @escapeNotVerified */ 
echo $block->getGalleryImagesJson(); ?>, 
      "options": { 
       "nav": "<?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/nav"); ?>", 
       "loop": <?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/loop"); ?>, 
       "keyboard": <?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/keyboard"); ?>, 
       "arrows": <?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/arrows"); ?>, 
       "allowfullscreen": <?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/allowfullscreen"); ?>, 
       "showCaption": <?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/caption"); ?>, 
       "width": <?php /* @escapeNotVerified */ 
echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>, 
       "thumbwidth": <?php /* @escapeNotVerified */ 
echo $block->getImageAttribute('product_page_image_small', 'width'); ?>, 
       "thumbheight": <?php /* @escapeNotVerified */ 
echo $block->getImageAttribute('product_page_image_small', 'height') 
    ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>, 
       "height": <?php /* @escapeNotVerified */ 
echo $block->getImageAttribute('product_page_image_medium', 'height') 
    ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>, 
       "transitionduration": <?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/transition/duration"); ?>, 
       "transition": "<?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/transition/effect"); ?>", 
       "navarrows": <?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/navarrows"); ?>, 
       "navtype": "<?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/navtype"); ?>", 
       "navdir": "<?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/navdir"); ?>" 
      }, 
      "fullscreen": { 
       "nav": "<?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/fullscreen/nav"); ?>", 
       "loop": <?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/fullscreen/loop"); ?>, 
       "navdir": "<?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/fullscreen/navdir"); ?>", 
       "arrows": <?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/fullscreen/arrows"); ?>, 
       "showCaption": <?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/fullscreen/caption"); ?>, 
       "transitionduration": <?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/fullscreen/transition/duration"); ?>, 
       "transition": "<?php /* @escapeNotVerified */ 
echo $block->getVar("gallery/fullscreen/transition/effect"); ?>" 
      }, 
      "breakpoints": <?php /* @escapeNotVerified */ 
echo $block->getBreakpoints(); ?> 
     } 
    } 
} 

在我app\design\frontend\Mypackage\mytheme\etc\view.xml文件我刪除了：

<!-- Gallery and magnifier theme settings. Start --> 
    <var name="gallery"> 
     <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) --> 
     <var name="loop">true</var> <!-- Gallery navigation loop (true/false) --> 
     <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) --> 
     <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) --> 
     <var name="caption">false</var> <!-- Display alt text as image title (true/false) --> 
     <var name="allowfullscreen">true</var> <!-- Turn on/off fullscreen (true/false) --> 
     <var name="navdir">horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) --> 
     <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides (true/false) --> 
     <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) --> 
     <var name="transition"> 
      <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) --> 
      <var name="duration">500</var> <!-- Sets transition duration in ms --> 
     </var> 
     <var name="fullscreen"> 
      <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) --> 
      <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) --> 
      <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false/null) --> 
      <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview (true/false/null) --> 
      <var name="caption">false</var> <!-- Display alt text as image title (true/false) --> 
      <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in full screen(horizontal/vertical) --> 
      <var name="thumbwidth">150</var> <!-- Width of thumbnails in fullscreen --> 
      <var name="thumbheight">150</var> <!-- Height of thumbnails in fullscreen --> 
      <var name="navigation_carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) --> 
      <var name="transition"> 
       <var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) --> 
       <var name="duration">500</var> <!-- Sets transition duration in ms --> 
       <var name="carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) --> 
      </var> 
     </var> 
    </var> 

    <var name="magnifier"> 
     <var name="fullscreenzoom">5</var> <!-- Zoom for fullscreen (integer)--> 
     <var name="top"></var> <!-- Top position of magnifier --> 
     <var name="left"></var> <!-- Left position of magnifier --> 
     <var name="width"></var> <!-- Width of magnifier block --> 
     <var name="height"></var> <!-- Height of magnifier block --> 
     <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) --> 
     <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) --> 
    </var> 

    <var name="breakpoints"> 
     <var name="mobile"> 
      <var name="conditions"> 
       <var name="max-width">767px</var> 
      </var> 
      <var name="options"> 
       <var name="options"> 
        <var name="navigation">dots</var> 
       </var> 
      </var> 
     </var> 
    </var> 
    <!-- end. Gallery and magnifier theme settings --> 

，但沒有運氣。刪除上述代碼導致刪除產品圖像和色板功能。誰能幫我這個？是否有任何方法可以讓我在保留色板功能的同時去除產品庫和變焦？任何幫助表示讚賞。謝謝。

Answer 1

如果您只想顯示產品的主圖像，則不需要刪除圖庫。

您可以在view.xml文件中禁用放大鏡和全屏​​功能。

... 
<var name="gallery"> 
    ... 
    <var name="allowfullscreen">false</var> <!-- Turn on/off fullscreen (true/false) --> 
    ... 
</var> 
... 
<var name="magnifier"> 
    ... 
    <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) --> 
    ... 
</var> 
... 

並使用這個簡單的模塊，允許您在畫廊中只顯示主圖像。

Base文件夾：應用程序\代碼

文件：實施例/ OneImage/composer.json

{ 
    "name": "example/oneimage", 
    "description": "OneImage module for Magento 2", 
    "type": "magento2-module", 
    "version": "1.0.0", 
    "license": [ 
     "OSL-3.0", 
     "AFL-3.0" 
    ], 
    "require": { 
     "php": "~5.5.0|~5.6.0|~7.0.0", 
     "magento/module-catalog": "~100.0" 
    }, 
    "autoload": { 
     "files": [ 
      "registration.php" 
     ], 
     "psr-4": { 
      "Example\\OneImage\\": "" 
     } 
    } 
} 

文件：實施例/ OneImage /和registration.php

<?php 

use \Magento\Framework\Component\ComponentRegistrar; 

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Example_OneImage', __DIR__); 

文件：實施例/ OneImage/etc/module.xml

<?xml version="1.0"?> 
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> 
    <module name="Example_OneImage" setup_version="1.0.0"> 
     <sequence> 
      <module name="Magento_Catalog"/> 
     </sequence> 
    </module> 
</config> 

文件：例/ OneImage的/ etc /前端/ di.xml

<?xml version="1.0"?> 
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> 
    <type name="Magento\Catalog\Model\Product"> 
     <plugin name="ExampleOneImagePlugin" type="Example\OneImage\Plugin\Model\Product" sortOrder="1" /> 
    </type> 
</config> 

文件：例/ OneImage /插件/型號/ Product.php

<?php 

namespace Example\OneImage\Plugin\Model; 

/** 
* Plugin for \Magento\Catalog\Model\Product 
*/ 
class Product 
{ 
    /** 
    * Retrieve media gallery images 
    * 
    * @return \Magento\Framework\Data\Collection 
    */ 
    public function afterGetMediaGalleryImages(\Magento\Catalog\Model\Product $product, $images) 
    { 
     $mainImage = null; 
     foreach ($images as $key => $image) { 
      if ($product->getImage() == $image->getFile()) { 
       $mainImage = $image; 
       break; 
      } 
     } 
     $images->clear(); 
     if ($mainImage) { 
      $images->addItem($mainImage); 
     } 
     return $images; 
    } 
} 

Answer 2

如果你只需要主要產品圖片，請用這個代碼gallery.phtml模板的內容：

<?php 

$product = $block->getProduct(); 
$imageHelper = $this->helper('Magento\Catalog\Helper\Image'); 

if (!$product->getImage() || $product->getImage() == 'no_selection') { 
    $image = $imageHelper->getDefaultPlaceholderUrl('image'); 
} else { 
    $image = $imageHelper->init($product, 'product_page_image_medium') 
      ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false) 
      ->setImageFile($product->getImage()) 
      ->getUrl(); 
} 
?> 
<div class="gallery-placeholder"> 
    <img src="<?php echo $image; ?>" > 
</div> 

但請記住，你會失去一些Magento的2功能（如之間的切換選擇選項時相關產品的圖像）。