Line item properties in Dawn Theme

Solved
AlanAdler
Tourist
10 0 2

THIS worked:

properties: {
'Hardware Color' : document.getElementById('hardware-color').value,
'Glass Color' : document.getElementById('glass-color').value,
'Controller Cutout' : document.getElementById('fan-cutout').value,
'Install Location' : document.getElementById('pull-out-enclosure').value,
'Free Space Above' : document.getElementById('pull-out-vertical-pos').value,
'_Estimated Ship Date': document.getElementById('estimated-ship-date').value
},

so long as in the template, I made sure that the element is ALWAYS present.

Some products have SOME of the line item properties but not all, so in the liquid block where I had an IF that controlled whether the property was added, I added an ELSE to add the element as Hidden with no value.

Example:{%- else -%}
<input type="hidden" id="pull-out-vertical-pos" type="text" name="" value="">
{%- endif -%}

 

In other words:

properties: { 'FirstPropName' :  document.getElementById('FirstPropID').value,
'SecondPropName' :  document.getElementById('SecondPropID').value},

0 Likes
PaulNewton
Shopify Partner
3120 191 571

@acerill wrote:

It would require one of these pull requests to be merged:

 


That change has been merged  so update your themes https://github.com/Shopify/dawn/pull/509 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
PaulNewton
Shopify Partner
3120 191 571

@AlanAdler wrote:

so long as in the template, I made sure that the element is ALWAYS present.

...


You would be much better of checking if the element exists in javascript an assignining it when  it does.

There's also just more simply serializing any property elements into an object instead of having to create a manual object.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Scott-WebWizard
Shopify Partner
3 0 3

 I used the following and no changes to either product-form.js or global.js files needed

 

 form="product-form-{{ section.id }}"

 

 full example

 

{% if product.type == 'Coffee' %}
<div id="MilkOptions">
<p>
  <strong>Milk Options</strong><br>
  <label><input type="radio" name="properties[Milk Option]" value="Almond" form="product-form-{{ section.id }}"> Almond</label>
  <label><input type="radio" name="properties[Milk Option]" value="Coconut" form="product-form-{{ section.id }}"> Coconut</label>
  <label><input type="radio" name="properties[Milk Option]" value="Macadamia" form="product-form-{{ section.id }}"> Macadamia</label>
  <label><input type="radio" name="properties[Milk Option]" value="Oat" form="product-form-{{ section.id }}"> Oat</label>
  <label><input type="radio" name="properties[Milk Option]" value="Soy" form="product-form-{{ section.id }}"> Soy</label>
</p>
</div>
{% endif %}  

 

Working page

https://shopify-demo.webwizards.nz/products/coffee?variant=40598766813295&fts=0&preview_theme_id=125...

akira2
New Member
2 0 0

Hello

Can you tell me what I added to make it appear in cart-notification?

0 Likes
ilc
Tourist
3 0 1

Any  notice required isn't working with text input fields?

 

<p class="line-item-property__field">
<label for="childsName">Child's Name:</label>
<input required="required" class="required" id="childsName" type="text" name="properties[Child's Name]" form="product-form-{{ section.id }}">
</p>
0 Likes
AlanAdler
Tourist
10 0 2
See
https://www.w3schools.com/tags/att_input_required.asp

Simply need “required” (no quotes).
0 Likes
akira2
New Member
2 0 0

Thank you for answering!
I was able to display it on the cart screen by this method.
However, I don't know how to display the properties in the popup window that appears when I add it to the cart. Also, I don't know how to display it in the auto-reply email.
I misunderstood that it could be implemented on the demo site.
I wish I could display the property in an auto-reply email or a pop-up window without editing product.js.

0 Likes
Aleksej579
New Member
1 0 0

Thanks for the reply. It works for me too.

 

   const body = JSON.stringify({

     properties: { YourNewField: document.getElementById('testSaveField').value },

     ...JSON.parse(serializeForm(this.form)),

0 Likes
littlebundles
Tourist
8 0 2

How do you do this with custom fields, like this clothing embroidery example: https://shopify-demo.webwizards.nz/products/short-sleeve-t-shirt?variant=31619799449711

I have a store where some of my products are able to be customised and the customer would need to enter in a name.