Product Title

Availability:

• Product page
• Bundle page

---

Use product_title module to insert a title of the currently viewed product on a page. This module is available only within a product card.

Configuration parameters

showBundleTag

int if set to 1 the "Bundle" tag will be displayed for bundle products.

showDigitalTag

int if set to 1 the "Digital" tag will be displayed for digital products.

Module source code

{% from "@macros/section_title.twig" import section_title %}
{% from "@macros/product_title_tag_group.twig" import product_title_tag_group %}

{% set product = ObjectApi.getProduct(product_id) %}
{% set shopUrls = ObjectApi.getShopUrls() %}

{% set availability = product.availability %}

{%
    set inactiveClass =
        not availability.isAvailable and availability.visibilityConfig.isProductPageGalleryAndNameGrey ?
        'product-section-title_inactive inactive' :
        ''
%}

{% set inlineTitleClass = product.isBundle or product.isDigital ? 'section-title_inline' : '' %}
{% set marginTitleClass = product.isBundle ? 'mr-xs-1' : '' %}

{{ product_title_tag_group(product, { digital: moduleConfig.showDigitalTag == 1 }) }}

{{ section_title(product.name, { cssClasses: "product-section-title #{inlineTitleClass} #{marginTitleClass} #{inactiveClass}" }) }}

{{ product_title_tag_group(product, { bundle: moduleConfig.showBundleTag == 1 }) }}

<script type="application/ld+json">
    {
        "@context": [
            "http://schema.org/",
            { "@base": "{{ shopUrls.mainPageUrl.absolute }}" }
        ],
        "@id": "{{ product.url.relative }}",
        "@type": "http://schema.org/Product",
        "offers": {
            "@id": "{{ product.url.relative }}",
            "@type": "Offer",
            "url": "{{ product.url.absolute }}"
        }
    }
</script>

<script type="application/ld+json">
    {
        "@context": [
            "http://schema.org/",
            { "@base": "{{ shopUrls.mainPageUrl.absolute }}" }
        ],
        "@id": "{{ product.url.relative }}",
        "name": "{{ product.name }}"
    }
</script>

The module uses JSON-LD and Microdata from schema.org to optimize search results in browsers.

Macros reference

• section_title
• product_title_tag_group

Used Object Api methods

• getProduct()
• getShopUrls()

Module configuration schema

[
    {
        "state": "unfolded",
        "label": "General settings",
        "elements": [
            {
                "type": "header",
                "name": "productTitleHeader",
                "label": "Display product ribbons"
            },
            {
                "type": "checkbox",
                "name": "showBundleTag",
                "label": "Product bundle",
                "labelDescription": "only for bundles",
                "defaultValue": 1
            },
            {
                "type": "checkbox",
                "name": "showDigitalTag",
                "label": "Digital product",
                "labelDescription": "only for digital products",
                "defaultValue": 1
            },
            {
                "type":"infobox",
                "name":"infobox",
                "options":{
                    "type":"blank",
                    "message":"#### Display product ribbons%s- You can disable ribbon display and add a separate \"Ribbons\" module (you can place it anywhere, e.g., above the product name).%s- You can configure ribbon appearance in the [Colors and styles](%s) tab.",
                    "placeholderValues":[
                        "\n",
                        "\n",
                        "#theme-and-colors"
                    ]
                }
            }
        ]
    }
]