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

Linking add to cart to an external URL


Jigbyjim

Recommended Posts

  • 2 weeks later...

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

 

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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

107103102_ScreenShot2021-02-09at8_38_39PM.png.c06eb079426db3b0d07e4c2057adbeb3.png

I also found other syntax errors.

1489978600_ScreenShot2021-02-09at8_39_19PM.png.dfe092862d61c76f26c1bc20828c1583.png

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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.

image.png.109b7e5eb56ab83e61e5d1f75b7105e8.png

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


 

Edited by bmayer
Link to comment
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?

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 month later...

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>
Link to comment

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? 

Link to comment
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. 

Link to comment

Create an account or sign in to comment

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

√ó
√ó
  • Create New...