Magento 2: Как отображать образцы в сопутствующих товарах?
Я добавил список related products
на странице сведений о продукте.
Я вижу, что там отображается весь список сопутствующих товаров, но теперь мне нужно display swatches
в этом списке. Как это возможно для списка сопутствующих товаров.
Если кто-нибудь знает, пожалуйста, дайте мне ответы.
4 answers
В приложении/дизайне/интерфейсе/MyCompany/mytheme/каталог magento_catalog/шаблоны/продукт/список/товары.phtml пожалуйста, добавьте ниже код:
<?php if($_item->getTypeId() == \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE){
$swatchBlock = $this->getLayout()->createBlock("Magento\Swatches\Block\Product\Renderer\Listing\Configurable")->setTemplate("Magento_Swatches::product/listing/renderer.phtml");
echo $swatchBlock->setProduct($_item)->toHtml();
} ?>
, А также в
App/design/frontend/MyCompany/mytheme/Magento_Swatches/layout/catalog_product_view.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Magento_Swatches::css/swatches.css"/>
</head>
</page>
В 2.2.5 мы делаем следующее для получения образцов, по сути, он копирует код из шаблона Mage_Catalog::product/list.phtml, где образцы по умолчанию.
Во-первых, вам нужно добавить средства визуализации образцов в блок с помощью XML-файла макета для дескриптора макета catalog_product_view.
В app/design/frontend/MyCompany/mytheme/Magento_Swatches/layout/catalog_product_view.xml
:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Magento_Swatches::css/swatches.css"/>
</head>
<body>
<referenceBlock name="catalog.product.related">
<block class="Magento\Framework\View\Element\RendererList" name="related.product.type.details.renderers" as="details.renderers">
<block class="Magento\Framework\View\Element\Template" as="default"/>
<block class="Magento\Swatches\Block\Product\Renderer\Listing\Configurable" as="configurable" template="Magento_Swatches::product/listing/renderer.phtml" />
</block>
</referenceBlock>
</body>
</page>
Затем переопределите файл Magneto_Catalog::product/list/items.phtml
, создав свой собственный в app/design/frontend/MyCompany/mytheme/Magento_Catalog/templates/product/list/items.phtml
с приведенными ниже изменениями:
Чуть ниже открытие тегов PHP
use Magento\Framework\App\Action\Action;
-
Загрузите данные post и помощники json непосредственно перед главным переключателем:
$postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper'); $jsonHelper = $this->helper('Magento\Framework\Json\Helper\Data');
-
Замените метод "Добавить в корзину", добавив форму, чтобы товар можно было добавить с помощью AJAX внутри ваших действий с продуктом:
<?php if ($_item->isSaleable()): ?> <?php $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()]); $postParams = $jsonHelper->jsonDecode($postData); ?> <form data-role="tocart-form" data-product-sku="<?= $block->escapeHtml($_item->getSku()) ?>" action="<?= /* @NoEscape */ $postParams['action'] ?>" method="post"> <input type="hidden" name="product" value="<?= /* @escapeNotVerified */ $postParams['data']['product'] ?>"> <input type="hidden" name="<?= /* @escapeNotVerified */ Action::PARAM_NAME_URL_ENCODED ?>" value="<?= /* @escapeNotVerified */ $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>"> <?= $block->getBlockHtml('formkey') ?> <button type="submit" title="<?= $block->escapeHtml(__('Add to Cart')) ?>" class="action tocart primary"> <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span> </button> </form> <?php endif; ?>
-
Затем непосредственно перед закрытием инструкции if добавьте JS, чтобы не перенаправлять в корзину, если конфигурация для нее отключена:
<?php if (!$block->isRedirectToCartEnabled()) : ?> <script type="text/x-magento-init"> { "[data-role=tocart-form], .form.map.checkout": { "catalogAddToCart": { "product_sku": "<?= /* @NoEscape */ $_item->getSku() ?>" } } } </script> <?php endif; ?>
В конце вы должны увидеть отрисованные образцы и возможность добавления продукты через AJAX.
Чтобы отобразить образцы вместе с названием продукта, миниатюрой и т. Д., Как в списках продуктов категорий, я сделал это в своей теме:
- Создайте этот файл:
app/design/frontend/MyCompany/mytheme/Magento_Swatches/layout/catalog_product_view.xml
Добавьте это содержимое (почти такое же, как содержимое catalog_category_view), чтобы шаблон средства визуализации образцов был доступен на странице просмотра продукта:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Magento_Swatches::css/swatches.css"/>
</head>
<body>
<referenceBlock name="related.product.type.details.renderers">
<block class="Magento\Swatches\Block\Product\Renderer\Listing\Configurable" as="configurable" template="Magento_Swatches::product/listing/renderer.phtml" ifconfig="catalog/frontend/show_swatches_in_product_list" />
</referenceBlock>
</body>
</page>
- В этом файле:
app/design/frontend/MyCompany/mytheme/Magento_Catalog/layout/catalog_product_view.xml
Добавьте related.product.type.details.renderers
в каталог.продукт.связанный`, например итак:
<block class="Magento\Catalog\Block\Product\ProductList\Related" name="catalog.product.related" template="Magento_Catalog::product/list/items.phtml" group="detailed_info">
<block class="Magento\Framework\View\Element\RendererList" name="related.product.type.details.renderers" as="details.renderers">
<block class="Magento\Framework\View\Element\Template" as="default"/>
</block>
</block>
- Затем обновите шаблон
items.phtml
:
app/design/frontend/MyCompany/mytheme/Magento_Catalog/templates/product/list/items.phtml
И повторите вывод getProductDetailsHtml()
там, где вы хотите. Например:
<div class="product details product-item-details">
<?php echo $block->getProductDetailsHtml($_item); ?>
...
</div>
<?php/***********Display Brand Attribute************/?>
<?php
if($_product->getManufacturer()){
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');//get current category
$brand_value = $_product->getResource()->getAttribute('manufacturer')->getFrontend()->getValue($_product);
$brand_id = $_product->getManufacturer();
$curnt_cat_url = $category->getUrl();
$brandId = '?manufacturer='.$brand_id;
$om = \Magento\Framework\App\ObjectManager::getInstance();
$swatchHelper=$om->get("Magento\Swatches\Helper\Media");
$swatchCollection = $om->create('Magento\Swatches\Model\ResourceModel\Swatch\Collection');
$swatchCollection->addFieldtoFilter('option_id',$brand_id);
$item=$swatchCollection->getFirstItem();
$ThumbImage = $swatchHelper->getSwatchAttributeImage('swatch_thumb', $item->getValue());
$SwatchImage = $swatchHelper->getSwatchAttributeImage('swatch_image', $item->getValue());
?>
<div class="brand_bg">
<a href="<?php echo $curnt_cat_url.$brandId ?>"><img src="<?php echo $SwatchImage; ?>"></a>
</div>
<?php } ?>
<?php/***********End Brand Attribute************/?>