Shopify 2.0 dawn theme - adding a textarea to the main-product.liquid section

markn2
New Member
6 0 0

Hi I am complete newbie to Shopify and I'm trying to design a new website for a client of mine using a copy of the Dawn theme. I need to add some customisation options on my product pages and I've added a Textarea to the form on main-product.liquid section. The Textarea is displaying and functioning as expected on the product pages, but it isn't displaying on my cart/checkout which is obviously not much use to anyone. Can anyone offer any help here please?

 

{%- when 'buy_buttons' -%}
<product-form>
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">



<!-- added by mn -->
{% unless line_item.properties == empty %}

<p class="line-item-property__field">
<label for="free-handwritten-gift-card-message">Free handwritten gift card message</label>
<textarea id="free-handwritten-gift-card-message" name="properties[Free handwritten gift card message]"></textarea>
</p>

{% endunless %}


<!-- end mn edit -->


<div class="product-form__buttons">
<button
type="submit"
name="add"
class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
>
{%- if product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</button>
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}
</product-form>

Replies 3 (3)

marcoswata
Shopify Partner
122 10 34

I believe there is a bug with the product pages in Dawn.  The line item properties are not being sent as parameters to the cart API. Maybe because it seems like there are two product form elements on the product page (to be confirmed).

The solution:

Go to the file assets/product-form.js, find const body = JSON.stringify({ and add the following code under that line:

properties: { YourNewField: document.getElementById('pinfel-select select').value },

 

My answer has been adapted from the accepted solution here

 

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!
markn2
New Member
6 0 0

Many thanks Marco, I cannot tell if your solution has resolved this, because I have reverted to the Debut theme now. But thanks a million for that.

marcoswata
Shopify Partner
122 10 34

No problem. Another (easier) way of solving this is just adding the properties to the second form (the one that wraps the buttons).

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!