Brendanmkav

I'm wondering how to set up a members-only area that is tied to a physical product subscription. i.e. if the subscription is active, the customer gets access to the private area, and if not they don't. I know this is already possible with digital subscription products, but my client is aiming to do it with a physical subscription product instead, where staying subscribed is incentivized by having access to various perks, or content, or whatever is added to the private subscriber's zone (i.e. members area). If there is a way to do it natively I'd love to know. Alternatively, if any extensions could achieve this I'd love to be introduced to then.

ChatGPT helped me figure out how to implement it, now my script is working perfectly. Thanks for the tip on MO's by the way 🙌

Ooohh, interesting, I'll see if I can implement it. Honestly I was considering adding a 2nd document ready check after button click, but not sure if that'll work because the core page would still be already loaded, only the modal is the new piece of the puzzle. We'll see. Yea, I just took a look at the docs, seems like you need to prelist the mutated states in an array that it'll compare to. Seems tricky to get right. I'll ask mr GPT though and see what he comes up with 🤣 Thanks for the advice though.

Back again cause I figured it out!!! My theory was right that the modal wasn't being targeted. The product form gets triggered by the "add to cart" button click, but my code was running upon page load, thus it was done executing before the button was clicked at all, hence technically there was no form on screen when my code ran. To solve all this, I added an event listener to wait for the "add to cart" to be clicked. After that, I also added a short time delay to allow for the form lightbox to come into existence before my code came into play. Now it works, it'd pretty glitchy right now, but it works. I'll continue to iron out the kinks and see if it's workable for the client. It's a pretty niche use case I guess, but if anyone need's help modifying the product form with JS I can write up how I managed it.

Does anyone here have success using JS to modify the "custom product form" modal? I've been able to target things with CSS no problem, but I have some JS functionality that I need to add to limit max checkbox selection as well as to insert images to each checkbox. I've coded it up in Codepen to build out my goal (to be clear, I used the HTML directly from Squarespace via inspector to make sure I had the right structure, I only used CSS & JS for modifications, I didn't touch the HTML). I've got it limiting checkbox selections to 6-max, and I'm adding the images for each candy using a loop, as well as some other minor aesthetic things. All of it works well in Codepen: https://codepen.io/brendanmkav/pen/YzgEgye However, it doesn't work in Squarespace and I've no idea why. I've tried site-wide footer injection, shop-specific header injection, product page-specific header injection and also product page code block, (hell I even tried adding it to the form itself using the line/divider). I haven't been able to find the solution (yet). I even added a console log call out to check inspector and ensure the script is loading, and it does, in every location I place injection, but it still doesn't work! My running theory is that since the form is a modal triggered by the "add to cart" button, maybe my script is running prior to modal pop up and thus not being affected by my script, but I did also try adding an event listener to wait for the same button click that triggers the modal form, but still no luck. Maybe there's a way to target the modal load itself specifically? Any ideas would be awesome. There must be a way to do it. 🤷‍♂️

@scootkennedy did you find any solution to this? I'm trying to do the same thing by adding images to the checkboxes. I replicated the product form in codepen to code up a JS solution, which worked, but then it doesn't work when I put the code into Squarespace for some reason dunno 🤷‍♂️ Here's the codepen I made: https://codepen.io/brendanmkav/pen/YzgEgye It doesn't work in Squarespace and I've no idea why. I've tried site-wide footer injection, shop-specific header injection, product page-specific code block, etc, etc. I can't find the solution. I even added a console log to check inspector if the script is loading, and it does, in every location I place injection, but it still doesn't work. My running theory is that the form is a modal triggered by the "add to cart" button, and somehow doesn't get affected by my script, but I don't know. I tried adding an event listener to wait for the button click that triggers the modal form, but still no luck. Any ideas would be awesome. Maybe there's a way to target the modal load specifically? 🤷‍♂️ maybe @paul2009 has some ideas?

Yeah ok pretty much what I thought the situation was. Sadly. But, glad to hear there's a solution with third-party syncing, although it's not ideal.

I'm searching for the same answer too! From what I understand, the Square card readers integrate with your Squarespace site via the Squarespace app, so inventory is managed by your site. But with the Register or Terminal systems, they appear to be self-contained and seem to NOT integrate with Squarespace. Meaning there are 2x separate, non-synced inventories (one with Square's POS set up in-store, and one online with Squarespace), plus 2x separate payment processing (online vide paypal/stripe, and in person via Square's register/terminal). If I find an answer I'll come back. If anyone else has a solution to this please let us know.

** Update ** I've figured out a makeshift solution using the custom button & custom form options for products. Essentially I can require a form submission when added to the cart, and that form can have a drop-down per scoop full of candy options. The downside is the lack of inventory tracking, and also the lack of imagery in the form but maybe it's fine. This is probably the route I need to take unless anyone has any better ideas?

I've been approached about building an online pick & mix store for a candy shop using Squarespace. They want to offer an option to order up to 6-scoops per order with the customer choosing from the variety of candy in stock. At first glance, I assumed product variants could handle this easily, but the more I dive into it I'm not so sure. So any advice on this would be much appreciated. My initial idea was to have multiple products such as "1-scoop", "2-scoop" ... "6-scoop", which then have up to 6x variant options such as "1st Scoop", 2nd Scoop" ... "6th Scoop" within, and the variant choices for each candy available. However, Squaresapce only allows up to 250 variant combinations, which means that the 6-scoop product, with 6x scoop options, and only 3 candy variant choices per scoop is being calculated as 729 variant combinations (3*3*3*3*3*3) and won't allow it. I'm fairly certain they have more than 3 candy choices in their pick & mix, and I'm also certain they'll want to allow all candy options for each scoop. Is there another method for this that I'm unaware of? Or another way to combine the products? I know I could have a product for each candy instead, but I don't think that works because then I can't bundle scoop choices together into 1 selection, nor can I limit the candy choices per selection to a max of 6 scoops. With this method, if a customer wanted to buy 2x bags of 6 scoops, all the candy choices for each bag would be mixed together in the cart. I also realized that both of these methods would lead to a less-than-ideal scenario for inventory tracking. They shared a competitor store (which was built on Shopify) to how they pulled it off: https://hellosweetscandy.com/pages/bundle-page ** Edit ** If there is no native solution to this, perhaps there is an "advanced variant" plugin or something that could work to solve the problem. Honestly, anything would be helpful since I don't want to turn them away, and I'd rather build on Squarespace if it's possible.