Re: Add Ajax "Quick Add to Cart" to Collection page of Debut theme?

Add Ajax "Quick Add to Cart" to Collection page of Debut theme?

NonStopShop
Tourist
3 0 1
  • Debut's a great theme but it's missing a few things; like Quick Add to Cart buttons on collection pages
  • Is it possible to add Quick Add to Cart buttons/functionality to Debut theme that keeps visitors on the collection page while adding the product to cart and triggering a pop-up (in the same manner as adding to cart works from the product page — Product adds to cart > Notification gets triggered > All while remaining on the same page (which I guess is ajax powered I guess)?
  • If so how can I make this happen?
  • Thanks!
Replies 9 (9)

H20-
Visitor
1 0 0

Ça marche bien. Je le mets toujours dans mes applications sur Shopify pour le thème Debut. Effectivement le thème Debut n'a pas l'option d'afficher directement le add cart sous les produits. Mais avec cette application c'est facile et très simple.

EvinceDev
Shopify Partner
63 6 7

Hello @NonStopShop ,

Just follow the steps for Debut theme for Add to cart button on collection pages.

  • From Shopify Admin select Online Store and click on Themes
  • Choose your main theme
  • Click the . . . on the top left-right (see below) and hit Edit code
  • Open Snippets -> product-card-grid.liquid File and paste below code at the end of the page.

 

<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
</form>​

 

Shopify Theme Advanced Backend Developer and Debugger
Want to modify or develop new app, Hire us.
If our Answer is helpful then please Like and Accept Solution!
I am an eCommerce and Marketing Technology consultant based in India.
To inquire about consulting work availability, You can reach me on Skype by live: rahul.evince or mail on partners@evincedev.com.
Shopify Apps URL :- https://apps.shopify.com/partners/gemfind1
Customization on Shopify Theme | Shopify App Development | SEO & Digital Marketing
NonStopShop
Tourist
3 0 1
  • Thanks for the reply @EvinceDev
  • That's the easy part — adding the button — but I'm trying to make it work the same as the product page (which is via ajax I believe)
  • Obviously it's a far superior customer experience when customers can add-to-cart while remaining on the Collections page (so they can keep shopping)
  • If anyone can help guide the ajax integration that would be sweet
robbiehomex
Shopify Partner
2 0 1

Hey @NonStopShop , did you ever discover solution for this? I am in the same boat atm 🙂 

EvinceDev
Shopify Partner
63 6 7

Could you please try this way https://cartjs.org/pages/guide I am sure that will help you.

Shopify Theme Advanced Backend Developer and Debugger
Want to modify or develop new app, Hire us.
If our Answer is helpful then please Like and Accept Solution!
I am an eCommerce and Marketing Technology consultant based in India.
To inquire about consulting work availability, You can reach me on Skype by live: rahul.evince or mail on partners@evincedev.com.
Shopify Apps URL :- https://apps.shopify.com/partners/gemfind1
Customization on Shopify Theme | Shopify App Development | SEO & Digital Marketing
upbedding_Admin
Shopify Partner
5 0 2

Hey there Hope you are doing well

 

1- Create a snippet and name it addtocart and paste the following code:

 

{%- assign product = variant.id -%}
<div id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-ajax-enabled="{{ settings.enable_ajax }}">
{%- assign current_variant = variant.id -%}
<div class="grid__item {{ product_description_width }}">
<div class="product-single__meta">

<div>
{% if section_onboarding %}
<div class="product-form">
<div class="product-form__item product-form__item--submit{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
<button type="submit" name="add" disabled class="btn product-form__cart-submit" data-add-to-cart>
<span data-add-to-cart-text>
{{ 'products.product.sold_out' | t }}
</span>
</button>
</div>
</div>
{% else %}
{% 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 section_onboarding %}
{% unless product.has_only_default_variant %}
<div class="product-form__controls-group">
<div class="selector-wrapper js product-form__item">
<input type="hidden" name="id" value="{{ variant.id }}" />

</div>
</div>
{% endunless %}
<input class="product-form__variants no-js" type="hidden" name="id" value="{{ product.variants.first.id }}" />

{% endunless %}
<div class="product-form__controls-group">
<div class="product-form__item">
<input type="hidden" 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>

<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 variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless 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 %} btn--secondary-accent{% endif %}"
{% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
data-add-to-cart>
<span data-add-to-cart-text>
{% unless 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>
</div>
</div>
{% endform %}
{% endif %}
</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>
</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 %}


<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ shop.url | append: product.url | json }},
{%- if product.featured_media -%}
{%- assign media_size = product.featured_media.preview_image.width | append: 'x' -%}
"image": [
{{ product.featured_media | img_url: media_size | prepend: "https:" | json }}
],
{%- endif -%}
"description": {{ product.description | strip_html | json }},
{%- if current_variant.sku != blank -%}
"sku": {{ current_variant.sku | json }},
{%- endif -%}
"brand": {
"@type": "Thing",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ shop.url | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>

 

 

 

 

2- In Your collection template include the snippet where it says product-card-grid

{% include 'addtocart' %}

Thankyou

AndreasWaeldele
Shopify Partner
5 0 0

Works perfectly! Thanks a lot for posting this 🙂

sixthcitymkt1
Shopify Partner
5 0 0

I tried this on my site, but I got a liquid error message like this in place of the "Add to cart" section:

translation missing: en.general.accessibility.error Liquid error (snippets/addtocart line 48): Could not find asset snippets/icon-error.liquid translation missing: en.products.product.quantity_minimum_message 

Did I miss a step?

beautystoremt
Visitor
1 0 0

it work, but how can i reduce the space between "add to card" and product