After following a few tutorials and looking elsewhere on this forum, I am still not able to get my multiple custom line items to show up in the cart. I would also like these to be shown at checkout. I put my line item code in the product form on main-product.liquid. See below.
This Code is in my main-cart-items.liquid
<dl>
{%- if item.product.has_only_default_variant == false -%}
{%- for option in item.options_with_values -%}
<dt>{{ option.name }}: </dt>
<dd>{{ option.value }}</dd>
{%- endfor -%}
{%- endif -%}
{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
{{ property.last | split: '/' | last }}
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
{%- endif -%}
{%- endfor -%}
{% for line_item in cart.line_items %}
{% unless line_item.properties == empty %}
{% for property in line_item.properties %}
{{ property.first }}:
{% if property.last contains '/uploads/' %}
{{ property.last | split: '/' | last }}
{% else %}
{{ property.last }}
{% endif %}
{% endfor %}
{% endfor %}
{% endunless %}
</dl>
And here is my product-form.js
class ProductForm extends HTMLElement {
constructor() {
super();
this.form = this.querySelector('form');
this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
this.cartNotification = document.querySelector('cart-notification');
}
onSubmitHandler(evt) {
evt.preventDefault();
this.itemProperty = document.querySelector('fieldset#Color-Select');
this.cartNotification.setActiveElement(document.activeElement);
const submitButton = this.querySelector('[type="submit"]');
submitButton.setAttribute('disabled', true);
submitButton.classList.add('loading');
const body = JSON.stringify({
properties: { Color: this.itemProperty.value },
...JSON.parse(serializeForm(this.form)),
sections: this.cartNotification.getSectionsToRender().map((section) => section.id),
sections_url: window.location.pathname
});
fetch(`${routes.cart_add_url}`, { ...fetchConfig('javascript'), body })
.then((response) => response.json())
.then((parsedState) => {
this.cartNotification.renderContents(parsedState);
})
.catch((e) => {
console.error(e);
})
.finally(() => {
submitButton.classList.remove('loading');
submitButton.removeAttribute('disabled');
});
}
}
customElements.define('product-form', ProductForm);
As you can see above I tried getting atleast one of my line item properties to show and it didn’t work.
What am i missing?
