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

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

Flavalicious
Visitor
1 0 0

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!

 

Replies 2 (2)

tim
Shopify Partner
3633 315 1344

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:

<script src="{{ 'ans-calculator.js' | asset_url}}" type="text/javascript"></script>

and insert a line like this right above:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Eurus_support
Shopify Partner
5 0 0

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.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
For more information about Eurus Theme, please kindly check the product page: https://omnithemes.com/eurus-theme/
Email: support@omnithemes.com
Whatsapp: +84399940991