1

I added related products list in product details page. I see there all related products list are display but now i need to display swatches in this list. How can it possible for related products list.

If any one know please give me answers.

8

In app/design/frontend/MyCompany/mytheme/Magento_Catalog/templates/product/list/items.phtml please add below code :

<?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();                           
} ?>

And also in

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>
  • I am not getting proper selected options array why ? – Mukesh Prajapati Sep 24 '18 at 13:56
  • above code only brings a options in related product list. -> to get selected option array in post you have create 2D array like $option[1][141] =red , here 1 is product id And 141 is attribute id of color. – Charvi Parikh Sep 25 '18 at 3:50
  • Worked perfectly Thanks you so much. :) – Ask Bytes Aug 3 at 11:32
5

In 2.2.5 we're doing the following to achieve the swatches, essentially it replicates the code from the Mage_Catalog::product/list.phtml template where swatches are by default.

Firstly you need to add the swatch renderers to the block via the layout XML for the catalog_product_view layout handle.

In 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>

Then override the Magneto_Catalog::product/list/items.phtml file by creating your own in app/design/frontend/MyCompany/mytheme/Magento_Catalog/templates/product/list/items.phtml with the below modifications:

  1. Just below the opening PHP tags use Magento\Framework\App\Action\Action;

  2. Load the post data and json helpers just before the main switch:

    $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
    $jsonHelper = $this->helper('Magento\Framework\Json\Helper\Data');
    
  3. Replace the add to cart method, adding the form so product can be added via AJAX inside your product actions:

    <?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; ?>
    
  4. Then just before the closing if statement add the JS to not redirect to cart if the config for it is disabled:

      <?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; ?>
    

In the end you should see swatches being rendered and able to add products via AJAX.

  • Is it possible to do this same thing with crosssell's on the product detail page? I have created the block inside of the Product Detail Page, and the crosssell products are now showing up appropriately, but I can't seem to get the swatches to render. I think it is because I need to change the catalog_product_view.xml referenceBlock. – Scrivvles Jul 31 '18 at 20:42
3

To display Swatches along with the product name, thumbnail, etc, just like on the Category product lists, I did this in my Theme:

  1. Create this file:

app/design/frontend/MyCompany/mytheme/Magento_Swatches/layout/catalog_product_view.xml

Add this content (almost the same as the catalog_category_view one), so the Swatch renderer template is available on the Product View page:

<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>
  1. In this file:

app/design/frontend/MyCompany/mytheme/Magento_Catalog/layout/catalog_product_view.xml

Add the related.product.type.details.renderers to the catalog.product.related` , like so:

<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>
  1. Then update the items.phtml template:

app/design/frontend/MyCompany/mytheme/Magento_Catalog/templates/product/list/items.phtml

And echo the getProductDetailsHtml() output where you want. For instance:

<div class="product details product-item-details">
  <?php echo $block->getProductDetailsHtml($_item); ?>
  ...
</div>
0
<?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************/?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.