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

markn2
New Member
5 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>

0 Likes
marcoswatanabe
Shopify Partner
19 2 5

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, talk to one of our experts at http://whymatters.co.uk/
0 Likes
markn2
New Member
5 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.

0 Likes
marcoswatanabe
Shopify Partner
19 2 5

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, talk to one of our experts at http://whymatters.co.uk/
0 Likes