Products with line item properties won't remove from cart properly

WackyT
New Member
3 0 0

Hello Community!

I am looking for a solution to a problem I am having with products that have line item properties and getting them to remove from the cart properly. I followed this tutorial (Get customization information for products) and the part where it says to make sure to update the links that remove items from the cart as you can see in part of my cart-template.liquid code (see 1. below). The good news is that it works if just one of the products is in the cart. The bad news is whenever I try to remove one of the products with a line item property and there is more than one in the cart a message pops up that looks like this (see 2. below) and the page has to be reloaded to continue editing the cart which can be quite the hassle if there are multiple items in the cart with line item properties. The theme my store uses is debut. I have multiple products with line item properties but I'm hoping that once one of them gets the issue resolved I can fix the others as well. I have included part of the code of one of the product templates below (see 3. below). I don't know if I am placing anything where it shouldn't go but any help would be VERY much appreciated.

1. (code I changed is in a burgundy color)

{%- comment -%}
Optional, loop through custom product line items if available

Line item properties come in as having two parts. The first part will be passed with the default form,
but p.last is the actual custom property and may be blank. If it is, don't show it.

For more info on line item properties, visit:
- http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-p...
{%- endcomment -%}

{%- assign properties = 'template ' | split: ' ' -%}
{%- if property_size > 0 -%}
{%- assign properties = item.properties -%}
{%- endif -%}

{%- for p in properties -%}
{%- unless p.last == blank -%}
<li class="product-details__item product-details__item--property{%if property_size == 0%} hide{% endif %}" data-cart-item-property>
<span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span>

{%- comment -%}
Check if there was an uploaded file associated
{%- endcomment -%}
<span data-cart-item-property-value>
{%- if p.last contains '/uploads/' -%}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{%- else -%}
{{ p.last }}
{%- endif -%}
</span>
</li>
{%- endunless -%}
{%- endfor -%}
</ul>

<p class="cart__remove">
<a href="/cart/change?line={{ forloop.index }}&quantity=0" class="text-link text-link--accent" aria-label="{{ 'cart.label.remove' | t: product: item.title }}" data-cart-remove>{{ 'cart.general.remove' | t }}</a>
</p>
</div>
</div>
</td>
<td class="cart__price text-right">

{%- assign hasDiscount = false -%}
{%- if item.original_price != item.final_price -%}
{%- assign hasDiscount = true -%}
{%- endif -%}

 

2.

Screen Shot 2020-12-11 at 3.46.57 AM.png

3. (part where I added code is in a burgundy color)

<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option value="{{ variant.id }}"
{%- if variant == current_variant %} selected="selected" {%- endif -%}
>
{{ variant.title }} {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
</option>
{% endfor %}
</select>

<!--Start custom code block--->


<div class="product-form__item product-form__item--custombdayshirt">
<label for="first-name-8-characters-only">First Name *8 characters only*</label>
<input required class="required" id="first-name-8-characters-only" type="text" name="properties[First Name *8 characters only*]">
</div>

<div class="product-form__item product-form__item--custombdayshirt">
<label for="birthday-number-1-character-only">Birthday Number *1 character only*</label>
<input required class="required" id="birthday-number-1-character-only" type="text" name="properties[Birthday Number *1 character only*]">
</div>

<!--End custom code block--->

{% if section.settings.show_quantity_selector %}
<div class="product-form__controls-group">
<div class="product-form__item">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ section.id }}"
name="quantity" value="1" min="1" pattern="[0-9]*"
class="product-form__input product-form__input--quantity" data-quantity-input
>
</div>
</div>
{% endif %}

 

 

0 Likes