Add Calendar in Cart for Customer to Select Delivery Date??

[jmitteco]

Hello,
Running Shopsite Manager.
I have a floral business client, selling retail flowers online. We need to allow the customer to choose a delivery date from a calendar for each item they add to their cart.
I've seen these calendars when I book airline tickets & also on other florist sites.
Any suggestions on how to go about this?
I'm guessing there is some java-script type calendar available. If anyone can save me some time on searching & give me install directions, I'd appreciate it.

Currently, I just have an ADD ON option as a drop down menu for delivery i the cart with dates they can select, such as: MON. FEB. 17 / DELIVERY, TUESDAY. FEB 18 / DELIVERY, ETC...
The problem with this is that I have to delete the past days from each item everyday.
there must be a better way.

Also, as I'm here, is there a way to add a coupon code in Shopsite Manager, for customers to enter & get a discounted price?

Thanks in advance & any help is appreciated.
J.

[Jim]

I'm not aware of a calendar that has been integrated into the shopping cart by any merchants. A manager level store has limited access to adding javascript to the shopping cart. The Pro level has more functionality that way.

Is the calendar needed on just the order or on a per product basis?

[jmitteco]

Thanks for the response Jim.
The delivery date/calendar selection is needed on individual items in the cart. For example, we just went through Valentine's Day & people were ordering multiple flower arrangements & gift baskets to be delivered on different dates.
Do you think this can be done with an upgrade to Pro?

[ShopSite Lauren]

I responded to this question in the Enhancement requests, but thought I would also include an answer here.

You can include a date picker with javascript, and link it to a ShopSite field. The cookbook page, http://www.shopsite.com/templates/cookbook/tips-datepicker.shtml, talks about how you could add a whole order delivery date.

If you want to have a delivery date on a per-product basis, the easiest option would be to place the same code on your product more information pages, so they have to select a delivery date before adding a product to the cart. Instead of linking the input field for the delivery date to the custom checkout fields (ShopSite Pro) or the ordering instructions field (ShopSite Manager), you would link the input field to the customer text entry box for a product. This would require a custom template.

You could also include the same idea/javascript in the cart on a per product basis, but it would require a custom product template and custom javascript for the cart.

[jmitteco]

Thanks for the response Lauren. That's very helpful.
I don't know a lot about javascript, although I've used bits & pieces in websites over the years & even j-query in my slideshows of late. I'm hoping you can direct me to some tutorials or other info that can bring me up to speed??
Also, I noticed the the date chooser/calendar used as a sample on the cookbook page, doesn't remove the previous dates. in other words, you can still pick yesterday as a delivery date.
Can this be manipulated to delete the expired dates automatically or would it have to be done manually every day?

To make things a little clearer, my site is all custom pages(index & more info pages) & I'm using Order Anywhere buttons. I'd prefer if the date picker/calendar was in the shopping cart, next to each item.
Also, are you saying I can add this script to a shopsite field, such as in place of a drop down menu in item options?

Thanks again for the help.
J.

[ShopSite Lauren]

There isn't a tutorial that I could refer you to in order to set this up because this would be javascript that needs to be specific to the shopping cart product table in your ShopSite store. And, you are asking to setup the most difficult option of any option that I can think of. So, you may need to hire a designer/developer to set up the custom javascript for you. That said, if you would like to try to set it up yourself, below is some information that may help. You will need to combine may javascript tutorials into one javascript function.

1. First, start by searching online for a javascript calendar that you like. There are many free javascript calendars available, and may have ways that you can block out dates, or will automatically block out past dates and weekends, etc. When selecting the javascript calendar you want to go with, make sure that the calendar submits the date selected into a text field or input field (most submit it to an input field).

2. Add the javascript code (probably just one file or a javascript file and a css file) to your shopping cart template. This can be done in the template directly, or by adding the code into the "text at the top of the shopping cart screen" field under Commerce Setup > Order System > Shopping Cart.

3. For all products that you would like to have a delivery date option available, go to Products > Edit Product Info, and check the checkbox to create a customer text entry field.

4. Now for the tricky stuff. Create a javascript loop (http://www.w3schools.com/js/js_loop_for.asp) that loops through the cells in the shopping cart that contain the customer options, for example, document.getElementsByClassName("cart_op").

5. Have the javascript loop replace the customer text entry field with the input field code from the javascript calendar that you selected. For example, in the basic javascript calendar that is in the example in the ShopSite cookbook, http://www.shopsite.com/templates/cookbook/tips-datepicker.shtml, the input field code includes the input field title, "Choose Delivery Date", the input field for the date, and an href statement that links to the calendar popup. If I were setting up a loop for the basic javascript calendar, I would take the .innerHTML of the document.getElementsByClassName("cart_op")[i] and replace '<textarea' with 'Choose Delivery Date <input' and replace '"></textarea>' with '"><a href=""><img></a>'.

So essentially you are creating javascript code that converts all the customer text entry boxes into input fields with the date picker. The date selected would then be passed through the customer text entry field (because you would be using the same field name).

[jmitteco]

Thanks again Lauren.
Does this mean that I will lose the text entry field for other purposes?
I need the calendar/date picker & also need a field for the customer to type their personal message for the greeting card.

Can all this be done in Manager? Or will it be easier in Pro?

[ShopSite Lauren]

Not necessarily. You will just need to add more code to divide the customer text entry area into 2 fields, an input and a textarea field (still done in your javascript loop). I have never done a divided customer text entry in the cart so I am not positive that it will work, but in theory it should. Here is some information on a divided customer text entry field. You will need to take this into account when you are creating your javascript.
http://www.shopsite.com/templates/cookbook/product16-textentryfielddivided.shtml