Order Delivery Date Support Thread

[royaldave]

I have this installed on what has now become a Zen Cart 1.5.7 site using responsive_classic primarily. Looking through the code as able, it seems that there may be an issue connecting with the box that is to represent/hold the date information. Again, need to be sure that the page validates against html and that the location to hold the date has the applicable html code to attach to the date block. That should be present in the provided checkout_shipping file at least in the modified code section.

I have another issue with this plugin and the classic responsive template.

The presence of mootools is breaking the mobile device menu on this page - you'll see its contents below the footer.

If you remove mootools from the directory it works properly.

Any ideas?

[mc12345678]

I have another issue with this plugin and the classic responsive template.

The presence of mootools is breaking the mobile device menu on this page - you'll see its contents below the footer.

If you remove mootools from the directory it works properly.

Any ideas?

Ummm.. Not specifically, I mean I have the following checkout_shipping.css file:

 /* 
 * Altered for ORDER DELIVERY DATE contribution
 * Zen Cart Version: 1.3.8a
 * Modification Date: 2008-05-15
 * Author of this modification: MrMeech
 * Previous authors to this contribution are: Peter Martin (pe7er), James Betesh
 * This contribution is licensed under the GNU Public License V2.0
 * http://www.zen-cart.com/license/2_0.txt
 */ 
/* Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements <http://electricprism.com/aeron/calendar> */
/* Default CSS for Calendar (navigation: 1), Copyright (c) 2007 Aeron Glemann <http://electricprism.com/aeron> */
.hidden {
 opacity: 0;
 position: absolute;
}
.visible {
 opacity: 1;
}

input.calendar,
select.calendar {
 width: 99px;
}
button.calendar {
 background: url(../images/calendar/calendar-icon.gif);
 border: 0;
 cursor: pointer;
 /* float: left; */
 height: 20px;
 width: 20px;
 margin-right: 6px;
}
button.calendar:hover,
button.calendar.active {
 background-position: 0 20px;
}
div.calendar {
 background: url(../images/calendar/calendar.png);
 height: 195px;
 padding: 0 6px;
 text-align: center;
 width: 147px;
} 
 div.calendar * {
  margin: 0;
  padding: 0;
 } 
 div.calendar div {
  background: none !important;
  cursor: move;
  height: 185px;
  overflow: hidden;
  padding-top: 10px;
  position: relative;
  width: 147px;
 } 
 
 div.calendar caption {
  color: #333;
  font: normal 12px/16px Arial, Helvetica, sans-serif;
  padding-top: 6px;
  text-align: center;
  width: 100%;
 }
 div.calendar caption a {
  cursor: pointer;
  display: block;
  height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: -100px;
  top: 17px;
  width: 11px;
 }
 div.calendar caption a.prev {
  background-image: url(../images/calendar/calendar-prev.gif);
  left: 0;
 }
 div.calendar caption a.next {
  background-image: url(../images/calendar/calendar-next.gif);
  right: 0;
 }
 div.calendar caption a:hover {
  background-position: 0 12px;
 }
 div.calendar caption span {
  height: 25px;
  position: relative;
  text-align: center;
 }
 div.calendar caption span.month {
  padding-right: 8px;
 }
 div.calendar caption span.month:after {
  content: ',';
 }
 div.calendar table {
  background: #FFF;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  cursor: default;
  margin: 0 auto;
  overflow: hidden;
  width: 147px;
 }
 div.calendar td,
 div.calendar th {
  border: 0;
  color: #0597DB;
  font: normal 12px Arial, Helvetica, sans-serif;
  height: 21px;
  text-align: center;
  width: 21px;
 }
 div.calendar td {
  background: url(../images/calendar/calendar-td.gif);
  color: #FFF;
  font-size: 11px;
 }
 div.calendar td.invalid {
  color: #FF9999;
 }
 div.calendar td.valid {
  background: url(../images/calendar/calendar-valid.gif);
  color: #0597DB;
  cursor: pointer;
 }
 div.calendar td.hilite {
  background: url(../images/calendar/calendar-hilite.gif);
 }
 div.calendar td.inactive {
  background: url(../images/calendar/calendar-td.gif) 0 100%;
  color: #FFF;
 }
 div.calendar td.active,
 div.calendar td.hover {
  background: url(../images/calendar/calendar-valid.gif) 0 100%;
  color: #FFF;
  cursor: pointer;
 }

and I have jscript_a-mootools.js and jscript_b-calendar.js loaded on responsive_classic and in mobile, template and standard desktop the calendar will appear adjacent to the button and the button adjacent to the text block. BTW, you can test "mobile" or "template" on your desktop to possibly rework the css by adding to your URL: &layoutType=mobile or &layoutType=tablet as desired for each of those "styles" to be applied to your desktop and then F12 (from PC I'm not sure how to do so on Macintosh) to then "locally" play with the CSS if needed.

Might want to check html validation/console for any validation issues.

[royaldave]

Ummm.. Not specifically, I mean I have the following checkout_shipping.css file:

 /* 
 * Altered for ORDER DELIVERY DATE contribution
 * Zen Cart Version: 1.3.8a
 * Modification Date: 2008-05-15
 * Author of this modification: MrMeech
 * Previous authors to this contribution are: Peter Martin (pe7er), James Betesh
 * This contribution is licensed under the GNU Public License V2.0
 * http://www.zen-cart.com/license/2_0.txt
 */ 
/* Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements <http://electricprism.com/aeron/calendar> */
/* Default CSS for Calendar (navigation: 1), Copyright (c) 2007 Aeron Glemann <http://electricprism.com/aeron> */
.hidden {
 opacity: 0;
 position: absolute;
}
.visible {
 opacity: 1;
}

input.calendar,
select.calendar {
 width: 99px;
}
button.calendar {
 background: url(../images/calendar/calendar-icon.gif);
 border: 0;
 cursor: pointer;
 /* float: left; */
 height: 20px;
 width: 20px;
 margin-right: 6px;
}
button.calendar:hover,
button.calendar.active {
 background-position: 0 20px;
}
div.calendar {
 background: url(../images/calendar/calendar.png);
 height: 195px;
 padding: 0 6px;
 text-align: center;
 width: 147px;
} 
 div.calendar * {
  margin: 0;
  padding: 0;
 } 
 div.calendar div {
  background: none !important;
  cursor: move;
  height: 185px;
  overflow: hidden;
  padding-top: 10px;
  position: relative;
  width: 147px;
 } 
 
 div.calendar caption {
  color: #333;
  font: normal 12px/16px Arial, Helvetica, sans-serif;
  padding-top: 6px;
  text-align: center;
  width: 100%;
 }
 div.calendar caption a {
  cursor: pointer;
  display: block;
  height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: -100px;
  top: 17px;
  width: 11px;
 }
 div.calendar caption a.prev {
  background-image: url(../images/calendar/calendar-prev.gif);
  left: 0;
 }
 div.calendar caption a.next {
  background-image: url(../images/calendar/calendar-next.gif);
  right: 0;
 }
 div.calendar caption a:hover {
  background-position: 0 12px;
 }
 div.calendar caption span {
  height: 25px;
  position: relative;
  text-align: center;
 }
 div.calendar caption span.month {
  padding-right: 8px;
 }
 div.calendar caption span.month:after {
  content: ',';
 }
 div.calendar table {
  background: #FFF;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  cursor: default;
  margin: 0 auto;
  overflow: hidden;
  width: 147px;
 }
 div.calendar td,
 div.calendar th {
  border: 0;
  color: #0597DB;
  font: normal 12px Arial, Helvetica, sans-serif;
  height: 21px;
  text-align: center;
  width: 21px;
 }
 div.calendar td {
  background: url(../images/calendar/calendar-td.gif);
  color: #FFF;
  font-size: 11px;
 }
 div.calendar td.invalid {
  color: #FF9999;
 }
 div.calendar td.valid {
  background: url(../images/calendar/calendar-valid.gif);
  color: #0597DB;
  cursor: pointer;
 }
 div.calendar td.hilite {
  background: url(../images/calendar/calendar-hilite.gif);
 }
 div.calendar td.inactive {
  background: url(../images/calendar/calendar-td.gif) 0 100%;
  color: #FFF;
 }
 div.calendar td.active,
 div.calendar td.hover {
  background: url(../images/calendar/calendar-valid.gif) 0 100%;
  color: #FFF;
  cursor: pointer;
 }

and I have jscript_a-mootools.js and jscript_b-calendar.js loaded on responsive_classic and in mobile, template and standard desktop the calendar will appear adjacent to the button and the button adjacent to the text block. BTW, you can test "mobile" or "template" on your desktop to possibly rework the css by adding to your URL: &layoutType=mobile or &layoutType=tablet as desired for each of those "styles" to be applied to your desktop and then F12 (from PC I'm not sure how to do so on Macintosh) to then "locally" play with the CSS if needed.

Might want to check html validation/console for any validation issues.

The page and calendar work fine - its just that at the bottom of the screen (on mobile) I get the contents of the menu -



I have worked out if I remove the mootools file then the menu goes back to where it should be.

[nicksab]

I am using this module on ZC 1.56 and it working great so far.

However, I do have a request and I am not sure if it is possible.

Is it possible to block off some delivery date based on the product category?

Meaning that if someone order item 1 from category A, all date are available but if he order item 1 from category B, it is only available to ship on 01- 20 thru 01-25.

Trying my best to explain what I am looking for and hopefully, someone can help

Thank you

[mc12345678]

I am using this module on ZC 1.56 and it working great so far.

However, I do have a request and I am not sure if it is possible.

Is it possible to block off some delivery date based on the product category?

Meaning that if someone order item 1 from category A, all date are available but if he order item 1 from category B, it is only available to ship on 01- 20 thru 01-25.

Trying my best to explain what I am looking for and hopefully, someone can help

Thank you

There is some guidance in one of the javascript files about how to "block" out dates. The information is generic in nature like how to prevent delivery within the next 3 days or something. What you would want to do at or before this point is to evaluate the cart contents and assign the earliest delivery date based on those results.

The file I am talking about having some guidance is: includes/modules/pages/checkout_shipping/jscript_calendar_head.php

The file already has some php "code" in it, but seems like this would be a decent place to incorporate an evaluation of the session variable and associated data to control how the date is presented.

[nicksab]

There is some guidance in one of the javascript files about how to "block" out dates. The information is generic in nature like how to prevent delivery within the next 3 days or something. What you would want to do at or before this point is to evaluate the cart contents and assign the earliest delivery date based on those results.

The file I am talking about having some guidance is: includes/modules/pages/checkout_shipping/jscript_calendar_head.php

The file already has some php "code" in it, but seems like this would be a decent place to incorporate an evaluation of the session variable and associated data to control how the date is presented.

I did look into that file. However, I am using the modification from post # 7 on this thread. It blocks delivery date base on server and works great so far. However, I am not getting a "calendar" display for such. It is giving me a drop down menu instead.

My expertise in coding is limited so bare with me please. Not sure however to proceed at this point. I have seen ways where you can have cart checked in order to block things.

I haven t been able to find anything about blocking these dates based on a specific category though

[SpyderSL]

Hoping someone can help - is this plugin still working with the latest version of ZC? I installed, and can get a store selection radio buttons at checkout, but there is no date picker, only a text field. If the user enters a date, it accepts it, but they're unable to use a drop down. Also, the heading above the box shows 'TABLE_HEADING_DELIVERY_DATE'.