Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
trekyourmarket

Redirect add to cart button

Recommended Posts

Once someone has clicked the add to cart button (and the item has gone to their cart). How do I automatically redirect them to another page within the site?

I thought maybe changing the ecommerce site to allow express checkout - so once they click purchase it redirects them to the checkout page - but instead would redirect to another page within the site.

Ex. They want to purchase a blanket within the shop. They select how many they need and then select "purchase". Once they click "purchase" they are then directed to a new page allowing them to purchase monogramming for that blanket.

Thanks ahead of time!

Edited by trekyourmarket
Initial Revision

Share this post


Link to post

@trekyourmarket Here is a more elegant solution that will not interfere with putting items into the Cart:You can run a script that will, after they click "Add to Cart", reveal a gallery of Add-Ons related to that product, that they can then click on and purchase. You can see an example here:https://amazing-andrea-533j.squarespace.com/shop/(When you reach the site, just click the [Visitor Access] button and follow the instructions. Note that when you arrive in the shop there are 4 items. Only 2 items are "Add-Ons". Click on the "Digital Rescue" product. Then click "Add to Cart". The Gallery featuring the two Add-Ons is now revealed. )

To create this:

A) Put all of the "Add-Ons" for an item in the same Category. For example, if you have Monograms for Blankets and Custom Packaging for Blankets (I'm making stuff up here!) put them both in the Category "Addon-Blanket".B) In the "main product" under "Additional Info" add a Summary Block (I used Carousel) and point it to the Shop, and Filter by the "Category" designed for this product's Add-Ons.C) Below that Summary Block, add a Code Block that has this code:


 <script>
$(function() {
  var $button = $('.sqs-add-to-cart-button');
  $button.on('click', function(){
     $('div.sqs-block.summary-v2-block.sqs-block-summary-v2').appendTo('.Share-buttons');
     $('div.sqs-block.summary-v2-block.sqs-block-summary-v2').css("display", "block");
  });
});
</script>

In the Shop's Page Settings, under Advanced, add this code to the Page Header Code Injection:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.sqs-block.summary-v2-block.sqs-block-summary-v2 {
display: none;
 }
</style>

IMPORTANT, Under Settings > Commerce > Checkout make sure that "Enable Express Checkout" is NOT ENABLED or this won't work.

NOTE: The Classes .sqs-add-to-cart-button and .sqs-add-to-cart-button-inner are how the script targets the "Add to Cart" button. There's a chance that the template you're using uses different Classes, but without a link to your site, I was unable to confirm that.

Good luck!

Edited by AndreaDev
Revised to a different solution that works more effectively.

Share this post


Link to post

Thank you so much for helping @AndreaDev !!!

I tried everything I don't think it is working :( I have attached the site coding - which has the same names as the ones your listed above.I added it as a code within the additional information section and nothing happened. Any ideas?

alt text

screen-shot-2017-06-22-at-13701-pm.png.7868ea5f1a40a1c6eff4ff4fd7470778.png

Edited by trekyourmarket
Initial Revision

Share this post


Link to post

@trekyourmarket If you provide a link to your live or trial site, I'd be able to help you. I need to look for more details of the code in the collapsed elements. Thanks.

Share this post


Link to post

@trekyourmarket Yikes, that's no good that it's not adding to cart. Let me look at the test environment and I'll get back to you.

Edited by AndreaDev
Initial Revision

Share this post


Link to post

Hi – great to see some information on this. My issue is similar but hopefully slightly simpler! Can anyone help? I am offering a service so don't need to 'add to cart' – instead I wish to repurpose the add to cart button to 'enquire' which can link to a form at the bottom of the same product page.

You can see this here: https://www.stonepaperscissors.co.uk/game-themes/the-blitz

Any thoughts?Thanks in advance!

Share this post


Link to post

This is exactly what I need to force the selection of an add-on item.Is the code type "Javascript"? I added the numbers in front of each line in the code editor. The code is now visible on the product page and Add to Cart is not redirecting. Any insight? I'm using Brine template. Thanks.

Edited by Brothermother

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...