Shopify Functions Addon Price

Shopify Plus
, , ,
1

With Shopify Functions, is there a way to achieve the follow functionality?

  • Product titled “Red pen” with one singular variant, priced at $0.43
  • When you add 100x of this product to cart, line item total is $43.00 (nothing special going on here)
  • When you add 100x of this product to cart with line item property “Rush Printing” with value “Yes”, line item total should be same as above but increases by a flat rate of $40.00 (total in this example should be $83.00. The Math logic behind this should be like ((“unit price” × “quantity”) + $40.00)
  • User should be able to change quantity of the “Red Pen” in the cart and prices reflect, e.g. if you change from 100 to 101, total should be $83.43

I thought the Cart Transform API would be a good fit for this but I can’t seem to achieve this, so far I’ve tried:

  • Update Operation - This doesn’t work because you can only change the line item price via “price.adjustment.fixedPricePerUnit.amount” which changes the line item unit price and not the overall line price. I need to add a fixed price on top of final price e.g. ((“unit price” × “quantity”) + $40.00) but I can only seem to achieve ((“unit price” + $40.00) × “quantity”). There is a slight workaround here where I divide $40.00 by the line item quantity like ((“unit price” + ($40.00 / “quantity”)) × “quantity”) which works but there’s rounding issues with odd quantity numbers

  • Expand Operation - I tried using this to expand the line item into a dynamic bundle with two items (“Red Pen” and “Rush Printing”) but I couldn’t get this to work as it seems like the quantity of “Red Pen” can’t be changed by the user once it’s in the cart.

Any advice would be greatly appreciated as I feel like I’m banging my head against a wall here.

2

Hi @tomblanchard ,

Why not just create a variant called “Rush Printing” with a flat rate of $40 and make your life easy. It’s very confusing to the shopper that they see the line price change with + $40 on the same line. How do you plan on getting the message across that there is an extra cost of $40 in the cart for “Rush Printing”. Also think of order edits how would it be possible to omit or refund a rush printing when using cart transform API? I think the real use case for cart transform is volume based pricing or bundling items into a single new price. What you have is an add-on item and Shopify can handle that natively.

Here’s an another workaround, use Shopify AJAX Cart API . Create the variant as I mentioned, then include a snippet in the cart template to add this variant when the line property is set to “yes”.

3

Hey @AchieveApplabs , thanks for chiming in.

For context, the project I’m working on already handles it like how you described:

  • Customer goes to PDP and uses the product form to check “Rush printing?” checkbox and add to cart
  • Behind the scenes, two variants are added to cart “Red pen” and “Rush printing” via AJAX and I set a common line item property to each to relate them to each other

I wanted to refactor this so the addons are handled via Functions because the AJAX method is fragile for a few different reasons:

  • Tech-savvy customers can use the dev tools console to remove the addon product from their cart via AJAX
  • Network request errors, e.g. one variant can be added to cart and another fails
  • Inventory issues, sometimes the AJAX request will fail if the customer tried to add a high number to cart and there’s not enough inventory available. This will result in just the “Rush printing” variant added to cart

I’ve since realised that I can achieve my desired functionality via a Checkout UI Extension which automatically adds/removes addon products depending on line item properties. It’s all handles outside the theme code and within the Function so it’s much more stable.

Cheers, Tom.

1 Like