snippet-gf-discount-code-updated.liquid

{%comment%}
#############################################
#  Mohamed El-Ghorfi Discount Code on Cart  #
#                  [UPDATED]                #
#############################################
# Paypal Me: https://paypal.me/elghorfimed  #
#              Buy Me A Coffee:             #
#    https://www.buymeacoffee.com/elghorfi  #
############################################# 
#           elghorfi.med@gmail.com          #
#############################################
{%endcomment%}

<style>
  .cart-sidebar-discount {
    display: flex;
    flex-direction: column;
    width:300px;
    margin: 20px auto;
  }
  .cart-sidebar-discount input {
    margin-top:20px;
    background: #eee;
    border: 1px solid #eee;
    height:50px;
    outline: none;
    font-size: 18px;
    letter-spacing: .75px;
    text-align: center;
  }
  #apply-discount-btn {
    background-color: #000;
    color:#fff;
    border: 0;
    height: 60px;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .75px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }
  span.applied-discount-code-value>small {
    background: #eee;
    padding: 0px 10px;
    color: #000;
    font-weight: bold;
    border-radius: 20px;
  }
  .loader {
    border: 5px solid #f3f3f3;
    border-top: 4px solid #000;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin .5s linear infinite;
  }
  #discount-code-error {
    background: #ff00004f;
    color: #e22120;
    padding: 5px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1;
  }
  .applied-discount-code-wrapper {
    display: none;
    background: #ddd;
    padding: 3px 6px;
    border-radius: 25px;
  }
  .applied-discount-code-value {
    font-size: 13px;
    text-transform: uppercase;
  }
  
  #discount-code-error:empty {
    display: none;
  }
  .applied-discount-code-value:empty+button {
    display: none;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

<div class="cart-sidebar-discount">
  <span id="applied-discount-code">
    Discount Code:
    <span class="applied-discount-code-wrapper">
      <span class="applied-discount-code-value"></span>
      <button id="clear-discount-btn">X</button>
    </span>
  </span>
  <small id="discount-code-error"></small>
  <input type="text" id="discount-code-input" autocomplete="on" value="">
  <button id="apply-discount-btn">APPLY</button>
</div>


<script>
document.addEventListener("DOMContentLoaded", function(event) { 
  let clearBtn = document.querySelector("#clear-discount-btn");
  let applyBtn = document.querySelector("#apply-discount-btn");
  let discountCodeError = document.querySelector("#discount-code-error");
  let discountCodeWrapper = document.querySelector("#applied-discount-code .applied-discount-code-wrapper");
  let discountCodeValue = document.querySelector("#applied-discount-code .applied-discount-code-value");
  let discountCodeInput = document.querySelector("#discount-code-input");
  let totalCartSelector = document.querySelector(".cart__subtotal .money"); // Total Cart Selector to update the total amount. 
  let authorization_token;
  
  let checkoutContainer = document.createElement('div');
  document.body.appendChild(checkoutContainer);

  if (localStorage.discountCode) applyDiscount( JSON.parse(localStorage.discountCode).code);
  if(applyBtn)
  applyBtn.addEventListener("click", function(e){
    e.preventDefault()
    applyDiscount(discountCodeInput.value);
  });

  if(clearBtn)
  clearBtn.addEventListener("click", function(e){
    e.preventDefault()
    clearDiscount();
  });

  function clearDiscount() {
    discountCodeValue.innerHTML = "";
    discountCodeError.innerHTML = "";
    clearLocalStorage();
    fetch("/discount/CLEAR");
  }

  function clearLocalStorage() {
    if(discountCodeWrapper) discountCodeWrapper.style.display = "none";
    if(totalCartSelector) totalCartSelector.innerHTML = JSON.parse(localStorage.discountCode).totalCart;
    localStorage.removeItem("discountCode");
  }

  function applyDiscount(code) {
    if(applyBtn) {
      applyBtn.innerHTML = "APPLYING <div class='loader'></div>";
      applyBtn.style.pointerEvents = "none";
    }
    fetch("/payments/config", {"method": "GET"})
    .then(function(response) { return response.json() })
    .then(function(data) {
        const checkout_json_url = '/wallets/checkouts/';
        authorization_token = btoa(data.paymentInstruments.accessToken)
        fetch('/cart.js', {}).then(function(res){return res.json();})
        .then(function(data){

        let body = {"checkout": { "country": Shopify.country,"discount_code": code,"line_items": data.items, 'presentment_currency': Shopify.currency.active } }
        fetch(checkout_json_url, {
          "headers": {
            "accept": "*/*", "cache-control": "no-cache",
            "authorization": "Basic " + authorization_token,
            "content-type": "application/json, text/javascript",
            "pragma": "no-cache", "sec-fetch-dest": "empty",
            "sec-fetch-mode": "cors", "sec-fetch-site": "same-origin"
          },
          "referrerPolicy": "strict-origin-when-cross-origin",
          "method": "POST", "mode": "cors", "credentials": "include",
          "body": JSON.stringify(body)
      })
      .then(function(response) { return response.json() })
      .then(function(data) {
        console.log(data.checkout);
        if(data.checkout && data.checkout.applied_discounts.length > 0){
          let discountApplyUrl = "/discount/"+code+"?v="+Date.now()+"&redirect=/checkout/";
          fetch(discountApplyUrl, {}).then(function(response) { return response.text(); })
          if(discountCodeWrapper) discountCodeWrapper.style.display = "inline";
          if(discountCodeError) discountCodeError.innerHTML = "";
          if(discountCodeValue) discountCodeValue.innerHTML = data.checkout.applied_discounts[0].title + " (" + data.checkout.applied_discounts[0].amount + ' ' + Shopify.currency.active + ")";
          let localStorageValue = {
            'code': code.trim(),
            'totalCart': data.checkout.total_line_items_price
          };
          localStorage.setItem("discountCode", JSON.stringify(localStorageValue));
          if(totalCartSelector) totalCartSelector.innerHTML = "<s>" + data.checkout.total_line_items_price + "</s>" + data.checkout.total_price;
        }else{
          if(discountCodeValue) discountCodeValue.innerHTML = "";
          clearLocalStorage();
          if(discountCodeError) discountCodeError.innerHTML = "Please Enter Valid Coupon Code."
        }
      }).finally(function(params) {
        if(applyBtn){
          applyBtn.innerHTML = "APPLY";
          applyBtn.style.pointerEvents = "all";
        }
    });
    });
  });
}

});
</script>

As far as I can tell the /wallets/checkouts/ endpoint seems some sort of pre-flight validation check to see if the discount code can be applied

Something like that. In my testing, it seems it can be more than that though. For instance, you could verify a shipping discount with /wallets/checkouts/ to pre-apply it in cart page, whereas /checkout/ won't let you know if this shipping discount even exist (since shipping discount can't be outputed with liquid, while order and product discounts can). Less popular, but nevertheless can't be ignored.

I also have not tried gift card codes. Those are technically processed as payment methods and not discount codes, so they can't be outputed with liquid in cart page. If /wallets/checkouts/ can verify those, then it's one more thing /checkout/ can't do. I have no idea, but that's something worth checking.

And lastly, I have sometimes noticed issue where fetching /checkout/ + re-rendering cart section can be prone to error when called multiple times in a row. My guess is that Shopify starts caching the cart section after a while, and at some point it will not be in sync with newly added or removed discounts, it's confusing when it happens. To edge against this scenario, the cart could be updated (line item quantity, random cart attribute or cart note). I have not checked if fetching /wallets/checkouts/ before fetching /checkout/ avoids this caching issue.

Those are a few things I have noticed and still need to investigate more, let me know if you find out more, it's a tedious process for sure ;)

@ddegroot1985 what's the reason for this parameter &=${Date.now()}?

This worked flawlessly for me on Dawn 14.0.0. However, the cart amount is not updated to factor the coupon discount unless the page is refreshed, any workaround for that? Same for when the coupon is deleted, the cart value still shows the discounted amount until the page is refreshed.

Hi @elghorfi This works perfectly fine on our store but the problem is we lately had an issue on mobile device. When user inputs discount code and clicks apply, nothing happens. This only happens on mobile devices, but works fine on desktop. It's so weird. Please help

hey everyone,

Thank you for contributing to this.
If you need any assistance, please reach out to me, so I can help you with that,

This works partially with Dawn 14. The code is applied, but I see 403 being returned by the call to /cart/change and /checkouts/cn/Z2NwLWV1cm9wZS13ZXN0MTowMUoyQkZGWjlCODZSRVpXVFE5NzNFR1lNRA?v=1720531825116.

The coupon removal doesn't work at all and a 403 is seen here as well, /checkouts/cn/Z2NwLWV1cm9wZS13ZXN0MTowMUoyQkZGWjlCODZSRVpXVFE5NzNFR1lNRA?discount=

Also, the coupon keeps coming back. Go to checkout and remove the coupon. Click on the cart icon, no coupon. Refresh the page and the coupon comes back.

And the coupon can take up to 3 or 4 attempts to finally stick!

@OS4 I found a solution for the coupon removal :

Replace :
fetch("/checkout?discount=%20");

By this :
fetch("/discount/CLEAR");

To see the changes u have to refresh page eveytime can anyone have solved this issues.can someone please guide for this problem

@ThomasB-Sunology Thank you for the suggestion, I've updated the gist.
@anuragku77 you need to adapt the script to match your cart page layout/code

As a heads-up, working to integrate the new multi-discounts on the above script so you can combine discount codes.
If you have any suggestions, you can reach out. Or leave a comment below.

@ThomasB-Sunology Thanks for your contribution! Do you have a link to the documentation you are using for : fetch("/discount/CLEAR");

ps: it works for me :)

@Raysbaelo Actually I found this blog article. It's not always CLEAR we need to pass a non-existing discount code :

https://community.shopify.com/c/technical-q-a/how-to-fully-remove-a-discount-code-from-a-cookie-with/m-p/2514785/highlight/true#M154983