Adding UI elements in to cart.

Highlighted
New Member
1 0 1

Hello, 

I am trying to setup wholesale store and I have problem UI elements not showing up in my cart.  

Following is the codes I have so customers can buy various variants and quantities on given products.  Only problem is when I click add to cart variants and qty are being added correctly but UI element "Logo" isn't being added to cart. 

Please help.  

Thanks,

 

 

<div class="desc_blk">
   <form action="/cart" method="post" clearfix="row">

          <p class="cart-attribute__field">
             <label>Logo</label><br>
               <select required class="required" id="logo" name="attributes[Logo]">
                  <option value="Logo1"{% if cart.attributes["Logo"] == "Logo1" %} selected{% endif %}>Logo1</option>
                  <option value="Logo2"{% if cart.attributes["Logo"] == "Logo2" %} selected{% endif %}>Logo2</option>
                 <option value="Logo3"{% if cart.attributes["Logo"] == "Logo3" %} selected{% endif %}>Logo3</option>
             </select>
         </p>

           <h1>Available Color and Sizes</h1>
              <table>
                <tbody>
                  {% if product.available %}
                    {% for variant in product.variants %}
                      {% if variant.available %}
                        <tr class="{% cycle 'pure-table-odd', '' %}">
                          <td>
                             <img src="{{ variant.image | default: product.featured_image | img_url: 'small' }}" alt="{{ variant.title | escape }}" />

                          </td>
                          <td>
                           <h4>
                             {% unless variant.title contains 'Default' %}  {{ variant.title }}{% endunless %}{% unless variant.sku == blank %} / {{ variant.sku }}{% endunless %}
                            </h4>
                          </td>
                          <td>
                             {{ variant.price | money }}
                          </td>
                          <td style="text-align:right;">
                            <input name="updates[{{ variant.id }}]" onfocus="this.select()" class="quantity field" min="0" {% unless variant.inventory_management == blank or variant.inventory_policy == 'continue' %} max="{{ variant.inventory_quantity }}" {% endunless %} type="text" value="0" tabindex="1" />
                          </td>
                        </tr>
                      {% endif %}
                    {% endfor %}
                  {% endif %}
                </tbody>
              </table>
                 <tr>
              <div>
               
               


          {% if collection.products_count > 0 %}
          <script>
          jQuery(function($) {
            $('table .quantity:first').focus();
            $('[max]').change(function() {
              var max = parseInt($(this).attr('max'), 10);
              var value = parseInt($(this).val(), 10) || 0;
              if (value > max) { 
                alert('We only have ' + max + ' of this item in stock');
                $(this).val(max); 
              }    
            });
          });
          </script>
          {% endif %}   
            </div>
            
           
        <div class="payment-buttons payment-buttons--{{ section.settings.add_to_cart_button_size }}">
          <button type="submit" name="add" id="addToCart-{{ section.id }}" class="{{ btn_class }} btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
            <span class="icon icon-cart"></span>
            <span id="addToCartText-{{ section.id }}">{{ 'products.product.add_to_cart' | t }}</span>
          </button>

          {% if section.settings.enable_payment_button %}
            {{ form | payment_button }}
          {% endif %}
        </div>

 

 

Highlighted
Shopify Partner
9449 1190 3319

Hello, @vbrookie 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted

@vbrookie first your form directs to /cart. it must direct to /cart/add 

cart attributes are for checkout purposes, e.g 
"I confirm I am over 18."
then on your order, a  data field for the confirmation of age will appear, it used for details about the order, not the product.

From what you've posted it appears you are looking for line item properties https://shopify.dev/docs/themes/liquid/reference/objects/line_item
you can use the following tool to generate the UI elements https://ui-elements-generator.myshopify.com/pages/line-item-property

or alternatively, change your select element name from attributes[Logo] to properties[Logo].

 

Please mark as a solution if this helps you, so others can find.

 

 

Please like and mark my post as a solution if I've helped you, thanks.
0 Likes