Shopify themes, liquid, logos, and UX
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>
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
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.
No problem. Another (easier) way of solving this is just adding the properties to the second form (the one that wraps the buttons).
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024