Cookie-based discount of products before cart and checkout using shareable link (Impact theme)

main-product.liquid

{% comment %}Necessary HTML elements{% endcomment %}
{%- if settings.discount_code_topbanner != blank -%}
  <div class="dCodePDPTopBanner d-none">
    Dein Rabattcode <strong class="dCodeName">testAmount_20</strong> wurde aktiviert. Du sparst <strong class="dCodePercent">20</strong>% auf deinen Einkauf!
  </div>
{%- endif -%}

<span class="savingsBadge"
  data-raw-price="{{ variant.price }}"
  data-raw-comp-price="{{ variant.compare_at_price }}">
  {{- variant.compare_at_price | minus: variant.price | times: 100.0 | divided_by: variant.compare_at_price | round | append: '%' -}}
</span>

theme-variables.js

/* Cookie-based discounts before checkout and cart */
function getCookieCustom(name) {
  var nameEQ = name + '=';
  var ca = document.cookie.split(';');
  for(var i=0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
window.discountMultiplier = 1;
if (getCookieCustom('discount_code')) {
  window.codeName = getCookieCustom('discount_code');
  if (window.codeName.includes('_')) {
    let codeParts = window.codeName.split('_');
    window.codeValue = Number(codeParts[1]);
  } else {
    window.codeValue = 20;
  }
  window.discountMultiplier = (100 - codeValue) / 100;
}

theme.js

// Example of how to apply discount using multiplier in theme javascript on variant:change event
formatMoney(variant["price"]*window.discountMultiplier, currencyFormat)
this.lastChild.replaceWith(document.createRange().createContextualFragment(formatMoney(variant["price"]*window.discountMultiplier, currencyFormat)));

// Detect price HTML elements to apply discount dynamically 
var currencyFormat = window.themeVariables.settings.currencyCodeEnabled ? window.themeVariables.settings.moneyWithCurrencyFormat : window.themeVariables.settings.moneyFormat;
const priceAdjustElements = document.querySelectorAll('.money[data-raw-price]');
// Recalculate savings badge
const savingsBadges = document.querySelectorAll('.savingsBadge');

if (priceAdjustElements && window.discountMultiplier < 1) {
  priceAdjustElements.forEach(el => {
    let rawPrice = Number(el.dataset.rawPrice);
    el.lastChild.replaceWith(document.createRange().createContextualFragment(formatMoney(rawPrice*window.discountMultiplier, currencyFormat)));
  });
}

if (savingsBadges && window.discountMultiplier < 1) {
  savingsBadges.forEach(el => {
    let rawPrice = Number(el.dataset.rawPrice);
    let rawComparePrice = Number(el.dataset.rawCompPrice);
    let savingsPercent = Math.round((rawComparePrice - (rawPrice*window.discountMultiplier)) / rawComparePrice * 100);
    // TODO in case if switch to amount mode
    el.lastChild.replaceWith(document.createRange().createContextualFragment(savingsPercent + '%'));
  });
}

if (getCookieCustom('discount_code')) {
  let dCodePDPTopBannerEl = document.querySelectorAll('.dCodePDPTopBanner');
  let dCodeBadgeEl = document.querySelectorAll('.dCodeBadge');
  let dCodeNameEl = document.querySelectorAll('.dCodeName');
  let dCodePercentEl = document.querySelectorAll('.dCodePercents');

  if (dCodePDPTopBannerEl && codeValue && codeName) {
    dCodePDPTopBannerEl.forEach(bnr => {
      bnr.classList.remove('d-none');
    });
    dCodeBadgeEl && dCodeBadgeEl.forEach(badge => {
      badge.classList.remove('d-none');
    });
    dCodeNameEl && dCodeNameEl.forEach(cnm => {
      cnm.innerHTML = codeName;
    });
    dCodePercentEl && dCodePercentEl.forEach(prcnt => {
      prcnt.innerHTML = codeValue;
    });
  }
}