Open drawer Add to cart Collections

LiZardMan
Tourist
6 1 0

Hello, I spent 3 hours trying to figure it out and I couldn't so I came here for help. 
I successfully added an "Add to cart" button to the collections, however, I want it to open the cart drawer and not change to the cart page. 
I'm using this code: 

Click to expand...
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="hidden" min="1" type="number" id="quantity" name="quantity" value="1"/>
<button id="AddToCart-{{ section.id }}" type="submit" name="add" class="myButton">
<img class="addtocartbtn" src="https://cdn.shopify.com/s/files/1/0434/9119/7086/files/Add_to_cart_button_1.png?v=1612167257">
</button>
</form>

Some notes:

- I use Boundless theme
- In product page or featured product it does open the drawer.
- I think that I need to use something like this: 

Click to expand...
ajaxCart.init({
formSelector: this.settings.addToCartFormId,
cartContainer: selectors.cartContainer,
addToCartSelector: this.settings.addToCartBtnId,
moneyFormat: theme.settings.moneyFormat
});

but my tries with it failed.
- I tried also using this code:  (works but also transferring to cart page)

Click to expand...

{%- capture 'form_id' -%}AddToCartForm-{{ section.id }}{%- endcapture -%}
{%- capture 'form_class' -%}
product__form--add-to-cart{% if section.settings.product_form_width == 'large' %} product__form--full-width{% endif %}
{%- endcapture -%}
{% form 'product', product, id:form_id, class:form_class, data-cart-form: '' %}
{% comment %}
Select element hidden when JS initializes. Safeguard for JS-disabled.
{% endcomment %}
<select hidden="hidden" name="id" id="ProductSelect-{{ section.id }}">
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} {% unless variant.available %} disabled="disabled" {% endunless %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {% if variant.available %}{{ variant.price | money_with_currency }}{% else %}{{ 'products.product.sold_out' | t }}{% endif %}</option>
{% endfor %}
</select>
{% comment %}
<div class="product__policies rte">

</div>
{% endcomment %}
<div>
{% if product.available %}
<button id="AddToCart-{{ section.id }}" type="submit" name="add" class="myButton ">
<img class="addtocartbtn" src="https://cdn.shopify.com/s/files/1/0434/9119/7086/files/Add_to_cart_button_1.png?v=1612167257">
</button>
{% else %}
<button type="button" class="btn btn--add-to-cart btn--disabled{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}" disabled="disabled">
{{ 'products.product.sold_out' | t }}
</button>
{% endif %}
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
{% endform %}</div>

Can someone give me an idea? Thank you. 

0 Likes
LiZardMan
Tourist
6 1 0

Someone?

0 Likes
LiZardMan
Tourist
6 1 0

Bump

0 Likes