Product Actions

Availability:

• Product page
• Bundle page

---

Use product_actions module to insert product actions such as adding to basket or adding to favourites.

Configuration parameters

none

---

Module source code

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

{% if product_id %}
    {%
        set moduleConfig = moduleConfig|merge({
            productId: product_id,
            instanceId: moduleInstance
        })
    %}

    {{ product_actions(moduleConfig) }}

    {% if ObjectApi.getFeatureFlag("dev_storefront_ai_seo").isEnabled %}
        {% set product = ObjectApi.getProduct(product_id) %}
        {% set shopUrls = ObjectApi.getShopUrls() %}
        {% set shopInfo = ObjectApi.getShopInfo() %}

        {% set schemaJson = {
            "@context": [
                "http://schema.org/",
                { "@base": shopUrls.mainPageUrl.absolute }
            ],
            "@type": "Product",
            "@id": product.url.relative,
            "potentialAction": {
                "@type": "BuyAction",
                "target": product.url.absolute,
                "seller": {
                    "@type": "Organization",
                    "name": shopInfo.name
                }
            }
        } %}

        <script type="application/ld+json">
            {{ schemaJson|json_encode(constant('JSON_UNESCAPED_UNICODE'))|raw }}
        </script>
    {% endif %}
{% endif %}

Webcomponents reference

• availability-notifier-btn
• auth-controller

Macros reference

• icon
• add_to_favourites_button

Used styles

• Product Actions
• Buttons

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- enabling the purchase option in [the orders settings](%s)%s- enabling notifications of product availability in [the orders settings](%s)%s- setting the \"Add to cart\" button depending on [availability statuses](%s)",
          "placeholderValues": [
            "\n",
            "\/admin\/configLanguages\/list",
            "\n",
            "\/admin\/configShopping\/list",
            "\n",
            "\/admin\/configShopping\/list",
            "\n",
            "\/admin\/configAvailabilities\/list"
          ]
        }
      },
      {
        "type": "checkbox",
        "name": "shouldDisplayAddToBasketButton",
        "label": "Display \"Add to cart\" \/ \"Notify me when available\" button",
        "defaultValue": 1,
        "hint": {
          "message": "If the product is out of stock and [availability notifications are enabled](%s), a \"Notify when available\" or \"Opt out of notifications\" button will be displayed instead of \"Add to cart\" (according to [the availability status settings](%s)).",
          "placeholderValues": [
            "\/admin\/configShopping\/list",
            "\/admin\/configAvailabilities\/list"
          ]
        }
      },
      {
        "type": "checkbox",
        "name": "shouldDisplayAddToFavouritesIcon",
        "label": "Display \"Add to favorites\" icon",
        "defaultValue": 1
      },
      {
        "type": "infobox",
        "name": "infobox-bottom",
        "options": {
          "type": "info",
          "message": "The display of the \"Add to wishlist\" icon can also be found in the \"Product tile\" settings in the \"Product list\" module and carousel-type product modules (e.g., Related products, New arrivals, Products on sale)."
        }
      }
    ]
  }
]