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.

@evearley it depends, I did not use the product page. Instead I customized a page separately and use the product block. With that, you can create 2 same products and one "every 1 month" and the other "every 12 months", put the 2 product buttons (only, see the design tab of the product block) with monthly and yearly. You can freely design the page using the product block.

Hi @evearley, just want to share you my solution for this after digging futher. In the subscription of your product, you just want to select — repeats every 12 months as shown in the screenshot here. Let me know how it goes with you.

The password is 061298. Here's the direct link https://www.xystema.com/pricing/#multiplesale.

Site URL: https://www.xystema.com/pricing Hi! My plan and pricing requires multiple product in one-click of a button (example: one-off-fee and annual subscription) Now, since this is not possible in Squarespace, I looking at a workaround below: I want to create a button that could trigger the 2 hidden add-to-cart products to be able to checkout 2 products in one-click. Is this possible? I am sure someone, somewhere has encountered this type of case in Squarespace. Another thing, I quite confident that triggering 2 buttons from another button at the same time is possible. I will appreciate any help for this. Thank you.

It works! As always. Thanks so much for the swift reply! appreciate it!

Site URL: https://www.xystema.com/pricing I created the shadows for the 3-columns (see screenshot attached) and I want the 1st column not to have the shadow. Here's the code I used: // create a shadow and border section[data-section-id="61a0385f55deef3db8b5e406"] .sqs-col-4 { border: 1px solid #d5d5d5; width: 30%!important; margin-left: 3%; box-shadow: 5px 5px 15px rgba(0,0,0,.2) } //increase shadow and raise the column when hover section[data-section-id="61a0385f55deef3db8b5e406"] .sqs-col-4:hover { box-shadow: 5px 5px 15px rgba(0,0,0,.4); transform: translateY(-10px); transition: all 0.25s; } I will appreciate any help. Thanks. My website password: 061298

Again, as always @tuanphan you're an Angel. Thank you so much!

Hi @creedon, I just tried just now in Safari and it does not give any issue. I think Chrome browser I am having trouble with—I assumed you tried it in Safari. I am wondering if there is any code that I can use to refresh the page after clicking the back button of the browser. Because, if I am able to do this, I think my issue can be resolved. It may not be a permanent solution but a work-around one to address Chrome issue. I hope there is a little code that I can insert to refresh page after the clicking the browser back button. Is this possible, by the way?

The error happens when I am returning from "Checkout" after clicking the "Get Started". You can try it yourself on my website. Just click any of the "Get Started" then you will be directed to the Checkout page. From there, you click the back of the browser (assuming the user wanted to go back to the pricing page). Then, you will find the Starter industry blank and the price is "unavailable".

Hi @creedon can you help me with this? Thanks.