Put Scheduling as part of checkout process

Site URL: http://www.thebagboyz.com

I need to make the scheduling block embed within the checkout page,

OR embed it onto the form at checkout,

OR redirect to scheduler after checkout,

OR force the site to first go through scheduling page before checkout.   Anything before payment would probably make the user experience a great one... It just has to prompt the customer in a seamless way.  Whichever is easier on the backend but still allows me to tweak the Scheduling every once in a while... I am helping a client build essentially a (shipt/instacart to a very small microarea) and we have to be able to deliver (with rules) and add tip-- both for which the Acuity Scheduler accomodates. 

On 4/27/2020 at 10:50 AM, paul2009 said:

There isn't an ideal way to manage this scenario within the Squarespace ecosystem [of Squarespace and Acuity Scheduling].

Whilst the two are excellent standalone products, they have yet to be brought together to create a seamless experience. I say this because the scheduling form will prompt for the same personal details as the Squarespace checkout, which is never a great user experience. The styles of the two pages are also quite dissimilar and this may change of style may confuse some customers. 

It won't be a great experience for you either, because you'll need to check two order systems and manually match the appointments to orders. That said, and to answer your question 🙂, you could send customers to the scheduler to choose a slot then send them to the cart and on to checkout.

To do this you'd replace the cart link in the navigation with a link to the /schedule page. This would send them to pick a slot and add their details.

On the appointment confirmation page, you can add a message telling them what to do next, complete with a link to the /cart page. The customer can then click on the link to confirm their cart and proceed to the Squarespace checkout where they can pay.

To add the link to the appointment confirmation page, go to Business Settings > Appointment Types, click Edit and then Show a message after scheduling… 

Bear in mind that some users won't understand and if it is not abundantly clear what they should do next, you may lose them before they reach the cart. I'll be interested in how you get on.

Hi Paul, thanks for your very interesting pro tip here; I have a use case that may require this hack. Question though: do you know of any way to mash up scheduling and products in the opposite order? That is, have the customer start with a product selection, then route them into a scheduling flow, then into checkout?

Thanks for your expertise!

16 minutes ago, TomSlage said:

Do you know of any way to mash up scheduling and products in the opposite order? That is, have the customer start with a product selection, then route them into a scheduling flow, then into checkout?

Can you confirm the order you were hoping for @TomSlage? The workaround that I posted above was for product > scheduler > cart > checkout.

2 hours ago, paul2009 said:

Can you confirm the order you were hoping for @TomSlage? The workaround that I posted above was for product > scheduler > cart > checkout.

 

Ah! I missed that, sorry Paul! Yes, that's the exact flow I need. I'm having trouble understanding how to update the Add to Cart links on the product pages...do you know how I can update that? I'm using the Sackett template I believe.

Also, do you know if replacing the Add to Cart link with the /schedule link will still allow the quantity selected to pass into the cart later? E.g. the customer selects a quantity of 3 on the product page, then clicks the swapped /schedule link, goes through scheduling and clicks the cart link, will the quantity of 3 be shown in the cart?

Thanks again for you help!

On 4/27/2020 at 7:50 AM, paul2009 said:

There isn't an ideal way to manage this scenario within the Squarespace ecosystem [of Squarespace and Acuity Scheduling].

Whilst the two are excellent standalone products, they have yet to be brought together to create a seamless experience. I say this because the scheduling form will prompt for the same personal details as the Squarespace checkout, which is never a great user experience. The styles of the two pages are also quite dissimilar and this may change of style may confuse some customers. 

It won't be a great experience for you either, because you'll need to check two order systems and manually match the appointments to orders. That said, and to answer your question 🙂, you could send customers to the scheduler to choose a slot then send them to the cart and on to checkout.

To do this you'd replace the cart link in the navigation with a link to the /schedule page. This would send them to pick a slot and add their details.

On the appointment confirmation page, you can add a message telling them what to do next, complete with a link to the /cart page. The customer can then click on the link to confirm their cart and proceed to the Squarespace checkout where they can pay.

To add the link to the appointment confirmation page, go to Business Settings > Appointment Types, click Edit and then Show a message after scheduling… 

Bear in mind that some users won't understand and if it is not abundantly clear what they should do next, you may lose them before they reach the cart. I'll be interested in how you get on.

Hi Paul, how do you replace the cart link in the navigation with a link to the /schedule page? I don't see that as being an option in the site header. We are using version 7.0 and the Pacific template. The only option is to change the color of the cart button. I do not see any options to edit the link.

Thanks, Steve

10 hours ago, Stv said:

how do you replace the cart link in the navigation with a link to the /schedule page?

It’s not an option; it needs to be coded.

Hey Paul, 

I am really interested in this scenario. The instructions about don't quite make sense to me and i am not certain if Steve ever found a solution to this one. How would i go about implementing this? 

I am looking for a solution to allow the website to: 

- Take bookings per day based on availability - when we reach capacity for the day, we don't want anymore bookings to come through for that day

- Allow customers to checkout after choosing their availability 

I hope someone can help! 🙂

Elise

I wrote a blog post tutorial on the easiest method to achieve this: How To Add Acuity Form on order confirmation page in Squarespace

Here are some videos that demonstrate the best we can currently do.

Scheduling before payment

I would implement the scheduling directly on the cart -page as in the video above. This way it's clear that the customer is scheduling pickup/delivery/etc for these products in the cart.

Another option is to replace the Checkout -button with "Choose time for your order" -button, and redirect to scheduling page. It has the benefit of not having to do responsive resizing calculations for the iFrame. We'd then automatically redirect customers to payment from the last stage of scheduling.

Example in the video above was done by 

- Code injection to add the Acuity widget on cart page + a heading to clarify things.
- Edit the text labels in Scheduling to make the user experience clearer. Not talking about "appointments" but "Pickup" etc. 
- Use Scheduling  integrations => custom conversions + javascript to forward to customer to checkout after scheduling
- Adding a loading spinner as a custom text after succesful booking since this page will flash for 0,5-1 second and would otherwise confuse customers.

Scheduling after payment

This was done by adding code injection to the order confirmation page. You'll add a code to change the text labels, add the scheduling iframe on the page etc. 

I'm beta testing a plugin that adds Scheduling in the checkout process. The plugin is for scheduling after payment. If you want scheduling before checkout you can shoot a message. I'm working deeply to design the best possible solution to this.

If you need to hire a  specialist to help you, hit me up: hire[ä]codeandtonic.com

On 3/31/2021 at 6:22 PM, codeandtonic said:

I wrote a blog post tutorial on the easiest method to achieve this:

Check it out:
How To Add Acuity Form on order confirmation page in Squarespace

 

If you need to hire a  specialist to help, hit me up: hire[ä]codeandtonic.com

How can I target a certain product to show a certain appointment type after checkout?

On 5/12/2021 at 8:47 PM, nicolettely said:

How can I target a certain product to show a certain appointment type after checkout?

A disclaimer: This is about as advanced as you can get with Squarespace, using features really not inteded for it to achieve the solution. This is probably beyond the scope of something where we could just give a copy-pasteable code snippet as it requires quite a lot of custom stuff depending on what exactly you're after. Anyway, here's the method.

Solution

The only method is to add a specific string in the SKU of the product. For example you're selling tables and you have both pickup and delivery options. You would have the table with delivery have something like "sku-123-delivery" and the cheaper table with pickup option have sku like "sku-123-pickup". 

Now depending on the product the customer bought, you'll use custom code injection javascript in order confirmation page to get the list of SKU:s, and depending on what the SKU says you'll load a different appointment type dynamically.  

The way to get the purchased product details and SKUs is to use this javascript snippet:
 

var checkoutDetails = Y.Squarespace.CommerceAnalytics._yuievt.events["commerceTrack:commerce-checkout-confirmed"];

Again, this is quite advanced stuff until Squarespace (hopefully) adds a built-in solution.
If you need help, you can hit me up at hire{ä}codeandtonic.com
 

@codeandtonic

Your suggestion is exactly what I need to do but I can't figure out how to actually do what you said (scheduling before payment). Thank you for sharing. 

Can you assist with the coding on my site to literally do just that? 

Thanks!

Agree with @garnetterri. Can you assist? Thank you! 

On 2/12/2022 at 12:29 AM, garnetterri said:

Your suggestion is exactly what I need to do but I can't figure out how to actually do what you said (scheduling before payment). Thank you for sharing. 

Scheduling before payment is hard and complicated and requires quite a lot of custom code.

First I must mention. 80% the time I solve this problem (how to add scheduling to e-commerce)  using different methods than Acuity. Acuity (or calendly) are suited for some cases but definitely not all. It depends a lot on the specific store. 

• If they have multiple venues or just one
• if they need the API for custom automations 
• if they need to add the scheduling inside Squarespace or if it can be in a subdomain (shop.example.com).
• What kind of tax settings or payment gateways are needed for the country the business is in?
• What kind of prep time is needed? Is that different for different products?
• Is there curbside pickup?
• In most cases there are specific custom needs that need to be tailored and almost every project needs something little different. So it's difficult to make one-size-fits all in for this problem.
• Do you want local delivery area specified on a map, do you need higher delivery prices if it's far away? is SEO or design more important? 

I however like helping people with this problem and have a pretty deep understanding of if for code, different tools and design.

But, for Acuity before checkout...

In this forum I often share snippets for simple and clear problems like how to make some html elements equal height. However, adding scheduling as a step in the before checkout requires tons of custom code and settings, usually tailoring. It's probably too tricky for most users but I'll add the instructions below.

First you'll check if the user is on the cart page like

if(window.location.pathname.startsWith("/cart")){
  //code here
}

 Use Code injection to create an Acuity iFrame

var acuityIframe = '<div id="spacer-before-acuity"></div><h2 class=" ' + CartTitleH2Class +'" cart-title">' + schedulingH2Title + '</h2><iframe src="' + schedulingLink + '"title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe>';

Then insert the Acuity iframe under the cart contents and hide the Checkout -button

// INSERT IFRAME AFTER CAR CONTAINER & HIDE UNUSED CHECKOUT BUTTON  
$(acuityIframe).insertAfter(".cart-container");
$(".checkout-button").hide();

You'll also need to dynamically load the Acuity js file to make the acuity widget resize when going from step to step or resizing the screen. 

And add some spacing 

<style>
  #spacer-before-acuity{
    margin-top: 25px;
  }
</style>

Then you'll create a redirect in acuity. So when customer has chosen the time we'll redirect them to checkout Add the following code to Integrations → Custom Conversion Tracking

<!--Redirect to checkout-->
<script type="text/javascript">
window.top.location = 'https://codeandtonic.com/checkout';
</script>

And you'll want to add a loading spinner and a text like "redirecting" in the MESSAGEN SHOWN ON CONFIRMATION PAGE in Acuity appointment type. Use a loading spinner gif like this 

For scheduling in checkout, my experience is that most stores need someone to custom code this for them and tailor it specifically to their use case. If anyone needs help with this you can get in touch.

On 4/1/2021 at 11:22 AM, codeandtonic said:

Scheduling before payment

Did you ever develop this Plugin? I'm in need of this particular situation but can't figure out how to implement it myself.

@codeandtonic I'm looking to do exactly what you're describing, with a store I'm starting to build in September. It's a Grazing Box/Gift Hamper business that requires local pickup / delivery with certain times. I think I can make it work within Acuity/SQSP - but I'd love to have the option to allow customers to pick their delivery or pick up date and time before checkout. 

I noticed on your website you have a Beta version available? Can you give me some more information on this please would love to try it out. 

Thanks!