product_ask_questions_modal_form

The product_ask_questions_modal_form macro is used to render a form allowing to ask questions related to a given product inside a modal.

Definition

{% product_ask_questions_modal_form(product, options) %}

Input parameters

product

Product parameter represents a Product object from ObjectApi.

options

object represents an object of product ask questions form options and consists of the following fields:

Option key	Type	Default	Required	Description
options.instanceId	string	""	yes	Unique identifier commonly provided by a special module variable moduleInstance
options.modalName	string	""	yes	Unique identifier of the modal that will be targeted by the matching modal opener
options.imageSize	number	null	no	Size of the product image inside the modal
options.legalNotice	string	""	yes	Legal notice text displayed inside the modal

Example

In this example we render a regular product ask questions form for a certain product.

To get the product object we use the getProduct() method from ObjectApi. Keep in mind that this method is only available withing a product card. If you wish to use this webcomponent for example on a product list page then the getProducts() method will be more suitable for you.

While using this macro inside a module we can pass a moduleInstance as an instanceId parameter.

To get the image size we use the special global variable systemConfig explained in the system configuration documentation.

To get the name of the shop we use a getShopInfo() method from ObjectApi.

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

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

{% set modalName = 'product-ask-questions-modal-' ~ moduleInstance %}

{{ product_ask_questions_modal_form(
    product,
    {
        instanceId: moduleInstance,
        modalName,
        imageSize: systemConfig.sSize,
        shopName: shopInfo.name
    }
) }}

Macro source code

{% macro product_ask_questions_modal_form(product, options) %}
    {% from "@macros/icon.twig" import icon %}
    {% from "@macros/product_ask_questions_form.twig" import product_ask_questions_form %}
    {% from "@macros/image.twig" import image %}

    {% set hasImages = product.images|length > 0 %}
    {% set featuredImage = product.featuredImage %}

    <h-modal class="product-ask-questions__modal modal-wrapper_s" id="{{ options.modalName }}" hidden>
        <h-modal-header class="product-ask-questions-modal__header">
            <header class="modal__title">{{ translate('Ask about the product') }}</header>

            <h-modal-close class="btn btn_icon">
                {{ icon('icon-x', {
                    size: 'l',
                    classNames: ['btn__icon']
                }) }}
            </h-modal-close>
        </h-modal-header>

        <h-modal-body>
            <flash-messenger
                class="flash-messenger control"
                name="product-ask-questions-flash-messenger-{{ options.instanceId }}"
            ></flash-messenger>

            <div
                class="
                    product-ask-questions-modal__product
                    {% if hasImages %} product-ask-questions-modal__product_with-image {% endif %}
                "
            >
                {% if hasImages %}
                    <div class="product-ask-questions-modal__product-image-wrapper">
                        {{
                            image({
                                src: featuredImage.thumbnailUrl(options.imageSize, options.imageSize),
                                alt: featuredImage.name,
                                title: featuredImage.name,
                                width: options.imageSize,
                                height: options.imageSize,
                                decoding: 'async',
                                loading: 'lazy'
                            }, [
                                {
                                    src: featuredImage.webpThumbnailUrl(options.imageSize, options.imageSize),
                                    type:  'image/webp'
                                }
                            ])
                        }}
                    </div>
                {% endif %}

                <div class="product-ask-questions-modal__product-name">
                    {{ product.name }}
                </div>
            </div>

            <product-ask-questions
                module-instance-id="{{ options.instanceId }}"
                product-id="{{ product.id }}"
            >
                <div slot="form">
                    {{ product_ask_questions_form({ instanceId: options.instanceId }) }}
                </div>
            </product-ask-questions>

            <p class="product-ask-questions-modal__legal-notice">{{ options.legalNotice|raw }}</p>
        </h-modal-body>
    </h-modal>
{% endmacro %}

Macros reference

• icon
• image
• product_ask_questions_form

Used styles

• Product Ask Questions Modal

ObjectApi methods reference

• getProduct()
• getProducts()
• getShopInfo()

ObjectApi objects reference

• Product