Redirect "Add To Cart" Button to Scheduling App

@lehansen

I suggest removing your previous attempt and go to my October 30, 2020 post earlier in this thread. There I have cited my latest code to accomplish the effect you want. I tested it with your site here locally and it worked.

19 hours ago, Dm1999 said:

Ive managed to remove the deefault button but am having a hard time adding custom buttons. Is this still using CSS or do I switch over to HTML?

There are several posts in this thread that have code for various effects. Which one are you trying to use? What do you want to accomplish?

12 hours ago, jopadd said:

Can you help?

Your site is password protected so we can't see the issue.

2 hours ago, creedon said:

There are several posts in this thread that have code for various effects. Which one are you trying to use? What do you want to accomplish?

Ive removed the default add to cart and other features such as quantity. I just need help understanding where to enter the code to create my new redirect buttons which will lead to an external link

My custom HTML is adding it into the header so I cant get passed that stage

2 hours ago, creedon said:

Your site is password protected so we can't see the issue.

Whoops! I meant to add that the password is just "password"

15 hours ago, jopadd said:

and have the Add to Cart button on that single product redirect to an external site

Let's deal with this one first as my code doesn't handle the other issues you mentioned.

Is my code installed now? I couldn't see it.

1 hour ago, Dm1999 said:

I just need help understanding where to enter the code to create my new redirect buttons which will lead to an external link

In my October 30, 2020 post earlier in this thread, I have cited my latest code. There are instructions there on how to install.

4 hours ago, creedon said:

Let's deal with this one first as my code doesn't handle the other issues you mentioned.

Is my code installed now? I couldn't see it.

No, I couldn't get it to work 😕 Not sure what I did wrong, but it kept causing a 404 error

14 hours ago, jopadd said:

Not sure what I did wrong, but it kept causing a 404 error

It sounds to me like the code worked but the destination page did not exist. Did you create the destination page?

Without the code installed it is impossible for me to diagnose the issue.

@creedon Gotcha. I replaced it with the code from October 30, 2020 but still seem to have issues with it going to SS cart instead of redirecting. any insight as to where I've gone wrong? 

@lehansen

You need to install twcsl which is mentioned in the first step of the Quick Install.

@creedon Oh my goodness, I totally thought I had done that. Thank you so much for your help and patience with me. Appreciate the work you're doing!! 

5 hours ago, creedon said:

It sounds to me like the code worked but the destination page did not exist. Did you create the destination page?

Without the code installed it is impossible for me to diagnose the issue.

Okay, I've gone back and added the code! Let me know what you think

12 minutes ago, jopadd said:

Okay, I've gone back and added the code! Let me know what you think

You need to enter a URL.

Change what you have to the following.

      'SQ4130349' : 'https://jopadd.darkroom.tech/',

On 12/13/2021 at 5:07 PM, creedon said:

You need to enter a URL.

Change what you have to the following.

      'SQ4130349' : 'https://jopadd.darkroom.tech/',

 

ahh I didn't realize I had to add "https://".  Thank you! 

On 12/13/2021 at 5:07 PM, creedon said:

You need to enter a URL.

Change what you have to the following.

      'SQ4130349' : 'https://jopadd.darkroom.tech/',

 

I've gotten the quantity and price to be hidden, but they still show up in quick view. Is there a way to hide them there?

EDIT: I figured out the above, but the 'Add to Cart' button on Quick View still doesn't redirect to the external URL. Do you know a way to fix this? 

Thank you for all your help!!

3 minutes ago, jopadd said:

I've gotten the quantity and price to be hidden, but they still show up in quick view. Is there a way to hide them there?

Please start a new thread with a topic like how to hide quantity and price in a quick view for product.

Please provide context. What page your are on and what you want to happen when the quick view is clicked. I don't know if there is a solution but we won't know until we can isolate the issue.

It is much easier to discuss one topic per thread.

Please feel free to use the @ feature of this forum to ping me or anyone else you feel might be able to contribute to the new thread.

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

The code can now be configured to change all add to cart buttons to redirect to a single URL.

Hello sir @creedon, I really need your help with my website.

Basically I'm a real estate photographer and sell my services via squarespace..

I have already created the page on my website that give my clients the option to select the service they would like to choose and a few variants. 

(Variant For Example - Add Video with your photo package). And I set it up to give the the adjusted price for the service with the add on.

Then they can click the cart and it takes them to the Squarespace checkout page with their order information. ( Working flawlessly so far)

My problem is I want to redirect the "checkout button" in the shopping cart so when they click it it takes them to my Acuity Calendar where they can choose the date and time while the package they chose is still displayed.

I've been researching different methods of redirecting the checkout button and have found this forum that gives me the code to do so I'm just having trouble figuring out how and where to implement the codes into my website. I could really use your help! Thank you for your time.

I recently viewed @white_sarah's website and the way her scheduling works is exactly how I would like for my website to function, as she also provides photo services.

Below I will add a few photos of the process that works perfectly fine as well as where I get stuck.

Step 1 - Services Page - Here the customer can choose what service they would like.

Step 2 - The Service Page Itself - Here the customer can choose what add on they would like. (In the screenshot I added my video package). 

Step 3 - The Cart - The service has now been added to the cart. 

Step 4 - Shopping Cart Page - Here the customer can review the order and proceed to schedule the appointment, once I figure out how to redirect the (Checkout Button) to my Acuity Scheduling account. 

Step 5 - The Problem Page - This is where I am having trouble I don't need this page at all, my plan is to receive the service information in the cart and the scheduled time for the appointment through Acuity. Once I implement that into the website I can then send my clients invoices or I can receive payment through Acuity in itself. 

Sorry there's so much info I wanted this to make since to anyone available to help me. 

Thank you for your time, I look forward to getting this fixed. 

6 hours ago, WilsonRealEstatePhotos said:

I recently viewed @white_sarah's website and the way her scheduling works is exactly how I would like for my website to function, as she also provides photo services.

On white_sarah's site those products are bypassing the cart altogether.

So no information is coming from the SS cart on her site to the site she is redirecting to.

If you want folks to have a cart like experience you might want to check into @paul2009's Product Wishlist Extension. Not sure if it will do for your needs but perhaps paul2009 can expound.

If you want to implement white_sarah's effect and are having issues with my code, let me know.

On 11/6/2020 at 10:21 AM, white_sarah said:

Just FYI guys,

After the above code ended up working out from @creedon (thank you!) - I realized that I needed different booking links for each service. So here's the breakdown of what I ended up doing after lots of research:

GOAL: Redirect Add to Cart link to Acuity Scheduling session link

OUTCOME:

• First, I tagged each product that I wanted to change with "hideorder"
• I hid the Quantity and Add To Cart button with CSS
• Then I made any links in the product description into a button, making it easy for me to redirect to any link of my pleasing! 

EXAMPLE: https://leleandbeane27.squarespace.com/services/p/tennessee-wedding-package (password is password)

 

//Add "hideorder" tag to any product or service to remove dropdown, quantity, and order button //

//Remove Select Size Dropdown//
article .tag-hideorder .variant-option {
    display: none;
}

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

//Remove Order Button//
article .tag-hideorder .sqs-add-to-cart-button-wrapper {
    display: none;
}

//Make Link A Button Within My Branding//
.ProductItem-details .ProductItem-details-excerpt a {
  text-decoration: none!important;
  border: solid 1px #3B3C36 !important;
  color: #3B3C36 !important;
  transition: all .4s cubic-bezier(0.75, 0, 0, 1) !important;
  margin-block-start: 1.5rem;
  padding: 1.5%;
  background-size: 202% 100%;
  background-color: transparent !important;
  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, #3B3C36 50%) !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  width: 35%;
  text-align: center;
  font-size: .7rem !important;
}
.ProductItem-details .ProductItem-details-excerpt a:hover {
  color: #fff !important;
  background-position: -99% 0% !important;
}
 

This was incredibly useful! I'm planning to use this. One thing - I'd like the link from the button to drive to a separate tab. Could someone please advise how to do this? Thank you so so much!

CC @creedon in case you can help on this too. 

15 minutes ago, Melbaspence said:

One thing - I'd like the link from the button to drive to a separate tab.

My cited code has a feature to do this.

Find the following line in the code...

    const targetAtttributeValue = ''; /* use _self (default, if left empty) |
                                         _blank | _parent | _top | framename */

...and change it to...

    const targetAtttributeValue = '_blank'; /* use _self (default, if left empty) |
                                         _blank | _parent | _top | framename */
    

Be sure to get the my cited code from my October 30, 2020 post earlier in this thread. The freshest version of my code is pointed to from there.

Let us know how it goes.

9 hours ago, creedon said:

My cited code has a feature to do this.

Find the following line in the code...

    const targetAtttributeValue = ''; /* use _self (default, if left empty) |
                                         _blank | _parent | _top | framename */

...and change it to...

    const targetAtttributeValue = '_blank'; /* use _self (default, if left empty) |
                                         _blank | _parent | _top | framename */
    

Be sure to get the my cited code from my October 30, 2020 post earlier in this thread. The freshest version of my code is pointed to from there.

Let us know how it goes.

Thank you @creedon. Actually that's what I tried first, and it worked beautifully. Only problem is, I am going to be doing this for hundreds of SKUs so I don't think it is going to be manageable to input every single SKU / URL in the code injection. That's why I preferred the option in the post I quoted that put the URL in the product description and use CSS to turn the links into buttons. Given that, is there something I could add to that CSS to make the links open into separate tabs? Much appreciated! 

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.

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!