All things Shopify and commerce
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?
Hi!
Did you find any help? I have the same issue
Thanks in advance!
Not yet, still waiting for any help....
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 %}
<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"
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024