How to add date-picker in Ecommerce?

Design help Ecommerce
1

Hi,

I looked at this tutorial on how to use date-picker but I am wondering if it’s possible to intergrate this inside Webflow E-commerce.

2

Hi Daniel,

My name is Cody, and I’m an engineer at Webflow.

I’m curious exactly what you mean by “integrate inside Webflow E-commerce”? Can you elaborate a bit more on exactly what sort of integration you had in mind in the context of E-commerce? For example, are you asking if a product can use a calendar input in some manner?

If you simply mean integrate a jQuery plugin into webflow than most any jQuery calendar plugin can be integrated inside Webflow regardless of if you building an E-commerce site or not.

You can read more about integrating jQuery plugins here: Webflow.js and jQuery plugins & here Custom code in head and body tags | Webflow University.

Also, depending upon your needs you could also just implement a native calendar. <input type="date"> - HTML: HyperText Markup Language | MDN. But this would require a custom code embed and the browser support is limited. (e.g. http://webflowdatepicker.webflow.io/)

Please let me know if this is helpful or if you have any additional questions.

I’m happy to help further!

My Best,

Cody

3

Hey Cody,

This helps but I don’t understand. I wanted to create this as shown implemented with Shopify. Add a delivery date picker to your cart · Shopify Help Center

I have a customer who needs her customers to choose a date that is minimum 2 days after the day they place their order so she can let them know when it would be expected. It’s a bakery I’m designing this site for and she has customers who purchase online for in store pick up as well as customers who need shipping.

I just couldn’t seem to get the Webflow tutorial to work as I wasn’t sure if the calendar div would send the information to my client as well as the order details.

Here’s a wordpress example: Toronto Cup Cakes Delivered & Culinary Classroom - Le Dolci Bakery

This is my read only link site:
https://preview.webflow.com/preview/xd-sweet2?utm_source=xd-sweet2&preview=be587c1be3f0340e0dda5c07d14ff8f5

4

Hi Daniel

Ah, I understand you now. Unfortunately, as of today, this is not possible with the E-commerce beta.

This would be a product customization. I believe this will be coming in future releases of E-commerce. So look out for that. :slight_smile:

Until then, and while not ideal, you might have the store owner follow up with each order via email to arrange an order date.

Sorry about that.

Cody

5

Ok sounds good. Thank you so much Cody!

6

Hi @XternalDesigns.
Foxy handles everything you’ve described 100% inside of Webflow. If you’re looking for a solution until Webflow releases this functionality, we may be a good fit. Please let us know if we can be of assistance. Webflow | Foxy.io

Thanks,
Josh

2 Likes
7

was having the similar issue. thanks for the resolution. :smile:

8

Hey Josh,

Would Webflow Ecommerce and Foxy be able to coexist?

I’ve used Foxy previously and still have a subscription but just wondering if there would be any errors on functionality between the two.

Thanks!

UPDATE: they coexist.

9

Hi @miller315.
Thanks for getting in touch. There shouldn’t be any conflict in having both. Definitely let us know if you run into any issues though.

Thanks,
Josh

10

Hey @foxy ,

Please excuse the late reply. Unfortunately I had to go to Wordpress for this project but I really appreciate you reaching out.

Thank you so much,

Dan

11

@XternalDesigns.
No worries at all. We have a free WordPress plugin fwiw: https://www.foxy-shop.com/

Thanks,
Josh

12

Hey I had the same problem you did. I solved it with a little bit of custom code. I added a datepicker to the checkout page and set it up so that when a date was picked it would assign the value to the notes field on additional information. That way the pickup date would show up on notes section on the orders.
Granted not ideal, but worked perfectly for my client.

3 Likes
13

Hello Sebastian,

I’m interested in find out how you did this. would it be possible to elaborate?

Cheers Pete

1 Like
14

@Sebastian_Perez How did you do it? Would appreciate any advice greatly!

15

I don’t know if he used this, but might be worth checking out https://integrating-flatpicker-js.webflow.io/

1 Like
16

Thank you so much @HammerOz !

1 Like
17

@Peter_Marshall What exactly are you having trouble with? Adding a date picker in general to webflow was not hard. The tutorial shared by @HammerOz looks similar to the one I used.

The problem is that webflow’s Checkout page only allows for specific fields, no date field available. So how do I include the picked date to my order confirmation.

My solution is to hijack the additional information section (because I don’t use this section). I give the text area inside “additional information” an ID for example #notes.

Then, you need to understand how the date-picker works. Find the function that will be called when a user selects a date, in my case the function was ‘onSelect’.

Inside said function is where you point to that textarea with ID #notes and give it the value your datepicker holds. Then when a user submits the form the date will be passed on in the Additional Information section.

i.e.
onSelect: function () {
$(‘#notes’).val(pickupDate);
}

You can hide the Additional Information section entirely to avoid confusing your user. Which is what I did.
It’s not a clean solution but it worked perfectly in my case. I am sorry if this isn’t too clear.

1 Like
18

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?

https://preview.webflow.com/preview/brownburgers?utm_medium=preview_link&utm_source=designer&utm_content=brownburgers&preview=6064838c190b6cd3f55a5715b8a2b703&pageId=5fcd8069e2df51ca3cdf8590&mode=preview

19

One option is to use Ecwid and embed it’s e-commerce inside a page in Webflow. It’s a pretty seamless method which allows for features like scheduling a date and time for in-store-pickup, local delivery (or both), with multiple locations and things like choosing a prep time. You can get in touch if you’d like any help setting it up. Square Online also has terrific date-picker options for these. Some stores have their main website on webflow example.com, and then Square Online for the e-commerce with all these date pickers etc with a 10/10 user experience at shop.example.com and linking to it.