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
2018 426 621

 Hello @dev12341 ,

Please them inside the from tag not under form tag.

Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.
dev12341
Tourist
9 0 3

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

Guleria
Shopify Partner
2018 426 621

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.
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 -%}