ADD-TO-CART in a code block of HTML,CSS & Javascript doesnt work because of errors ragerding squarespace commerce API ?

I'm developing a custom perfume creator on my Squarespace site where users can select scents and create a custom perfume. I'm struggling to implement the "Add to Cart" functionality for these custom perfumes. Initially, I tried using Squarespace.Commerce.addToCart(), but encountered errors saying the Squarespace Commerce object wasn't available. I've also attempted using fetch() to call the cart API directly, but without success. I've included <script src="https://assets.squarespace.com/universal/scripts-compressed/commerce-v1-min.en-US.js" defer></script> in my site's header, and my Squarespace plan includes e-commerce features. The custom perfume creator is implemented in a Code Block on the page. I'm unsure if I need to generate an API key or if there's a specific method I should be using for custom products. Can anyone guide me on the correct approach to add custom products to the cart in Squarespace 7.1? Any examples or documentation would be greatly appreciated.

website : https://www.aquadorcy.com/

pass: aquapark 

page: create your own

here is a video and the ajvascript error screenshot

anyone ?

hello

Hello everyone,

I'm currently working on a custom feature for my Squarespace site where users can interact with a visual perfume bottle by selecting different scents. The bottle fills up with different colors based on the scent chosen, and once they’ve made their selection, I want to allow them to add the corresponding product to their cart directly from this custom interface.

I’ve set up the visual and interactive elements using a code block (HTML, CSS, and JavaScript), but I’m running into issues when trying to link this functionality with Squarespace’s eCommerce features. Specifically, I need to find a way to add a product to the cart programmatically through the code block when a user clicks on a button.

Does anyone have experience with integrating Squarespace’s API or eCommerce functions into a custom code block? Any guidance or examples would be greatly appreciated!

Thank you in advance for your help!

 link : https://www.aquadorcy.com/createyourown

You can consider this idea

• Add a Product Block (but use CSS to hide all)
• When users click button >> Trigger click on Add to cart button on Product Block