Configuration tips and tricks

This section describes some common tips and tricks to help configuring the extension to fit the store requirenments.

Updating to version 2.0.0

The major update of the extension includes interfaces and data structure changes as well as the changes to the way labals are outputing to the store front.
All previously configured labels should migrate automaltically to the new version without issues.
However, after the upgrade some additional adjustments might be needed to make labels to be shown as they were before the upgrade.
In most cases adjustment may be required only in labels styles as they no longer are inline styles.

If your store used customization for displaying labels please check the Display Labels within a Custom Theme section of this page and update the code in your templates. Old customization code will not produce errors in store front but will not display any labels.

Display Labels with manual position

There 2 types of placeholders that can be configured in the extension: positioned and manual.
In most cases positioned placeholders manages to display labels automatically.
If for some reason positioned labels are not displayed in the store front check the Display Labels within a Custom Theme section on this page.

Labels with manual position allows you to display labels at almost any place near product card. The only thing that required is to put the following code in the template file wherever the labels should be displayed.

<?php
    echo $block->getLayout()->createBlock('\Mirasvit\CatalogLabel\Block\Product\Label\Placeholder')
            ->setProduct($_product)
            ->setPlaceholderByCode(placeholder_code)
            ->setType(view_type)
            ->toHtml();
?>

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 positioned Labels.

<?php
    echo $block->getLayout()
            ->createBlock('\Mirasvit\CatalogLabel\Block\Product\Label\Renderer')
            ->setProduct($_product)
            ->setType(view_type)
            ->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 before the closing anchor tag <\a> which is a wrapper for product image:

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

            <!-- Labels code for custom themes -->
            <?php
                echo $block->getLayout()
                        ->createBlock('\Mirasvit\CatalogLabel\Block\Product\Label\Renderer')
                        ->setProduct($_product)
                        ->setType('list')
                        ->toHtml();
            ?>
        </a>
        <div class="product details product-item-details">
            ...
<?php endforeach; ?>

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.

Using image variable in templates

The HTML Template field of labels template form allows you to use the next variables

• {{var label.title}}
• {{var label.description}}
• {{var label.image_url}}
• {{var label.image}}
• {{var label.url}}

While first three variables are self-explanatory the last one - {{var label.image}} - can be confusing.

The {{var label.image}} variable represents a code snippet of the ready-to-use image block with label text. So the value of this variable is a HTML code that uses {{var label.title}} and {{var label.image_url}} inside it and has some predefined inline styles.
The raw value of this variable looks like here:

<div class="label-image" style="background:url({{var label.image}}); background-repeat: no-repeat; width: [image-width]; height: [image-height]; display: flex; justify-content: center; align-items: center; text-align: center">
    <span class="label-title">{{var label.title}}</span>
</div>

where [image-width] and [image-height] are automatically calculeted width and height of the image. Those are not variables and can't be used in the HTML Template field.

For further styling of the template that uses the {{var label.image}} variable, selectors like div.label-image and span.label-title can be used in the Styles field of the template edit form.

Customizations for Hyva theme

In order to inject the Product Labels onto the product view you will need to override the Magento_Catalog::product/view/gallery.phtml template.
Add the below code after the gallery but still within the gallery container. The comtainer should have CSS instruction position:relative. In Hyva theme it can be achieved by adding the relative class to the class list of the gallery container

    <?php if ($labels = $block->getChildBlock('product.labels')): ?>
        <?= $labels->toHtml(); ?>
    <?php endif ?>

In most cases product listings do not require additional adjustments. The only requirenment is that the anchor tag <a> of the product item should have position:responsive CSS instruction as well.
If for some case in your custom theme labels are not displayed in product listings automatically it can be fixed by overriding the template file Magento_catalog::list/item.phtml
In item.phtml add the below code after the <img> element but within the anchor <a> tag and add the class relative to the anchor tag

    <?php if ($labels = $block->getChildBlock('labels')): ?>
        <?= $labels->setProduct($product)->setViewCode('list')->toHtml(); ?>
    <?php endif; ?>