Applying discount codes in the cart (prior to checkout)

Technical Q&A
1

We’ve been asked to add an (Apply) Discount Code text input to the client’s side cart. I’ve done some discovery and found a couple apps what say they support this. On the other hand, we naturally want to be thorough and see if we can do it ourselves.

I created a discount and used apply via link.

https://help.shopify.com/en/manual/discounts/managing-discount-codes#promote-a-discount-using-a-shareable-link

When I get to the actual checkout page, the discount shows up (as it should).

Then I added a get cart (via AJAX) to the side cart (prior to checkout):

https://shopify.dev/docs/themes/ajax-api/reference/cart#get-cart-js

And dump that via console.log() and the cart object returned doesn’t show anything about a discount. No code. Nuttin’.

Yet, if I continue on to checkout, the discount shows up again / still.

Based on some additional research, evidently there’s no way to apply a coupon code via AJAX. The last discussion I found was about a year old. Is there still no relatively easy way to apply a discount via Ajax?

All that being said, if there are no other options, we’ll go the app route. Does anyone have any suggestions for such apps?

2 Likes
2

Bump. Anyone? Anything?

3

Dear friend, I’m struggled in the same situation. Could you find a solution for such problem? I need to apply discount in ajax cart so it’s showed on cart like automatic discounts are.

4

Create a new code snippet with cart-apply-discount

{% comment %}
  Replace the text below with the handle of your add-on product.
{% endcomment %}

{% assign product = all_products['put-your-product-handle-here'] %}

{% unless cart.item_count == 0 or product.empty? or product.variants.first.available == false %}

  {% assign variant_id = product.variants.first.id %}

  

{% endunless %}

Include the new snippet in your cart.liquid template

{% include 'cart-discount' %}
1 Like
5

Thanks for replying @SantoshKori .

I can’t see excatly in your code where are you applying a discount code. Can you explain it to me?

As I can see, you’re only updating quantity of an item.

Thnaks again.

2 Likes
6

Shopify doesn’t allow to process discounts in checkout directly. There is no API to apply a discount code. There is workaround with making ajax call to checkout page but it’s quite complicated.

I was searching for liquid code to achieve that and stumbled upon an app. It works perfectly with cart drawer and cart page. Here is how my drawer now looks like:

Screen Shot 2020-09-21 at 19.22.03.png
Screen Shot 2020-09-21 at 19.22.03.png1594×1036 121 KB

https://apps.shopify.com/discount-in-cart

7

Late to the thread but I’m implementing this as well. Does the checkoutdiscountcodeapplyv2 mutation of the StoreFront API not work for this? I believe the StoreFront API can be used on the frontend of a normal Shopify website without a Plus subscription.

https://shopify.dev/docs/storefront-api/reference/mutation/checkoutdiscountcodeapplyv2

8

As far as I understand the app should be a sales channel. You you are making a private app it’s okay. But if you made a public app you may face with the limitation of the appstore. As the sales channel should not only create checkouts/add discounts there but also publish products at the different platforms.

9

If you’re only looking for a way to display a discount input, then you can add a regular input field with the name ‘discount’ to the cart’s element. This works on the cart page as well as a cart popup, as long as the form action posts into the checkout.

E.g. <input name=“discount” type="text>

The tricky part is if you want to check that the coupon is applicable to the cart and display the discounted amount. There is no easy way to do that yourself at this time, which is why apps exist to handle this functionality. There are many apps that apply a discount on the cart page. They differ in appearance as well as supporting functionality and price. The app we’ve developed for this purpose is https://apps.shopify.com/discount-on-cart-pro. It has a 14-day free trial so you can give it a shot risk-free.

1 Like
10

This works, but the Storefront API does not with the the cart.js endpoint, so it’s useless.

11

Hi, there is a simple way to add discount codes before checking out, this is what I do in my store:
In the cart-drawer.liquid file I add an input with the name of the previously created discount and at the time of checking out it should already appear applied.

this is what you need?

1 Like
12

This wont work with the /cart.js endpoint, only the GraphQL endpoints, which aren’t a cart, they’re a checkout.

13

This JavaScript snippet should allow you to apply the discount to the current session.

// Setup the Apply Discount Code URL
let shopDomain = "somesite.myshopify.com";
let discountCode = "MYDISCOUNTCODE123";
let discountApplyUrl = "https://" + shopDomain + "/discount/" + discountCode;
	
// Applies discount using hidden iframe to the checkout session
let i = document.createElement('iframe');
i.style.display = 'none';
i.onload = function() { i.parentNode.removeChild(i); };
i.src=discountApplyUrl;
document.body.appendChild(i);
7 Likes
14

Hi Zanath,

We just found your solution, the main issue is that we are encountering a problem with the implementation:

Refused to frame ‘https://some-site.myshopify.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘none’”.

Have you encountered the same issue?? We keep reading the documentation and could not find a solution.

Thanks in advance!

2 Likes
15

It doesnt work any more.

16

One thing you could consider is to add the discount code to Shopify’s discount cookie via JavaScript. This will then be auto-applied when you checkout (if your cart is eligible).

document.cookie = 'discount_code=YOURDISCOUNTCODE';
1 Like
17

When

/cart?discount=ABC123

stopped working this method was a good replacement, thanks

1 Like
18

Thanks @Zanath . But is there a way to apply multiple discounts with this link ?

19

The checkout permalink works with multiple discount codes separated by commas, e.g. ?discount=DISCOUNT1,DISCOUNT2. If you append this to your cart form action (e.g. /cart?discount=DIS1,DIS2`), when submitting cart to proceed to checkout, it will apply the discounts.

For the /discount/ solution, I tried /discount/DISCOUNT1+DISCOUNT2 and /discount/DISCOUNT1,DISCOUNT2 and /discount/DISCOUNT1&DISCOUNT2 but none worked, so I suspect this solution is only for singular discounts.

Same goes for the discount_code cookie, singular only in my testing.

The above is unconfirmed from Shopify, just via experimenting.

1 Like
20

I’m also curious about that. This seems undocumented so use with caution, but it seems this way we can apply a manual discount code to the cart page with a simple client-side fetch request:

fetch('/discount/discount-1').then(async () => {
  // refresh cart here
});

But I too can’t figure out a way to make this call with combined discounts (tried a few things as well). It seems only possible to combine in checkout page.

1 Like