Blog!
Still the best name for a set of chronologically-ordered articles.
Updating Squarespace React Form Values via Javascript
The extensive form manipulation on a years-old site suddenly stopped working, causing confusion and delay. Here's how I got it to work again, with a major assist from an internet stranger.
The Problem
Over several years I helped a client add extensive JavaScript to manipulate the values of various products’ “add to cart” form value inputs. The updates standardized the content and added conditional fields with required subfields.
Then Squarespace dramatically changed how those forms worked internally. Suddenly any form input values that were changed programmatically would reset to their user-entered values. Not only did this undo our work, but in many cases it would prevent the form from submitting because unrevealed required fields would not have the "placeholder" value we had assigned via code.
The user could not submit the form at all.
The Solution
We needed to change the way the values are set via JavaScript so the Squarespace React framework stores the new values.
In trying to find the solution I found this forum post that happened to have similar keywords: https://forum.squarespace.com/topic/258017-programmatically-updating-hidden-form-field-values-after-the-squarespace-form-changes/
The original post and answer was not about the problem we were having, but at the bottom of the thread contributor @JakeBohall offered a way to send the new values to Squarespace’s React. My hero!
Here is the function I ended up with that worked for me. This will update a single input.
Note: I didn’t need the setTimeout persistence that @JakeBohall used.
function setInputValue($el, val) {
var textField = $el.get(0); // get html element from jQuery element
// use React-compatible method to update field
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
window.HTMLInputElement.prototype,
"value"
).set;
nativeInputValueSetter.call(textField, val);
// dispatch change" event
var changeEvent = new Event("change", { bubbles: true });
textField.dispatchEvent(changeEvent);
}
// set a value
setInputValue($("#myInput"), "My great value!");
Of course you don’t need to use jQuery, it can be adapted to use vanilla JavaScript:
function setInputValue(textField, val) {
// use React-compatible method to update field
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
window.HTMLInputElement.prototype,
"value"
).set;
nativeInputValueSetter.call(textField, val);
// dispatch change" event
var changeEvent = new Event("change", { bubbles: true });
textField.dispatchEvent(changeEvent);
}
// set a value
setInputValue(document.getElementById(“myInput”), “My great value!”);
I hope that helps someone like it helped me!
Add markup to a Squarespace Order Status page only if it is the first view
A way to have your Code Injection only happen the first time a customer views their Order Status page for any particular order (in other words: immediately after they complete their order).
Squarespace killed the Order Confirmation page (RIP) and replaced it with the Order Status page. So now the customer immediately sees the Order Status page after completing checkout. The same Order Status page they see if they click the View your Order button in the order email notification.
This created a problem in that there were some things a site owner would only want to happen one time, immediately after the customer made the purchase. For example: tracking the sale through an analytics service.
It appears there may be a way to do this, with a bit of code that I can't seem to find anywhere else online at the moment. Try putting this into Settings > Advanced > Code Injection > Order Status Page:
That conditional statement means that the customer will only be served the markup the first time they view the Order Status page for this particular order. Put whatever markup/scripts/etc in there that you only want to fire once, as if it were on the old Order Confirmation page.
In some basic testing this appears to work as described. Give it a try if you have the need.
Automatically add “View Event” buttons to a Squarespace 7.1 Events page
Inexplicably, Squarespace 7.1 does not enable View Event buttons on Events index pages. Here is a way to add them automatically with a bit of custom scripting.
Inexplicably, Squarespace 7.1 does not enable View Event buttons on Events index pages. Here is a way to add them automatically with a bit of custom scripting.
Place this in the Footer section of Advanced > Code Injection (you will need at least the Business plan to do this):
Note that if you are already adding jQuery on the page, you don't need to (shouldn't) do it again.
Possible Customizations
- Change button size: 'small', 'medium', or 'large'
- Change the button text from "View Event" to whatever you want.
- Remove the '.eventlist-event--upcoming ' from the jQuery selector to target ALL events, not just upcoming ones
I hope that helps!
How do I make one product go directly to checkout in Squarespace?
You want a shopping cart for your Squarespace site, except for one particular product that should be a Buy Now.
Note: this is an older post and this technique does not appear to work anymore. I'm leaving it here for posterity and maybe it will help inspire a solution that works for you.
I was tasked with this goal recently: with Squarespace Commerce have the entire site use the shopping cart EXCEPT for one product which should go directly to checkout (known as "Express Checkout" in Squarespace).
While I didn't find a way to do it per-product I did find a way to do it per-page.
The catch is that if you are using a public Store page it will not work on the index view. However, it can work on the detail page or if you are adding your product to a regular page using a Product block.
Here is the code you'll need to add:
<script> // make entire page use "express checkout" (no cart) Static.SQUARESPACE_CONTEXT.websiteSettings.storeSettings.expressCheckout = true; </script>
If using a public Store page
Add the above code in a Code block in the product's Additional Info area found by editing the product in your Inventory.
If using a Product block
On the Page Settings for the page that has the Product block go to Advanced and add the code in the Page Header Code Injection field.
In either case if the script is added you should see the Add to Cart button change to Purchase.
Notes
This will affect ALL products on the page.
Of course this can also be done conditionally with more advanced JavaScript. For example, invoke the script if a certain product is found on the current page.
Currently this is only tested on Squarespace 7.0, but it might work on 7.1 as well.