Jump to content

Redirect "Add To Cart" Button to Scheduling App

Recommended Posts

On 5/3/2022 at 6:43 AM, Melbaspence said:

use CSS to turn the links into buttons.

CSS is for styling the look of elements. It can't add structure (HTML) to an element.

When you create the link in the text editor, click on the gear icon for advanced options.

140742304_ScreenShot2022-05-03at11_19_59AM.png.c63e27dcd8340faa0849cc2754423fbf.png

Use the Open In New Window option.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
54 minutes ago, creedon said:

CSS is for styling the looks of elements. It can't add structure (HTML) to an element.

When you create the link in the text editor, click on the gear icon for advanced options.

140742304_ScreenShot2022-05-03at11_19_59AM.png.c63e27dcd8340faa0849cc2754423fbf.png

Use the Open In New Window option.

Let us know how it goes.

@creedon Ok, that was incredibly simple and it worked! Thanks for the tip, will come in very handy. Also good to know CSS is for styling vs code injection / HTML to change structure. Thank you so much!

Link to comment
  • 2 months later...
  • 4 weeks later...
38 minutes ago, MidnightSoulBrand said:

when I try to check out the full code, it gives me a 404 page-- was the link updated?

Yes. I have updated the link in my October 30, 2020 post.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 months later...
On 10/7/2022 at 7:08 PM, jesyxng said:

Am I supposed to put the code as just html code?

Yes. HTML.

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 10/11/2022 at 5:07 PM, creedon said:

Yes. HTML.

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.

That would be perfect. 
Here is the url: https://khaki-crane-8lcp.squarespace.com/shop-products-1
PSW: finirocks
Really appreciate your help

Link to comment
14 minutes ago, jesyxng said:

turning it off didn't make a difference

The structure of the HTML is not as my read me shows.

<script>
twc.spdatcbur.idUrlMap = {
  
    /*
    
      the format of each line is a product id or sku and a URL
      
      copy and repeat the line below for each product id or sku, remove the
      "// " at the beginning of the line and enter the appropriate data. this
      has been done once initially
      
      */
      
    // '[enter product id or sku here between single quotes replacing square brackets]' : '[enter url here between single quotes replacing square brackets]',
    
    'SQ5140383' : 'https://earthhero.com/products/greta-vegan-soy-candle-planter',
    
};
<script>

The closing script tag is not correct it should be </script> not <script>.

Screen Shot 2022-10-18 at 11.08.11 AM.png

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
1 hour ago, creedon said:

The structure of the HTML is not as my read me shows.

<script>
twc.spdatcbur.idUrlMap = {
  
    /*
    
      the format of each line is a product id or sku and a URL
      
      copy and repeat the line below for each product id or sku, remove the
      "// " at the beginning of the line and enter the appropriate data. this
      has been done once initially
      
      */
      
    // '[enter product id or sku here between single quotes replacing square brackets]' : '[enter url here between single quotes replacing square brackets]',
    
    'SQ5140383' : 'https://earthhero.com/products/greta-vegan-soy-candle-planter',
    
};
<script>

The closing script tag is not correct it should be </script> not <script>.

Screen Shot 2022-10-18 at 11.08.11 AM.png

Oops, I went ahead and fixed that. But now it keeps throwing me 400 bad request errors when I click add to cart. So sorry to keep bothering about this but I'm not sure what's wrong still

Edited by jesyxng
Link to comment
18 minutes ago, jesyxng said:

But now it keeps throwing me 400 bad request errors when I click add to cart.

In the store product detail add to cart button url redirect code you probably want to change the bailIfNoIdsInMap variable to false.

bailIfNoIdsInMap : false, // use false or true

Let us know how it goes.

Screen Shot 2022-10-18 at 11.08.11 AM.png

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
17 hours ago, creedon said:

In the store product detail add to cart button url redirect code you probably want to change the bailIfNoIdsInMap variable to false.

bailIfNoIdsInMap : false, // use false or true

Let us know how it goes.

Screen Shot 2022-10-18 at 11.08.11 AM.png

changed that, unfortunately still throwing error 400

Link to comment

I am having a similar issue. 

When I click add to cart on the product page, nothing happens at all. 

I used the updated code to install referenced in your oct 20 post, added the twcsl.js as a linked page, added the scripts to header code of the site, added scripts to header code of the shop page and updated as instructions say, and added the code block to the product page. 

I do not want replace the add to cart button, but I just want to have the add to cart button redirect to a specified url. 

My site is https://www.rachelaltschuler.com/shop-1/p/gertrude password is jackie1

Link to comment
13 hours ago, creedon said:

@jesyxng @Jackie123

I have updated my cited code in my October 30, 2020 post.

Ah thank you! I deleted and then copy pasted the new code in the shop page header, but it is still doing nothing. I'm afraid the error might be on my part this time?  Any help would be much appreciated.  My site is https://www.rachelaltschuler.com/shop-1/p/gertrude password is jackie1

Link to comment
12 hours ago, Jackie123 said:

I'm afraid the error might be on my part this time?

It is an issue with your site. A Javascript function window.open has been redefined from a function to HTML.

2089250287_ScreenShot2022-10-20at11_21_06AM.png.54c1d6809f579dfb3edad6eb848a6141.png

155581252_ScreenShot2022-10-20at11_21_30AM.png.1e04865857241827a869384d94aa39bb.png

1023146543_ScreenShot2022-10-20at11_23_26AM.png.bbb34498824b5977c6de1a97cae10814.png

The following piece of code in a code block is causing an issue.

<script type="text/javascript">
    var date = new Date(),
    year = date.getFullYear(),
    open = '<p style="text-align: center; font-size: 80%; color: #8C857B;">',
    copy = '© ' + year + ' Rachel Altschuler Art',
    close = '</p>',
    html = open + copy + close;
    document.write(html);
 </script>

The issue is that your open variable, and others, are already defined in the global space. So you are redefining them.

<script type="text/javascript">
    const date = new Date(),
    year = date.getFullYear(),
    opn = '<p style="text-align: center; font-size: 80%; color: #8C857B;">',
    cpy = '© ' + year + ' Rachel Altschuler Art',
    cls = '</p>',
    html = opn + cpy + cls;
    document.write(html);
 </script>

I have a different approach that I've used.

<p style="text-align: center; font-size: 80%; color: #8C857B;">

  © <span id="copyright-year"></span> Rachel Altschuler Art
  
  </p>

<script>
    
  ( ( ) => {
  
    const d = new Date ( );
    
    const element = document.getElementById ( 'copyright-year' );
    
    element.textContent = d.getFullYear ( );
    
    } ) ( );
    
  </script>

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
57 minutes ago, creedon said:

It is an issue with your site. A Javascript function window.open has been redefined from a function to HTML.

2089250287_ScreenShot2022-10-20at11_21_06AM.png.54c1d6809f579dfb3edad6eb848a6141.png

155581252_ScreenShot2022-10-20at11_21_30AM.png.1e04865857241827a869384d94aa39bb.png

1023146543_ScreenShot2022-10-20at11_23_26AM.png.bbb34498824b5977c6de1a97cae10814.png

The following piece of code in a code block is causing an issue.

<script type="text/javascript">
    var date = new Date(),
    year = date.getFullYear(),
    open = '<p style="text-align: center; font-size: 80%; color: #8C857B;">',
    copy = '© ' + year + ' Rachel Altschuler Art',
    close = '</p>',
    html = open + copy + close;
    document.write(html);
 </script>

The issue is that your open variable, and others, are already defined in the global space. So you are redefining them.

<script type="text/javascript">
    const date = new Date(),
    year = date.getFullYear(),
    opn = '<p style="text-align: center; font-size: 80%; color: #8C857B;">',
    cpy = '© ' + year + ' Rachel Altschuler Art',
    cls = '</p>',
    html = opn + cpy + cls;
    document.write(html);
 </script>

I have a different approach that I've used.

<p style="text-align: center; font-size: 80%; color: #8C857B;">

  © <span id="copyright-year"></span> Rachel Altschuler Art
  
  </p>

<script>
    
  ( ( ) => {
  
    const d = new Date ( );
    
    const element = document.getElementById ( 'copyright-year' );
    
    element.textContent = d.getFullYear ( );
    
    } ) ( );
    
  </script>

Let us know how it goes.

Screen Shot 2022-10-18 at 11.08.11 AM.png

Ahhhh you're amazing. Thank you for that.  I never would have found it.  The code works perfectly now on the redirect too.  Thank you!! 

Link to comment

@creedon hey there, I followed this a while back to redirect CTA on product page to external link. 

One extra thing I'm looking to add to design. For all the buttons linking out, I want to add the external link icon (attached) after the copy "Buy it now". Can you advise how to do that? 

Also, it looks like the text is centered right to left, but not top to bottom. Can you tell me how to fix that?

Website is live - https://www.senseofspencer.com/home-decor-edit/p/raja-throw-pillow

Thank you!

image.png.570aa0296587f0bfdf9c296681ab16cd.pngimage.png.0f97144360b9aaaa88fd678d49d717a1.png

 

Link to comment
On 10/20/2022 at 1:26 PM, Jackie123 said:

Ahhhh you're amazing. Thank you for that.  I never would have found it.  The code works perfectly now on the redirect too.  Thank you!! 

One more thing I'm seeing is that the button does not redirect on the quick view page.  It still adds the product to the cart.  Is the functionality not there for quick view enabled or maybe I did something else wrong.

Link to comment
9 hours ago, Jackie123 said:

One more thing I'm seeing is that the button does not redirect on the quick view page.  It still adds the product to the cart.  Is the functionality not there for quick view enabled or maybe I did something else wrong.

The code was designed for Product Detail pages only as indicated in the title of the code.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.