Jump to content

More date pickers


Recommended Posts

An easy way to add a date to a product in your cart is to use javascript calendar date pickers widely available on the web and there are many ,and attach values to a text or input area in prestashop.To add it to your cart on the product page use the customize text feature of your products.

First create a customize text field in the back office then paste the javascript reference ( check my header.tpl) to the head of your themes/header.tpl

Transfer datetimepicker.js to your root Prestashop folder
Transfer the calender gif to your themes/img/icon folder
Modify the customize text input id in the product.tpl to attach the date values. like this

 
{if !empty($field.name)}{$field.name}{/if} 
<textarea id="demo1" name="textField{$field.id_customization_field}" rows="2" cols="20"></textarea>

pick a date..



I moved <- customizable products -> from the bottom of the page to under the buy blocks so my line numbers will be different than a original product.tpl.I have also included my product.tpl for reference. Just copy my entire customizable product block to yours.

Also for product total price to display in cart summary.
delete $customizedDatas in line 43 in shopping-cart-product-line.tpl (or copy my file over its from PS1.2.2)
from this

 
{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}


to

 
{if $quantityDisplayed == 0 AND isset($productId.$productAttributeId)}



enjoy
 Also visit http://www.javascriptkit.com/script/script2/tengcalendar.shtml to learn how to configure your calendar even more.
 
good luck with it

14421_6UQ1TjLnAAn9BcXA3JCD_t

14422_gI2htNv6CcyHLD27J3Hy_t

datepicker1.zip

  • Like 1

Share this post


Link to post
Share on other sites

dhtmlxCalendar is a lightweight cross-browser JavaScript calendar which can be configured as a popup datepicker or a flat calendar. The component is easy-to-use and fully customizable. It can be attached to any text input field and provides fast and intuitive date selection in web-based applications.

It Features
Styling many different skins
Double Calendar
Insensitive Dates
Multilingual Calendar
Setting sensitive range
Setting sensitive dates
Attach Calendar to several text inputs
Init Calendar from object
Date Formating
Adding this calendar and configuring is a little harder than the first
create a customize text field in your catalogue/product page in the back office
upload files dhtmlxcalendar.js,dhtmlxcommon.js,dhtmlxcalendar.css and skins folder to your root prestashop
attach it to the customizable text input in themes/product.tpl .There is a little more code to add, if uncertain just copy the entire <- customizable products -> section from top to bottom and paste it to your product.tpl
here is what is added

{counter start=0 assign='customizationField'}
{foreach from=$customizationFields item='field' name='customizationFields'}
{if $field.type == 1}
{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
{if !empty($field.name)}{$field.name}{/if}

<- added for date picker ->
{literal}
<link rel="STYLESHEET" type="text/css" href="../dhtmlxcalendar.css" />
[scriptwindow.dhx_globalImgPath = "../imgs/";[/script]
[script  src="../dhtmlxcommon.js">[/script]
[script src="../dhtmlxcalendar.js">[/script]
[script var mCal;

window.onload = function() {
   var dhxCalendarData = {
       parent: 'calInput1',
       isAutoDraw: false
   };
   mCal = new dhtmlxCalendarObject(dhxCalendarData);
}[/script]{/literal} Click in a text fild

{if !empty($field.name)}{$field.name}{/if} 
<input id="calInput1"name="textField{$field.id_customization_field}" value="{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}" style="border: thin #808080 solid; width: 250px; font-size: 12px; height: 49px; margin-top: 3px; " type="text" />




<- end for date picker ->



{if $field.required}*{/if}



I also included my product.tpl for reference. Also for product total price to display in cart summary.
delete $customizedDatas in line 43 in shopping-cart-product-line.tpl (or copy my file over its from PS1.2.2)
from this

 
{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}


to

 
{if $quantityDisplayed == 0 AND isset($productId.$productAttributeId)}




also upload imgs folder included to your ps root folder
To find how to configure the calendar visit http://www.dhtmlx.com/docs/products/dhtmlxCalendar/index.shtml
enjoy

14424_DqUK3pGGO6bT4qt7zV09_t

14425_KxoIF0qR9RiRlgwhhEh4_t

datepicker2.zip

  • Like 1

Share this post


Link to post
Share on other sites

This is great. How do you hook the calendar to the product page? I am also looking into moving the estimated shipping charge module into the product page so that it will work for individual product. Can you give me some hand. Thank you a lot.

Share this post


Link to post
Share on other sites
@yoda

Do you want it like the image of my product page ? enclosed is shippingesimate.php (replace original)
go to the back office and transplant to extra actions to product page(right column)

Ken


That is great. Thank you very much for the help.

Yoda

Share this post


Link to post
Share on other sites
@ Yoda,

Sorry I didn't really test the shipping estimate much, I think there is a conflict with the ajax-cart ,your cart functions probably won't work properly
I'll have to look into it.I also hope somebody already has a solution .

Ken



never mind it was something else I had installed .. it should work fine.

Share this post


Link to post
Share on other sites

for your info in the first date picker
Using a default product.tpl at line 426 I pasted over

<input type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" value="{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}" class="customization_block_input" />{if $field.required}*{/if}


with this


<!-- Calendar -->
    <textarea  id="demo1"   name="textField{$field.id_customization_field}" rows="2" cols="20"></textarea>


<!--Calendar end -->



In the second date picker I pasted at line 426 with this

<!--Calendar products -->

{literal}
<link rel="STYLESHEET" type="text/css" href="../dhtmlxcalendar.css" />
[scriptwindow.dhx_globalImgPath = "../imgs/";[/script]
[script  src="../dhtmlxcommon.js">[/script]
[script src="../dhtmlxcalendar.js">[/script]
[script var mCal;

window.onload = function() {
   var dhxCalendarData = {
       parent: 'calInput1',
       isAutoDraw: false
   };
   mCal = new dhtmlxCalendarObject(dhxCalendarData);
}[/script]{/literal}
Click in a text field for calendar

   {if !empty($field.name)}{$field.name}{/if}   
 <input id="calInput1"name="textField{$field.id_customization_field}" value="{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}" style="border: thin #808080 solid; width: 200px; font-size: 12px; height: 30px; margin-top: 3px;  " type="text" />

<!-- ENd Calendar products -->



I moved them to the area the best I could... it doesn't work in the buyblock.I put comments in the tpl so you'll be able to copy and paste them anywhere else easily.They are default tpl.
If you need any more help let me know
good luck
Ken

14505_dWbaLt8fmyeGoYSJYOlb_t

14506_ykGzC09Gh9dyS2x7sY43_t

date_tpl.zip

Share this post


Link to post
Share on other sites

Hi Kenny,

i tried your datepicker2
i paste all the files and folder at root folder ( /home )
but when i click at the textbox the calendar only show numbers without background skin. i cant figure out the problems.....i checked and followed what you said but still no luck.....

plz help me kenny :)

Share this post


Link to post
Share on other sites

Hi ladivto,

did you upload dhtmlxcalendar.css to the ps root folder, and upload a folder named skins to ps root folder?
not your server root , ps root folder.Also i saw your post about custom text not displaying in the pdf invoice,
I think its a bug in this mod i will look into it.
Ken

Share this post


Link to post
Share on other sites

the ps root folder you mention is /theme/prestashop ? i tried and upload to server root too...uploaded to both root folder also not working correctly....
i had upload the skin folder and the 3 files in the root folder......

:s don't know where goes wrong

Share this post


Link to post
Share on other sites

Hi Termenator,

It adds it to the order visible in the back office , but unfortunately custom text does reveal itself in the email or pdf. invoice regardless of adding a calendar date picker .I wonder if there is a bug report on this I'm using 1.2.2 testing this stuff.

Ken

14550_aRTZ08HtHHuBwnIhDHgT_t

14551_RWRGXRHg70fExriAMeOQ_t

Share this post


Link to post
Share on other sites

Thanks Kenny :)

if this customized text able to show up at order/invoice in email/pdf then will be perfect already....but so far i think nobody able to do it....im glad that you are going to solve it :)

i try myself before but very sad i'm still a beginner in php :(

Share this post


Link to post
Share on other sites
@ladvito
glad it worked out for you
A work around is to use tomerg3's textarea mod it'll show in all
ken


@ken
you are really great and nice guy ~

if you are going to solve the problems that customized text not appear at email and pdf then would be great...
if you need tester or have any idea to solve it i'm willing to help :) i'm not expert in php but i'm willing to try ~

Share this post


Link to post
Share on other sites

Hi Ken,

The shipping estimator works great. Thank you a zillion......

I wonder if you can show me how to move it to the left like the pic that I include. I think it looks better there. Thank you again.

Yoda.

14726_SG23ss7nZoTHpdMD5TXj_t

  • Like 1

Share this post


Link to post
Share on other sites

@yoda

hi there , to move the shipping estimate module to there only envolves cutting line 288

{if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}



and pasting to line 325 or above HookproductFooter .So it looks like this


{if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}
{$HOOK_PRODUCT_FOOTER}



enjoy

14749_QgQ0Nrrv99qFVp0ysuS7_t

Share this post


Link to post
Share on other sites
@yoda

hi there , to move the shipping estimate module to there only envolves cutting line 288
{if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}



and pasting to line 325 or above HookproductFooter .So it looks like this


{if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}
{$HOOK_PRODUCT_FOOTER}



enjoy



Hi Ken,

Can I ask you what is that mean with {if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}
{$HOOK_PRODUCT_FOOTER} ? Does it mean if is hook to right, then hook to right, otherwise hook to product footer?

Share this post


Link to post
Share on other sites

@newest

It means cut line 288 ,that line contains this> {if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}
and then paste it above> {$HOOK_PRODUCT_FOOTER}

so it looks like this>

{if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}
{$HOOK_PRODUCT_FOOTER}

Share this post


Link to post
Share on other sites
@newest

It means cut line 288 ,that line contains this> {if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}
and then paste it above> {$HOOK_PRODUCT_FOOTER}

so it looks like this>

{if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}
{$HOOK_PRODUCT_FOOTER}


No. I know what you want me to do. But what is that mean in PHP language? I am learning if and else statement in PHP. I am trying to understand what that mean.
What is {if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if} mean? It means if hook extra right, then hook extra right?

I am learning if and else statement in PHP.

Share this post


Link to post
Share on other sites
  • 2 weeks later...
  • 3 weeks later...

Hello there and Merry Christmas to you all !

I need to use the shipping estimator made by kennyh, but I am lost...
Where should I upload "shippingestimate.php" ?
Does it need any configuration in the BO? I tried some locations to upload the file, but with no results.
Please help !

Thanks a lot in advance,

Cristian

Share this post


Link to post
Share on other sites
  • 3 months later...

I have followed the instructions to the letter and get the following code appearing on the page when I view my product.


<- added for date picker -> [scriptwindow.dhx_globalImgPath = "../imgs/";[/script] [script src="../dhtmlxcommon.js">[/script] [script src="../dhtmlxcalendar.js">[/script] [script var mCal; window.onload = function() { var dhxCalendarData = { parent: 'calInput1', isAutoDraw: false }; mCal = new dhtmlxCalendarObject(dhxCalendarData); }[/script] Click in a text fild
Date of Sailing <- end for date picker ->


Here is my product.tpl from line 421. I am running PS 1.2.5.0



{counter start=0 assign='customizationField'}
{foreach from=$customizationFields item='field' name='customizationFields'}
{if $field.type == 1}
{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
{if !empty($field.name)}{$field.name}{/if}

<- added for date picker ->
{literal}
<link rel="STYLESHEET" type="text/css" href="../dhtmlxcalendar.css" />
[scriptwindow.dhx_globalImgPath = "../imgs/";[/script]
[script src="../dhtmlxcommon.js">[/script]
[script src="../dhtmlxcalendar.js">[/script]
[script var mCal;

window.onload = function() {
var dhxCalendarData = {
parent: 'calInput1',
isAutoDraw: false
};
mCal = new dhtmlxCalendarObject(dhxCalendarData);
}[/script]{/literal} Click in a text fild


{if !empty($field.name)}{$field.name}{/if}
<input id="calInput1"name="textField{$field.id_customization_field}" value="{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}" style="border: thin #808080 solid; width: 250px; font-size: 12px; height: 49px; margin-top: 3px; " type="text" />

<- end for date picker ->

<input type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" value="{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}" class="customization_block_input" />{if $field.required}*{/if}

{counter}
{/if}
{/foreach}

Share this post


Link to post
Share on other sites

I have now tried both these calendars and cannot get wither to work. The DHTML one gives the errors in my last post and the first calendar looks for the URL : http://www.mysite.com/shop/[removed]NewCal('demo1','ddmmmyyyy',true,12) when I click on the calendar, so it throws up a page no longer available message.

Can anyone please help, as the is detrimental to one of the products in my shop.

Share this post


Link to post
Share on other sites
  • 3 weeks later...

Hello
i'm busy to put this datepicker on mine product page.
coul'd somebody tel me where i can create a customize text field in de back office?
i've been looking can't find it anywhere.

sorry for my english

greetings

First create a customize text field in the back office then paste the javascript reference ( check my header.tpl) to the head of your themes/header.tpl

Share this post


Link to post
Share on other sites
  • 4 months later...
  • 4 weeks later...

This look very good. I can get the first one to work with no problem but im having major problems with the second one
I followed the instructions but i dont get the calender i get an error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1; .NET4.0C; .NET4.0E)
Timestamp: Wed, 13 Oct 2010 10:02:11 UTC


Message: 'dhtmlxCalendarObject' is undefined
Line: 417
Char: 5
Code: 0
URI: http://localhost/shop/product.php?id_product=10

if i use your products.tpl i get even more errors
any ideas why?

Share this post


Link to post
Share on other sites
  • 3 weeks later...

the code in the js file is faulty i got the cal to work but now i get an error from the products .js file IT is not my setup as i have a compleatly clean instalation of pesta shop using only the files supplied it is a BUG in pestashop which is being ignored by the developers

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.6; InfoPath.2; .NET4.0C; .NET4.0E)
Timestamp: Fri, 29 Oct 2010 09:11:26 UTC


Message: 'productReference' is undefined
Line: 225
Char: 2
Code: 0
URI: http://www.so9.co.uk/store/themes/prestashop/js/product.js


go on have a look i know you want to

the page

http://www.so9.co.uk/store/product.php?id_product=1


on a clean instalation??

come on sort it out

the instalition is the latest version i have tried it with versions from 2.1 up and thay all do it!

Share this post


Link to post
Share on other sites

It's not a bug in PrestaShop. There are no Javascript errors in a default install of PrestaShop v1.3.2 with the default theme. Javascript errors are usually caused by using a theme that was designed for an older version of PrestaShop.

Share this post


Link to post
Share on other sites
  • 3 weeks later...
  • 1 year later...
  • 3 months later...

Dear All,

 

This date picker function that what i'm looking for. After i follow your structure step by step, but nothing was change. do you have any idea with my problem?

 

Thank in Advance and hope your reply soonest....

 

Regard.

post-360824-0-78414200-1344246993_thumb.jpg

Share this post


Link to post
Share on other sites

Hi Kennyh

after i added this code into product.tpl i think it's working, but when i try to click in the text field nothing happen. Do you have any idea with this?

 

 

<!--Calendar products -->

{literal}

<link rel="STYLESHEET" type="text/css" href="../../css/dhtmlxcalendar.css" />

<script>window.dhx_globalImgPath = "../imgs/";</script>

<script src="../../js/dhtmlxcommon.js"></script>

<script src="../../js/dhtmlxcalendar.js"></script>

<script>var mCal;

 

window.onload = function() {

var dhxCalendarData = {

parent: 'calInput1',

isAutoDraw: false

};

mCal = new dhtmlxCalendarObject(dhxCalendarData);

}</script> {/literal}

<strong>Click in a text field for calendar</strong><br />

{if !empty($field.name)}{$field.name}{/if}

<input id="calInput1" name="textField{$field.id_customization_field}" value="{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}" style="border: thin #808080 solid; width: 200px; font-size: 12px; height: 30px; margin-top: 3px; " type="text" />

 

<!-- ENd Calendar products -->

Edited by limsovannara (see edit history)

Share this post


Link to post
Share on other sites
  • 2 years later...
Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More