Redirect "Add To Cart" Button to Scheduling App

@TylerJ

I suggest using the Javascript solution since you have jQuery installed.

I have updated my code post of October 30, 2020 to support folks who want to change multiple product item add to cart buttons.

Remove my previous code from your site so as not to cause problems.

Let us know how it goes.

19 hours ago, creedon said:

@TylerJ

I suggest using the Javascript solution since you have jQuery installed.

I have updated my code post of October 30, 2020 to support folks who want to change multiple product item add to cart buttons.

Remove my previous code from your site so as not to cause problems.

Let us know how it goes.

I tried copying that code and altering as it says. If I add multiple SKUs separated by , all on one line directed to one https://www.eventmamas.com/schedule, it does not redirect to that url. It redirects to https://www.eventmamasaz.com/shop/p/undefined

If I add a separate line with only one SKU to a different url then any of the above SKUs add the item to cart. If I // the multiple SKU line then the single line works perfectly fine. Here is what I currently have and any SKU I click on just adds the item to the cart.

What might I be doing wrong here?

<script>

  $( ( ) => {
  
    debugger;
    
    const skuUrlMappings = {
    
      /*
      
        skus can be copied from a product item
        
        if you need more than one mapping then copy the line below, remove the
        "// " at the beginning of the line and enter the appropriate data
        
        */
        
       'SQ7877615, SQ3509884, SQ4108194, SQ5455403, SQ3834839, SQ4203701, SQ7273848, SQ3017341, SQ3998078, SQ1359881, SQ8312462, SQ1315619, SQ0851290, SQ4883355, SQ5433660, SQ3141676, SQ4329238, SQ0133624, SQ6412197, SQ5472623, SQ5632106, SQ7190695, SQ0487376, SQ2342351, SQ3054355': 'https://www.eventmamasaz.com/schedule'
      
      // last or only item doesn't get a comma at the end
      
      'SQ6096208': 'https://www.eventmamas.com/contact'
    
      
      }
      
    // do not change anything below, there be the borg here
    
    if ( ! $( '.ProductItem' ).length ) return;
    
    const sku = Static.SQUARESPACE_CONTEXT.product.variants [ 0 ].sku;
    
    if ( ! sku in skuUrlMappings ) return;
    
    var $addToCartButton = $( '.sqs-add-to-cart-button' );
    var $addToCartButtonClone = $addToCartButton.clone ( )
    
      .click ( function ( ) {
      
        window.location = skuUrlMappings [ sku ];
        
        } );
        
    $addToCartButton.replaceWith ( $addToCartButtonClone );
    
    } );
    
  </script>

On 1/21/2021 at 7:45 PM, TylerJ said:

What might I be doing wrong here?

I'm afraid my explanation of how to set up the data structure was inadequate.

Let's see if this example will help. The full code is earlier in this thread. This is just the user settings portion of the code.

    const skuUrlMap = {
    
      /*
      
        the format of each line is a sku as appears in the SS product editing
        interface and a URL
        
        copy and repeat the line below for each mapping, remove the "// " at the
        beginning of the line and enter the appropriate data
        
        the url can be any valid url. it can be a full (external to your site)
        one like < https://www.tomsWeb.consulting/ > or a partial (internal to
        your site) one like '/contact'
        
        copy and repeat the line below for each mapping, remove the "// " at the
        beginning of the line and enter the appropriate data
        
        */
        
      // '[enter sku here between single quotes]' : '[enter url here between single quotes]',
      
      'SQ7877615' : '/schedule',
      'SQ3509884' : '/schedule',
      'SQ4108194' : '/schedule',
      'SQ5455403' : '/schedule',
      'SQ3834839' : '/schedule',
      'SQ4203701' : '/schedule',
      'SQ7273848' : '/schedule',
      'SQ3017341' : '/schedule',
      'SQ3998078' : '/schedule',
      'SQ1359881' : '/schedule',
      'SQ8312462' : '/schedule',
      'SQ1315619' : '/schedule',
      'SQ0851290' : '/schedule',
      'SQ4883355' : '/schedule',
      'SQ5433660' : '/schedule',
      'SQ3141676' : '/schedule',
      'SQ4329238' : '/schedule',
      'SQ0133624' : '/schedule',
      'SQ6412197' : '/schedule',
      'SQ5472623' : '/schedule',
      'SQ5632106' : '/schedule',
      'SQ7190695' : '/schedule',
      'SQ0487376' : '/schedule',
      'SQ2342351' : '/schedule',
      'SQ3054355' : '/schedule',
      'SQ6096208' : '/contact',
      
      }
      
    /*
    
      used when a mapping is not defined for a product that has other mappings
      defined
      
      */
      
    const defaultUrl = 'http://www.tomsWeb.consulting/';

Given that you have most of your product items point to one URL this code might be made more efficient. This code is general purpose.

Let us know how it goes.

@creedon

Thank you so much that worked. I did try something similar but I must have had something wrong.

@TylerJ

No worries. Javascript like many languages is fairly particular about syntax. One comma out of place and bang, you're dead.

On 1/21/2021 at 10:25 PM, creedon said:

I'm afraid my explanation of how to set up the data structure was inadequate.

Let's see if this example will help.

<script>

  $( ( ) => {
  
    const skuUrlMappings = {
    
      /*
      
        skus can be copied from a product item
        
        if you need more than one mapping then copy and repeat the line below
        for each mapping, remove the "// " at the beginning of the line and
        enter the appropriate data
        
        the url can be any valid url in the context of Squarespace. It can be
        a full one like "https://www.squarespace.com/" or a partial url like
        "/contact"
        
        */
        
      // '[enter sku here]' : '[enter url here]',
      
      'SQ7877615' : '/schedule',
      'SQ3509884' : '/schedule',
      'SQ4108194' : '/schedule',
      'SQ5455403' : '/schedule',
      'SQ3834839' : '/schedule',
      'SQ4203701' : '/schedule',
      'SQ7273848' : '/schedule',
      'SQ3017341' : '/schedule',
      'SQ3998078' : '/schedule',
      'SQ1359881' : '/schedule',
      'SQ8312462' : '/schedule',
      'SQ1315619' : '/schedule',
      'SQ0851290' : '/schedule',
      'SQ4883355' : '/schedule',
      'SQ5433660' : '/schedule',
      'SQ3141676' : '/schedule',
      'SQ4329238' : '/schedule',
      'SQ0133624' : '/schedule',
      'SQ6412197' : '/schedule',
      'SQ5472623' : '/schedule',
      'SQ5632106' : '/schedule',
      'SQ7190695' : '/schedule',
      'SQ0487376' : '/schedule',
      'SQ2342351' : '/schedule',
      'SQ3054355' : '/schedule',
      
      // last or only item doesn't get a comma at the end
      
      'SQ6096208' : '/contact'
      
      }
      
    // do not change anything below, there be the borg here
    
    if ( ! $( '.ProductItem' ).length ) return;
    
    const sku = Static.SQUARESPACE_CONTEXT.product.variants [ 0 ].sku;
    
    if ( ! sku in skuUrlMappings ) return;
    
    var $addToCartButton = $( '.sqs-add-to-cart-button' );
    var $addToCartButtonClone = $addToCartButton.clone ( )
    
      .click ( function ( ) {
      
        window.location = skuUrlMappings [ sku ];
        
        } );
        
    $addToCartButton.replaceWith ( $addToCartButtonClone );
    
    } );
    
  </script>

Given that you have most of your product items point to one URL this code might be made more efficient. This code is general purpose.

Let us know how it goes.

@creedon Thank you for posting this. This script has helped us redirect our products to an external cart.  I wanted to know, is there a way to keep the add to cart button animation? Normally it anitmated on click, adding to cart... added!. When cloning this button, the animation goes away. Anyway to keep it?

Thank you again. Your help is much appreciated.

4 hours ago, Ashyyc said:

When cloning this button, the animation goes away. Anyway to keep it?

No. That animating feature is SS's button communicating with their servers and adding the item to the cart. Since we've bypassed that feature the new button has nothing to communicate with. Hence no kind of status animation can be created.

8 hours ago, creedon said:

No. That animating feature is SS's button communicating with their servers and adding the item to the cart. Since we've bypassed that feature the new button has nothing to communicate with. Hence no kind of status animation can be created.

What about creating a similar animation or some kind of notification upon click, for the customer that item has been added to the cart?

On 10/30/2020 at 11:03 PM, creedon said:

To redirect to a scheduling page upon clicking the Reserve Your Date button add the following to Store Settings > Advanced > Page Header Code Injection.

<script>

  $( ( ) => {
  
    // replace add to cart button on product item with button that goes to a url
    
    const skuUrlMappings = {
    
      /*
      
        skus can be copied from a product item
        
        if you need more than one mapping then copy and repeat the line below
        for each mapping, remove the "// " at the beginning of the line and
        enter the appropriate data
        
        the url can be any valid url in the context of Squarespace. It can be
        a full one like "https://www.squarespace.com/" or a partial url like
        "/contact"
        
        */
        
      // '[enter sku here]' : '[enter url here]',
      
      // last or only item doesn't get a comma at the end
      
      'SQ2015221' : 'https://www.squarespace.com/'
      
      }
      
    /*
    
      used when a mapping is not defined for a product that has other mappings
      defined
      
      */
      
    defaultUrl = 'https://squarespace.com/';
    
    // do not change anything below, there be the borg here
    
    if ( ! $( '.ProductItem' ).length ) return;
    
    const skus = $.map ( Static.SQUARESPACE_CONTEXT.product.variants,
    
      function ( v ) {
      
        return ( v.sku );
        
        } );
        
    /*
    
      if our skus don't contain a mapped sku then bail, in other words does not
      replace add to cart button
      
      */
      
    if ( ! skus.some ( r => Object.keys ( skuUrlMappings ).indexOf ( r ) >= 0 )
    
      ) return;
      
    let $addToCartButton = $( '.sqs-add-to-cart-button' );
    
    let $addToCartButtonClone = $addToCartButton.clone ( )
    
      .click ( function ( ) {
      
        let sku = skus [ 0 ]; // we assume one variant for product item
        
        // we go looking for more than one
        
        let $productVariants = $( '.product-variants' );
        
        if ( $productVariants.length ) {
        
          let selectedVariant = $( '.product-variants' )
          
            .attr ( 'data-selected-variant' );
            
          if ( selectedVariant === undefined ) return;
          
          selectedVariant = JSON.parse ( selectedVariant );
          
          sku = selectedVariant.sku;
          
          }
          
        const url = sku in skuUrlMappings ? skuUrlMappings [ sku ] : defaultUrl;
        
        location = url;
        
        } );
        
    $addToCartButton.replaceWith ( $addToCartButtonClone );
    
    } );
    
  </script>

Let us know how it goes.

Hi @creedon, this is brilliant thank you!  Is there any way to make it open in a new window...?

On 3/23/2021 at 1:16 AM, Challenger2 said:

Hi @creedon, this is brilliant thank you!  Is there any way to make it open in a new window...?

Can you share link to a product?

On 3/22/2021 at 11:16 AM, Challenger2 said:

Is there any way to make it open in a new window...?

I have updated my previous code post.

You will want to use the targetAtttributeValue setting as follows to open into a new window.

const targetAtttributeValue = '_blank';

Let us know how it goes.

On 3/25/2021 at 4:57 AM, creedon said:

I have updated my previous code post.

You will want to use the targetAtttributeValue setting as follows to open into a new window.

const targetAtttributeValue = '_blank';

Let us know how it goes.

Brilliant, thank you.  Only just seen this, apologies for the bump! 🙂

On 3/25/2021 at 4:57 AM, creedon said:

I have updated my previous code post.

You will want to use the targetAtttributeValue setting as follows to open into a new window.

const targetAtttributeValue = '_blank';

Let us know how it goes.

Sorry to be dim, but I can't find the updated code?  Where is it please?

On 3/25/2021 at 4:57 AM, creedon said:

I have updated my previous code post.

You will want to use the targetAtttributeValue setting as follows to open into a new window.

const targetAtttributeValue = '_blank';

Let us know how it goes.

And I have one other (possibly different) question.  Is it possible for a product item (on a product page) to link to another page.  So, rather than the item opening the product item page, it goes to another page?  I have a number of product pages, and want to link an apparent product item to another product page.

5 hours ago, Challenger2 said:

I can't find the updated code?  Where is it please?

Go to my Jan. 21st post (edited Apr. 2nd) earlier in this thread.

You want to change the line...

const targetAtttributeValue = '';

...to...

const targetAtttributeValue = '_blank';

5 hours ago, Challenger2 said:

Is it possible for a product item (on a product page) to link to another page.

I believe that could be done. I suggest starting a new thread with your question so as not to mix the two topics.

On 4/13/2021 at 5:53 PM, creedon said:

Go to my Jan. 21st post (edited Apr. 2nd) earlier in this thread.

You want to change the line...

const targetAtttributeValue = '';

...to...

const targetAtttributeValue = '_blank';

 

Ah, brilliant, thank you.

I'd love to ask a new question.

Can we make the redirect script occur after the product is successfully added to the cart?

So for example, once you click "Add to Cart" jump straight to the /cart OR to /checkout, without having to have "Express Checkout" turned on. Since cart items are saved in the "CART" cookie in the browser, it's too easy to add multiples of the same items without users realizing.

@NickBurgher

Please see the following.

@creedon Hi! Thanks for your great advice and code. I am trying to add this to my website, but don't have a ton of experience with coding so I'm a little lost. Are you able to help see what the issue is? I just want the e-gift card add to cart button to direct to an external link, but no other products. I tried the code posted above but it wasn't working. Like I said, I am not familiar with code so I'm not sure I put it in correctly. 

here is the link for the product page. https://www.mysodalicious.com/shop/e-gift-card

@lehansen

You are almost there! The only thing you need to do is add a comma after each of the lines you added to the script.

      'SQ6403297' : 'https://sodalicious.securetree.com/'
      
      'SQ6403297' : 'https://sodalicious.securetree.com/'

...becomes...

      'SQ6403297' : 'https://sodalicious.securetree.com/',
      
      'SQ6403297' : 'https://sodalicious.securetree.com/',

Let us know how it goes.

@creedon Ahh okay I just tried and am having the same issue where it takes me to the squarespace checkout page instead of the external link. Any advice?

@lehansen

You are still missing a comma after the first sku line. Got to have them in there or the code breaks!

Ignore my comment about the last or only item doesn't get a comma at the end. It was my old coding style. I've since simplified what was a confusing comment for folks that don't code.

@creedon Darn, I thought I had it! I've since added the commas I think in the correct places, and it's still going to the squarespace checkout page instead of the external link. Do you mind if I DM you with more questions so I'm not hogging up the thread? Sorry for all of the questions!! 

@lehansen

The commas are right but here is the second issue. The code was written for v7.1 sites. Your site is v7.0 using the Fulton template.

That is my bad I should have caught that earlier.

Let me see if I can expand my code to work for v7.0 and Fulton. Not sure if I can.

Give me several days.