Skip to content

Product Shipping Time

Availability:

  • Product page
  • Bundle page
  • Loyalty product page

Use product_shipping_time module to insert a shipping time of the currently viewed product on a page. This module is available only within a product card.

Configuration parameters

none

Module source code

{% from "@macros/icon.twig" import icon %}

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

{% if product.delivery is not null or product.delivery is null and product.options.hasAtLeast(1) %}
    <product-shipping-time
        class="product-shipping-time property"
        {% if product.delivery is null or not product.availability.isAvailable %}hidden{% endif %}
        product-id="{{ product.id }}"
    >
        {{
            icon('icon-clock', {
                classNames: ['property__icon'],
                ariaHidden: 'true'
            })
        }}

        <span class="property__key color_main">{{ translate('Shipping time') }}:</span>
        <span class="product-shipping-time__time property__value" data-shipping-time>{{ product.delivery.name }}</span>
    </product-shipping-time>

    {% if ObjectApi.getFeatureFlag("dev_product_shipping_jsonld_merge").isEnabled %}
        {% set shippingTimeJsonLdKey = 'product_shipping_time_json_ld_' ~ product.id %}
        {% set isShippingTimeJsonLdRendered = ObjectApi.getContextValue(shippingTimeJsonLdKey) is not null %}
        {% set _ = ObjectApi.setContextValue(shippingTimeJsonLdKey, true) %}
        {% set isShippingTimeVisible = product.delivery is not null and product.availability.isAvailable %}
        {% set isGscUrlsFixEnabled = ObjectApi.getFeatureFlag("dev_jsonld_gsc_urls_fix").isEnabled %}

        {% set deliveryTime = {
            "@type": "ShippingDeliveryTime",
            "transitTime": {
                "@type": "QuantitativeValue",
                "minValue": product.delivery.duration.days,
                "maxValue": product.delivery.duration.days,
                "unitCode": "DAY"
            }
        } %}

        {% set shippingDetails = [] %}
        {% for countryShippingCost in product.variant.countryShippingCosts %}
            {% for shippingCost in countryShippingCost.shippingCosts|filter(shippingCost => not shippingCost.shipping.isPersonalCollect) %}
                {% set shippingDetailsId = isGscUrlsFixEnabled
                    ? '#shipping-' ~ countryShippingCost.country.code ~ '-' ~ shippingCost.shipping.id
                    : product.url.relative ~ '/shipping/' ~ countryShippingCost.country.code ~ '/' ~ shippingCost.shipping.id %}

                {% set shippingDetails = shippingDetails|merge([{
                    "@type": "OfferShippingDetails",
                    "@id": shippingDetailsId,
                    "deliveryTime": deliveryTime
                }]) %}
            {% endfor %}
        {% endfor %}

        {% set shippingTimeJsonLd = {
            "@context": [
                "http://schema.org/",
                { "@base": shopUrls.mainPageUrl.absolute }
            ],
            "@id": product.url.relative,
            "offers": {
                "@type": "Offer",
                "@id": product.url.relative,
                "shippingDetails": shippingDetails
            }
        } %}

        {% if isShippingTimeVisible and shippingDetails is not empty and not isShippingTimeJsonLdRendered %}
            <script type="application/ld+json">{{ shippingTimeJsonLd|json_encode|raw }}</script>
        {% endif %}
    {% else %}
    <script type="application/ld+json">
    {
        "@context": [
            "http://schema.org/",
            { "@base": "{{ shopUrls.mainPageUrl.absolute }}" }
        ],
        "@id": "{{ product.url.relative }}",
        "offers": {
            "@id": "{{ product.url.relative }}",
            "@type": "Offer",
            "shippingDetails": {
                "@type": "OfferShippingDetails",
                "deliveryTime": {
                    "@type": "ShippingDeliveryTime",
                    "transitTime": {
                        "@type": "QuantitativeValue",
                        "minValue": "{{ product.delivery.duration.days }}",
                        "maxValue": "{{ product.delivery.duration.days }}"
                    }
                }
            }
        }
    }
    </script>
    {% endif %}
{% endif %}

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

Webcomponents reference

Used Object Api methods

Used styles

Module configuration schema

[
    {
        "state": "unfolded",
        "label": "General settings",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox",
                "options": {
                    "type": "blank",
                    "message": "#### Related settings in the admin panel%s- changing phrases in [translations](%s)%s- [shipping time settings](%s)",
                    "placeholderValues": [
                        "\n",
                        "\/admin\/configLanguages\/list",
                        "\n",
                        "\/admin\/configDeliveries\/list"
                    ]
                }
            }
        ]
    }
]