javascript - 删除 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>
...

并使用这个简单的模块，让您只在图库中显示主图像。

基本文件夹:app\code

文件:Example/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\\": ""
        }
    }
}

文件:Example/OneImage/registration.php

<?php

use \Magento\Framework\Component\ComponentRegistrar;

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

文件: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>

文件: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>

文件: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;
    }
}