Product Codes¶

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

Configuration parameters¶

hasSku¶

int if set to 1 the sku code will be displayed on the product card.

hasEan¶

int if set to 1 the ean code will be displayed on the product card.

productCode39¶

int if set to 1 the productCode39 code will be displayed on the product card.

hasIsbn¶

int if set to 1 the isbn code will be displayed on the product card.

hasProducerCode¶

int if set to 1 the producerCode code will be displayed on the product card.

Module source code¶

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

<product-codes class="product-codes" product-id="{{ product.id }}" {% if not product.hasOnlyDefaultVariant %} has-variants {% endif %}>
    {% if moduleConfig.hasProducerCode %}
        <p class="property" data-product-code-container="producerCode">
            <span class="property__key">{{ translate("Vendors's code") }}: </span>
            <span class="product-codes__code property__value" data-product-code="producerCode">{{ product.producerCode }}</span>
        </p>
    {% endif %}

    {% if moduleConfig.hasSku %}
        <p class="property" data-product-code-container="sku">
            <span class="property__key">{{ translate('Product code') }}: </span>
            <span class="product-codes__code property__value" data-product-code="sku">{{ product.sku }}</span>
        </p>
    {% endif %}

    {% if moduleConfig.hasEan %}
    <p class="property" data-product-code-container="ean">
        <span class="property__key">{{ translate('Barcode') }}: </span>
        <span class="product-codes__code property__value" data-product-code="ean">{{ product.ean }}</span>
    </p>
    {% endif %}

    {% if moduleConfig.productCode39 %}
    <p class="property" data-product-code-container="code39">
        <span class="property__key">{{ translate('Code 39') }}: </span>
        <span class="product-codes__code property__value" data-product-code="code39">{{ product.code39 }}</span>
    </p>
    {% endif %}

    {% if moduleConfig.hasIsbn %}
        <p class="property" data-product-code-container="isbn">
            <span class="property__key">{{ translate('ISBN') }}: </span>
            <span class="product-codes__code property__value" data-product-code="isbn">{{ product.isbn }}</span>
        </p>
    {% endif %}
</product-codes>

<script type="application/ld+json">
    [
        {
            "@context": [
                "http://schema.org/",
                { "@base": "{{ shopUrls.mainPageUrl.absolute }}" }
            ],
            "@id": "{{ product.url.relative }}",
            "gtin": "{{ product.ean }}",
            "mpn": "{{ product.producerCode }}",
            "sku": "{{ product.sku }}",
            "gtin13": "{{ product.isbn }}"
        }
    ]
</script>

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

Webcomponents reference¶

product-codes

Used Object Api methods¶

getProduct()

Used styles¶

Module configuration schema¶

[
    {
        "state": "unfolded",
        "label": "General settings",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox",
                "options": {
                    "type": "blank",
                    "message": "%s Related settings in the admin panel%s turning on additional product codes in [product settings](%s)",
                    "placeholderValues": [
                        "####",
                        "\n",
                        "\/admin\/configProducts"
                    ]
                }
            },
            {
                "type": "header",
                "name": "displayProductCodes",
                "label": "Display product codes:",
                "hint": "On the product page will be shown only the selected codes if they apply to the product and have been filled in for it.",
                "children": [
                    {
                        "type": "checkbox",
                        "name": "hasSku",
                        "label": "Product code\/SKU",
                        "defaultValue": 1
                    },
                    {
                        "type": "checkbox",
                        "name": "hasEan",
                        "label": "Barcode",
                        "defaultValue": 0
                    },
                    {
                        "type": "checkbox",
                        "name": "productCode39",
                        "label": "Code 39",
                        "defaultValue": 0
                    },
                    {
                        "type": "checkbox",
                        "name": "hasIsbn",
                        "label": "ISBN <<SVE>>",
                        "defaultValue": 0
                    },
                    {
                        "type": "checkbox",
                        "name": "hasProducerCode",
                        "label": "Vendor's code",
                        "defaultValue": 0
                    }
                ]
            }
        ]
    }
]