删除Magento 2中的默认产品库

Janaka Dombawela 发表于 Dev

贾纳卡·多姆巴拉

如您所知，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 -->

但没有运气。删除上面的代码将导致删除产品图像和色板功能。谁能帮我这个？有什么方法可以让我在保留色板功能的同时删除产品图集并进行缩放？任何帮助表示赞赏。谢谢你。

丹尼尔

如果只想显示产品的主图像，则不必删除图库。

您可以在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;
    }
}