sorca_marian

A couple of oft requested custom modifications folks like to make.
Reordering the elements of the detail area ( price, description, add to cart, and etc. ).
Moving info from Additional Info into the details area.

Excellent instructional video @sorca_marian! I've marked it as the official solution to my original question and recommend anyone interested in the topic watch and like it on YouTube.

The code might run before the react form is implemented.

Try using the below code.
It checks when the react form was added on the page.
 
document.addEventListener("DOMContentLoaded", function(){ var targetNode = document.querySelector('.form-block'); // Options for the observer (which mutations to observe) var config = { childList: true, subtree: true }; // Callback function to execute when mutations are observed var callback = (mutationList, observer) => { mutationList.forEach(mutation => { // debugger; if( mutation.addedNodes.length ) { mutation.addedNodes.forEach(addedNode => { if(addedNode.classList.contains("react-form-contents")){ console.warn("Found react form mutation"); observer.disconnect(); startMyChangesOnTheForm(); } }); } }); }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); function startMyChangesOnTheForm() { // Do the programmatical canges on the form } }); 1. targetNode is the container or the form. If you have multiple forms, make sure to target the ".form-block" of that individual form.
2. Inside the function startMyChangesOnTheForm(), put the code that makes changes on the values of the form

 

I am happy that the solution worked.
Thank you very much for the kind words.
You can message me here on my profile or contact me through www.abzglobal.net or marian@abzglobal.net

I created a video and explain the code just in case somebody is interested
 
 

I am happy that the solution worked.
Thank you very much for the kind words.
You can message me here on my profile or contact me through www.abzglobal.net or marian@abzglobal.net

Thank you so much @sorca_marian!!! Your code samples worked perfectly.
I had a couple of experienced javascript developers take a look at this problem with no luck. You clearly have an expert-level understanding of both front-end web development technologies and the nuances of the Squarespace environment. Squarespace should frankly hire you as a developer advocate for these forums.
I might have some work for you down the road and would love to connect offline. What's the best way for me (and others in the community) to contact you?
Lastly, the contributions of developers like Marian to these forums is incredibly valuable. I learned a ton from his posts and videos and I'd strongly encourage anyone interested in programmatically customizing their Squarespace sites to follow his YouTube channel.

I use Squarespace 7.0 with Brine template, I suppose you may have to change it a little bit in order to get it working on your site (don't know)
So, this is the code snippet you have to put at the end of the product page (as a code block) in the rich content description
<!-- Everything here is the upselling popup code, must be at the bottom of the product page! --> <!-- Product 1 > Product to Upsell --> <div style="display:none;"> <div id="upsell"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <upsell-details style="color: green; line-height: 4em;"><i class="fa fa-check-circle-o" style="font-size:17px; color: green"></i> <b>Added to cart</b></upsell-details> <br> <upsell-title>Fancy upsell title<br><upsell-title> <upsell-details style="line-height: 0em !important;">Your fancy upsell description... super nice I suppose!</upsell-details> <div class="sqs-block button-block sqs-block-button"> <a href="/path_to_upsell_product" class="sqs-block-button-element--medium sqs-block-button-element" style="font-size: 15px">Fancy Button Text</a> </div> <a href="/cart"><p style="font-size: 13px; color: grey; font-weight: 500;">OR GO TO CART TEXT</p></a> </div> </div> <script> const redirectToUpsellPageHandler = (wrapper) => { const addToCartButton = wrapper.querySelector('.sqs-add-to-cart-button'); const productVariants = wrapper.querySelector('.product-variants'); const isVariantInStock = () => { return productVariants.getAttribute('data-variant-in-stock'); }; const onClick = () => { if ((productVariants && isVariantInStock()) || !productVariants) { setTimeout(() => { $.getScript('https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js', function() {$.featherlight($('#upsell'), {});}); console.log('Cheers from the popup'); }, 2200); } }; addToCartButton.addEventListener('click', onClick); }; const redirectToUpsellPage = () => { const productPage = document.querySelector( '.collection-type-products.view-item' ); redirectToUpsellPageHandler(productPage); const blocks = document.querySelectorAll('.sqs-block-product'); blocks.forEach((block) => redirectToUpsellPageHandler(block)); }; document.addEventListener('DOMContentLoaded', redirectToUpsellPage); window.addEventListener('mercury:load', redirectToUpsellPage); </script>  
And this is the CSS code, you have to insert it in Your Shop Page > Advanced > Header code injection. Customize as you prefer to match your website style
<!-- Popup CSS (Upsell)---> <style> /* Mobile appearence settings */ @media only screen and (max-width: 640px) { .featherlight .featherlight-content { margin: 10px !important; border: 2px solid #872533 !important; padding: 0px 15px 17px 15px !important; max-width: 90% !important; } upsell-title { font-size: 21px !important; } upsell-details { font-size: 14px !important; } } /* Tablet and PC appearence settings */ @media only screen and (max-width: 1024px) { .featherlight .featherlight-content { max-width: 60%; margin: 10px !important; border: 2px solid #872533 !important; } } /* Over 1024px */ @media only screen and (min-width: 1025px) { .featherlight .featherlight-content { max-width: 50% !important; } } /* Other */ .featherlight .featherlight-content { max-height: 98%; padding: 15px 50px 17px 50px; border-bottom: 10px solid transparent; margin: 20px; border: 3px solid #872533; text-align: center; border-radius: 5px; } .featherlight .featherlight-close-icon { line-height: 40px; width: 40px; background: transparent; color: #872533; font-size: 20px; } .featherlight:last-of-type { background: #777777d6; } upsell-title { font-family: proxima-nova; font-size: 36px; font-weight: 700; font-style: normal; text-transform: none; letter-spacing: 0em; line-height: 1.1em; color: #882534; } upsell-details { font-family: proxima-nova; font-weight: 300; font-style: normal; font-size: 17px; line-height: 0em; text-transform: none; letter-spacing: 0em; color: #333; } </style> Tell me if I forgot anything

A few weeks ago, Squarespace changed the format for form submissions without announcing it.  We learned about the change when our company's Python code that processes these form submissions (i.e. orders) was suddenly unable to process orders. 
20 hours of emergency repairs later (i.e. thousands of dollars to the developer) and our systems could process orders again.
Then Squarespace changed the format back to the original format.  Without announcing it.  And our Python code once again failed due to Squarespace's engineering practices and customer service choices.
Is Squarespace done changing this code?
What steps has Squarespace taken to ensure this type of change will not be sprung on customers unannounced in the future?
How does Squarespace plan to compensate companies who were forced to waste thousands of dollars in development fees to accommodate these engineering and customer service choices made by Squarespace?
Tim Berens
https://BerensPopsLibrary.com
 

Our form submissions have also been breaking.  We've lost many potential customers and now we have to redo our forms, and upgrade to "business" just to add web leads into Salesforce.   There was no warning of this change.   Squarespace customer support was also unable to give us direction on what had happened.

Any update about Webp?

I am unable to confirm your report.
I just set up a test form with two text fields.
I defined the original changeValue function on the DevTools console.
In elements I selected each input element and ran changeValue ( $0, 'text'  ); both fields filled in and I Submitted the form.
I received an email with the values of both fields.
I repeated the test with one field filled programmatically and one manually with the same end results.
This is not my code and so I can't vouch for it as I originally stated.
Without repeatable steps there is no way we can help.
Some things to be aware of. This code is intended to work with the new international version of forms. If you have them turned off via Circle setting then you may have issues. If international is turned on be aware that a form is loaded twice. First the old form, then the new form. The only reliable way to detect that the new form is on the DOM is to use MutationObserver. If you are not up on MO's then the following may be of use.
 

Any update about Webp?

I'm stunned that we've been asking for this for YEARS and there has still not been an update/announcement on SS's plan for new gen images. I have created around 20 websites on Squarespace for clients and I think I'm going to have to migrate to something else soon. Speed test on my latest website attached - it's ridiculous.

Over 3 years now and STILL no .webP support from squarespace. All browsers now support the format. Our competitors are killing us on page-loading performance and ranking higher in search results. So, thanks SQSP for perpetuating the FACT that your platform is bad for SEO. 

It's infuriating that you utilised .webP on your own home page but deny it for your own customers!
https://media-www.sqspcdn.com/images/pages/homepage/jun-2022/hero/nina/background/background-3-375.webp
Shameful and demonstrates the contempt you have for us.

Any update about Webp?

@nick_sh Thank you so much, that was so helpful, defining the variable after the function threw me off but you've cleared it up and I've got it working now. Thanks.
@sorca_marian I had no idea you could use a console like that, thank you for sharing.

var input = document.querySelector("form input"); you need to select the input first, you can also select by name e.g. input[name="YOURNAME"]
Then pass in the function like so 
changeValue(input, "Set value here"); Full code (add to footer or wrap in domcontentloaded):
function changeValue(input,value){ var nativeInputValueSetter = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype, "value" ).set; nativeInputValueSetter.call(input, value); var inputEvent = new Event("input", { bubbles: true }); input.dispatchEvent(inputEvent); } var input = document.querySelector("form input"); changeValue(input, "Set value here");  

I agree.
I am waiting for a response from Squarespace technical team about this and if I get a official way of doing this I will post it here.

I agree.
I am waiting for a response from Squarespace technical team about this and if I get a official way of doing this I will post it here.

This may work now (thank you for pointing it out!), but cries to break anytime something changes in React or the form again. I’d rather have Squarespace to provide a way of submitting custom form data.

Squarespace seems to be using new form functionality now, and any form values that are set with Javascript e.g. 
document.querySelector('.text:first-child input').value = myvalue are now being reset on submit.
 
Is there any way to set the form values with javascript now? 

I also found a little simpler way

 
var input = document.querySelector("form input"); Object.defineProperty(input, "value", { value: "programmatically added value", writable: true }); var inputEvent = new Event('input', { bubbles: true}); input.dispatchEvent(inputEvent);  

Thank you so much! It works!

I also found a little simpler way

 
var input = document.querySelector("form input"); Object.defineProperty(input, "value", { value: "programmatically added value", writable: true }); var inputEvent = new Event('input', { bubbles: true}); input.dispatchEvent(inputEvent);