Product Share

The product_share module is used to render a button that enables sharing a product that we are currently browsing.

Configuration parameters

none

Module source code

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

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

{% set modalName = 'product-share-' ~ moduleInstance %}

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

{% set productUrl = product.url.absolute %}

<h-modal-opener class="labeled-icon labeled-icon_horizontal" name="{{ modalName }}">
    {{ icon('icon-send', {
        classNames: ['labeled-icon__icon', 'labeled-icon__icon_m']
    }) }}
    <span class="labeled-icon__signature_secondary">{{ translate('Share <<product_share module>>') }}</span>
</h-modal-opener>

<h-modal class="product-share-modal modal-wrapper_s" id="{{ modalName }}" hidden>
    <h-modal-header class="product-share-modal__header">
        <header class="modal__title">{{ translate('Share the product card') }}</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>
        <div
            class="
                product-share-modal__product
                {% if hasImages %} product-share-modal__product_with-image {% endif %}
                grid__row
                grid__row_xs-vcenter
                mb-xs-4
            "
        >
            {% if hasImages %}
                <div class="product-share-modal__product-image-wrapper grid__col grid__col_xs-auto">
                    {{
                        image({
                            src: featuredImage.thumbnailUrl(systemConfig.sSize, systemConfig.sSize),
                            alt: featuredImage.name,
                            title: featuredImage.name,
                            width: systemConfig.sSize,
                            height: systemConfig.sSize,
                            decoding: 'async',
                            loading: 'lazy'
                        }, [
                            {
                                src: featuredImage.webpThumbnailUrl(systemConfig.sSize, systemConfig.sSize),
                                type:  'image/webp'
                            }
                        ])
                    }}
                </div>
            {% endif %}

            <div class="product-share-modal__product-name grid__col grid__col_xs-grow">
                {{ product.name }}
            </div>
        </div>


        <navigator-controller property="share">
            <div class="product-share-modal__social-icons" slot="supported">
                <h-tooltip direction="bottom-center">
                    <a
                        target="_blank"
                        href="https://www.facebook.com/sharer/sharer.php?u={{ productUrl }}"
                        class="product-share-modal__social-icon"
                    >
                        <img class="icon_xl" src="/assets/img/icons/facebook_logo.svg">
                    </a>

                    <h-tooltip-content slot="message-content">
                        <span class="helper">{{ translate('Share on %s', translate('Facebook <product_share>')) }}</span>
                    </h-tooltip-content>
                </h-tooltip>

                <h-tooltip direction="bottom-center">
                    <a
                        href="https://api.whatsapp.com/send?text={{ productUrl }}"
                        target="_blank"
                        class="product-share-modal__social-icon"
                    >
                        <img class="icon_xl" src="/assets/img/icons/whatsapp_logo.svg">
                    </a>

                    <h-tooltip-content>
                        <span class="helper">{{ translate('Share on %s', translate('Whatsapp <product_share>')) }}</span>
                    </h-tooltip-content>
                </h-tooltip>

                <h-tooltip direction="bottom-center">
                    <a
                        href="https://twitter.com/intent/tweet?url={{ productUrl }}"
                        target="_blank"
                        class="product-share-modal__social-icon"
                    >
                        <img class="icon_xl" src="/assets/img/icons/twitter_logo.svg">
                    </a>

                    <h-tooltip-content>
                        <span class="helper">{{ translate('Share on %s', translate('X <product_share>')) }}</span>
                    </h-tooltip-content>
                </h-tooltip>

                <h-tooltip direction="bottom-center">
                    <navigator-share url="{{ productUrl }}" class="product-share-modal__social-icon">
                        {{ icon('icon-share-2', {
                            classNames: ['icon_xl']
                        }) }}
                    </navigator-share>

                    <h-tooltip-content>
                        <span class="helper">{{ translate('Share') }}</span>
                    </h-tooltip-content>
                </h-tooltip>
            </div>
        </navigator-controller>

        <div class="product-share__copy mb-xs-4">
            {{
                control_input({
                    name: 'product-share',
                    label: translate('Copy link'),
                    id: "product-share-copy-#{moduleInstance}",
                    value: product.url.absolute,
                    copy: true,
                    controlValidators: {
                        readonly: true
                    }
                })
            }}
        </div>
    </h-modal-body>
</h-modal>

Macros reference

• icon

Used styles

• Labeled Icons

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)",
                    "placeholderValues": [
                        "\n",
                        "\/admin\/configLanguages\/list"
                    ]
                }
            }
        ]
    }
]