Jullin Egbuji commented on How to add multiple line items to the cart?

I would like to know if it is possible to add multiple items to cart in Product.liquid. Here is the situation, we would like to add additional Products based on Product variant selected. Right now it picks only the variant and adds it to the cart. We do not want to show any radio buttons but want to get the additional variant of the product added.

Product A

variant 1 - Option1 = Color, Option 2 Length of Dress , Option 3 Outfit Name

Based on Option 3, I would like to automatically add a default variant outfit when the customer clicks on "AddToCart"

This way we can automatically adjust the inventory accordingly since both items have different SKUs and prices.

Is this possible on Product.liquid ?

Below is what we have at the moment

        
        {% comment %}
          ID addToCartForm is a selector for the ajaxify cart plugin
        {% endcomment %}
        <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" >
                 
          {% if product.available and product.variants.size > 1 %}
             {% for option in product.options %}
               {% include 'swatch' with option %}

             {% endfor %}
          {% endif %}

          <select name=id id="productSelect" class="product-single__variants">
            {% for variant in product.variants %}
              {% if variant.available %}

                {% comment %}
                  Note: if you use option_selection.js, your <select> tag will be overwritten, meaning what you have inside <option> will not reflect what you coded below.
                {% endcomment %}
                <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
                
              {% else %}
                <option disabled="disabled">
                {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                </option>
                 
              {% endif %}
            {% endfor %}
          </select>
             
          <div id="priceWrapper">
          <span id="ProductPrice" class="{% if product.compare_at_price > product.price %} on-sale{% endif %}" itemprop="price">
            {{ product.price | money }}
          
          </span>

          {% if product.compare_at_price > product.price %}
            <span id="ComparePrice">
              {{ 'products.product.compare_at' | t }} {{ product.compare_at_price_max | money }}
            </span>
          {% endif %}
          </div>

          <label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
          <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
           <button type="submit" name="add" id="AddToCart" class="btn">
          
          <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
             
          <p style="clear: both; padding-top: 20px;">{% if product.tags contains "Featured" %}Want different hair or outfit? <a href="/products/build-your-muse">Try our Doll Builder!</a>{% endif %}</p>
      
              </div>

         </form>