Porting Javascript Calculator from 1 theme to another (something broke)

Store Design
, , ,
1

Heya.

Need a bit of help, I’ve been tasked with finishing a website construction project from my employer when the company they had originally hired on fell apart and could not finish the site. I’ve got 7 years of Shopify experience so I know the UI, how to edit code, majority of the basic and even some advanced elements, however I know nothing about Javascript itself.

The previous company had designed and setup a fairly nice calculator in the theme they were designing in, when I took over the page I wanted to use an official Shopify theme and had hoped I could just copy the files over and have it work. Sadly that is not the case.

New theme is: Eurus

Old theme was something called ezone

https://anseeuwbros.myshopify.com/

Visitor password is “seitsa”

https://anseeuwbros.myshopify.com/pages/calculate

In the ezone theme the calculator fully works, filling out the measurements auto populates the correct answer and the copy buttons work as intended. As far as I can tell the theme only had 3 code bits that made it work (2 asset files, 1 was the javascript code calculations itself, the other was an asset file that determined the buttons/tab visuals). The last code page was just the calculator page itself. I copied all 3 to the new theme, named them correctly, set the code file types properly and still cannot get it to work.

I suspect the original theme has some code or assets that I can’t find and because those are missing in the new Eurus Theme thats why its not running the calculations, but for the love of me I can’t narrow down the search. This is also why the tabs aren’t actually tabs and the radius section is just placed underneath instead of in the correct tab, I assume the old code had tabs defined in a support file or something of that nature. Any javascript masters got a quick minute to look it over and give me some pointers?

https://drive.google.com/drive/folders/1k7Vx8ZYOKhjMrEPn2xuYs3aZ3Des5YAr?usp=drive_link

^^ The 3 code files in notepad format

Much appreciated!

2

The calculator JS code require jQuery. It was included in most old themes and most new themes do not use it anymore.

Ideally, the code should be modified to not require jQuery, but this would need some JS knowledge.

In the meantime, you should find this line in your code:

and insert a line like this right above:
3

Hi Flavalicious,

The issue was due to missing Bootstrap and JS files in the old theme using jQuery, which the Eurus theme doesn’t include. You need to edit:

assets/ans-calculator.js

add line 2-56

document.addEventListener("DOMContentLoaded", () => {
  if(document.querySelectorAll('.ans-input').length > 0) {
  	let copyBtn = document.querySelectorAll('.ans-copy-btn'); 
    if (copyBtn.length > 0) {
      copyBtn.forEach((btn) => {
        btn.classList.remove('active')
      });
    }
    document.querySelectorAll('.ans-input').forEach((ansInput) => {
      ansInput.addEventListener("input", (event) => {
        let form = ansInput.closest('.ans-calcForm');
        let formType = form.dataset.type;
        if(formType=='standard'){
          let length = form.querySelector('input[name="length"]').value;
          let width = form.querySelector('input[name="width"]').value;
          let depth = form.querySelector('input[name="depth"]').value/12;	
          var totalyards = ((length*width*depth)/27).toFixed(2);
          totalyards=parseFloat(totalyards);		
          form.querySelector('input[name="total"]').value = totalyards;    
          let plus20 = totalyards+(totalyards*.20);
          form.querySelector('input[name="compactiontotal"]').value = plus20.toFixed(2);
          recOrder = (Math.ceil(plus20 * 4) / 4).toFixed(2);
          form.querySelector('input[name="recommendedOrder"]').value = recOrder;
          return false;
        }else if(formType=='radius'){
          let diameter = form.querySelector('input[name="diameter"]').value/3;
          let depth = form.querySelector('input[name="depth"]').value/36;
          let radius = diameter/2;
          var area = (radius*radius)*3.14;
          var totalyards = (area*depth).toFixed(2);
          totalyards=parseFloat(totalyards);
          form.querySelector('input[name="total"]').value = totalyards;
          let plus20 = totalyards+(totalyards*.20);
          form.querySelector('input[name="compactiontotal"]').value = plus20.toFixed(2);
          recOrder = (Math.ceil(plus20 * 4) / 4).toFixed(2);
          form.querySelector('input[name="recommendedOrder"]').value = recOrder;
          return false;
      	}
       })
     })
    }
    document.querySelectorAll('.ans-copy-btn').forEach((copyBtn) => {
      copyBtn.addEventListener("click", function() {
        let value = copyBtn.previousElementSibling.value;
		navigator.clipboard.writeText(value);
		let copyBtn = document.querySelectorAll('.ans-copy-btn'); 
        if (copyBtn.length > 0) {
          copyBtn.forEach((btn) => {
            btn.classList.remove('active')
          });
        }
		copyBtn.classList.add('active');
      });
    }); 
});

templates/page.calculator.liquid

line 2 add
{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}

line 6 update
<div class="page-area ptb-50 create-page" x-data="{open: 1}">

line 19-20 update
<li><p data-toggle="tab" @click="open = 1" class="active" :class="open == 1 && 'active'">Standard calculator</p></li>
<li><p data-toggle="tab" @click="open = 2" :class="open == 2 && 'active'">Radius calculator</p></li>

line 23 update
   <div id="standard-calculator" class="tab-pane" :class="open == 1 && 'active'">

line 75 update
  <div id="radius-calculator" class="tab-pane" :class="open == 2 && 'active'">

add assets/bootstrap.min.css from the old theme

Hope this help you with your issue.