How to add a variant selector before they quick add to cart? When using the “quick button” I coded, the code choses the first option for them when adding to cart. Please be patient as this is one of my first times coding and I am very new to this.
Also if someone could help me explain why the quick add button flies around during the desktop and mobile version? I code this in card.product.liquid, and this is what I have so far
Usage:
21 21 {% render 'card-product', show_vendor: section.settings.show_vendor %}
22 22 {% endcomment %}
`23` `+{% style %}` 24 + .collection-add-to-cart {
`25` `+ position: absolute;` 26 + height: 40px;
`27` `+ width: 40px;` 28 + background: #1d438a;
`29` `+ border-radius: 50%;` 30 + top: 60%;
`31` `+ right: 18px;` 32 + z-index: 99;
`33` `+ display: flex;` 34 + justify-content: center;
`35` `+ align-items: center;` 36 + cursor: pointer;
`37` `+ }` `23` `38`
`39` `+ .collection-add-to-cart:hover {` 40 + background: #778eb8;
`41` `+ }` 42 +
`43` `+ .material-symbols-outlined {` 44 + color: white;
`45` `+ font-variation-settings:` 46 + 'FILL' 0,
`47` `+ 'wght' 400,` 48 + 'GRAD' 0,
`49` `+ 'opsz' 24` 50 + }
`51` `+{% endstyle %}` 52 +<script>
`53` `+ function addProductFromCollection(id) {` 54 + let formData = {
`55` `+ 'items': [{` 56 + 'id': id,
`57` `+ 'quantity': 1` 58 + }]
`59` `+ };` 60 + fetch(window.Shopify.routes.root + 'cart/add.js', {
`61` `+ method: 'POST',` 62 + headers: {
`63` `+ 'Content-Type': 'application/json'` 64 + },
`65` `+ body: JSON.stringify(formData)` 66 + })
`67` `+ .then(async response => {` 68 + let final = await response.json()
`69` `+ window.location.href = '{{ routes.cart_url }}'` 70 + return final
`71` `+ })` 72 + .catch((error) => {
`73` `+ console.error('Error:', error);` 74 + });
`75` `+ }` 76 +</script>
24 77 {%- unless skip_styles -%}
25 78 {{ 'component-rating.css' | asset_url | stylesheet_tag }}
26 79 {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
@@ -565,6 +618,13 @@
565 618 </div>
566 619 </div>
567 620 </div>
`621` `+ <div class="collection-add-to-cart" onclick="addProductFromCollection({{ card_product.selected_or_first_available_variant.id }})">` 622 + <span class="material-symbols-outlined">
`623` `+ <span class="material-symbols-outlined">` 624 + add_shopping_cart
`625` `+ </span>` 626 + </span>
`` 627 + </div>
568 628 {%- else -%}
569 629 {%- liquid
570 630 assign ratio = 1