https://github.com/magesuite/product-symbols

This module adds the possibility to define product symbols (with name, icon, and description), group symbols together, and display them on the frontend, most frequently on the Product Details Page or on tiles.

1 Installation
2 User manual
3 Admin settings
4 Backend
5 Frontend
6 Display the same CMS content based on symbols on PDPs

Installation

This module is optional

composer require "creativestyle/magesuite-product-symbols" ^1.0.0

User manual

3.9. Product symbols

Admin settings

Add a new symbol group:

Catalog -> Product Symbols Groups -> Create new group

Settings

Name	Type	Default	Note

Name	Type	Default	Note
Group Name	string
Ignore product assignment	Yes/No	No	All symbols assigned to this group will be displayed. Symbol selection on product page will be ignored.
Group code	string		Group Code This field can be modified only during group creation

Add a new symbol:

Catalog -> Product Symbol -> Create new symbol

Settings:

Symbols details

Name	Type	Default	Note

Name	Type	Default	Note
Is Enabled	Yes/No (required)	Yes
Symbol Name	string (required)
Symbol Icon			Upload image or select from Gallery. Maximum file size: 50 MB.
Short Description	string
Description	string
Add CMS Page	select		Choose a block that will be displayed on PDP details page
Groups	multi select		Select from previously defined groups
Sort Order	number	0

Add condition for a symbol

Assign symbol/symbols to a product

For the specific product open the Product Symol tab and choose the desired badge or badges:

Backend

TODO - BE documentation and review of documentation is needed

Frontend

On the frontend side, there is only one template: view/frontend/templates/symbols.group.phtml

It displays symbols from a defined group. Sample XML code (PDP):

  <referenceBlock name="product.info.details.main">
      <block class="MageSuite\ProductSymbols\Block\Symbol\Group" name="product.info.details.main.symbols" as="product.symbols" template="MageSuite_ProductSymbols::symbols/group.phtml">
          <arguments>
              <argument name="included_groups" xsi:type="array">
                  <item name="0" xsi:type="string">symbols</item>
              </argument>
          </arguments>
      </block>
  </referenceBlock>

Example:

Display the same CMS content based on symbols on PDPs

If a static block is set in Add CMS Page content of this block (f.e. CC components) will be displayed on choose PDPs.

First, create a block with CMS content.

Then create a new symbol or edit an existing one. Assigned block with CMS content - Add CMS Page option.

Create a rule for the symbol, f.e:

As a result, an additional CMS section is displayed on PDPs that meet symbol condition criteria.

A new section will be displayed on PDPs of products that have the given symbols assigned. It will be placed just below CC section in the details area.

<referenceBlock name="product.info.details">
    <block name="symbol.cms" template="MageSuite_ProductSymbols::product/view/cms.phtml" group="detailed_info">
        <arguments>
            <argument name="title" translate="true" xsi:type="string">Product Showcase</argument>
            <argument name="sort_order" xsi:type="string">40</argument>
            <argument name="contain_content" xsi:type="boolean">false</argument>
            <argument name="is_collapsible" xsi:type="boolean">false</argument>
            <argument name="in_nav" xsi:type="boolean">false</argument>
            <argument name="symbol_view_model" xsi:type="object">MageSuite\ProductSymbols\ViewModel\Symbol\Group</argument>
        </arguments>
    </block>
</referenceBlock>

MageSuite Developer Documentation

ProductSymbols (optional)