Snippet made for a product page but need textfield info on checkout page and order

Tourist
6 0 1

So we needed to insert code for fields to fill out from the customer. Everything for that is formatted and working properly but i have no clue how to send the info in the different fields to the checkout page nor to the order. I essentially need that info to be printed out into the order printer. 

Here is the code that i inserted into the product page (it works great) just need to know how to transfer the info in the textfields onto the checkout order things. 

<p> Click anywhere on the graphs below for choosing how you typically sleep. Our advanced algorithms will provide your specific configurations.</p>

<table border="0" cellspacing="100" cellpadding="100">
  <tr>


<td>
  <article class="footer_column">
    <br>
    <h5 class= "side_one">
      <p>Side One: <br></p></h5>
<br>
    <br>
      <img src="https://cdn.shopify.com/s/files/1/1328/3463/files/density_app.png?10338427914672097059" alt="" width="330" height="230" usemap="#Map"/>
      <map name="Map">
        <area shape="poly" coords="3,5,31,5,33,101,64,103,66,113,33,114,33,199,2,198" alt="ST,ST,M,M" href="Javascript:void(0)" onclick="textfield.value='Soft Talalay'; textfield1.value='Soft Talalay'; textfield2.value='Medium'; textfield3.value='Medium';">
        <area shape="rect" coords="33,4,65,101" href="Javascript:void(0)" alt="ST,ST,M,F" onclick="textfield.value='Soft Talalay'; textfield1.value='Soft Talalay'; textfield2.value='Medium'; textfield3.value='Firm';">
        <area shape="rect" coords="35,115,63,199" href="Javascript:void(0)" alt="ST,ST,M,F," onclick="textfield.value='Soft Talalay'; textfield1.value='Soft Talalay'; textfield2.value='Medium'; textfield3.value='Firm';">
        <area shape="poly" coords="261,2,261,94,293,95,295,123,263,123,262,199,327,198,327,3" href="Javascript:void(0)" alt="MT,M,F,F" onclick="textfield.value='Medium Talalay'; textfield1.value='Medium'; textfield2.value='Firm'; textfield3.value='Firm';">
        <area shape="poly" coords="65,22,97,22,97,77,129,78,129,85,161,86,163,101,178,103,181,110,176,116,164,115,160,127,130,129,129,135,99,137,97,185,65,185" href="Javascript:void(0)" alt="ST,S,M,F" onclick="textfield.value='Soft Talalay'; textfield1.value='Soft'; textfield2.value='Medium'; textfield3.value='Firm';">
        <area shape="poly" coords="65,198,65,185,97,185,99,137,131,137,131,129,163,126,165,115,175,116,183,110,177,101,165,98,163,86,131,85,131,78,98,75,97,21,65,21,65,2,129,3,129,17,162,17,163,41,194,42,195,65,229,67,227,149,197,151,195,165,161,165,161,186,130,187,129,197" href="Javascript:void(0)" alt="ST,M,M,F" onclick="textfield.value='Soft Talalay'; textfield1.value='Medium'; textfield2.value='Medium'; textfield3.value='Firm';">
        <area shape="poly" coords="130,2,129,19,162,16,163,39,196,43,195,65,229,65,229,149,197,151,197,165,161,166,163,187,129,187,129,197,261,201,261,122,295,122,294,95,261,95,262,2" href="Javascript:void(0)" alt="MT,S,M,F" onclick="textfield.value='Medium Talalay'; textfield1.value='Soft'; textfield2.value='Medium'; textfield3.value='Firm';">
      </map>
      <p>

        <label for="top">Top Layer:<input type="text" name="top" id="textfield"/>
        <br>
        <label for="second">Second Layer:<input type="text" name="second" id="textfield1"/></label>
        <br>
        <label for="third">Third Layer: <input type="text" name="third" id="textfield2"/></label>
        <br>
        <label for="bottom"> Bottom Layer: <input type="text" name="bottom" id="textfield3"/></label>
      </p>

    </article>
    </td>
<p>
    </p>
    <td>
<article class="footer_column"><br>
  <h5 class= "side two"> <p>Side Two: </h5> (Unapplicable for Twin, Twin XL, Full) :<br> </p>
  <img src="https://cdn.shopify.com/s/files/1/1328/3463/files/density_app.png?10338427914672097059" alt="" width="330" height="230" usemap="#Map2"/>
  <map name="Map2">
    <area shape="poly" coords="2,5,32,4,32,98,60,98,60,113,33,113,30,199,1,197" href="Javascript:void(0)" alt="ST,ST,M,M" onclick="textfield4.value='Soft Talalay'; textfield5.value='Soft Talalay'; textfield6.value='Medium'; textfield7.value='Medium';">
    <area shape="poly" coords="66,7,34,6,35,98,60,98,62,113,35,113,34,198,65,198" href="Javascript:void(0)" alt="ST,ST,M,F" onclick="textfield4.value='Soft Talalay'; textfield5.value='Soft Talalay'; textfield6.value='Medium'; textfield7.value='Firm';">
    <area shape="poly" coords="67,27,98,27,99,74,129,75,130,84,163,83,164,101,177,103,177,114,165,114,164,129,130,130,130,139,99,139,98,184,66,184" href="Javascript:void(0)" alt="ST,S,M,F" onclick="textfield4.value='Soft Talalay'; textfield5.value='Soft'; textfield6.value='Medium'; textfield7.value='Firm';">
    <area shape="poly" coords="66,5,129,6,130,19,164,20,164,41,198,41,198,64,228,64,230,148,197,149,196,164,162,164,164,186,131,187,130,198,66,197,67,184,98,183,100,140,128,139,130,131,164,128,167,116,178,115,179,104,165,100,165,82,131,82,130,73,100,73,99,26,66,26" href="Javascript:void(0)" alt="ST,M,M,F" onclick="textfield4.value='Soft Talalay'; textfield5.value='Medium'; textfield6.value='Medium'; textfield7.value='Firm';">
    <area shape="poly" coords="326,197,264,199,263,123,294,124,294,93,261,91,262,6,326,5" href="Javascript:void(0)" alt="MT,M,F,F" onclick="textfield4.value='Medium Talalay'; textfield5.value='Medium'; textfield6.value='Firm'; textfield7.value='Firm';">
    <area shape="poly" coords="262,199,132,197,132,188,164,186,163,164,198,163,198,149,231,149,230,65,200,63,198,39,165,38,165,19,132,18,130,6,262,6,262,92,294,95,293,123,261,123" href="Javascript:void(0)" alt="MT,S,M,F" onclick="textfield4.value='Medium Talalay'; textfield5.value='Soft'; textfield6.value='Medium'; textfield7.value='Firm';">
  </map>
<br>
          <label for="top2">Top Layer:<input type="text" name="top2" id="textfield4"></label>
<br>
          <label for="second2">Second Layer:<input type="text" name="second2" id="textfield5"></label>
<br>
          <label for="third2">Third Layer:<input type="text" name="third2" id="textfield6"></label>
<br>
          <label for="bottom2">Bottom Layer:<input type="text" name="bottom2" id="textfield7"></label>
    </article>
      <td>
  </tr>

0 Likes
Navigator
1151 0 118

Have a look at this:

https://help.shopify.com/themes/customization/products/features/get-customization-information-for-pr...

The short version is that you will want to use a naming convention for the "name" parameters of your form fields, where you use properties[HowYouWantTheValueLabeledInCartAndCheckout].

 

http://www.StandoutDesigns.com ::: Solid Wood TV Furniture for Enthusiasts. Made in USA.
0 Likes
Tourist
6 0 1

So in the code of the "Show line item properties in the cart" there is nothing inthere about the textfields or names of anything. How do i get the cart to take what ever is in the fields onto the cart? 

I also found that now i am unable to add the item to my cart. (im using a copy of my theme so no worries about messing anything up)

Thanks!

0 Likes
Navigator
1151 0 118
<input id="glass" type="hidden" name="properties[glass]" value="Gray Tinted">

Here is a line from our template. You can ignore the "hidden" part. The key is the name parameter. Shopify knows to save anything with properties[] as a line item property.

I suggest you revert/make a new copy and try this on just one field of yours.

http://www.StandoutDesigns.com ::: Solid Wood TV Furniture for Enthusiasts. Made in USA.
0 Likes
Tourist
6 0 1

So then if i wanted the value to be whatever is inputed into the textfield i would do  value="textfield" 

according to each textfield? ie. value="textfield1" 

0 Likes
Highlighted
Navigator
1151 0 118

You would set value to your default. Whatever is in the box when ADD TO CART happens gets stored in the property name you put in the [   ].

BTW, I have never used it with AREA SHAPE. Maybe ask Shopify or look at the Line Item Properties help on the site.

 

http://www.StandoutDesigns.com ::: Solid Wood TV Furniture for Enthusiasts. Made in USA.
0 Likes
Tourist
6 0 1

So i would do name="properties[default]"

or value="default"

 

haha sorry I'm just making sure im understanding you correctly.

0 Likes
Navigator
1151 0 118
<input id="glass" type="hidden" name="properties[glass]" value="Gray Tinted">

In this example, in the cart and in checkout, you will see the following:

glass: Gray Tinted

If it were not hidden and customers could enter what they wanted in the box and the customer typed Yahoo! in the box, it would come across as:

glass: Yahoo!

Another example

<input id="length" name="properties[Length]" value="2">
<input id="width" name="properties[Width]" value="4">
<input id="height" name="properties[Height]" value="6">

Here the default length appears as 2, the width as 4, the height as 6.

In the cart/checkout, you'd see

Length: 2
Width: 4
Height: 6

Notice the capitalization. The Line Item Property gets the text between [ and ] as its name.

If the customer changed the values in the boxes to 1, 2, and 3 respectively, you'd get:

Length: 1
Width: 2
Height: 3

Give it a try! :-)

 

http://www.StandoutDesigns.com ::: Solid Wood TV Furniture for Enthusiasts. Made in USA.
1 Like