Jump to content

Redirect "Add To Cart" Button to Scheduling App

Recommended Posts

On 1/20/2021 at 11:43 PM, creedon said:

@TylerJ

I suggest using the Javascript solution since you have jQuery installed.

I have updated my code post of October 30, 2020 to support folks who want to change multiple product item add to cart buttons.

Remove my previous code from your site so as not to cause problems.

Let us know how it goes.

I'm having a ton of issues trying to get this to work! I want to remove the price from a product, and have the Add to Cart button on that single product redirect to an external site, while preserving the style of another link in the product description. Nothing seems to work properly! Can you help? 

Test page: https://www.jordanpaddock.com/test-store/p/reproduction-prints

Link labeled 'TAKE ME TO THE PRINTS' directs to the url intended to replace 'Add to Cart' (jopadd.darkroom.tech). I tried to remove the the default button and make a styled button for that link as per a blogger's advice, but it also styled the 1st link (which redirects a detailed comparison page), and I'm not sure how to make it look like all the other buttons on my site or how to remove the price from that product. 

Link to comment

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

Edited by creedon

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

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

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

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

help example.JPG

Edited by Dm1999
wanted to show where I want to add my redirect button
Link to comment
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.

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

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

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

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

 

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

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

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

665489989_photo1.thumb.PNG.13f4ef6a58d78ff6044e9cfafa3d4c5e.PNG 

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

1045048310_photo3.thumb.PNG.bfdb2c85304d7926704afafe1dfc660f.PNG

 

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

1757080767_photo4.PNG.e70a3cbe8e10e36c6e10eaa3ab0ca4ba.PNG

 

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. 

1893174586_photo5.thumb.PNG.ec86188d0a2199d9a1df889cce7ad560.PNG

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. 847839300_photo6.thumb.PNG.7f3255000c5de65c88f66887e3298823.PNG

 

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. 

photo 2.PNG

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

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

Link to comment
  • 3 months later...
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. 

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

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

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

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.