Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Currency Symbol Change


Hamps

Question

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;
 }

 

Link to post
  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@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 h

Posted Images

15 answers to this question

Recommended Posts

  • 0

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>

 

Link to post
  • 0

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.

Link to post
  • 0

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

Link to post
  • 0

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

Link to post
  • 0

@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>

 

Edited by jpeter
Link to post
  • 0
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>

problem.thumb.jpg.c00518b79c64cf7dc8b9dc89b4a016d8.jpg645854690_worksfine.thumb.jpg.a2734bc50dccd5af2202097458206eb7.jpg

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.

 

Link to post
  • 0
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

Link to post
  • 0

@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);

})();

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...