+<!-- Kee Subscriptions pricing -->
+[%extra_options id:'[@SKU@]'%]
+ [%PARAM *select_option%]
+ [%if [@name@] eq 'Auto-delivery'%]
+ <div class="auto-delivery col my-3">
+ <div class="auto-delivery-wrapper panel panel-default panel-body">
+ <div class="col-md-4 col-sm-5 col-9">
+ <h3><i class="fa fa-undo fa-flip-vertical" style="padding-right:5px;"></i> Auto Delivery</h3>
+ <span class="d-inline-block d-sm-none ad-save badge badge-success">Save $<span class="ad-discount"></span> every time</span>
+ <div class="col-md-5 col-4 d-sm-block d-none">
+ <span class="ad-save badge badge-success">Save $<span class="ad-discount"></span> every time</span>
+ <div class="col-3 text-right">
+ <span class="as-low">As low as:<br /></span>
+ <h1 class="ad-price productpricetext"></h1>
+ <p class="ad-select-sect">
+ <label for="aproductextra[@count@]">Frequency:</label>
+ <select name="extra[@count@]" class="form-control ad-select" id="productextra[@count@]" rel="[@SKU@]">
+ <a role="button" data-toggle="collapse" href="#ad-explain" aria-expanded="false" aria-controls="ad-explain-heading" class="collapsed">
+ <span class="fa-stack ">
+ <i class="fa fa-circle fa-stack-2x"></i>
+ <i class="fa fa-info fa-stack-1x fa-inverse"></i>
+ <span style="text-decoration: underline;">How auto delivery works.</span>
+ <div id="ad-explain" class="panel-collapse collapse p-3" role="tabpanel" aria-labelledby="ad-explain-heading">
+ <p>Select the frequency and your items will be delivered to you as often as you prefer.<br>
+ Auto Delivery isn't a contract, you are free to cancel anytime.</p>
+ <span id="keesubscriptions-data"
+ data-rrp="[%trim%][@retail@][%/trim%]"
+ data-storeprice="[%trim%][@store_price@][%/trim%]"
+ data-productprice="[%trim%][%if [@inpromo@]%][@promo_price@][%else%][@store_price@][%/if%][%/trim%]"
+ <option type="text" class="form-control" value="[@option_id@]" data-price="[@price@]">
+ [%nohtml%][@text@][%end nohtml%]
+<script type="text/javascript" language="javascript">
+ // Don't initialize twice
+ if (typeof window.keesubscriptions_reload !== 'undefined'){
+ // Don't initialise if we're not needed
+ if ( !document.querySelector('#keesubscriptions-data') ) {
+ var selectedIndex = false;
+ function _on_change_option() {
+ var adSelect = document.querySelector('.ad-select');
+ // Store the selectedIndex
+ selectedIndex = adSelect.selectedIndex;
+ var dataEl = document.getElementById('keesubscriptions-data');
+ var adDiscount = document.querySelectorAll(".ad-discount");
+ // Set the savings to the currently selected item
+ for (i = 0; i < adSelect.options.length; i++) {
+ if(i > 0 && i === Number(adSelect.options[adSelect.selectedIndex].value)){
+ adDiscount.forEach((el)=>{
+ el.innerHTML = adSelect.options[adSelect.selectedIndex].getAttribute('data-price').replace('-', '');
+ function _init_template() {
+ var dataEl = document.getElementById('keesubscriptions-data');
+ if (!dataEl || dataEl.getAttribute('data-init')) {
+ dataEl.setAttribute('data-init', true);
+ //In Neto product dashboard - Default option must be "don't select auto delivery"(wording can be different) and autoSavings must have negative numbers
+ var rrp = parseFloat(dataEl.getAttribute('data-rrp'));
+ var storePrice = parseFloat(dataEl.getAttribute('data-storeprice'));
+ var currentPrice = parseFloat(dataEl.getAttribute('data-productprice'));
+ var adSelect = document.querySelector('.ad-select');
+ var choices = Array.prototype.map.call(adSelect.options, (function (node) {
+ return parseFloat(node.getAttribute('data-price') * -1)||0;
+ var maxDiscount = Math.max.apply(Math, choices);
+ var adPrice = (currentPrice - maxDiscount).toFixed(2);
+ var rrpSave = Math.round(((1 - storePrice/rrp)) * 100);
+ // Set the prices in the box
+ var adPriceEl = document.querySelector(".ad-price");
+ adPriceEl.innerHTML = '$'+adPrice;
+ // Set the discounts in the select dropdown
+ for (i = 0; i < choices.length; i++) {
+ if(i > 0 && choices[i] > 0){
+ var discountPercent = (choices[i]/currentPrice).toFixed(2) * 100;
+ adSelect.options[i].innerHTML += ' (save ' + discountPercent + '%)';
+ if (selectedIndex !== false && selectedIndex == i) {
+ adSelect.options[i].selected = true;
+ // Select the option with the largest discount by default
+ if(settings.autoSelect && maxDiscount> 0 && choices[i] === maxDiscount && !foundMax){
+ if ( selectedIndex === false ) { // Only if we don't have a cached selection
+ adSelect.options[i].selected = true;
+ // Hide savings if there are no savings
+ var adSave = document.querySelectorAll(".ad-save");
+ for (i = 0; i < adSave.length; i++) {
+ adSave[i].style.display = 'none';
+ // Select the first option if we have no cached value
+ if ( settings.autoSelect && selectedIndex === false ) {
+ adSelect.options[1].selected = true;
+ // Show the largest discount where applicable
+ var adDiscount = document.querySelectorAll(".ad-discount");
+ for (i = 0; i < adDiscount.length; i++) {
+ adDiscount[i].innerHTML = maxDiscount;
+ // Update the discount with the currently selected option
+ adSelect.addEventListener('change', _on_change_option.bind(this));
+ window.keesubscriptions_reload = _init_template;
+ document.addEventListener('click', function (event) {
+ if (!event.target.matches('.addtocart')) {
+ var autodeliveryMsg = document.querySelector('.auto-delivery-msg');
+ if (autodeliveryMsg === null ) {
+ autodeliveryMsg = document.createElement('div');
+ autodeliveryMsg.classList.add('npopup-body', 'auto-delivery-msg', 'p-3');
+ // var npopupDiv = document.querySelector('.nactivity');
+ var npopupDiv = document.querySelector('.npopup');
+ npopupDiv.appendChild(autodeliveryMsg);
+ var adSelect = document.querySelector('.ad-select');
+ if(adSelect.options[adSelect.selectedIndex].value !== "0" && autodeliveryMsg.innerHTML === ''){
+ autodeliveryMsg.innerHTML = 'Please note: you have selected an auto delivery subscription for this item, to review please <a href="/_mycart">click here</a>.';
+ if(adSelect.options[adSelect.selectedIndex].value === "0"){
+ autodeliveryMsg.innerHTML = '';
+<!-- END of Kee Subscriptions -->
