Home > widget-integration > CartService > processCartItem

CartService.processCartItem() method

Process and format cart item for display Override to add shop-specific fields, transformations, or enrichments

Default processing: - Formats price using shop currency settings - Filters out default/empty variant options - Maintains all original item properties

Common customization scenarios: - Add product badges (new, sale, limited) - Include inventory status - Add estimated delivery dates - Format custom properties for display - Add product recommendations - Include subscription information

Signature:

protected processCartItem(item: Product$2, showCurrencyCodes: boolean): Record<string, unknown>;

Parameters

Parameter

Type

Description

item

Product$2

Raw cart item from Shopify Cart API

showCurrencyCodes

boolean

Whether to include currency codes in formatted price strings

Returns:

Record<string, unknown>

Processed cart item object with formatted fields ready for template rendering

Example 1

Add inventory status

protected processCartItem(item: Product, showCurrencyCodes: boolean) {
  const processed = super.processCartItem(item, showCurrencyCodes);

  // Add inventory status
  const inventory = this.getInventoryStatus(item.variant_id);
  processed.inventoryStatus = {
    available: inventory.quantity > 0,
    quantity: inventory.quantity,
    message: this.getInventoryMessage(inventory),
  };

  return processed;
}

Example 2

Add subscription details

protected processCartItem(item: Product, showCurrencyCodes: boolean) {
  const processed = super.processCartItem(item, showCurrencyCodes);

  // Add subscription information
  if (item.selling_plan_allocation) {
    processed.subscription = {
      active: true,
      frequency: item.selling_plan_allocation.selling_plan.name,
      discount: this.calculateSubscriptionDiscount(item),
    };
  }

  return processed;
}

Example 3

Format custom properties

protected processCartItem(item: Product, showCurrencyCodes: boolean) {
  const processed = super.processCartItem(item, showCurrencyCodes);

  // Format gift message and wrapping
  if (item.properties) {
    processed.giftOptions = {
      hasGiftWrap: Boolean(item.properties._gift_wrap),
      message: item.properties._gift_message,
      from: item.properties._gift_from,
      to: item.properties._gift_to,
    };
  }

  return processed;
}