Jump to content

Add Product to Cart and Redirect to Cart After Form Submission

Recommended Posts

Site URL: https://patersonhatcompany.squarespace.com/

Hi,

I'm looking to do two things once a user of my site fills out a form and submits it:

  1. Automatically add one of my products to their cart
  2. Redirect them to the cart where the added product is now visible

Does anyone know how to achieve this with custom code injection?

Site is currently password protected. Password: 2xvcxsWvBg7zwU2

Thanks,

Edited by logang
Adding Password to Ticket
Link to comment
  • Replies 16
  • Views 3.2k
  • Created
  • Last Reply

Top Posters In This Topic

If you can change the sequence of events a little I think you can do it without any code.

Add a form to your product item. It can be done right there in the product item editor.

When the user clicks the Add to Cart button the form will pop-up for data entry.

Then if Express Checkout is turned on then they would bypass the cart and go to the checkout page.

You could also add the form to the checkout page instead of the product item itself. Just depends on your flow.

Would that work for your needs?

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

Ah. I see now. Edit your form. Go to Advanced and enter "/cart" (without the quotes) and click the APPLY button. Save the page.

1318266662_ScreenShot2021-01-31at2_27_20PM.png.82c4217a6103d62eff6cdd245eca85ed.png

Now the tricky part is testing. It won't work in Preview. You need to go to Full Preview then add "?noredirect" to the URL in the address bar and hit return. This reloads the page and your are out of Preview.

1072408035_ScreenShot2021-01-31at2_38_57PM.png.b6c6540fe615e113a20b7c6e19b93258.png

Fill in the form, click the pay deposit button and you should be taken to the cart.

You can bypass the noredirect trick and just open an incognito/private window and go to the URL for the page. Which ever method works for you.

Let us know how it goes.

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

Hi Creedon,

The redirect worked great. Thanks for that and working through this with me. The second part to my question is, how do also auto-add my 'deposit' product to my customers cart when they click the pay deposit button? I want to skip the step of directing them to the deposit product page and them having to click another button.

So the user flow would be:

  1. User fills out form
  2. User clicks pay deposit button
  3. User is redirected to a cart with the $200 deposit product already there
  4. User checks out

Thanks,

Link to comment
Quote

how do also auto-add my 'deposit' product to my customers cart when they click the pay deposit button?

This is where it gets a bit trickier.

One way this might be done is to add a page with a product block. The product block would be linked to your deposit product item.

Then the page would have some Javascript that would automatically click the deposit add to cart button and also redirect to the cart page. Clicking the button is pretty easy. Timing the redirect to the cart could be a bit harder. As the add to cart button takes some number of seconds to complete and you don't want the redirect to interfere with that. I've not tested this particular set of circumstances.

So the flow now becomes something like the following.

  1. User fills out form
  2. User clicks pay deposit button
  3. User is redirected to page with auto click add to cart button
  4. User is redirected to a cart with the $200 deposit product already there
  5. User checks out

Visually it is a little clunky going through the auto click add to cart button process.

Would a flow like this work for your needs?

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

You can do an informal timing by setting up a blank page, minimally formatted. Then put a product block on pointing to your deposit item. You want it to look something like the following.

1951968428_ScreenShot2021-02-02at10_31_16AM.png.d30a8a5d2a25bf0157219075fc08abe8.png

Then to test. Go into Full Preview. In the address bar add ?noredirect to the URL and hit return. This reloads the page and you're out of Preview. Then click on the Add To Cart button. Watch the text of the button. When it says Added. That is about as long as it would take to redirect to the next step, the cart.

I did some testing last night and it is indeed going to be tricky to wait for SS to actually add the item to the cart. As I suspected if you just put in some code to click and redirect to the cart sometimes the redirect happens during the add to cart process and interrupts it causing the product item not to be added to the cart. I think with the help of a MutationObserver the code can be made to redirect to the cart after the product has been added to the cart.

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
2 hours ago, logang said:

but if the result of your solution is intermittent

I would not suggest a solution that was.

I was merely describing some of the the issues I've come across on the way to figuring out if what you want can be done.

The question now is the delay that will occur to use the auto click add to cart redirect acceptable? If not then some other solution would need to be found.

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
  • 1 month later...
On 1/31/2021 at 5:42 PM, creedon said:

Ah. I see now. Edit your form. Go to Advanced and enter "/cart" (without the quotes) and click the APPLY button. Save the page.

1318266662_ScreenShot2021-01-31at2_27_20PM.png.82c4217a6103d62eff6cdd245eca85ed.png

Now the tricky part is testing. It won't work in Preview. You need to go to Full Preview then add "?noredirect" to the URL in the address bar and hit return. This reloads the page and your are out of Preview.

1072408035_ScreenShot2021-01-31at2_38_57PM.png.b6c6540fe615e113a20b7c6e19b93258.png

Fill in the form, click the pay deposit button and you should be taken to the cart.

You can bypass the noredirect trick and just open an incognito/private window and go to the URL for the page. Which ever method works for you.

Let us know how it goes.

Hi,  my product forms do not have this advanced tab?

forms.PNG

Link to comment
  • 1 year later...
5 hours ago, sarahcreates said:

Do you know how you'd redirect the button on a _product_ custom form to go to the cart?

...

but not with an interim step of a custom form.

I think something might be done. The trick, I think, is to use a MutationObserver to watch the text of the add to cart button and then after it indicates that the item has been added, then do a redirect.

Now I have some prototype code to do the first part, watch for the text Added! in the atc.

Can you tell us a little more about how you want these products with forms to redirect? Is every product with a form going to redirect to cart? Do all your products have forms on them? Would you ever want to redirect anyplace other than the cart?

Once I have a bit more info I can cogitate of how the redirect part can be handled.

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
On 1/27/2023 at 3:42 AM, creedon said:

I think something might be done. The trick, I think, is to use a MutationObserver to watch the text of the add to cart button and then after it indicates that the item has been added, then do a redirect.

Now I have some prototype code to do the first part, watch for the text Added! in the atc.

Can you tell us a little more about how you want these products with forms to redirect? Is every product with a form going to redirect to cart? Do all your products have forms on them? Would you ever want to redirect anyplace other than the cart?

Once I have a bit more info I can cogitate of how the redirect part can be handled.

Hello @creedonsorry for the delayed response.

It is a simple e-comm site for event entry (charity), the form gathers the team member names. There will only ever be one 'product' (team) added to the cart at any time. No additional products needed.

Yes to each product redirecting to the cart.
Yes to both products having forms on them.
No to redirecting to any other place.

Just as a side note, I can't use the form at checkout though as there are two products (team entry and individual entry), I wouldn't want the same form to be shown to both hence using the custom form within each product.

Thanks for any help!

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.