Ciodensky

Hi @tuanphan, apologies for the follow-up on this. Were you able to manage to look into this? I got nowhere to go. I hope you don't mind helping me on this. Thank you.

No worries. Thank you for the reply. Happy New Year by the way!

Site URL: https://www.xystema.com/pricing Website password: 030774 Can anyone help me with the code on how trigger browser page refresh or reload when the "Unavailable" text in the product block appears after clicking the "Back" browser button. I will appreciate any help. Many thanks.

Site URL: https://www.xystema.com/pricing Website password: 030774 I have confirmed that Grammarly extension/app causes "Unavailable" error of my variant products once I returned from Checkout page. The solution I found to avoid this is to disable the Grammarly extension or uninstall it from computer. However, this is beyond my control now. I am afraid that if my user has Grammarly, this error will appear. The solution I am looking at is to change the "Unavailable" with other text like "Error occured! Please reload your browser. I tried the below code but no avail. $(document).ready(function() { $(".product-price").html(function() { return $(this).html().replace("Unavailable", "Error occured! Please reload the browser."); }); }); I will appreciate any help on this. Many thanks.

Here's the code that works for me: <div class="industrial"> <select class="industry" id="selection"> <option value="SEL">Select industry</option> <option value="RET">Retail or Online Commerce (2.5 mos)</option> <option value="DIS">Wholesale or Distribution(3 mos)</option> <option value="CON">Contractor (3.5 mos)</option> <option value="MAN">Manufacturing (4 mos)</option> <option value="GEN">General Business (3 mos)</option> <option value="PRO">Professional Services (2.5 mos)</option> <option value="NON">Non-profit (2 mos)</option> </select> </div> <script> $(document).ready(function() { $("#block-yui_3_17_2_1_1635989652851_13463").show(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); }); $('#selection') .on('change', function () { if(this.value === "SEL"){ $("#block-yui_3_17_2_1_1635989652851_13463").show(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "RET"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").show(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "DIS"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").show(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "CON"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").show(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "MAN"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").show(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "GEN"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").show(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "PRO"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").show(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "NON"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").show(); } }); </script> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <style> .industrial{text-align:center;border-radius:6px;width:285px;display:flex;flex-flow:row wrap;align-items:center;margin:auto;box-sizing:border-box;padding-bottom:35px} .industry{ height: 35px; width: 80%; margin: auto; border: 1px solid #009051; border-radius: 0.4em; background-color: #209d50; color: #fff; text-align: center; font-size: .7rem; } </style>

Thanks for this @tuanphan but it didn't work actually. I got another code that works I will share it here. Yours supposed to be clean and simple.

Site URL: https://www.xystema.com/pricing/#page-section-61a215ff3b53df1223d55072 Hi, I am trying to create an html combobox with my code below. I am having difficulty to effect the "Select" script—it is not working. Could anyone help me figure out what I was missing in the code? I am sure there is... Website link: https://www.xystema.com/pricing/#page-section-61a215ff3b53df1223d55072 Password: 030774 <div class="industrial"> <select class="industry" id="industry"> <option value="fixer">fixer</option> <option value="booster">booster</option> </select> </div> <script> $('.fixer').ready(function() { $('#block-yui_3_17_2_1_1638012322305_113084').show(); $('#block-yui_3_17_2_1_1638012322305_166770').hide(); }); $('.fixer').select(function() { $('#block-yui_3_17_2_1_1638012322305_113084').show(); $('#block-yui_3_17_2_1_1638012322305_166770').hide(); }); $('.booster').select(function() { $('#block-yui_3_17_2_1_1638012322305_113084').hide(); $('#block-yui_3_17_2_1_1638012322305_166770').show(); }); </script> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <style> .industrial{text-align:center;border-radius:6px;width:185px;display:flex;flex-flow:row wrap;align-items:center;margin:auto;box-sizing:border-box;padding-bottom:35px} .industry{font-family:Lato;font-weight:400;font-style:normal;font-size:.7rem;text-align:center;letter-spacing:0.0em;vertical-align:middle;width:50%;height:35px;} </style>

Thank you for this @tuanphan. However, there are still some alignment adjustment that's coming and I am working on it. Initially, here's the output of the page — the coverted price moves up and align to text billed once/annually. Secondly, when I select in the Starter combobox, the code does not work anymore—the dollar goes back to lower position and wrong alignment. Website: https://www.xystema.com/pricing Password: 030774

I found the solution! I added the html on.change javascript right next to my code which was intended only for ready function. Here's my additional code: <!-- change the text "every 12 months" to "billed annually" in the price --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $(".product-price").html(function() { return $(this).html().replace("every 12 months", "<span style=\"color:#4D4D4D;font-size:14px;font-weight:normal;display:block;margin-top:8px\">— billed annually</span>"); }); }); $(document).on("change", ".variant-select-wrapper > select", function() { $(".product-price").html(function() { return $(this).html().replace("every 12 months", "<span style=\"color:#4D4D4D;font-size:14px;font-weight:normal;display:block;margin-top:8px\">— billed annually</span>"); }); }); </script>

Hi @tuanphan, As requested, here's the access password for https://www.xystema.com/pricing password: 030774 Thank you.

Site URL: https://www.xystema.com/pricing Below is my code for replacing the text on the product-price. It works smoothly with non-subscription product while on the subscription product it works only on the ready function but when on selecting the variant it is not reading. <!-- change the text "every 12 months" to "billed annually" in the price --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $(".product-price").html(function() { return $(this).html().replace("every 12 months", "<span style=\"color:#4D4D4D;font-size:14px;font-weight:normal;display:block;margin-top:8px\">— billed annually</span>"); }); }); </script> Here's the screenshots of the one that is working. The "Billed annually" changed the "Every 12 months" that is default of the template. Here's now the other screenshot that is not working. You may want to check my website for more details: https://www.xystema.com/pricing password: 030774

Access password 030774. Thanks.

Thanks for this @tuanphan. It help me!

Site URL: https://www.xystema.com/pricing How can I raise the "from $" to align at the top level of "557"?

This is so ridiculous! So many people here including me looking for quantity options in the subscription and you want us to log to your customer support. This option is so common and simple, why squarespace cannot add this option! I am a almost disappointed with this platform the limitation goes beyond proportion.