Need Show configurable product Swatches in Home page

Question

I need to show the Configurable Product Swatches in Home page by CMS block.

Tried using -:

https://github.com/zaibi099/Magento/tree/master/Pakgentors/Swatches

Its working fine with XML layout, but not showing swatches when I try to call it from CMS block.

Answer 1

Showing Configurable Swatches in Home Page

Here, You can try the following method, For me it's working

1. In Admin->content->pages
2. select Home Page and edit
3. Click the design Tab from left side

In Layout Update XML Column add following Code

<referenceContainer name="content"> 
    <container name="home-page-full-block2" htmlTag="div" htmlClass="home-page-full-block2">    
                <block name="topselling.swatchrenderer">
        <block class="Magento\Swatches\Block\Product\Renderer\Listing\Configurable" as="configurable" template="Magento_Swatches::product/listing/renderer.phtml" />
    </block>
                 <block class="Ashik\ModuleName\Block\Topselling" name="productlist3" template="ModuleCompany_ModuleName::topselling.phtml">
              <block class="Magento\Framework\View\Element\RendererList" name="topselling.swatchrenderer" as="topselling.toprenderers">
                <block class="Magento\Framework\View\Element\Template" as="default"/>
              </block>
          </block>
   </container>

</referenceContainer>

finally go to your block Ashik\ModuleName\Block\Topselling.php add following code

public function getProductDetailsHtml(\Magento\Catalog\Model\Product $product)
    {
        $renderer = $this->getDetailsRenderer($product->getTypeId());

        if ($renderer) {
            $renderer->setProduct($product);
            return $renderer->toHtml();
        }
        return '';
    }

    public function getDetailsRenderer($type = null)
    {
        if ($type === null) {
            $type = 'default';
        }

        $rendererList = $this->getDetailsRendererList();
        if ($rendererList) {
            return $rendererList->getRenderer($type, 'default');
        }
        return null;
    }

    protected function getDetailsRendererList()
    {
        return $this->getDetailsRendererListName() ? $this->getLayout()->getBlock(
            $this->getDetailsRendererListName()
        ) : $this->getChildBlock(
            'topselling.toprenderers'
        );
    }

In view page get swatches from echo $block->getProductDetailsHtml($_product);

---

Answer 2

**In CMS HomePage-> Layout Update->add this code only, Hopefully it will work **

<referenceBlock name="homepage.swatchrenderer">
          <block class="Magento\Swatches\Block\Product\Renderer\Listing\Configurable" as="configurable" template="Magento_Swatches::product/listing/renderer.phtml" />
        </referenceBlock>
        <referenceContainer name="main">
          <container name="topproduct" htmlTag="div" htmlClass="topproduct">
                  <block class="Pakgentors\Swatches\Block\Productslist" name="productlist" template="Pakgentors_Swatches::products.phtml">
                      <block class="Magento\Framework\View\Element\RendererList" name="homepage.swatchrenderer" as="homepage.toprenderers">
                        <block class="Magento\Framework\View\Element\Template" as="default"/>
                      </block>
                  </block>
           </container>
        </referenceContainer>