Add calendar to the product page

Design help Ecommerce
1

Hi, I am looking to add a calendar to my products for booking/rental purposes. I don’t know where to start from. I tried looking some third party integrations but couldn’t find any suitable for my website.
The working of the products page will be as follow

  1. select product
  2. select a date from calender
  3. checkout/payment

Thanks

2

Hi @sdawfeaw.
Josh with Foxy here. What you’re after is possible with Foxy + Webflow. Here’s a basic demo for hotel room bookings:

Demo
https://foxy-hotel-bookings.webflow.io/rooms/room-c

Read-only
https://preview.webflow.com/preview/foxy-hotel-bookings?utm_medium=preview_link&utm_source=designer&utm_content=foxy-hotel-bookings&preview=5c5449f9b45ac4cc81815b68fb2e8a26&pageId=5eb18a2383441cae253980b5&itemId=5eb18a2383441c1cb83980c4&workflow=preview

This could be modified to meet your needs. The setup is pretty straightforward. Create a CMS Collection for products. Create a CMS Collection for bookings. In your add to cart form, add Flatpickr plugin (https://flatpickr.js.org/) or a similar date picker.

Output a hidden collection list of bookings filtered for the current product. Some javascript is used to block those bookings out in the date picker. After each booking, you’ll use Zapier or Make (formerly Integromat) to add new booking to CMS.

This of course is just one approach. You can set things up however you like. Foxy is simply looking for the data you send to the cart (dates, price, etc.) How you manage, generate and output the data is 100% up to you.

We’re happy to transfer a copy of the Webflow project if that will be helpful. Just let us know your Webflow email address (hello@foxy.io) If you’re not comfortable setting things up yourself, we may be able to help with our Accelerate program: https://foxy.io/accelerate

We’re here to help if you need anything. Just let us know.

Thanks,
Josh

3

Are the looks of foxy integrations customizable? The look of the form in the link you provided is pretty dated.

4

Hi @Chris_Allard.
The initial form is just a Webflow form (styled to your liking like normal). The Foxy checkout form is 100% customizable with your own html, css, and js.

Thanks,
Josh

5

I am still not able to set this calendar up. Could you assist?

6

Hi @jay2.
Mind providing your read-only / published links and confirming which plugin you’re using? This will help the community better assist you.

Thanks,
Josh

8

Hi @jay2 .
Thank you for the link. Looks like you’re using Webflow Ecommerce. I’m not sure how to handle what you’re after with Webflow Ecommerce (or if it’s even possible).

That said, if you’re using Foxy, you can add date/time pickers to your add to cart forms and checkout. Here to help if you want to try out Foxy: hello@foxy.io

Thanks,
Josh