Jump to content

How Can I add a second function (onclick perhaps?) to a non-editable cta (Add to Cart) button?

Recommended Posts

Site URL: https://www.spacescan3d.com/create-your-virtual-tour/p/style-01-36t23

Hi everyone. I have seen a couple of very similar requests (I think) on here and @creedon has been successful in nearly all of them. I have a commerce site and I've been attempting to make it do some things that it almost does on it's own but not quite.

The first, for now, is that when the "add to cart" button (which I have customized to be "Add to Quote and Continue"), aside from adding the item to the cart, needs to (I want it to) return the user to the products page (link back to https://www.spacescan3d.com/create-your-virtual-tour ) and replace the image of the item that was selected with another (to indicate that it has already been chosen).

Two things: 1.) I know enough about code to know how to explain what I want and how to follow directions...that's it though. 2.) If I posted this incorrectly, I'm sorry--please direct me to the proper location--and thank you all in advance for any suggestions you can give me!

Edited by OilyBoyd
missing punctuation
Link to comment
  • Replies 5
  • Views 412
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Let me see if I understand the sequence of events.

Site visitor is on Create Your Virtual Tour page (product grid page).

Clicks on one of the products there, for example.

528812657_ScreenShot2022-03-08at10_14_20AM.png.b842bcb7cec94b29fc1f47cd558f0bad.png

Is taken to the product detail page.

Visitor makes various choices for the product and clicks the add to cart button.

Is taken back to the Create Your Virtual Tour page where the image above is updated to indicate that the product is selected.

2051673654_ScreenShot2022-03-08at10_14.20AMcopy.png.c568818b45d38d3508e86c7632dec04d.png

Does that sound about right?

Although I don't know for sure that this can be done. It sounds like you might be able to use localStorage to track the state of the user actions across pages. Web pages are stateless. So when the sequence of events is completed successfully the code would update the image for the product.

One piece of the puzzle has been addressed with the following.

Obviously more pieces would need to be built on top to potentially make your desired effect work.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Omg yes you got it! That is exactly what I need to do, thank you! There is more but this is plenty to get started--Thank you Thank Thank you! Have you heard of any workarounds with code injection or code blocks if this isn't the way to go? 

Link to comment
2 minutes ago, OilyBoyd said:

Omg yes you got it! That is exactly what I need to do, thank you! There is more but this is plenty to get started--Thank you Thank Thank you! Have you heard of any workarounds with code injection or code blocks if this isn't the way to go? 

Woops misunderstood your first part about local storage, disregard question about workarounds. I will look into all of this thank you

Link to comment

One last thing--do you by any chance hire out to do things like this? The more I dig into he more I'm afraid I don't know enough to implement it myself (I tried 99 Designs and I was not convinced that I would find someone with the right skill set). Or is there someone you can recommend?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.