CODEWITHSUNDEEP
shopifyliquid
Matt Kersner
Matt Kersner

Reputation: 1

Shopify - Product Customization with Additional Cost - Cart Removal Issue

I'm working on a Shopify store that wants engraving added to their products for a $25 up-charge. I have set it up so that a checkbox on the product page triggers an engraving dropdown where the user can customize the engraving (type style, text, and symbols) and all of those values are passed as line item properties. The checkbox also adds an additional engraving product to the cart that costs $25 to account for the up-charge and has the same exact line item properties. I realize that both products having the same exact line item properties is a perfect way for them to be linked to ensure that if the original product is removed from the cart, the linked engraving product will be removed as well. But I can't for the life of me figure out the way to accomplish this.

I wrote this Liquid code which effectively removes the engraving product from the cart if it is the only item in the cart. 

{% if cart.item_count == 1 %}
  {% for item in cart.items %}
    {% if item.title == 'Custom Engraving' %}
      <script>
        $.post('/cart/change.js', { quantity: 0, id: {{ item.id }} });
        $("#cart_form").submit();
      </script>
    {% endif %}
  {% endfor %}
{% elsif cart.item_count > 1 %}
  Please help with the code that supposed to go in here
{% endif %}

But what if there are 2 engraved jewelry products in the cart? If a user removes one of them, they will be left with 2 $25 engraving products and only one jewlery product. I need to automatically remove the associated engraving product for any jewelry product that is removed from the cart. Please help!

Note: A user seems to have a way to do this based on a couple forum answers I found. This one (https://ecommerce.shopify.com/c/ecommerce-design/t/conditional-logic-for-variants-based-on-line-item-properties-264417) he says " In the cart itself, the only thing you need to do is ensure that if the product itself is removed, you also remove the customization product. No biggy. That is a simple pattern and you can jazz it up too. Group a product with a customization through the properties for example, ensuring the two are "glued" together." That's exactly what I need! But unfortunately he doesn't share the simple pattern he's speaking of. He seems to have answered it on stack overflow as well (Chang the product price when custom checkbox is selected in Shopify) and again doesn't reveal the simple pattern he refers to.

Thanks in advance!

Upvotes: 0

Views: 1901

Answers (1)

Dave B
Dave B

Reputation: 3248

Short Answer:

Make the customization products different by adding a hidden property to make them unique.

Longer Answer:

When adding the product to the cart, generate a unique value - using the current date/time (via Date.now()) is usually a good choice. When adding the product to the cart, make sure this property is added as well (probably via hidden input).

Make sure that the name of extra property is prepended with an underscore - so something like '_uniqueID' - Shopify's checkout page knows to hide any line-item properties that have an underscore as their first character

Finally, make sure your theme knows to not display underscored properties in the cart. My favourite way to do this is by adding the following line at the beginning of your properties-printing loop (usually written as 'for p in item.properties')

{% if p.first.first == '_' %}{% continue %}{% endif %}

Now you have a unique ID field as a line-item property that only you can see, and can use that field to synchronize quantities, etc. Huzzah!

Upvotes: 0

Related Questions