Applying discount codes in the cart (prior to checkout)

mfs-mindsize
Excursionist
20 0 5

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-shar...

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?

 

 

 

 

 

mfs-mindsize
Excursionist
20 0 5

Bump. Anyone? Anything?

0 Likes
yasmim
New Member
2 0 1

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.

0 Likes
SantoshKori
Shopify Partner
3 0 0

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 %}

  <script>
  (function($) {

    var cartItems = {{ cart.items | json }},
        qtyInTheCart = 0,
        cartUpdates = {};

    for (var i=0; i<cartItems.length; i++) {
      if ( cartItems[i].id === {{ variant_id }} ) {
        qtyInTheCart = cartItems[i].quantity;
        break;
      }
    }

    if ( ( cartItems.length === 1 ) && ( qtyInTheCart > 0 ) ) {
      cartUpdates = { {{ variant_id }}: 0 }
    }
    else if ( ( cartItems.length >= 1 ) && ( qtyInTheCart !== 1 ) ) {
      cartUpdates = { {{ variant_id }}: 1 }
    }
    else {
      return;
    }

    var params = {
      type: 'POST',
      url: '/cart/update.js',
      data: { updates: cartUpdates },
      dataType: 'json',
      success: function(stuff) { 
        window.location.href = '/cart';
      }
    };

    $.ajax(params);

  })(jQuery);
  </script>

{% endunless %}

Include the new snippet in your cart.liquid template

{% include 'cart-discount' %}

 

0 Likes
yasmim
New Member
2 0 1

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.

AdrianExpert
New Member
10 0 0

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

 

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

0 Likes
0x15f
New Member
1 0 0

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

0 Likes
AdrianExpert
New Member
10 0 0

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.

 

0 Likes
ShopDoctors
Tourist
19 0 0

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 <form> 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.

0 Likes