Snippets

Keetrax Kee Subscriptions Theme Tweak (Bootstrap 4)

Updated by Adrian
View revision

File keesubscriptions.template.html Modified

  • Ignore whitespace
  • Hide word diff 
         <div class="col-md-5 col-4 d-sm-block d-none desktop-save">
           <span class="ad-save badge badge-success">Save $<span class="ad-discount"></span> every time</span>
         </div>
-        <div class="col-4 col-sm-3 text-right">
-          <span class="as-low" style="display:none;">As low as:<br /></span>
-          <span class="ad-price h1" id="sub-box-price" style="display:none;"></span>
+        <div class="col-4 col-sm-3 text-right as-low-wrapper" style="display:none;">
+          <span class="as-low">As low as:<br /></span>
+          <span class="ad-price h1" id="sub-box-price"></span>
         </div>
       </div>
       <p class="ad-select-sect">
           // Set the prices in the box
           var adPriceEl = document.querySelector(".ad-price");
           adPriceEl.innerHTML = '$'+dPrice.toFixed(2);
-          $('#sub-box-price').show(500);
-          $('.as-low').show(500);
+          $('.as-low-wrapper').show(500);
         } else {
-          $('#sub-box-price').hide();
-          $('.as-low').hide();
+          $('.as-low-wrapper').hide();
         }
       });
     });
Updated by Adrian
View revision

File keesubscriptions.template.html Modified

  • Ignore whitespace
  • Hide word diff 
           <span class="ad-save badge badge-success">Save $<span class="ad-discount"></span> every time</span>
         </div>
         <div class="col-4 col-sm-3 text-right">
-          <span class="as-low">As low as:<br /></span>
-          <span class="ad-price productpricetext h1"></span>
+          <span class="as-low" style="display:none;">As low as:<br /></span>
+          <span class="ad-price h1" id="sub-box-price" style="display:none;"></span>
         </div>
       </div>
       <p class="ad-select-sect">
     // Set the prices in the box
     var adPriceEl = document.querySelector(".ad-price");
     if ( adPriceEl ) {
-      adPriceEl.innerHTML = '$'+adPrice;
+      adPriceEl.innerHTML = '$'+adPrice.toFixed(2);
     }
 
     // Set the discounts in the select dropdown
       adDiscount[i].innerHTML = maxDiscount;
     }
 
+    // Updates the price in the subscription box
+    document.addEventListener("DOMContentLoaded", function(event) {
+      $('#productextra0').on('change', function(){
+        var dataEl = document.getElementById('keesubscriptions-data');
+        var adSelect = document.querySelector('.ad-select');
+        var price = parseFloat(dataEl.getAttribute('data-productprice'));
+
+        if($('#productextra0').val() != 0) {
+          var discount = parseInt(adSelect.options[adSelect.selectedIndex].getAttribute('data-price').replace('-', ''));
+          var dPrice = price - discount;
+          // Set the prices in the box
+          var adPriceEl = document.querySelector(".ad-price");
+          adPriceEl.innerHTML = '$'+dPrice.toFixed(2);
+          $('#sub-box-price').show(500);
+          $('.as-low').show(500);
+        } else {
+          $('#sub-box-price').hide();
+          $('.as-low').hide();
+        }
+      });
+    });
+
     // Init listeners
 
     // Update the discount with the currently selected option
Updated by Mike Martel
View revision

File keesubscriptions.template.html Modified

  • Ignore whitespace
  • Hide word diff 
   window.keesubscriptions_reload = _init_template;
 
   _init_template();
+  
+  // Reload whenever buying options is reloaded
+  (new MutationObserver(_init_template)).observe(document.getElementById('_jstl__buying_options_r'), { attributes: false, childList: true, subtree: true });
 
   document.addEventListener('click', function (event) {
Updated by Fairnia
View revision

File keesubscriptions.template.html Modified

  • Ignore whitespace
  • Hide word diff 
     <div class="auto-delivery-wrapper card card-body">
       <div class="row">
         <div class="col-md-4 col-sm-5 col-8">
-          <h3><i class="fa fa-undo fa-flip-vertical pr-1"></i> Auto Delivery</h3>
+          <h3><i class="fa fa-undo fa-flip-vertical pr-1"></i><strong> Auto Delivery</strong></h3>
           <span class="d-sm-none ad-save badge badge-success mobile-save">Save $<span class="ad-discount"></span> every time</span>
         </div>
         <div class="col-md-5 col-4 d-sm-block d-none desktop-save">
     </div>
   </div>
   <span id="keesubscriptions-data"
-    data-rrp="[%trim%][@retail@][%/trim%]"
+    data-rrp="[%trim%][%if [@retail@]%][@retail@][%else%][@store_price@][%/if%][%/trim%]"
     data-storeprice="[%trim%][@store_price@][%/trim%]"
     data-productprice="[%trim%][%if [@inpromo@]%][@promo_price@][%else%][@store_price@][%/if%][%/trim%]"
     />
 
     // Set the prices in the box
     var adPriceEl = document.querySelector(".ad-price");
-    adPriceEl.innerHTML = '$'+adPrice;
+    if ( adPriceEl ) {
+      adPriceEl.innerHTML = '$'+adPrice;
+    }
 
     // Set the discounts in the select dropdown
     var foundMax = false;
Updated by Fairnia
View revision

File keesubscriptions.template.html Modified

  • Ignore whitespace
  • Hide word diff 
         </a>
 
         <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>
+          [%content_zone id:'Keesubscriptions-How'%][%end content_zone%]
         </div>
 
       </div>
  2. 1
  3. 2
  4. 3
  5. 4
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.