Welcome to the Product Labels documentation.
You will find everything you need to set up your Product Labels so that you can support nearly any marketing strategy with attractive labels on your products' images.
Firstly, please check out our extension in the My Downloadable Products section of our store. Learn how to install extension, and proceed with Quick Start, which will guide you to set up your product labels.
php -f bin/magento module:enable Mirasvit_Core Mirasvit_CatalogLabel
for enable extension.php -f bin/magento setup:upgrade
to install extension.php -f bin/magento cache:clean
for clean cache.Deploy static view files
rm -rf pub/static/frontend/*; rm -rf pub/static/backend/*; rm -rf var/view_preprocessed/*; php -f bin/magento setup:static-content:deploy
composer require hyva-themes/magento2-mirasvit-catalog-label
bin/magento module:enable Hyva_MirasvitCatalogLabel
bin/magento setup:upgrade
cd /path/to/theme/web/tailwind/
npm run build-prod
cd /path/to/project/
rm -rf pub/static/frontend/*; rm -rf pub/static/backend/*; rm -rf var/view_preprocessed/*;
php -f bin/magento setup:static-content:deploy
bin/magento cache:flush
Our Product Label extension is a simple yet powerful tool for marking your product according to your marketing and sale policy.
It is quite intuitive and works our-of-box, but there are some things to be tuned up.
Start with Placeholders. Placeholders are blocks that group labels and describe how and where they should be displayed.
Proceed with Templates. There you can create reusable styled templates for labels.
Create Labels, which will display certain attribute values or combined conditions, allowing you to plan complex campaigns and mark promoted products.
Check your labels' appearance.
This should be a good start.
Refer to the corresponding sections of this manual to learn more.
General configurations of the Product Labels extension can be found at Stores -> Configuration -> Mirasvit Extensions -> Catalog Label.
This section features only one setting:
If you wish to fit your product labels to your theme, refer to the Labels section.
Placeholders are the most basic building blocks of our extension. They should be created before any Label is created.
Placeholder are designed to group labels by posotions and manage their appearance in the store.
All of them are located at Marketing -> Promotions -> Product Labels -> Manage Placeholders section. From there, you can edit, remove, or create a new Placeholder.
Visit Marketing -> Promotions -> Product Labels -> Manage Placeholders and press the Add New button. You will be brought to the Creation Page, as shown on the screenshot.
This page contains only one section, General Information, which consists of the following fields:
Position - allows choosing where labels should be displayed. This field has options for two types of positioning:
Automatically positioned * - options for positioning labels over the product image.
Horizontal are:
If you wish to position the label to the upper right corner, select Top Right option.
Only one placeholder for each of these positions can be created.
Templates helps to create and reuse styled label templates which can be reused for as many labels as needed.
Templates help to configure similar styled labels without duplicating same styles from label to label and speed-up the configuration of labels themselves.
Templates are not required part of the extension. Labels can be created without templates. In this case labes will be rerndered the same way they where rendered befor Templates were introduced.
All templates are located at Marketing -> Promotions -> Product Labels -> Manage Templates section. From there, you can edit, remove, or create a new Placeholder. The extension provides a few preconfigured templates which can be used for labels and also edited or duplicated for creating new templates.
To create new template press the Add Template button on Manage Templates page.
Or you can edit or duplicate existing template by choosing a corresponding option from the action column of a particular template.
The form for configuring the template splitted in three sections:
<a>
tag inside label you need to wrap it in <object>
tag to avoid layout issues on product listing pages
Product Labels are markers which are placed according to Placeholders they assigned to at Catalog and Product pages. Using these marks, you can easily promote your new product or boost sales during marketing campaigns.
All Labels are located at the Marketing -> Product Labels -> Manage Labels section. From there, you can edit, remove, or create a new label.
Visit the Marketing -> Product Labels -> Manage Labels section and press the Add Label button. Labels creation is split into two Stages, the first of which selects the Label Type, and the second gives details of their application.
The first stage has only one section - General - and consists of the following fields:
Once the first stage cofigurations are finished and the label is saved fields Type and Attribute no longer can be changed. Changing the Appearence field after configuring the label can result in design configurations loss.
The next stage contains detailed information about label displaying. The General section is displayed for both types of Label, the fields are the same as at the first stage.
Each label has a group of label's design fields. The number of design fields' groups and the way they organized depends on values of the Type and Appearance fields.
If Attribute was selected in the previous stage of Type and the Atribute field is selected as well in the second stage the Gallery section will appear.
The Gallery field will contain a bunch of fieldsets the number of which will be equal to number of options of the selected attribute. Each fieldset will contain one or two groups of the design fields depends on the value of the Appearance field.
If Rule was selected as the Type in the previous stage, the second stage will feature two additional tabs: Conditions and Design.
At the Conditions tab, you will see a conditional block, which allows you to filter products to which labels should be applied, as shown on the screenshot:
All conditionals should be enclosed in the global mode block. They have four possible global modes of applying, shown in the special header If *[apply mode]* of these conditions are *[validation mode]*
:
Applying modes define, when rule shall be triggered:
Validation modes define which result can produce each condition to be registered as "met":
You can also define multiple nested mode blocks by selecting the Conditions Combination option. These modes allow for creating flexible condition sets to satisfy a policy of any complexity.
Once you have selected global mode (or left it as default), press the green (+) button, and select a condition type. There are three categories of available conditions:
Product
Contains three base attributes which are used for identifying products:
Product Attribute
Contains all attributes, defined at Stores -> Attributes -> Product, the most interesting of which are:
Product Additional
Contains special attributes that can be used for building complex campaigns:
At the Design tab will be one or two groups of the design fields depends on the value of the Appearance field.
Each type of a label has the next group of fields to manage the desing of the label:
The extension provides you with the ability to use variables in labels' title and description.
The list of available variables:
The extension has its own index to store label-product relations.
If the index is set to Update on Save these relations will be updated any time you save the label. The extension will reflect on changing products in the same way - during saving the product from the admin panel.
If the index is set to Update by Schedule, label - product relations update after changing products data will be handled by Magento's indexation. If labels are changed the reindex of label-product relations will be performed on a cron basis every 6 hours (full reindex of all created labels). If you'd like to apply label changes immediately, you'll need to press the Apply Label button on the label's edit page after saving the label. This button is only visible when the index is set to Update by Schedule
This section describes some common tips and tricks to help configuring the extension to fit the store requirenments.
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.
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();
?>
where:
view_type
should be 'list' or 'view' corespondingly to where this code is placed placeholder_code
the identifier of the manually positioned placeholder$_product
contains a current product object
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();
?>
where view_type
should be 'list' or 'view' corespondingly to where this code is placed
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.
The HTML Template field of labels template form allows you to use the next variables
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.
<a>
tag inside templates you need to wrap it in <object>
tag to avoid layout issues on product listing pages
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; ?>
Usage: php -f bin/magento [options]
mirasvit:label:indexer --status
- Displays information about Product Label indexmirasvit:label:indexer --reindex-all
- Run full reindex of Product Label indexmirasvit:label:indexer --reindex-new
- Run reindex of Product Label index for recently created/updated productsTo upgrade an extension, take the following steps:
composer require mirasvit/module-cataloglabel:* --update-with-dependencies
to update the current extension with all dependencies.
composer update mirasvit/*
command. It will update all Mirasvit modules installed in your store. php -f bin/magento setup:upgrade
to install updates.php -f bin/magento cache:clean
for a clean cache.Deploy static view files
rm -rf pub/static/frontend/*; rm -rf pub/static/backend/*; rm -rf var/view_preprocessed/*; php -f bin/magento setup:static-content:deploy
To temporarily disable the extension, please follow the next steps:
php -f bin/magento module:disable Mirasvit_CatalogLabel
to disable extension.To uninstall the extension, please take the following steps:
composer remove mirasvit/module-cataloglabel
to remove the extension.(2024-11-14)
(2024-11-06)
(2024-10-24)
(2024-10-22)
(2024-10-11)
(2024-08-08)
(2024-06-07)
(2024-05-23)
(2024-04-11)
(2024-03-21)
(2024-03-14)
(2024-03-05)
(2024-02-23)
(2024-02-12)
(2023-12-22)
(2023-12-08)
(2023-12-01)
(2023-11-16)
(2023-10-27)
(2023-10-23)
(2023-10-04)
(2023-09-07)
(2023-08-08)
(2023-07-31)
(2023-07-11)
(2023-07-06)
(2023-06-30)
(2023-06-22)
(2023-06-15)
(2023-06-09)
(2023-06-08)
(2023-06-05)
(2023-05-30)
(2023-05-22)
(2023-04-21)
(2023-04-20)
(2023-04-18)
(2023-04-12)
(2023-04-10)
(2023-03-28)
(2023-03-20)
(2023-03-17)
(2023-03-15)
(2023-02-15)
(2023-02-08)
(2023-02-06)
(2023-02-01)
(2023-01-31)
(2023-01-30)
(2023-01-20)
(2023-01-17)
(2023-01-16)
(2023-01-11)
(2023-01-09)
(2022-12-26)
(2022-12-16)
(2022-12-16)
(2022-12-13)
(2022-12-05)
(2022-11-15)
(2022-11-02)
(2022-10-20)
(2022-10-14)
(2022-10-12)
(2022-09-19)
(2022-08-22)
(2022-07-28)
(2022-06-20)
(2022-05-23)
(2021-12-28)
(2021-11-26)
(2021-11-25)
(2021-08-31)
(2021-03-02)
(2021-03-02)
(2020-10-19)
(2020-07-30)
(2020-06-18)
(2020-05-27)
(2020-03-17)
(2020-01-20)
(2019-05-29)
(2019-01-23)
(2019-01-03)
(2018-11-29)
(2018-11-29)
(2018-11-28)
(2018-08-16)
(2018-07-18)
(2018-07-13)
(2018-07-09)
(2018-06-02)
(2018-06-13)
(2018-05-31)
(2018-05-21)
(2018-04-26)
(2018-03-16)
(2018-03-09)
(2018-01-29)
(2017-10-17)
(2017-10-17)
(2017-06-20)
(2017-05-18)
(2017-03-29)
(2017-01-12)
(2016-12-27)
(2016-12-06)
(2016-10-18)
(2016-09-05)
(2016-06-30)
(2016-06-30)
(2016-02-17)