Linking add to cart to an external URL

Hi @creedon

I work for a summer camp that uses Squarespace to show our many day camps, but then people register through our camp software. I'd like to change the Add to Cart button to say Register (which I did in my test product), but then have it go to our external registration site Camp Brain- https://parishsummer.campbrainregistration.com/?ReturnUrl=%2FHome%2FLanding&fbclid=IwAR2DHvKZYqa9-y0ERxeNA8VFnXigTQ4GW9j8ZeEAfzdA9NIoWJ_wl4hkUIg.

I've tried the solution you've given above, but when I test the button it just goes to a blank Squarespace page and sort of gets stuck, and the is displaying on my site at the top. I'm a rookie at the coding part, so I'm bet it is something I've done. Any ideas? Also, is there a way to universally change the Add to Cart button to say Register throughout the entire site, or do I need to do it in each product?

Thank you in advance for your help!

Brooke

@bmayer

Please post the URL to the page you are testing on for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@creedon thanks!

The site is rhubarb-mandolin-xj9b.squarespace.com and the password is registerbutton. The product I've been playing with for this exercise is here: https://rhubarb-mandolin-xj9b.squarespace.com/week-1/p/pet-painting. 

Thank you!

Brooke

@bmayer

I see several issues going on. I suggest removing all the code you have in Store Settings > Advanced > Page Header Code Injections. Set that code aside.

Now copy the code from my post above and paste it into Page Header Code Injection directly. Don't stop off in a word processor on the way. Change the url. I found smart single quotes in your code and Javascript doesn't like smart single quotes. It likes straight single quotes.

I also found other syntax errors.

Let us know how it goes.

Good morning @creedon, 

Thanks for your reply. I copied and pasted your code exactly how it was above into the page header and changed the url only. When I hit the register button, I just go to a blank screen that seems to get stuck. See screenshot.

I also just copied and pasted the script directly from above into Advanced Settings Header. I had to put in some code to remove the quantity and floating shopping cart in the CSS editor, could that be interfering? 

Thank you for your help. It is greatly appreciated.

Brooke

@bmayer

Your website has expired.

I subscribed now. We were on a trial. Sorry about that! @creedon

On 2/10/2021 at 7:01 AM, bmayer said:

I had to put in some code to remove the quantity and floating shopping cart in the CSS editor, could that be interfering? 

CSS would not interfere with the Javascript.

I just tried your Registration button and it worked a treat!

What happens if you look at that page in an incognito/private window and click the button? Do you get the same behaviour?

@creedon Yay! I guess it just wasn't working on the configure side. This is so great! THANK YOU so much for your help. I really appreciate it!

Brooke

Hello,

I jut wanted to clarify something for other users like me who want to link products to separate external sites where customers can then add to cart and checkout through the external site. I used this excellent code and instructions (below) from creedon. However, I was very confused by the phrasing "the url can be any valid url in the context of Squarespace." I though that this meant I had to use a link generated from Squarespace, which then never gave me a place to input the external url that I wanted to link to. However, this is not true.

To link my product to the correct external site, I simply input the sku and then used the URL of the page on the external site that I wanted to send users to as the url input directly behind the sku it linked to. For example, I input 'SQ6880873' : 'https://www.youthtothepeople.com/products/superfood-face-cleanser', changed nothing else about the given code at all, and it worked like a charm. Maybe this is not confusing to other website builders, but I spent a week in frustration over this because it was never clear to me how I was supposed to link the specific sku and the external website I wanted it to go to until I tried this out. 

<script>

  $( ( ) => {
  
    /*
    
      replace add to cart button on product item with button that goes to a url
      
      SS Version : 7.1
      
      */
      
    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'
      
      }
      
    /*
    
      used when a mapping is not defined for a product that has other mappings
      defined
      
      */
      
    const defaultUrl = 'http://www.tomsWeb.consulting/';
    
    const targetAtttributeValue = ''; /* use _self (default, if left empty) |
                                         _blank | _parent | _top | framename */
    
    // do not change anything below, there be the borg here
    
    if ( ! $( '.ProductItem' ).length ) return;
    
    const excludeButtonAttributes = [ 'id', 'data-collection-id',
    
      'data-item-id', 'data-original-label', 'data-product-type' ];
      
    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;
      
    const $addToCartButton = $( '.sqs-add-to-cart-button' );
    
    let $anchorTag = $( '<a>' )
    
      .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;
        
        $( this ).attr ( 'href', url )
        
        } );
        
    $.each ( $addToCartButton.prop ( 'attributes' ), function ( ) {
    
      if ( excludeButtonAttributes.includes ( this.name ) ) return true;
      
      $anchorTag.attr ( this.name, this.value );
      
      } );
      
    if ( targetAtttributeValue )
    
      $anchorTag.attr ( 'target', targetAtttributeValue );
      
    $addToCartButton
    
      .children ( )
      
      .appendTo ( $anchorTag );
      
    $addToCartButton.replaceWith ( $anchorTag );
    
    } );
    
  </script>

@gfarm

My apologies for the frustration. I think the context of Squarespace phrasing was left over from a previous incarnation of the code when it did less.

I have updated the code removing the phrasing. Hopefully it is clearer now.

This is a really helpful thread and wondering if someone knows how to do the following. I want the 'Add to Cart' button to directly link to my cart for certain products but I don't want to turn on site wide Express Checkout. I used this code which directly brings people to my cart but doesn't add the product to the cart. 

Is this possible? 

@Carrzer

Please see my followup.

On 1/25/2021 at 9:53 AM, Drinkbox said:

@creedon

WELL it worked for a very short time, and then suddenly for seemingly no reason none of the Add to Cart buttons were links anymore. I'm sorry to rely on you once again, but I'm at my wit's end trying to figure out what's causing the sudden problem 🙃

To the best of my knowledge, I didn't make any meaningful changes to the script between when it worked and when it didn't but I've attached my current code at the bottom in case you can see something I cannot. I've also verified that the sku codes didn't change for the products, so that isn't the issue.

The notable changes that happened in that time are:

1. Descriptions were added to each product to display on the product pages. Seems unlikely to cause a problem, but it was done by a colleague working on the website at the same time as I was editing the Products Page Header Code Injection and CSS so maybe there was some sort of interference?
2. Similarly to this thread as well, I removed the Quantity drop-down selection by tagging each product "hidequantity" and adding these lines to the Custom CSS: 

   
         //Remove Quantity Dropdown//
   article .tag-hidequantity .product-quantity-input{
       display: none;
   }

Reverting these changes did not fix the issue, so I am at a loss. The only other thing is that I initially mistakenly added the above CSS code to the Products Page Header Code Injection. It's worth noting that I first noticed the issue after removing those lines and placing them in the proper place in the Custom CSS, but I find it hard to imagine that they could cause problems even after they're gone.

Any advice would be greatly appreciated! As mentioned, here is the code being injected into the Products Page Header:

<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
    
      'SQ5417563' : 'https://www.bccannabisstores.com/products/cbd-thc-biomed?_pos=4&_sid=a6188a708&_ss=r', //THC CBD Indica
      
      'SQ8161064' : 'https://www.bccannabisstores.com/products/thc-hybrid-thc-biomed?_pos=2&_sid=a6188a708&_ss=r', //THC Hybrid
      
      'SQ2402320' : 'https://www.bccannabisstores.com/products/thc-indica-thc-biomed?_pos=1&_sid=a6188a708&_ss=r', //THC Indica
      
      'SQ6764880' : 'https://www.bccannabisstores.com/products/thc-sativa-lr-thc-biomed?_pos=3&_sid=a6188a708&_ss=r', //THC Sativa
      
      'SQ9487063' : 'https://www.bccannabisstores.com/products/thc-sativa-lr?_pos=6&_sid=a6188a708&_ss=r', //Preroll Sativa
      
//      'SQ7454924' : '', //Preroll Indica //NEED LINK
      
//      'SQ4683342' : '', //Preroll Hybrid //NEED LINK
      
//      'SQ9602290' : '', //Preroll CBD Indica //NEED LINK
      
      'SQ0334801' : 'https://www.bccannabisstores.com/products/thc-kiss-cannabis-beverage-shot?_pos=5&_sid=a6188a708&_ss=r', //THC Kiss
      
      'SQ1331800' : 'https://www.bccannabisstores.com/search?type=article%2Cpage%2Cproduct&q=THC*+BioMed*' //THC Kiss Gummies //NEED LINK

    }
    
    defaultUrl = 'https://www.bccannabisstores.com/search?type=article%2Cpage%2Cproduct&q=THC*+BioMed*';
    
    // 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>

 

This code is useful to using in the cart. You make my work easy. 

Lindsey's code is great but the end results are not exactly the same.

Folks, use whatever code works for your needs!

Hi @creedon, 
I successfully used your code in this thread to make the "add to cart" redirect to my "contact page". However, is it possible to make the external link being opened in a new window? 

In other words, I want the "add to cart" button to open the external link in a new window and NOT open from the current window. 

My site is greencotton.vn
Thank you in advance. 

7 minutes ago, wassupguise said:

However, is it possible to make the external link being opened in a new window? 

set the targetAtttributeValue variable to _blank

Let us know how it goes.

1 hour ago, creedon said:

set the targetAtttributeValue variable to _blank

Let us know how it goes.

Thanks for the quick response, how do I set the targetAtttributeValue variable to _blank ?
Another note: I want every "add to cart" (which is now labelled as "order form") to open a new window when the button is clicked. 

I have attached the code that I put inside my store's header code injection as below

<script>

  $( ( ) => {
  
    var url = 'https://www.greencotton.vn/contact';
    
    var $addToCartButton = $( '.sqs-add-to-cart-button' );
    var $addToCartButtonClone = $addToCartButton.clone ( )
    
      .click ( function ( event ) {
      
        window.location = url;
        
        } );
        
    $addToCartButton.replaceWith ( $addToCartButtonClone );
 
    } );
    
  </script>


Hope you can help! Thanks

11 hours ago, wassupguise said:

how do I set the targetAtttributeValue variable to _blank ?

Ah you are using different code than I thought. The code you show is for a different purpose and won't do what you need.

Please see the following.

There are instructions in the read me explaining how to configure the code to redirect all add to cart buttons to a single URL.

I am also trying to redirect the add to cart button to booking site url  just like TylerJ

and have used to code and directions he provided and am seeing results where sometimes it will redirect to the url and others it will just add the product to the shopping cart. Please does anyone have any ideas?

1 hour ago, gripvegas said:

used to code and directions he provided

The code mentioned is a summary of my code. You should always look for my most recent code, cited in TylerJ's post or the post just above the one you made.

creedon

I believe I followed the directions you provided just above my last reply, but to no avail. I made sure I removed any code that I previously had installed and followed the instructions, but it still is just adding the products to my cart and not redirecting to the url I provided in your code.

Any suggestions would be greatly appreciated.

44 minutes ago, gripvegas said:

Any suggestions would be greatly appreciated.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Here is one

https://www.gripvegas.com/all-golf-grips-for-purchase/saplize-golf-grip

@gripvegas

The code has been installed incorrectly.

First you need to reverse the following two lines.

    <script src="/s/twcsl.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

They should be...

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="/s/twcsl.js"></script> 

When you've done that let us know so we can take another look to see if there are other issues.