Linking add to cart to an external URL

Hello, I’m building an online store at the moment and I want to know if it’s possible to list some of my products that I have to sell through another website and link to an external URL instead of adding to cart.
I sell sheet music and because of getting the copyright permissions, some of my music has to be sold through a larger company. I currently have about half my products sold through a third party and not available on my site. 
I’m new to squarespace having decided to move from rapidweaver. On my rapidweaver site I was able to link to an external URL so that when customers clicked the “Buy “ or “Add to Cart” buttons for those products, it took to them to the relevant page on the external site to purchase it. I really want to be able to list both products sold on my site and the products I sell through a third party as I earn commission for customers who are referred to the other site through mine. Is this possible on squarespace? I want to be able to list all my products even if I’m only selling about half of them through my own site. 
I’m not someone with any real technical know how but, I’m hoping someone can answer this question. 

Hi. Yes. This is Possible.

here is a demo.

Pass: abc

I'm keen to understand how to do this.  Link to demo is great - but how can it be done please?

19 hours ago, Challenger2 said:

I'm keen to understand how to do this.  Link to demo is great - but how can it be done please?

Add external link in Excerpt, then we will give the code to turn link to button

On 11/12/2020 at 2:39 AM, tuanphan said:

Add external link in Excerpt, then we will give the code to turn link to button

I'm curious on how this can be done as well. Please advise. 

On 11/12/2020 at 12:39 PM, tuanphan said:

Add external link in Excerpt, then we will give the code to turn link to button

Would love help on this also.

We're adding a new affiliate shop section linking out to some of our favorite products.

Will still maintain other sections of the shop where the sales happen on our platform.

So hoping for a tweak that allows some 'BUY NOW' buttons to link out and others to perform a typical sale on the site.

The site is this https://www.listen.bar/shop

It's built on Squarespace 7.1

On 11/12/2020 at 12:39 PM, tuanphan said:

Add external link in Excerpt, then we will give the code to turn link to button

Been googling more about Excerpts - is the demo page built on a blog format rather than a shop tool & then repurposed for Shop / Link out functionality? Ideally, my hope would be to integrate it into the existing shop as a category.

Hey All - did anyone get to the bottom of this?

I need "Add to cart" URLs for my products to use on an affiliate site and I can't find out where those links are / how to generate them.

I'm using Squarespace 7.1

On 12/12/2020 at 7:16 AM, Lfost411 said:

Hey All - did anyone get to the bottom of this?

I need "Add to cart" URLs for my products to use on an affiliate site and I can't find out where those links are / how to generate them.

I'm using Squarespace 7.1

You can add a text link in description, then share url, we can give code to turn link to button

Reading through this, I'm a little confused. So there is a way to have the "Add To Cart" button send customers to an external link to purchase. And that's done through editing the code?

On 1/13/2021 at 7:17 AM, dmanp3 said:

Reading through this, I'm a little confused. So there is a way to have the "Add To Cart" button send customers to an external link to purchase. And that's done through editing the code?

If you don't want to use code. You can add button > insert external link in Additional Info

@Jigbyjim @Challenger2 @cooltightyeahbro @actualhuman @Lfost411 I recently got help on doing this in another thread (Redirect “Add To Cart” button to scheduling app). Two things will need to be done:

This answer was provided to me by @creedon

Add the following to Settings > Advanced > Code Injection > HEADER. 

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

The second thing you will need to do is:

Add the following to Store Settings > Advanced > Page Header Code Injection.

<script>

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

Replace https://www.squarespace.com with the url you want to link to leaving the ‘ ‘ around the url.

You can add custom button text on on the edit product page.

On 1/15/2021 at 11:50 PM, TylerJ said:

@Jigbyjim @Challenger2 @cooltightyeahbro @actualhuman @Lfost411 I recently got help on doing this in another thread (Redirect “Add To Cart” button to scheduling app). Two things will need to be done:

This answer was provided to me by @creedon

 

Add the following to Settings > Advanced > Code Injection > HEADER. 

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

The second thing you will need to do is:

 

Add the following to Store Settings > Advanced > Page Header Code Injection.

<script>

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

Replace https://www.squarespace.com with the url you want to link to leaving the ‘ ‘ around the url.

 

You can add custom button text on on the edit product page.

 

This worked for me! However, this makes it so that every "add to cart" button links to the same url. Is there a way to use different links for different products on the site?

49 minutes ago, Drinkbox said:

Is there a way to use different links for different products on the site?

Why yes there is!

Let us know how it goes.

1 hour ago, creedon said:

Why yes there is!

Let us know how it goes.

@creedon Thanks so much!! This MOSTLY works. The only problem is that it doesn't work for products with variants, like the attached screenshot. Although I made separate entries for each sku in the list, the "add to cart" button redirects to the link associated with first item (SQ94*****) regardless of which variation is selected in the drop-down menu. Do you perchance know of a way around this besides giving each item its own page?

@Drinkbox

Ah. A new wrinkle. The current code only looks for the first SKU in a product with variants. Only because no one asked for having each variant have it's own URL until now! 🙂 I'm going to have to cogitate on this one for a bit. Although I think all the SKUs for variants are available data wise. I don't recall if the user selection is hanging out somewhere in the inner data in some relatively useable form.

@creedon

I appreciate you checking it out! Well idk if this helps but I did confirm that I can specify which variant to select for the link by changing the value in this line:

 const sku = Static.SQUARESPACE_CONTEXT.product.variants [ 2 ].sku;

However, still no idea how to read the user's input. Also, if the value isn't set to 0 the products without variants go back to adding to cart. Let me know if you think of anything!

By the way, I tried simply repeating the line with each possible value like so:

Static.SQUARESPACE_CONTEXT.product.variants [ 0 ].sku;
Static.SQUARESPACE_CONTEXT.product.variants [ 1 ].sku;
Static.SQUARESPACE_CONTEXT.product.variants [ 2 ].sku;
Static.SQUARESPACE_CONTEXT.product.variants [ 3 ].sku;

I figured it wouldn't work since I still wasn't reading user data, but the result was still interesting. The products without variants didn't work, but the one product with variants linked to option 0. Dunno if this helps but I thought it was neat!

@Drinkbox

Yes that is a data structure to know what the variants are. One trick is to know which one the user has selected and then set up the URL to go to. The new code would also have to run when the user clicks the replacement button. Currently it runs when the page loads.

@Drinkbox

I've updated my October 30th code post in the following thread.

Let us know how it goes.

@creedon

Works perfectly! You're a wizard, thanks for taking care of this so quickly!! 😁

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

@Drinkbox

I'm not seeing anything in the code. I threw it into a store page and didn't get any immediate errors.

Nothing you described seems likely to cause a problem but you never know.

At this point I would need to see the code in action on a product item page to see if I can figure out what is going on.

Please post the URL to a page where the code should be working.

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

I can then take a look at your issue.

@creedon

https://bat-tambourine-b37e.squarespace.com/products/p/kissbeverage

Not sure what there is to learn, but here's one of the product pages; site password is "testvibes". Note that none of them are working at the moment, and all of them worked before things suddenly went wrong.

By the way, did you by any chance back up the code you made before adding functionality for variants? I regrettably did not, but if possible I'd like to see if that still works.

@Drinkbox

It appears someone removed the jQuery library that my code depends on.

Add the following to Settings > Advanced > Code Injection > HEADER. 

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

Let us know how it goes.

@creedon

OH that makes sense! Glad we got that sorted. Thanks again!