Display Labels within a Custom Theme

Some themes have different layouts that display products in their own unique formats. In this case, you need to adjust templates manually. Take a look at the real example below.

Assuming that $_product contains a current product object, you will need to insert the following code to make our extension place Catalog Label.

Example

<?php
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $labels = $objectManager->create('Mirasvit\CatalogLabel\Model\ResourceModel\Label\Collection')
                            ->addActiveFilter()
                            ->addStoreFilter($_product->getStore());
    /** @var \Mirasvit\CatalogLabel\Model\Label $label */
    foreach ($labels as $label) {
        $placeholder = $label->getPlaceholder();
        if ($placeholder->getIsAutoForList()) {
            echo $block->getLayout()->createBlock('\Mirasvit\CatalogLabel\Block\Product\Label')
                ->setType('list')
                ->setTemplate('product/badge.phtml')
                ->setPlaceholderCode($placeholder->getCode())
                ->setProduct($_product)
                ->setWidth(null)
                ->setHeight(null)
                ->toHtml();
        }
    }
?>

A Real Example

Consider the stantard template Magento/Catalog/view/frontend/templates/product/list.phtml, which contains the following code:

<?php foreach ($_productCollection as $_product): ?>
    <?php /* @escapeNotVerified */ echo($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>
    <div class="product-item-info" data-container="product-grid">
        <?php
        $productImage = $block->getImage($_product, $image);
        if ($pos != null) {
            $position = ' style="left:' . $productImage->getWidth() . 'px;'
                . 'top:' . $productImage->getHeight() . 'px;"';
        }
        ?>
        <?php // Product Image ?>
        <a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
            <?php echo $productImage->toHtml(); ?>
        </a>
        <div class="product details product-item-details">
            ...
<?php endforeach; ?>

We will insert our label overlay code right after the <div class="product details product-item-details"> line, inside the products iteration cycle:

<?php
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $labels = $objectManager->create('Mirasvit\CatalogLabel\Model\ResourceModel\Label\Collection')
                            ->addActiveFilter()
                            ->addStoreFilter($_product->getStore());
    /** @var \Mirasvit\CatalogLabel\Model\Label $label */
    foreach ($labels as $label) {
        $placeholder = $label->getPlaceholder();
        if ($placeholder->getIsAutoForList()) {
            echo $block->getLayout()->createBlock('\Mirasvit\CatalogLabel\Block\Product\Label')
                ->setType('list')
                ->setTemplate('product/badge.phtml')
                ->setPlaceholderCode($placeholder->getCode())
                ->setProduct($_product)
                ->setWidth(null)
                ->setHeight(null)
                ->toHtml();
        }
    }
?>

This code will create a block which will overlap the image, creating a place for our label.

The same approach can be applied to other Magento 2 custom themes.