Is there any way to apply discount for pre-purchase order with checkout ui extension

caoyuanqi
Shopify Partner
4 1 0

Hi, I am working on a project developing a checkout ui extension for pre-purchase. I am wondering is there any way to apply a discount to the new added item. I am following the example https://shopify.dev/docs/apps/checkout/product-offers/pre-purchase/getting-started,

 

const result = await applyCartLinesChange({
   type: 'addCartLine',
   merchandiseId: variants.nodes[0].id,
   quantity: 1,
});

I want to apply some discount to the new added item as a pre-purchase upsell.


In post purchase extension, I can pass discount object.

/** Requests a variant to be added to the initial purchase. */
interface AddVariantChange {
  /** A fixed value of "add_variant". */
  type: 'add_variant';
  /** The product variant to add. */
  variantId: number;
  /** The quantity of the specified variant. */
  quantity: number;
  /** Refer to [ExplicitDiscount](/api/checkout-extensions/extension-points/api#explicitdiscount). */
  discount?: ExplicitDiscount;
}

But I can not find similar thing in `useApplyCartLinesChange` hook.

 

Thanks.

Replies 4 (4)
Liam
Shopify Staff
Shopify Staff
1882 202 577

Hi Caoyuanqi,

 

As you may have discovered, for the pre-purchase phase of the checkout UI extension, there is no built-in mechanism to directly apply discounts to the new added items with the `useApplyCartLinesChange` hook provided by the Shopify App Bridge React library.  However, you should still be able to achieve this by implementing it manually in your extension.

 

The general process to apply a discount to a newly added item as a pre-purchase upsell would be:

1. Calculate the discounted price: Determine the discounted price for the item based on your specific logic or rules. This could involve applying a percentage or fixed discount, or any other custom calculation.

2. Modify the line item: Update the `price` or `totalPrice` of the line item within the `useApplyCartLinesChange` hook's callback function to reflect the discounted price. You can access and modify the line item's properties within the `cartLinesChange` callback.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

caoyuanqi
Shopify Partner
4 1 0

Thanks, @Liam I will try this approach. 

ajaysinghrokt
Shopify Partner
1 0 0

Hi @Liam, thanks for your answer. I tried the approach that you suggested but cannot find a way to update the `price` or `totalPrice` in the callback function. The only properties that I can change according to merchandise ID, quantity, attributes and sellingPlanID. Could you give some more information your suggestion?

```

export interface CartLineUpdateChange {
/**
* An identifier for changes that update line items.
*/
type: 'updateCartLine';

/**
* Line Item ID.
* @example 'gid://shopify/CartLine/123'
*/
id: string;

/**
* The new merchandise ID for the line item.
* @example 'gid://shopify/ProductVariant/123'
*/

merchandiseId?: string;
/**
* The new quantity for the line item.
*/
quantity?: number;

/**
* The new attributes for the line item.
*/
attributes?: Attribute[];

/**
* The identifier of the selling plan that the merchandise is being purchased
* with or `null` to remove the the product from the selling plan.
*/
sellingPlanId?: SellingPlan['id'] | null;
}

```

 

Thanks!

Anupsaund
Shopify Partner
1 0 0

Hi folks, I'm looking to update the line total too using applyCartLinesChange.

 

@Liam - is it possible to influence the cart line total?

DTC Ecommerce Store Development - in Shopify Plus