Still can add to cart when item is sold out

ughy
Excursionist
17 0 6

https://stuffedtoyshospital.com/collections/toy-repair/products/fabric-replacement

This product is currently sold out, but if you double click on the sold out button after selecting the relevant options, product can still be added to cart. How do I resolve this?

0 Likes
Michal_Morek
Shopify Partner
820 73 140

Hi @ughy 

Hope you're having a great day!

How do I resolve this?

Could you share the source code of product-template.liquid from the sections folder by following the steps below:

scrnli_22_05_2021_15-34-42.png

Founder of Shopify agency - Accomplishify.com
If you would like to hire us as Shopify experts, please reach out via:
  • Email michal.morek@accomplishify.com
  • WhatsApp +48 507 613 425
0 Likes
ughy
Excursionist
17 0 6
<div class="product-template__container page-width"
  id="ProductSection-{{ section.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="product"
  data-enable-history-state="true"
  data-ajax-enabled="{{ settings.enable_ajax }}"
>
  {% comment %}
    Get first variant, or deep linked one
  {% endcomment %}
  {%- assign current_variant = product.selected_or_first_available_variant -%}
  {%- assign product_image_zoom_size = '1024x1024' -%}
  {%- assign product_image_scale = '2' -%}
  {%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
  {%- assign compare_at_price = current_variant.compare_at_price -%}
  {%- assign price = current_variant.price -%}

  {% case section.settings.media_size %}
    {% when 'small' %}
      {%- assign product_media_width = 'medium-up--one-third' -%}
      {%- assign product_description_width = 'medium-up--two-thirds' -%}
      {%- assign height = 345 -%}
    {% when 'medium' %}
      {%- assign product_media_width = 'medium-up--one-half' -%}
      {%- assign product_description_width = 'medium-up--one-half' -%}
      {%- assign height = 530 -%}
    {% when 'large' %}
      {%- assign product_media_width = 'medium-up--two-thirds' -%}
      {%- assign product_description_width = 'medium-up--one-third' -%}
      {%- assign height = 720 -%}
    {% when 'full' %}
      {%- assign product_media_width = '' -%}
      {%- assign product_description_width = '' -%}
      {%- assign height = 1090 -%}
      {%- assign enable_image_zoom = false -%}
  {% endcase %}

  <div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.media_size }}-media{% endif %}">
    <div class="grid__item product-single__media-group {{ product_media_width }}{% if section.settings.media_size == 'full' %} product-single__media-group--full{% endif %}" data-product-single-media-group>
      {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

      {%- for media in product.media -%}
        {% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
      {%- endfor -%}

      <noscript>
        {% capture product_image_size %}{{ height }}x{% endcapture %}
        <img src="{{ featured_media | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;">
      </noscript>

      {% assign first_3d_model = product.media | where: "media_type", "model" | first %}

      {%- if first_3d_model -%}
        <button
          aria-label="{{ 'products.product.view_in_space_label' | t }}"
          class="product-single__view-in-space"
          data-shopify-xr
          data-shopify-model3d-id="{{ first_3d_model.id }}"
          data-shopify-title="{{ product.title | escape }}"
          data-shopify-xr-hidden
        >
          {% include 'icon-3d-badge-full-color' %}<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
        </button>
      {%- endif -%}


      {% if product.media.size > 1 %}
        {% if product.media.size > 4 %}
          {%- assign enable_thumbnail_slides = true -%}
        {% endif %}

        <div data-thumbnail-slider>
          <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} slider-active{% endif %}" data-slider>
            {% if enable_thumbnail_slides == true %}
              <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}" data-slider-button>
                {% include 'icon-chevron-left' %}
                <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
              </button>
            {% endif %}

            <ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}" data-slider-container>
              {% if enable_thumbnail_slides == true %}
                <div class="product-single__thumbnails-slider-track" data-slider-track>
              {% endif %}

              {% for media in product.media %}
                <li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} {% if enable_thumbnail_slides == true %} product-single__thumbnails-item-slide{% endif %} js"{% if enable_thumbnail_slides == true %} data-slider-slide-index="{{ forloop.index0 }}" data-slider-item{% endif %}>
                  <a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
                    class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                    data-thumbnail-id="{{ section.id }}-{{ media.id }}"
                    {% if enable_thumbnail_slides == true %} data-slider-item-link{% endif %}
                    {% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

                      {%- capture thumbnailAlt -%}
                        {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                          {{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                        {%- elsif media.media_type == 'model' -%}
                          {{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                        {%- else -%}
                          {{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                        {%- endif -%}
                      {%- endcapture -%}

                      <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
                      {%- if media.media_type == 'video' or media.media_type =='external_video' -%}
                        <div class="product-single__thumbnail-badge">
                          {% include 'icon-video-badge-full-color' %}
                        </div>
                      {%- endif -%}
                      {%- if media.media_type == 'model' -%}
                        <div class="product-single__thumbnail-badge">
                          {% include 'icon-3d-badge-full-color' %}
                        </div>
                      {%- endif -%}
                  </a>
                </li>
              {% endfor %}

              {% if enable_thumbnail_slides == true %}
                </div>
              {% endif %}
            </ul>
            {% if enable_thumbnail_slides == true %}
              <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}" data-slider-button data-slider-button-next>
                {% include 'icon-chevron-right' %}
                <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
              </button>
            {% endif %}
          </div>
        </div>
      {% endif %}
    </div>

    <div class="grid__item {{ product_description_width }}">
      <div class="product-single__meta">

        <h1 class="product-single__title">{{ product.title }}</h1>
        <script>window.performance.mark('debut:product:title_visible');</script>

          <div class="product__price">
            {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
          </div>

          {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
            <div class="product__policies rte" data-product-policies>
              {%- if shop.taxes_included -%}
                {{ 'products.product.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            </div>
          {%- endif -%}

          {% capture "form_classes" -%}
            product-form product-form-{{ section.id }}
            {%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form--payment-button-no-variants {%- endif -%}
            {%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
          {%- endcapture %}

          {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
            {% unless product.has_only_default_variant %}
              <div class="product-form__controls-group">
                {% for option in product.options_with_values %}
                  <div class="selector-wrapper js product-form__item">
                    <label for="SingleOptionSelector-{{ forloop.index0 }}">
                      {{ option.name }}
                    </label>
                    <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                      id="SingleOptionSelector-{{ forloop.index0 }}"
                      data-index="option{{ forloop.index }}"
                    >
                      {% for value in option.values %}
                        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                      {% endfor %}
                    </select>
                  </div>
                {% endfor %}
              </div>
            {% endunless %}

            <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
              {% for variant in product.variants %}
                <option value="{{ variant.id }}"
                  {%- if variant == current_variant %} selected="selected" {%- endif -%}
                >
                  {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                </option>
              {% endfor %}
            </select>

{% render 'paywhirl-plan-selector', product: product %}


            

{{product.metafields.easycustomfield.customfieldsinput}}

{% if section.settings.show_quantity_selector %}
              <div class="product-form__controls-group">
                <div class="product-form__item">
                  <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                  <input type="number" id="Quantity-{{ section.id }}"
                    name="quantity" value="1" min="1" pattern="[0-9]*"
                    class="product-form__input product-form__input--quantity" data-quantity-input
                  >
                </div>
              </div>
            {% endif %}

            <div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}"
              data-error-message-wrapper
              role="alert"
            >
              <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
              {% include 'icon-error' %}
              <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
            </div>

            <div class="product-form__controls-group product-form__controls-group--submit">
              <div class="product-form__item product-form__item--submit
                {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
                {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
              >
                <button type="submit" name="add"
                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"
                  {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
                  data-add-to-cart>
                  <span data-add-to-cart-text>
                    {% unless current_variant.available %}
                      {{ 'products.product.sold_out' | t }}
                    {% else %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% endunless %}
                  </span>
                  <span class="hide" data-loader>
                    {% include 'icon-spinner' %}
                  </span>
                </button>
                {% if section.settings.enable_payment_button %}
                  {{ form | payment_button }}
                {% endif %}
              </div>
            </div>
          {% endform %}
        </div>

        {%- comment -%}
          Live region for announcing updated price and availability to screen readers
        {%- endcomment -%}
        <p class="visually-hidden" data-product-status
          aria-live="polite"
          role="status"
        ></p>

        {%- comment -%}
          Live region for announcing that the product form has been submitted and the
          product is in the process being added to the cart
        {%- endcomment -%}
        <p class="visually-hidden" data-loader-status
          aria-live="assertive"
          role="alert"
          aria-hidden="true"
        >{{ 'products.product.loader_label' | t }}</p>

        <div
          class="product-single__store-availability-container"
          data-store-availability-container
          data-product-title="{{ product.title | escape }}"
          data-has-only-default-variant="{{ product.has_only_default_variant }}"
          data-base-url="{{ shop.url }}{{ routes.root_url }}"
        >
        </div>

        <div class="product-single__description rte">
          {{ product.description }}
        </div>

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
        {% endif %}
    </div>
  </div>
</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
  <script type="application/json" id="ModelJson-{{ section.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>
{% endunless %}
0 Likes
Michal_Morek
Shopify Partner
820 73 140

Hi @ughy 

Hope you're having a great day!

I modified your code so that the button will be disabled when a product will be out of stock. Backup the current content of your product template liquid file and replace it with this:

 

<div class="product-template__container page-width" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" data-ajax-enabled="{{ settings.enable_ajax }}">
    {% comment %}
        Get first variant, or deep linked one
    {% endcomment %}
    {%- assign current_variant = product.selected_or_first_available_variant -%}
    {%- assign product_image_zoom_size = '1024x1024' -%}
    {%- assign product_image_scale = '2' -%}
    {%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
    {%- assign compare_at_price = current_variant.compare_at_price -%}
    {%- assign price = current_variant.price -%}
    {% case section.settings.media_size %}
        {% when 'small' %}
            {%- assign product_media_width = 'medium-up--one-third' -%}
            {%- assign product_description_width = 'medium-up--two-thirds' -%}
            {%- assign height = 345 -%}
        {% when 'medium' %}
            {%- assign product_media_width = 'medium-up--one-half' -%}
            {%- assign product_description_width = 'medium-up--one-half' -%}
            {%- assign height = 530 -%}
        {% when 'large' %}
            {%- assign product_media_width = 'medium-up--two-thirds' -%}
            {%- assign product_description_width = 'medium-up--one-third' -%}
            {%- assign height = 720 -%}
        {% when 'full' %}
            {%- assign product_media_width = '' -%}
            {%- assign product_description_width = '' -%}
            {%- assign height = 1090 -%}
            {%- assign enable_image_zoom = false -%}
    {% endcase %}
    <div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.media_size }}-media{% endif %}">
        <div class="grid__item product-single__media-group {{ product_media_width }}{% if section.settings.media_size == 'full' %} product-single__media-group--full{% endif %}" data-product-single-media-group>
            {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
            {%- for media in product.media -%}
                {% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
            {%- endfor -%}
            <noscript>
                {% capture product_image_size %}
                    {{ height }}x
                {% endcapture %}
                <img src="{{ featured_media | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;"></noscript>
                {% assign first_3d_model = product.media | where: "media_type", "model" | first %}
                {%- if first_3d_model -%}
                    <button aria-label="{{ 'products.product.view_in_space_label' | t }}" class="product-single__view-in-space" data-shopify-xr data-shopify-model3d-id="{{ first_3d_model.id }}" data-shopify-title="{{ product.title | escape }}" data-shopify-xr-hidden>
                        {% include 'icon-3d-badge-full-color' %}<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
                    </button>
                {%- endif -%}
                {% if product.media.size > 1 %}
                    {% if product.media.size > 4 %}
                        {%- assign enable_thumbnail_slides = true -%}
                    {% endif %}
                    <div data-thumbnail-slider>
                        <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} slider-active{% endif %}" data-slider>
                            {% if enable_thumbnail_slides == true %}
                                <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}" data-slider-button>
                                    {% include 'icon-chevron-left' %}
                                    <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
                                </button>
                            {% endif %}
                            <ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}" data-slider-container>
                                {% if enable_thumbnail_slides == true %}
                                    <div class="product-single__thumbnails-slider-track" data-slider-track>
                                    {% endif %}
                                    {% for media in product.media %}
                                        <li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} {% if enable_thumbnail_slides == true %} product-single__thumbnails-item-slide{% endif %} js" {% if enable_thumbnail_slides == true %} data-slider-slide-index="{{ forloop.index0 }}" data-slider-item {% endif %}>
                                            <a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}" class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}" data-thumbnail-id="{{ section.id }}-{{ media.id }}" {% if enable_thumbnail_slides == true %} data-slider-item-link {% endif %} {% if enable_image_zoom %} data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}" {% endif %}>
                                                {%- capture thumbnailAlt -%}
                                                    {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                                                        {{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                                                    {%- elsif media.media_type == 'model' -%}
                                                        {{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                                                    {%- else -%}
                                                        {{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                                                    {%- endif -%}
                                                {%- endcapture -%}
                                                <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
                                                    {%- if media.media_type == 'video' or media.media_type =='external_video' -%}
                                                        <div class="product-single__thumbnail-badge">
                                                            {% include 'icon-video-badge-full-color' %}
                                                        </div>
                                                    {%- endif -%}
                                                    {%- if media.media_type == 'model' -%}
                                                        <div class="product-single__thumbnail-badge">
                                                            {% include 'icon-3d-badge-full-color' %}
                                                        </div>
                                                    {%- endif -%}
                                                </a>
                                            </li>
                                        {% endfor %}
                                        {% if enable_thumbnail_slides == true %}
                                        </div>
                                    {% endif %}
                                </ul>
                                {% if enable_thumbnail_slides == true %}
                                    <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}" data-slider-button data-slider-button-next>
                                        {% include 'icon-chevron-right' %}
                                        <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
                                    </button>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                </div>
                <div class="grid__item {{ product_description_width }}">
                    <div class="product-single__meta">
                        <h1 class="product-single__title">{{ product.title }}</h1>
                        <script>
                            window.performance.mark('debut:product:title_visible');
                        </script>
                        <div class="product__price">
                            {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
                        </div>
                        {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
                            <div class="product__policies rte" data-product-policies>
                                {%- if shop.taxes_included -%}
                                    {{ 'products.product.include_taxes' | t }}
                                {%- endif -%}
                                {%- if shop.shipping_policy.body != blank -%}
                                    {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                                {%- endif -%}
                            </div>
                        {%- endif -%}
                        {% capture "form_classes" -%}
                            product-form product-form-{{ section.id }}
                            {%- if section.settings.enable_payment_button and product.has_only_default_variant %}
                                product-form--payment-button-no-variants
                            {%- endif -%}
                            {%- if current_variant.available == false %}
                                product-form--variant-sold-out
                            {%- endif -%}
                        {%- endcapture %}
                        {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
                            {% unless product.has_only_default_variant %}
                                <div class="product-form__controls-group">
                                    {% for option in product.options_with_values %}
                                        <div class="selector-wrapper js product-form__item">
                                            <label for="SingleOptionSelector-{{ forloop.index0 }}">
                                                {{ option.name }}
                                            </label>
                                            <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
                                                {% for value in option.values %}
                                                    <option value="{{ value | escape }}" {% if option.selected_value == value %} selected="selected" {% endif %}>{{ value }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endunless %}
                            <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
                                {% for variant in product.variants %}
                                    <option value="{{ variant.id }}" {%- if variant == current_variant %} selected="selected" {%- endif -%}>
                                        {{ variant.title }}
                                        {%- if variant.available == false %}
                                            -
                                            {{ 'products.product.sold_out' | t }}
                                        {% endif %}
                                    </option>
                                {% endfor %}
                            </select>
                            {% render 'paywhirl-plan-selector', product: product %}
                            {{ product.metafields.easycustomfield.customfieldsinput }}
                            {% if section.settings.show_quantity_selector %}
                                <div class="product-form__controls-group">
                                    <div class="product-form__item">
                                        <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                                        <input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" pattern="[0-9]*" class="product-form__input product-form__input--quantity" data-quantity-input></div>
                                    </div>
                                {% endif %}
                                <div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}" data-error-message-wrapper role="alert">
                                    <span class="visually-hidden">{{ 'general.accessibility.error' | t }}
                                    </span>
                                    {% include 'icon-error' %}
                                    <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
                                </div>
                                <div class="product-form__controls-group product-form__controls-group--submit">
                                    <div class="product-form__item product-form__item--submit
                                                            {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
                                                            {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}">
                                        <button type="submit" name="add" {% unless current_variant.available %} aria-disabled="true" disabled {% endunless %} aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}" class="btn product-form__cart-submit{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}" {% if settings.enable_ajax %} aria-haspopup="dialog" {% endif %} data-add-to-cart>
                                            <span data-add-to-cart-text>
                                                {% unless current_variant.available %}
                                                    {{ 'products.product.sold_out' | t }}
                                                {% else %}
                                                    {{ 'products.product.add_to_cart' | t }}
                                                {% endunless %}
                                            </span>
                                            <span class="hide" data-loader>
                                                {% include 'icon-spinner' %}
                                            </span>
                                        </button>
                                        {% if section.settings.enable_payment_button %}
                                            {{ form | payment_button }}{% endif %}
                                        </div>
                                    </div>
                                {% endform %}
                            </div>
                            {%- comment -%}
                                Live region for announcing updated price and availability to screen readers
                            {%- endcomment -%}
                            <p class="visually-hidden" data-product-status aria-live="polite" role="status"></p>
                            {%- comment -%}
                                Live region for announcing that the product form has been submitted and the
                                          product is in the process being added to the cart
                            {%- endcomment -%}
                            <p class="visually-hidden" data-loader-status aria-live="assertive" role="alert" aria-hidden="true">{{ 'products.product.loader_label' | t }}</p>
                            <div class="product-single__store-availability-container" data-store-availability-container data-product-title="{{ product.title | escape }}" data-has-only-default-variant="{{ product.has_only_default_variant }}" data-base-url="{{ shop.url }}{{ routes.root_url }}"></div>
                            <div class="product-single__description rte">
                                {{ product.description }}
                            </div>
                            {% if section.settings.show_share_buttons %}
                                {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% unless product == empty %}
                    <script type="application/json" id="ProductJson-{{ section.id }}">
                        {{ product | json }}
                    </script>
                    <script type="application/json" id="ModelJson-{{ section.id }}">
                        {{ product.media | where: 'media_type', 'model' | json }}
                    </script>
                {% endunless %}

 

Founder of Shopify agency - Accomplishify.com
If you would like to hire us as Shopify experts, please reach out via:
  • Email michal.morek@accomplishify.com
  • WhatsApp +48 507 613 425
0 Likes