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

Retired Boards Appdev Extensions
,
1

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.

2

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!

1 Like
3

Thanks, @Liam I will try this approach.

4

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!

5

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

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

6

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