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 5 (5)

Liam
Shopify Staff
2731 302 783

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
2 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
2 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

We specialize in Optimizing Site Speed, crafting Shopify Themes,
Developing Apps and Integrations, implementing CRO Strategies
As well as providing tailored solutions for Custom Web Development.
rsilvadev
Shopify Partner
2 0 0

@Liam for point number 2, can you please give an example of how we could modify the 'price' and 'totalPrice' via 'useApplyCartLinesChange'?