I want to show Variant in table so that we can get multiple Variant on cart page

Deshraj514
New Member
1 0 0

I am trying to make it like this.  I want their option to add quantity off the product that people want to add to the cart also.  

 

 <table>
              {% if product.variants.size > 1 %} 
              {% if product.options[0] %}
              {% assign used = '' %} 
              <tr id="select-one" onchange="letsDoThis()">
                <td></td>
                {% for variant in product.variants %}
                {% unless used contains variant.option1 %}
                <td value="{{ variant.option1 }}">{{ variant.option1 }}</td>
                {% capture used %}
                {{ used }}
                {{ variant.option1 }}
                {% endcapture %}
                {% endunless %}
                {% endfor %}
              </tr>
              {% endif %} 
              <tbody 
                     {% if product.options[1] %}
                     {% assign used = '' %}>
                {% for variant in product.variants %}
                {% unless used contains variant.option2 %}
                <tr id="select-two{{ forloop.index }}" onchange="letsDoThis()"> 
                  <td value="{{ variant.option2 }}">{{ variant.option2 }}</td>
                  {% capture used %}
                  {{ used }}
                  {{ variant.option2 }}
                  {% endcapture %} 

                  {% for variant in product.variants %} 
                  <td  {% if variant == product.selected_or_first_available_variant %}
                      selected="selected" {% endif %}
                      data-sku="{{ variant.sku }}"
                      value="{{ variant.id }}"><div class="product-single__quantity">
                    <label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
                    <input type="number" hidden="hidden" id="Quantity" name="quantity" value="0" min="0" class="js-quantity-selector">
                    </div></td>

                  {% endfor %}   
                </tr> 
                {% endunless %}
                {% endfor %} 
                {% endif %} 
              </tbody>
              {% endif %}
              <input type="hidden" name="id" id="product-select" value="{{ product.variants.first.id }}"/>
            </table>

 

0 Likes