Debut Theme - Implement cart popup in collection page

GoPablo
Visitor
2 0 0

I've managed to add a AJAX add to cart button for each item on the collection page.
But I can't get the cart popup triggered and populated like on the product page.
I guess that these module is ready to use as it is used in the product page also?

How can I get the popup cart working also in the collection page when adding a product?

Replies 4 (4)

Jsanta
New Member
9 0 0

Hi!

Did you find any help? I have the same issue

 

Thanks in advance!

GoPablo
Visitor
2 0 0

Not yet, still waiting for any help....

Lawrence__Clari
Shopify Expert
4 1 0

https://lucidpolygon.com/blog/adding-an-add-to-cart-button-to-collection-pages-in-debut-theme-ajax/ was a saviour. 

from the post:

in product-card-grid.liquid add the following code.

<div
  id="ProductSection-{{ section.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="product"
  data-enable-history-state="true"
  data-ajax-enabled="{{ settings.enable_ajax }}"
>
  {%- assign current_variant = product.selected_or_first_available_variant -%}
  {% form 'product', product, class:form_classes, novalidate: 'novalidate',
 data-product-form: '' %} 

  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
  <button type="submit" name="add"               
          aria-label="{{ 'products.product.add_to_cart' | t }}"
          class="btn product-form__cart-submit
{% if section.settings.enable_payment_button %} 
btn--secondary-accent{% endif %}"
          {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
          data-add-to-cart>
    <span data-add-to-cart-text>
      {{ 'products.product.add_to_cart' | t }}
    </span>
    <span class="hide" data-loader>
      {% include 'icon-spinner' %}
    </span>
  </button>
  {% endform %}

</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 %}

 

Ajay_gupta-973
Shopify Partner
8 0 0

<div
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
data-ajax-enabled="{{ settings.enable_ajax }}"
>
{%- assign current_variant = product.selected_or_first_available_variant -%}
{% form 'product', product, class:form_classes, novalidate: 'novalidate',
data-product-form: '' %}

<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
<button type="submit" name="add"
aria-label="{{ 'products.product.add_to_cart' | t }}"
class="btn product-form__cart-submit
{% if section.settings.enable_payment_button %}
btn--secondary-accent{% endif %}"
{% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
data-add-to-cart>
<span data-add-to-cart-text>
{{ 'products.product.add_to_cart' | t }}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
{% endform %}

</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 %}

 

"This method is not working for showing cart popup on collection page in debut theme"