Shopify show variants dropdown separately for colors and sizes at cart

Highlighted
New Member
2 0 0

I made a minicart with popup so when product will add to cart then this side popup opening with added product. I wanted to show color and size variant separately for selection at the cart

here is liquid with js code for this to populate data to cart

 

{% assign offerProduct = all_products['offer-product'] %}
{% assign product = offerProduct %}
var offerProduct = {{ offerProduct | json }}
// console.log( offerProduct.id);
var offerProductVariants = offerProduct.variants;
var allVariants = [];
if (offerProductVariants.length > 0) {
    for (let i = 0; i < offerProductVariants.length; i++) {
        allVariants.push(offerProductVariants[i]);
    }
}
let selectVar = '<select id="ProductSelect-product-template" class="product-form__variants no-js2" onchange="selectChanged(this.value, ' + line + ', ' + qty + ')" name="id"\n' +
                '                            data-productid="' + item.product_id + '">';
             if (allVariants.length > 0) {
                 for (let i = 0; i < allVariants.length; i++) {
                     let variant = allVariants[i];
                     let selected = (variantId == variant.id) ? 'selected' : '';
                     selectVar += '<option value="' + variant.id + '" ' + selected + '> ' + variant.title + '</option>';
                 }
             }
0 Likes