Questions, feedback, and updates on the new online store design experience
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
I am new to Shopify and I am working on a website for which I've created a copy of the Dawn (Shopify.20) theme. I have created a product-default-custom.json template. My product pages will require some 'Text Areas', and 'Checkboxes', and I've grabbed some text area 'line item' code via the Shopify UI elements website which I have pasted into the 'form' on my main-product.liquid section, the Text area is displaying on my product pages as expected, but the problem is the new text area content isn't displaying on my cart/checkout page. Can anyone offer any advice here? When I copied UI element code I selected display on Checkout...
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
@marcoswata I am having the same issue.
"find const body = JSON.stringify({ " doesn't exist.
Here is my code for product-form.js under assets:
if (!customElements.get('product-form')) {
customElements.define('product-form', class ProductForm extends HTMLElement {
constructor() {
super();
this.form = this.querySelector('form');
this.form.querySelector('[name=id]').disabled = false;
this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
this.cartNotification = document.querySelector('cart-notification');
}
onSubmitHandler(evt) {
evt.preventDefault();
const submitButton = this.querySelector('[type="submit"]');
if (submitButton.classList.contains('loading')) return;
this.handleErrorMessage();
this.cartNotification.setActiveElement(document.activeElement);
submitButton.setAttribute('aria-disabled', true);
submitButton.classList.add('loading');
this.querySelector('.loading-overlay__spinner').classList.remove('hidden');
const config = fetchConfig('javascript');
config.headers['X-Requested-With'] = 'XMLHttpRequest';
delete config.headers['Content-Type'];
const formData = new FormData(this.form);
formData.append('sections', this.cartNotification.getSectionsToRender().map((section) => section.id));
formData.append('sections_url', window.location.pathname);
config.body = formData;
fetch(`${routes.cart_add_url}`, config)
.then((response) => response.json())
.then((response) => {
if (response.status) {
this.handleErrorMessage(response.description);
return;
}
this.cartNotification.renderContents(response);
})
.catch((e) => {
console.error(e);
})
.finally(() => {
submitButton.classList.remove('loading');
submitButton.removeAttribute('aria-disabled');
this.querySelector('.loading-overlay__spinner').classList.add('hidden');
});
}
handleErrorMessage(errorMessage = false) {
this.errorMessageWrapper = this.errorMessageWrapper || this.querySelector('.product-form__error-message-wrapper');
this.errorMessage = this.errorMessage || this.errorMessageWrapper.querySelector('.product-form__error-message');
this.errorMessageWrapper.toggleAttribute('hidden', !errorMessage);
if (errorMessage) {
this.errorMessage.textContent = errorMessage;
}
}
});
}
I am having the same issue as well.
"find const body = JSON.stringify({ " - does not exist.
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022