Created
January 3, 2018 03:27
-
-
Save vosters/0be4a6429fbd89ff4e624d45c2b1518a to your computer and use it in GitHub Desktop.
Display Quick Add To Cart in Shopify Collection On Hover (w/ single option dropdown)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% comment %} | |
QUICK ADD TO CART | |
https://ecommerce.shopify.com/c/ecommerce-design/t/quick-add-to-cart-254790 | |
Copy and paste this code within your div for your product display within a collection | |
{% endcomment %} | |
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="quick-add-to-cart small--hide clearfix"> | |
{% if product.variants.size > 1 %} | |
<select id="product-select-{{ product.id }}" name='id' class="text-center"> | |
{% for variant in product.variants %} | |
{% if variant.available %} | |
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }}</option> | |
{% else %} | |
<option disabled="disabled"> | |
{{ variant.title }} - {{ 'products.product.sold_out' | t }} | |
</option> | |
{% endif %} | |
{% endfor %} | |
</select> | |
{% else %} | |
<input type="hidden" name="id" value="{{ product.variants.first.id }}" /> | |
{% endif %} | |
{% if product.available %} | |
<button type="submit" name="add" id="AddToCart" class="btn btn-mini text-center" onclick="ga('send', 'event', 'Quick Add To Cart', '{{ product.type }}', '{{ product.title }}');">Add To Cart</button> | |
{% else %} | |
<h6>Out of Stock</h6> | |
{% endif %} | |
</form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is there a way to make the cart popup appear when adding to cart on dawn theme? which ways would you recommend?