Redirect "Add To Cart" Button to Scheduling App

4 hours ago, Melbaspence said:

use CSS to turn the links into buttons.

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.

Use the Open In New Window option.

Let us know how it goes.

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.

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!

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

I have added v7.0 Ajax support.

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

To redirect to a scheduling page upon clicking the Reserve Your Date button please see Store Product Detail Add to Cart Button Change to Url Redirect.

Let us know how it goes.

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

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.

I've completed the steps from here, but after injecting the sku mapping code into the additional info section of the product nothing happens. Am I supposed to put the code as just html code? Or javascript? Please let me know if you can help

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.

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

Any help is much appreciated. Thank you in advance!

On 10/7/2022 at 7:08 PM, jesyxng said:

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

It appears you've turned on display source. That should be off.

24 minutes ago, creedon said:

It appears you've turned on display source. That should be off.

sure, but turning it off didn't make a difference 😞

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

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

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

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.

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.

changed that, unfortunately still throwing error 400

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

@jesyxng @Jackie123

It appears there is a bug in my code. Give me a couple of days to see what I can do. My apologies for the inconvenience.

@jesyxng @Jackie123

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

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

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.

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.

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.

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.

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

On 10/19/2022 at 5:11 PM, creedon said:

@jesyxng @Jackie123

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

Thank you for your help and patience! It's working now:))

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

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.

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.