Shopify产品自定义附加费用：购物车移除异常问题

Hey there, let's dig into that cart removal issue you're facing with your Shopify engraving add-on. I’ve run into similar problems before, so here’s what’s likely going wrong and how to fix it:

The core issue almost always boils down to missing explicit linkages between your main product and the $25 engraving add-on when cart updates happen. Right now, you’re copying line item properties, but Shopify doesn’t inherently treat these two items as connected. So when a user removes one, the other sticks around—causing mismatched pricing or leftover customizations.

1. Add a Unique Linking Property to Both Items #

First, we need a way to explicitly tie the engraving add-on to its parent main product. When you add the engraving item to the cart, include a hidden property that stores the main product’s variant ID (or a unique identifier). This lets us easily find the paired item later.

Example code for adding the engraving item:

// Replace with your actual variant IDs and selected values
const MAIN_PRODUCT_VARIANT_ID = '123456789';
const ENGRAVING_ADDON_VARIANT_ID = '987654321';

const engravingAddon = {
  id: ENGRAVING_ADDON_VARIANT_ID,
  quantity: 1,
  properties: {
    'Font Style': document.getElementById('font-select').value,
    'Custom Text': document.getElementById('custom-text').value,
    'Symbols': document.getElementById('symbol-select').value,
    // Hidden property to link to main product
    '_linked_main_product_id': MAIN_PRODUCT_VARIANT_ID
  }
};

// Add to cart via Shopify's AJAX API
Shopify.addItem(engravingAddon);

Don’t forget to also add this _linked_main_product_id property to your main product’s line item properties when the checkbox is checked—this keeps the connection bidirectional.

2. Listen for Cart Updates to Sync Removals #

Shopify triggers a cart:updated event whenever the cart changes (like an item being removed). We can use this to automatically remove the paired item if one is deleted.

Add this script to your theme (ideally in theme.liquid or your cart template):

document.addEventListener('cart:updated', function(event) {
  const cartItems = event.detail.items;
  
  // Separate engraving add-ons and main products
  const engravingItems = cartItems.filter(item => item.properties._linked_main_product_id);
  const activeMainProductIds = cartItems.map(item => item.variant_id.toString());

  // Remove engraving add-ons if their main product is gone
  engravingItems.forEach(addon => {
    if (!activeMainProductIds.includes(addon.properties._linked_main_product_id)) {
      Shopify.removeItem(addon.key);
    }
  });

  // Optional: Clear engraving properties from main product if addon is removed
  cartItems.forEach(mainItem => {
    const hasMatchingAddon = engravingItems.some(addon => 
      addon.properties._linked_main_product_id === mainItem.variant_id.toString()
    );
    if (!hasMatchingAddon && mainItem.properties['Font Style']) {
      // Clear engraving properties from main product
      const updatedProps = {...mainItem.properties};
      delete updatedProps['Font Style'];
      delete updatedProps['Custom Text'];
      delete updatedProps['Symbols'];
      delete updatedProps['_linked_main_product_id'];
      
      Shopify.updateItem(mainItem.key, { properties: updatedProps });
    }
  });
});

3. Handle Checkbox Unchecks Directly #

When a user unchecks the engraving checkbox on the product page, make sure you remove both the add-on and clear the main product’s engraving properties (if it’s already in the cart):

document.getElementById('engraving-checkbox').addEventListener('change', function(e) {
  if (!e.target.checked) {
    Shopify.getCart(function(cart) {
      // Find and remove the engraving add-on
      const engravingAddon = cart.items.find(item => 
        item.properties._linked_main_product_id === MAIN_PRODUCT_VARIANT_ID
      );
      if (engravingAddon) {
        Shopify.removeItem(engravingAddon.key);
      }

      // Clear properties from main product if present
      const mainProduct = cart.items.find(item => 
        item.variant_id.toString() === MAIN_PRODUCT_VARIANT_ID
      );
      if (mainProduct) {
        const cleanedProps = {...mainProduct.properties};
        ['Font Style', 'Custom Text', 'Symbols', '_linked_main_product_id'].forEach(key => {
          delete cleanedProps[key];
        });
        Shopify.updateItem(mainProduct.key, { properties: cleanedProps });
      }
    });
  } else {
    // Your existing logic to add the add-on and set properties
  }
});

4. Verify Shopify Cart Merging Behavior #

Double-check that your engraving add-on product has a unique variant ID that won’t get merged with other items. If Shopify detects identical line items (same variant + same properties), it’ll merge their quantities—so ensuring the add-on is a distinct variant prevents this from breaking your linkage.

Testing this thoroughly is key: try adding the engraving, removing the main product, removing the add-on, and unchecking the checkbox to make sure all scenarios sync correctly.

内容的提问来源于stack exchange，提问作者Matt Kersner