Showing Discounted Price

1
{%- liquid
2
  # Ensure price is defined and handle conversion and discount calculation properly
3
  assign discount_percent = 15
4
  assign discount_amount = price | times: discount_percent | divided_by: 100
5
  assign discounted_price = price | minus: discount_amount
6
7
  # To ensure the price rounds to 16.99, round it down manually if necessary
8
  assign rounded_discounted_price = discounted_price | minus: 0.01 | floor
9
10
  # Format the prices with the money filter
11
  assign money_discounted_price = rounded_discounted_price | money
12
  assign money_price = price | money
13
-%}
14
15
<script type="text/javascript">
16
  var productId = "{{ variant.id }}";
17
18
  /**
19
   * As the customer is opting into and out of subscription
20
   * change the display of the price so that a customer can
21
   * see the regular or discounted price depending on their selection.
22
   */
23
  function handleOptinChange(changedState) {
24
    try {
25
      var regularPriceNode = document.getElementById("regular-price");
26
      var subscriptionPriceNode = document.getElementById("subscription-price");
27
28
      if (productId != changedState.productId) {
29
        return;
30
      }
31
32
      if (changedState.optedIn) {
33
        subscriptionPriceNode.style.display = "block";
34
        regularPriceNode.style.display = "none";
35
      } else {
36
        regularPriceNode.style.display = "block";
37
        subscriptionPriceNode.style.display = "none";
38
      }
39
    } catch (e) {
40
      console.log(e.message);
41
    }
42
  }
43
44
  function checkOptinState() {
45
    try {
46
      /* Subscribe to an optin changed event */
47
      OG.addOptinChangedCallback(handleOptinChange);
48
49
      var productId = "{{ variant.id }}";
50
      var optins = OG.getOptins([productId]);
51
      var regularPriceNode = document.getElementById("regular-price");
52
      var subscriptionPriceNode = document.getElementById("subscription-price");
53
54
      if (optins.length < 1) {
55
        regularPriceNode.style.display = "block";
56
        return;
57
      }
58
59
      subscriptionPriceNode.style.display = "block";
60
    } catch {
61
      regularPriceNode.style.display = "block";
62
    }
63
  }
64
65
  function displayPriceInOffer() {
66
    /**
67
     * Assumes a single offer on the page.
68
     * Can be changed to whatever lookup you want,
69
     * or changed to a loop if multiple offer tags exist on the same page.
70
     */
71
    var offerElement = document.getElementsByTagName("og-offer")[0];
72
    optedInLabel = offerElement.querySelector("og-optin-button span[id='og-label']");
73
    optedOutLabel = offerElement.querySelector("og-optout-button span[id='og-label']");
74
75
    /* Wait until the offer is finished loading */
76
    if (!optedInLabel || !optedOutLabel) {
77
      setTimeout(displayPriceInOffer, 200);
78
      return;
79
    }
80
81
    /* Add the price to the offer label text */
82
    optedInLabel.innerHTML = "<span>"
83
      + document.querySelector("#subscription-price span[data-sale-price]").innerHTML
84
      + "</span> - "
85
      + optedInLabel.innerHTML;
86
87
    optedOutLabel.innerHTML = "<span>"
88
      + document.querySelector("#subscription-price span[data-regular-price] s").innerHTML
89
      + "</span> - "
90
      + optedOutLabel.innerHTML;
91
  }
92
93
  document.addEventListener("DOMContentLoaded", checkOptinState);
94
  document.addEventListener("DOMContentLoaded", displayPriceInOffer);
95
</script>
96
97
<!--
98
  The container which contains the discounted price and
99
  original price strike-through
100
-->
101
<div id="subscription-price" style="display:none">
102
  <span class="price-item price-item--sale" data-sale-price>
103
    {{ money_discounted_price }}
104
  </span>
105
  <span class="price-item price-item--regular" data-regular-price>
106
    <s>{{ money_price }}</s>
107
  </span>
108
</div>
109
110
<!-- The container which contains the regular price -->
111
<div id="regular-price" style="display:none">
112
  <span class="price-item price-item--regular" data-regular-price>
113
    {{ money_price }}
114
  </span>
115
</div>