Delivery Date & Time Slots for Ecommerce

Design help CMS
1

Hi all,

We are looking to offer a client the possibility of local delivery for food and drink hampers but this requires a date and time picker at the checkout (currently not available), and then integration with a calendar for order planning.

Does anyone know any good workarounds or suitable plugins to achieve local delivery.

Hugely appreciate any help!

3 Likes
2

Also interested in how we add a date picker!

1 Like
3

It’s do-able. I’ve done it for two clients already.
You need to use a workaround. Create your specific field with an embed component that you insert in your checkout form and enables the user to select the delivery slots. You then feed the value of this to one of webflow’s additionnal input or textarea (which allows it to be in the confirmation emails and sent with the order).
For the delivery slots available you can use a CMS collection. And in your checkout populate your select (or whatever) from this wf CMS collection. You can even filter with CMS filters to have a range of “available slots” by setting from D-0 to D+5 for instance.

Here’s an example : L'intendance — Votre commande

I’ve used jquery. But you could use plain old js or whatever js framework I guess. Even some Ajax if you want to load the delivery slots only at a specific moment…

1 Like
4

Hi Dorian,

Thank you for this and reassuring us. We are looking to implement this feature in one of our upcoming projects but do not have an experienced JS dev in our studio - do you have good experience implementing this kind feature as we would love to get a quote.

Let us know!

5

Hi @tjthomsonjones ,

Unfortunately I only develop this sort of workarounds for clients whose site I’m managing since I can’t guarantee this workaround will work forever… (if webflow makes an update that idles this way of doing… for instance)

But you’re welcome to reverse engineer what I did.

6

One solution is to embed a Calendly calendar inline using the embed element. Its not going to be perfect in terms of design and experience but it will give you the functionality.

7

Hi, my client, Brown Burgers asked me to add 2 new features.

  1. Add time for pickup in the checkout page , For example, 15 or 30 minutes.

  2. Add add-ons to their products template page , For example, add extra bacon or pineapple to the burger.

I tried a few different ways that I could think of, but I failed miserably. Can you please guide me on how to fix this?

8

For the first one, you need to add custom code in your checkout form. This would be a select or radio indicating the time for pickup. You’d need to store this in a variable (js or jquery) to add it to your additional information input that webflow provides (so that the info is in the order email and the webflow backoffice as well).
For the second, why not just add variants to the product. First is product. Second is product + bacon. Third is Product + Pineapple. Forth is product + Bacon + Pineapple ?

1 Like
9

Its sounds a bit complicated, I guess I am bad at codding.

I was also thinking about adding variants to the product, but I thought there will be a better way.

also, I contacted Foxy.io, they told me they have the solution to all of my questions but the only catch is I have to subscribe with them.

Thanks for answering

10

I contacted Webflow and they gave me these solutions

Add time for pickup in the checkout page, For example, 15 or 30 minutes.
This could possibly be done, by adding 2 different shipping methods for the customer. One shipping method could be for 15 minutes, and the other for 30 minutes. You could set a price for these shipping method or set them to free for pickup.

More information on configuring shipping can be found here: Configure shipping methods for different shipping zones | Webflow University.

Add add-ons to their products template page , For example, add extra bacon or pineapple to the burger.
Add-ons or variants of a product can be added using our product options and variants feature. With variants you can add different variants of a product that users can select from. They can select the variant from a drop-down or a button.

More information on variants can be found here: Create product variants | Webflow University.

Here is how to add variants buttons for a product: Adding Variant Buttons.

In this case you could add 3 option sets all called “Extras” and in each option set add what extras the user could add. The user could then have the option of selecting 3 additional ingredients for their burger, and the price would vary depending on the extras.

Here is a short video further clarify: Screen Recording 2021-01-19....

1 Like