Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: inline item properties

inline item properties

dev12341
Tourist
9 0 3

How to add custom inline line items properties to the product page with the new design?

I tried using the UI Element Generator and place it under the "form" object in the "main-product.liquid" but the item properties are not showing in the cart and the required attributes are not working. 

Replies 4 (4)

Guleria
Shopify Partner
3517 708 989

 Hello @dev12341 ,

Please them inside the from tag not under form tag.

Thanks

- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
dev12341
Tourist
9 0 3

Can you please share an example? I tried every possible combination....

Guleria
Shopify Partner
3517 708 989

Just place your code before 
</form> or {% endform %} 

- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
dev12341
Tourist
9 0 3

That's exactly what I did, but it is not working with the new 2.0 version.

Here is how my code looks inside the section file "main-product.liquid" (below).

But the property is not shown in the checkout cart after the product is added to the cart, AND the "required" attribute is never enforced (that is, it is possible to submit the form with blank value in the new field):

{%- form 'product', product, id: 'product-form-installment', class: 'installment caption-large' -%}
              <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
              {{ form | payment_terms }}
        
        <p class="line-item-property__field"> 
                   <label for="from-the-full-name-of-the-card-sender" style="font-weight: 600;">From: </label> 
                   <input  
                          style="width:100%; max-width:100%;" 
                          id="c_from" 
                          class="field__input required" 
                          type="text" 
                          name="properties[From: ]"
                          required> 
                </p> 
        
            {%- endform -%}