I have the following line items under this product that I need to show in the cart.
https://www.dsmoffroad.com/products/lifetime-warranty-replacement-request
I have read several posts talking about adding a line under “const body = JSON.stringify({” but that code doesn’t exist for my product-form.js, which is below:
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;
}
}
});
}
This is the template code for that product page:
{
"sections": {
"main": {
"type": "main-product",
"blocks": {
"vendor": {
"type": "text",
"disabled": true,
"settings": {
"text": "{{ product.vendor }}",
"text_style": "uppercase"
}
},
"title": {
"type": "title",
"settings": {
}
},
"subtitle": {
"type": "text",
"settings": {
"text": "{{ product.metafields.descriptors.subtitle.value }}",
"text_style": "subtitle"
}
},
"price": {
"type": "price",
"disabled": true,
"settings": {
}
},
"variant_picker": {
"type": "variant_picker",
"disabled": true,
"settings": {
"picker_type": "button"
}
},
"quantity_selector": {
"type": "quantity_selector",
"disabled": true,
"settings": {
}
},
"a5c07dc8-ed1c-4af1-8b3a-5cf2ff674301": {
"type": "custom_liquid",
"settings": {
"custom_liquid": "Test
\n"
}
},
"1bde578d-fc7f-40a5-a05b-07b1705a610f": {
"type": "custom_liquid",
"settings": {
"custom_liquid": "
\n
\n
Any help would be appreciated. Thank you.