Prestige theme custom Javascript issues for currency switcher

Solved
Highlighted
New Member
5 0 0

Hi all,

 

I'm using the Prestige theme and trying to implement a custom currency switcher that will support Shopify currencies. I've found the place where I can add the code for the dropdown, but I can't find any way to save the new currency after the user changes the selected value.

 

I'm following all the instructions from Shopify's guide but I can't find a way to run the custom javascript that is required. I've added the code to the Custom.js file in the theme, but it doesn't work.

 

Overall, I'm having trouble having any code in Custom.js work. When I add a simple alert('Ok'); it works, but any code from the internet doesn't work.

 

It would be great if someone can help with some advice on either the specific issue or how to run Javascript for the Prestige theme overall.

 

Thank you in advance!

0 Likes
Shopify Partner
1386 162 252

The guide is not theme specific, so should work for any theme, in theory. The Custom.js file Prestige theme provides is just a convenience and there is nothing magical about it, unless you are using Prestige's events like "variant:changed" or "product:added" to which you can subscribe and automatically receive the message once variant changes or a product is added to cart so you can execute your custom logic. For all other cases there should be external triggers or calls to specific functions you have in Custom.js for them to execute.

 

Can you share a preview URL to your store with the implemented currency switcher?

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
5 0 0

Hi @Visely-Team thank you for your reply,

 

the URL to the store is https://hosannadesign.com and since I can't make the select on change to work, I just added a button next to the selector (which is bad user experience).

 

All I'm trying to do is to make the following code work:

$('.shopify-currency-form select').on('change', function() {
  $(this)
    .parents('form')
    .submit();
});

but to no avail. Any help will be greatly appreciated!

0 Likes
Highlighted
Shopify Partner
1386 162 252

You are on the right track. The issue might be that the code in custom.js executes before the markup for the selector is rendered, try to wrap it into the document ready and add to the custom.js:

$(document).ready(function() { 
  $('.shopify-currency-form select').on('change', function() {
    $(this)
      .parents('form')
      .submit();
  });
});
Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
5 0 0

@Visely-Team just tried that, but it doesn't work.

 

Even adding something simple like this, doesn't work:

$(document).ready(function() { 
  alert('Ok');
});

Any ideas?

0 Likes
Highlighted
Shopify Partner
1386 162 252

Yup, that's the error:

Uncaught ReferenceError: $ is not defined
    at custom.js?v=15061692752890883994:19

custom.js loads before jQuery, so jQuery is not loaded yet. In themes.liquid, move the line that references custom.js just above the </head>, after all jQuery plugin references, that should do it.

 

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
5 0 0

@Visely-Team thank you for the reply. I tried that but it didn't work either.

It looks like the line referencing custom.js is indeed right at the end of </head>.

 

Is there any chance this specific theme is not supporting jQuery or requires that it's referenced / done in another way?

0 Likes
Highlighted

Success.

Shopify Partner
1386 162 252

Then the rest of the scripts are added dynamically to the page head. One last easy thing you can try is move that piece (including document ready wrapper) just above the </body>. If that won't work you can rewrite the code into plain vanilla JavaScript so it doesn't rely on jQuery.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
5 0 0

Adding the script right before the </body> still yielded the same issue ($ being undefined).

I found a way to convert it to vanilla JS and place that code inside Custom.js which finally worked!

 

Quite disappointed though that I can't write jQuery there, this isn't really good practice from the theme developers. Anyone else having such issues with the Prestige them?

 

Thank you for your replies and the help @Visely-Team 🙏

0 Likes