Product Shipping Prices Modal¶

The product_shipping_prices_modal macro is used to render a modal with all available shipping prices associated with a currently viewed product.

Definition¶

{% product_shipping_prices_modal(options) %}

Input parameters¶

options¶

object

Option key	Type	Default	Required	Description
options.modalName	`string`	null	yes	Unique name of the modal
options.countryShippingCosts	CountryShippingCostsList	null	no	A list of country shipping costs taken from ObjectApi
options.moduleInstanceId	`string`	null	no	Instance id of the module that the component should refer to
options.hasMultipleVariants	`boolean`	false	no	If a product has multiple variants it should be set to `true`
options.doesShipToMultipleCountries	`string`	null	no	If a product has more than one country shipping cost it should be set to `true`

Example¶

In this example we render a product shipping prices modal.

Remember that modals always comes hidden!

This modal will render, but You have to open it with javascript or h-modal-opener webcomponent.

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

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

{% set modalName = 'product-shipping-prices-modal-' ~ moduleInstance %}

{% set defaultVariant = product.variant %}

{% set doesShipToMultipleCountries = defaultVariant.countryShippingCosts|length > 1 %}
{% set hasMultipleVariants = product.variants|length > 1 %}

{{
    product_shipping_prices_modal({
        modalName,
        countryShippingCosts: defaultVariant.countryShippingCosts
        moduleInstanceId
        hasMultipleVariants
        doesShipToMultipleCountries
    })
}}

Example¶

In this example we render a product shipping prices modal with a modal opener.

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

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

{% set modalName = 'product-shipping-prices-modal-' ~ moduleInstance %}

{% set defaultVariant = product.variant %}

{% set doesShipToMultipleCountries = defaultVariant.countryShippingCosts|length > 1 %}
{% set hasMultipleVariants = product.variants|length > 1 %}

<h-modal-opener
    class="
        product-shipping-prices__shipping-info
        product-shipping-prices__shipping-info_multiple-shippings
        link
        link_secondary
    "
    name="{{ modalName }}"
>
    Shipping from $7.99
</h-modal-opener>

{{
    product_shipping_prices_modal({
        modalName,
        countryShippingCosts: defaultVariant.countryShippingCosts
        moduleInstanceId
        hasMultipleVariants
        doesShipToMultipleCountries
    })
}}

h-modal-opener "name" and "modalName" must be the same!

Macro source code¶

{% macro product_shipping_prices_modal(options) %}
    {% from "@macros/modal_header.twig" import modal_header %}
    {% from "@macros/separator.twig" import separator %}

    {% set shopLanguage = ObjectApi.getShopLocale() %}

    {% set defaultCountryShippingCosts = options.countryShippingCosts[0] %}

    {% set shippingCostsList %}
        <ul class="list__content">
            {% for shippingCost in defaultCountryShippingCosts.shippingCosts %}
                <li
                    class="
                        list__item
                        product-shipping-prices-modal__shipping
                        {{ loop.index % 2 == 0 ? 'product-shipping-prices-modal__shipping_secondary' : '' }}
                        mb-xs-1
                    "
                >
                    <div class=" product-shipping-prices-modal__shipping-details">
                        <span class="product-shipping-prices-modal__shipping-name">
                            {{ shippingCost.shipping.name }}
                        </span>
                        <span
                            class="
                                product-shipping-prices-modal__shipping-price
                                {% if shippingCost.price.isZero %}
                                    product-shipping-prices-modal__shipping-price_secondary
                                {% endif %}
                            "
                        >
                            {{ shippingCost.price.isZero ? translate('Free') : shippingCost.price.formatGross }}
                        </span>
                    </div>

                    <p class="product-shipping-prices-modal__shipping-description mt-xs-1">
                        {{ shippingCost.shipping.description }}
                    </p>
                </li>
            {% endfor %}
        </ul>
    {% endset %}

    <h-modal class="product-shipping-prices-modal modal-wrapper_s" id="{{ options.modalName }}" hidden>
        {{
            modal_header(translate('Shipping cost for the selected product'), {
                cssClasses: 'product-shipping-prices-modal__header'
            })
        }}

        <h-modal-body>
            {% if options.doesShipToMultipleCountries or options.hasMultipleVariants %}
                <select-shipping-countries
                    class="select-shipping-prices control"
                    instance-id="{{ options.moduleInstanceId }}"
                    default-country-locale="{{ shopLanguage.locale }}"
                ></select-shipping-countries>
            {% endif %}

            {% if options.doesShipToMultipleCountries or options.hasMultipleVariants %}
                <shipping-prices-details
                    class="product-shipping-prices-details d-block mb-xs-2"
                    selected-country-id="{{ defaultCountryShippingCosts.country.id }}"
                ></shipping-prices-details>
            {% else %}
                {{ shippingCostsList }}
            {% endif %}

            {{ separator({ size: 'xs' }) }}

            <p class="product-shipping-prices-modal__disclaimer p_xs color_main">
                {{ translate('The shipping cost applies to this product (in the selected variant - if applicable). It may change after adding other products to the cart.') }}
            </p>
        </h-modal-body>

        <h-modal-footer>
            <h-modal-close class="modal__btn btn btn_primary product-shipping-prices-modal__button">
                {{ translate('Ok') }}
            </h-modal-close>
        </h-modal-footer>
    </h-modal>
{% endmacro %}

Definition¶

Input parameters¶

options¶

Example¶

Example¶

Macro source code¶

Used webcomponents¶

Used ObjectApi methods¶

Used webcomponents¶