Dawn Theme 4.0 Add to cart and QTY selector on Collections. AJAX Add to cart on collection page

PantsMcGhee · ‎03-31-2022

Hi all, I have tried a few solutions from this community to place add to cart buttons and qty selector to collection pages, plus tried deferring the javascript on collection pages so that add an item to the cart updates on the collection page and does not take you directly to the cart page.

None of the code snippets have worked. For example, everyone says to edit; product-card.liquid, but this file does not seem to exist anymore (or has been renamed) to; card-product.liquid and the overall code looks different.

I tried this code in; snippets > card-product.liquid

<!-- Add to cart on collection page -->
            <form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product_card_product.variants.first.id }}" />
<input type="hidden" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="button" style="margin-top: 17px" />
</form>
            <!-- END -->

and this code in the <head> of theme.liquid;

<!-- Disable add to cart going to cart page on collections -->
    {% if template == 'collection' %}
    <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
    {% endif %}
    <!-- END -->

Does anyone have a solution for Dawn version 4.0.0?

Thank you.

ahirwp · ‎11-16-2022

Hi

There is already an options in theme settings to show add to cart button on Collection page:
inside card-product.liquid file you can see code between this conditions.

{%- if show_quick_add -%}
// Add to cart code here
{% - endif -%}

Thanks
Ahir