Standardproduktgalerie in Magento 2 entfernen

Question

Wie Sie wissen, gibt es auf der Produktseite von Magento 2 eine Fotoreix-Galerie und eine Vergrößerungslupe. Ich muss wissen, wie ich sie von meiner Produktseite entfernen soll. Ich brauche nur das Produktbild.

In meiner app\design\frontend\Mypackage\mytheme\Magento_Catalog\templates\product\view\gallery.phtml Datei entfernt I:

<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(); ?> 
     } 
    } 
} 

Und in meiner app\design\frontend\Mypackage\mytheme\etc\view.xml Datei, die ich entfernt:

<!-- 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 --> 

aber kein Glück. Das Entfernen des obigen Codes führte zum Entfernen der Produktbild- und Farbfeldfunktionalitäten. Kann mir jemand dabei helfen? Gibt es eine Methode, mit der ich die Produktgalerie entfernen und zoomen kann, während die Farbfeldfunktion beibehalten wird? Jede Hilfe wird geschätzt. Vielen Dank.

Answer 1

Wenn Sie nur das Hauptbild von Produkten anzeigen möchten, ist es nicht notwendig, die Galerie zu entfernen.

Sie können die Vergrößerungs- und Vollbildfunktionen in Ihrer Datei view.xml deaktivieren.

... 
<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> 
... 

Und verwenden Sie dieses einfache Modul, mit dem Sie in der Galerie nur das Hauptbild anzeigen können.

Base-Ordner: app \ code

Datei: Beispiel/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\\": "" 
     } 
    } 
} 

Datei: Beispiel/OneImage/registration.php

<?php 

use \Magento\Framework\Component\ComponentRegistrar; 

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

Datei: Beispiel/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> 

Datei: Beispiel/OneImage/etc/Frontend/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> 

Datei: Beispiel/OneImage/Plugin/Model/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

Wenn Sie das Hauptprodukt Bild nur benötigen, ersetzen Inhalt der gallery.phtml Vorlage mit diesem Code:

<?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> 

Aber bedenken Sie, dass Sie etwas von Magento-2-Funktionalität (wie ein Schalt verlieren zwischen Bilder zugehöriger Produkte bei der Auswahl von Optionen).