如何在 Magento2 中扩展galley.phtml？答案

【问题标题】：How to extend galley.phtml in Magento2?如何在 Magento2 中扩展galley.phtml？
【发布时间】：2022-01-17 16:58:28
【问题描述】：

我想在我的自定义模块的 PDP 部分的 gallery.phtml 中添加自定义代码。我试过这个=> 在 catalog_product_view.xml 中调用 default 块

<referenceBlock name="product.info.media.image">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Ajith_Mymodule::product/view/gallery.phtml</argument>
            </action>
        </referenceBlock>

加载的gallery.phtml 有和没有默认代码，对我来说没有什么好用的。我是在尝试正确的方法还是有人给了我这样做的想法？

【问题讨论】：

标签： magento frontend magento2 customization catalog

【解决方案1】：

如果我们看一下：

vendor/magento/module-product-video/Observer/ChangeTemplateObserver.php

我们可以看到这个模板将通过 Observer 事件添加。所以，我们需要在我们的模块中禁用这个观察者事件。然后，尝试添加我们的自定义模板。

供应商/模块/etc/events.xml

<event name=""catalog_product_gallery_prepare_layout"">
        <observer name=""change_template"" disabled=""true""/>
        <observer name=""custom_change_template"" instance=""Vendor\Module\Observer\ChangeTemplateObserver"" />
</event>

供应商/模块/Observer/ChangeTemplateObserver.php

<?php
namespace Vendor\Module\Observer;
use Magento\Framework\Event\ObserverInterface;
class ChangeTemplateObserver implements ObserverInterface
{
   public function execute(\Magento\Framework\Event\Observer $observer)
   {
     $observer->getBlock()->setTemplate('Vendor_Module::helper/gallery.phtml');
   }
}

【讨论】：

【解决方案2】：

此方法运行正常

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * Product media data template
 *
 * @var $block \Magento\Catalog\Block\Product\View\Gallery
 */
?>

<?php
$images = $block->getGalleryImages()->getItems();
$mainImage = current(array_filter($images, function ($img) use ($block) {
    return $block->isMainImage($img);
}));

if (!empty($images) && empty($mainImage)) {
    $mainImage = $block->getGalleryImages()->getFirstItem();
}

$helper = $block->getData('imageHelper');
$mainImageData = $mainImage ?
    $mainImage->getData('medium_image_url') :
    $helper->getDefaultPlaceholderUrl('image');

?>

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <img
        alt="main product photo"
        class="gallery-placeholder__image"
        src="<?= /* @noEscape */ $mainImageData ?>"
    />
</div>

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": <?= /* @noEscape */ $block->getMagnifier() ?>,
                "data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
                "options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
                "fullscreen": <?= /* @noEscape */ $block->getGalleryOptions()->getFSOptionsJson() ?>,
                 "breakpoints": <?= /* @noEscape */ $block->getBreakpoints() ?>
            }
        }
    }
</script>

在我们的自定义模板中调用它

【讨论】：