(Multiple) Option Selectors with add to cart button on collectionpage in Dawn Theme

Technical Q&A
1

Hey there I want to display multiple option selectors ( one for color options / one for material etc. ) on the collection page in dawn theme with an add to cart button. I have implemented the code for the option selectors and the add to cart button but anyways its not working. I think I am missing a js function, but can’t figure out how it should look.

When I have selected a prefered variant and click on add to cart it throws me the error “Required parameter missing or invalid: items”

Bildschirmfoto 2022-10-16 um 18.26.53.png
Bildschirmfoto 2022-10-16 um 18.26.53.png1322×680 32.8 KB

This is the code of my custom-card-product.liquid file:

{% assign image_test = card_product.featured_media %}

    
    
    ###### {{ card_product.title | escape }}
    {% unless card_product.selected_or_first_available_variant.compare_at_price == blank %}{% if card_product.metafields.custom.mehrere_preise_ %}Ab:{% endif %} {% endunless %} {{ card_product.selected_or_first_available_variant.compare_at_price | money}}{% if card_product.selected_or_first_available_variant.compare_at_price == blank %}{% if card_product.metafields.custom.mehrere_preise_ %}Ab:{% endif %}{% endif %}  {{ card_product.selected_or_first_available_variant.price | money}}

    
    {%- if card_product.available == false -%}
      Ausverkauft
    {%  endif %}
2

Keep in mind the perf hit to liquid rendering and html dom size in not only looping over products in a collection but then those products variant options.

Any collection templates should have the total number of products they display dialed back.

Alo see UX warnings about cramming more into less in this post before bloating collection templates:

https://community.shopify.com/post/1778906

Fast glance looks like there is no input for the actually needed variant.id needed by the cart ajax api, nor do the selects set an id as they are using option names for values.

Make sure to make any related javascript is also actually reference the relevant product-card that has it’s add-to-cart button press and not simply the first product-card on the page.