Currency Symbol Change

Site URL: https://www.hampseshop.com/

Hi, I'm from Maldives, and I understand that squarespace does not have our currency supported yet. However, I have changed the currency symbol using a css code. But the problem is when ever I change a variant of a product like color, currency symbol chances back to default. Can someone help me out.

.sqs-money-native:before {
   content:'₦ '!important;
 }

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, function(){  
		$(".ProductItem-details .product-price").html(function() { 
          return $(this).html().replace("$", "MRF");  
    });
	});
</script>

Thank you for responding,

I have removed the old code and did what you have adviced, but it's not working.

Am I doing it wrong?

use both code

I'm attaching a video with this code in the work

.sqs-money-native:before {
   content:'MRF '!important;
 }

this code is injected in design > custom css, it doesn't work when I inject it to Home > Settings > Advanced > Code Injection > Footer.

The code that you have doesn't work in either one, also I have tried with both codes.

above code solve this

 But the problem is when ever I change a variant of a product like color, currency symbol chances back to default

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, function(){  
		$(".ProductItem-details .product-price").html(function() { 
          return $(this).html().replace("$", "MRF");  
    });
	});
</script>

I have tried this one but this doesn't work for me, what am I doing wrong?

I have also tried with and without the code I posted earlier and doesn't wrong either.

.sqs-money-native:before {
   content:'MRF '!important;
 }

Appreciate you responding so quickly.

Thank you

@Hamps Another alternative solution is to leverage the MutationObserver Web API which listens for changes to that .product-list element and replaces the $ with MVR whenever it detects that something has changed with that element:

(function () {

  // Select the node that will be observed for mutations
  var productSummaryPrice = document.querySelector('.ProductItem-summary .product-price');

  // Exit if target node isn't found.
  if(!productSummaryPrice) return;

  // Options for the observer (which mutations to observe)
  var config = { childList: true };

  // Create an observer instance linked to the callback function
  var observer = new MutationObserver(function () {
    var text = productSummaryPrice.textContent;
    productSummaryPrice.textContent = text.replace('$', 'MVR ');
  });

  // Start observing the target node for configured mutations
  observer.observe(productSummaryPrice, config);

})();

Make sure the code above is between <script> tags, example:

<script>
  // Add JS code here
</script>

Jpeter

thank you for the response, this is very new to me. Could you please let me know a step by step guide.

Thank You again

26 minutes ago, Hamps said:

Jpeter

thank you for the response, this is very new to me. Could you please let me know a step by step guide.

Thank You again

@Hamps You can follow this article on how to inject code: https://support.squarespace.com/hc/en-us/articles/205815908

I'm using Squarespace 7.0. Will these codes work?

@Hamps Yes, they should work. 

On 6/9/2020 at 8:25 PM, jpeter said:

@Hamps Another alternative solution is to leverage the MutationObserver Web API which listens for changes to that .product-list element and replaces the $ with MVR whenever it detects that something has changed with that element:

(function () {

  // Select the node that will be observed for mutations
  var productSummaryPrice = document.querySelector('.ProductItem-summary .product-price');

  // Exit if target node isn't found.
  if(!productSummaryPrice) return;

  // Options for the observer (which mutations to observe)
  var config = { childList: true };

  // Create an observer instance linked to the callback function
  var observer = new MutationObserver(function () {
    var text = productSummaryPrice.textContent;
    productSummaryPrice.textContent = text.replace('$', 'MVR ');
  });

  // Start observing the target node for configured mutations
  observer.observe(productSummaryPrice, config);

})();

Make sure the code above is between <script> tags, example:

<script>
  // Add JS code here
</script>

Thank you for this code. Worked perfectly for my site too. 

I have one minor problem; I used this code to replace € sign with 'TL' text but it cancelled out sale price display for products with variants where the original price is crossed out and the sale price is display in red (or in the color your preference). Is there a way to fix this?

It works fine for single products which has no variants. Attaching two pics to explain what I mean. Appreciate your help.

2 hours ago, Beyond said:

Thank you for this code. Worked perfectly for my site too. 

I have one minor problem; I used this code to replace € sign with 'TL' text but it cancelled out sale price display for products with variants where the original price is crossed out and the sale price is display in red (or in the color your preference). Is there a way to fix this?

It works fine for single products which has no variants. Attaching two pics to explain what I mean. Appreciate your help.

 

Regarding the problem; I just figured out original price and the sale price are both shown as the original price; hence whatever change I make the price (font color etc) applies to the sale price too. How do I separate them as sale and original price? I think it is a problem caused by mutation coding but I need it I cannot erase it. Thank you

@Beyond

Try the JS code below instead, which maintains the HTML structure rather than override it. 

(function () {

  // Select the node that will be observed for mutations
  var productSummaryPrice = document.querySelector('.ProductItem-summary .product-price');

  // Exit if target node isn't found.
  if(!productSummaryPrice) return;

  // Options for the observer (which mutations to observe)
  var config = { childList: true };

  // Create an observer instance linked to the callback function
  var observer = new MutationObserver(function () {
    var html = productSummaryPrice.innerHTML;
    productSummaryPrice.innerHTML = html.replace(/€/g, 'TL ');
  });

  // Start observing the target node for configured mutations
  observer.observe(productSummaryPrice, config);

})();

@jpeter

Thanks a lot that seems to be working..I have tried it on couple of products and all seems fine right now. Thank you for your time and reply!

On 6/9/2020 at 1:24 PM, tuanphan said:

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, function(){  
		$(".ProductItem-details .product-price").html(function() { 
          return $(this).html().replace("$", "MRF");  
    });
	});
</script>

 

Hello;

Thank you. Working well on desktop. However, when selecting a variant on mobile, the entire page and dropdown are unresponsive (freezes).

On 5/12/2022 at 4:00 AM, Ghassan said:

Hello;

Thank you. Working well on desktop. However, when selecting a variant on mobile, the entire page and dropdown are unresponsive (freezes).

Can you share link to a product where you have problem?