删除 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__);

文件：示例/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/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;
    }
}

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 的一些功能（例如在选择选项时在相关产品的图像之间切换）。