Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Ç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.
Hello @NonStopShop ,
Just follow the steps for Debut theme for Add to cart button on collection pages.
<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>
Hey @NonStopShop , did you ever discover solution for this? I am in the same boat atm 🙂
Could you please try this way https://cartjs.org/pages/guide I am sure that will help you.
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
Works perfectly! Thanks a lot for posting this 🙂
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?
it work, but how can i reduce the space between "add to card" and product
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024