Add Product to Cart and Redirect to Cart After Form Submission

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,

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?

Hi Creedon,

The pop-up functionality doesn't work well with what I am trying to do. Any other recommendations?

Thanks,

And it wouldn't work to put the form on the checkout page?

No it wont. Please see screenshot. I need customers to be able to look at options on the right while they fill out the form on the left.

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

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.

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 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,

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?

I'm curious to see how long the auto-click process takes, but definitely down to give it a shot!

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.

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.

Hi Creedon,

I appreciate your help and testing, but if the result of your solution is intermittent I will have to look for another solution. Let me know if you have any other ideas.

Thanks, 

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.

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.

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.

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?

@ElizaMudge

My comment was related to page form blocks.

@creedon this topic comes closest to a current query I have. Do you know how you'd redirect the button on a _product_ custom form to go to the cart? I've done this in the past with a simple 'Add to Cart' redirect, but not with an interim step of a custom form. Any help appreciated?

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.

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!