Hamps Posted June 8, 2020 Share Posted June 8, 2020 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 comment
tuanphan Posted June 9, 2020 Share Posted June 9, 2020 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> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Hamps Posted June 9, 2020 Author Share Posted June 9, 2020 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? Link to comment
tuanphan Posted June 9, 2020 Share Posted June 9, 2020 use both code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Hamps Posted June 9, 2020 Author Share Posted June 9, 2020 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. custom_css2.avi Link to comment
tuanphan Posted June 9, 2020 Share Posted June 9, 2020 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Hamps Posted June 9, 2020 Author Share Posted June 9, 2020 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 comment
jpeter Posted June 9, 2020 Share Posted June 9, 2020 (edited) @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 June 9, 2020 by jpeter tuanphan and Beyond 2 Link to comment
Hamps Posted June 10, 2020 Author Share Posted June 10, 2020 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 Link to comment
jpeter Posted June 10, 2020 Share Posted June 10, 2020 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 Link to comment
Hamps Posted June 12, 2020 Author Share Posted June 12, 2020 I'm using Squarespace 7.0. Will these codes work? Link to comment
Beyond Posted February 19, 2021 Share Posted February 19, 2021 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. Link to comment
Beyond Posted February 19, 2021 Share Posted February 19, 2021 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 comment
jpeter Posted February 20, 2021 Share Posted February 20, 2021 @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 comment
Beyond Posted February 20, 2021 Share Posted February 20, 2021 @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! Link to comment
Ghassan Posted May 11, 2022 Share Posted May 11, 2022 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). Link to comment
tuanphan Posted May 15, 2022 Share Posted May 15, 2022 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment