Entfernen Standard-Produkt-Galerie in Magento 2

Wissen Sie, es ist fotorama JavaScript-Galerie und die Lupe in der Produkt-Seite von Magento 2. Ich muss wissen wie ich das entfernen von meinem Produkt-Seite. Ich brauche einfach nur das Produkt nur Bild.

In meinem app\design\frontend\Mypackage\mytheme\Magento_Catalog\templates\product\view\gallery.phtml Datei habe ich entfernt:

<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 meinem app\design\frontend\Mypackage\mytheme\etc\view.xml Datei habe 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. Entfernen obigen code resultiert in der Entfernung der Produkt-Bild und swatch-Funktionalitäten. Kann mir jemand helfen mit diesem? Gibt es irgendeine Methode, die mir erlauben wird, entfernen Sie die Produkt-Galerie und Zoomen, während Sie halten die swatch-Funktion? Jede Hilfe ist willkommen. Danke.

InformationsquelleAutor Janaka Dombawela | 2016-03-24

Wenn Sie nur wollen, um den Haupt-Bild-Produkte, ist es nicht notwendig, entfernen Sie die Galerie.

Können Sie deaktivieren Sie die Lupe und Vollbild-Funktionen in Ihre view.xml Datei.

...
<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, das Ihnen erlaubt, um die Anzeige in der Galerie nur das Hauptbild.

Base-Ordner: app\code

Datei: Beispiel/OneImage/Komponist.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: Example/OneImage/registration.php

<?php

use \Magento\Framework\Component\ComponentRegistrar;

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

Datei: Example/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: Example/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: Example/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;
    }
}

PERFEKT! danke, Bearbeiten Sie die view.xml ist magento Weg für eine änderung der Werte im inneren der Galerie.phtml

InformationsquelleAutor Danil

Wenn Sie benötigen das Hauptprodukt nur Bild, ersetzen Sie die Inhalte der Galerie.phtml-template 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 verlieren einige der Magento-2-Funktionalität (wie ein Wechsel zwischen den Bildern der zugehörigen Produkte bei der Auswahl Optionen).

Danke. Aber ich will, dass die swatch-Funktionalitäten. Das entfernen der ursprünglichen Struktur von HTML-Klassen und ids entfernt die swatch-Funktionalität, wie Sie sagte. Ich habe bearbeitet Sie meine Frage in Bezug auf diese.

InformationsquelleAutor Danil

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.