Discount code on Cart page

[ChrisW3]

trying to add a discount field to cart page on this site: https://www.physioworldshop.co.uk/cart

I want it aligned right on desktop and I want it to update the cart price dynamically after clicking apply. please advise.

{% 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: #00aeef;
    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>

[DaisyVo]

Hi @ChrisW3 

Could you please let me know how can I get the discount code? We need to check the settings there as well. 

Or do you just simply want the filed in the cart page where customer can apply their discount code? 

Looking forward to hearing from you soon. 

Best,

Lydia

[ChrisW3]

The discount code is SAVE30 on these products: https://www.physioworldshop.co.uk/collections/electric-couches

[DaisyVo]

Hi @ChrisW3 

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (min-width: 768px){
.cart-row:has(.cart-sidebar-discount) {
    position: relative !important;
}
span#applied-discount-code {
    position: absolute !important;
    right: 0;
}
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.