Integrate jQuery Calendar into Product Page

[PeteAH]

I run a tourism website where i sell day-tours of a number of countries.

 

I need to add a calendar to the product page so the customer can specify which date they want to take the tour and then have that date displayed on order confirmation page, and all documentation, and also highlighted to me.

 

 

I've found a nice jQuery calendar here: http://jqueryui.com/demos/datepicker/

I've been trying to integrate it into a module but i'm unsure how to integrate it correctly, i've been following a few tutorials (such as this one ) but i'm a tad lost.

 

Can anyone advise what i need to do?

What files need edited etc to achieve what i want and then i think i can go from there.

Also any advice on how to integrate jquery into a module!

 

I really want to do this myself to get my head around module creation rather than pay someone else to do it.

 

Any help would be greatly appreciated.

[PeteAH]

Anyone? =/

[CartExpert.net]

Hello,

 

This datepicker is available from the PrestaShop installation.

 

To use any javascript with a module, place the javascript in the module's folder and use

 

Tools::addJS(($this->_path).'[JAVASCRIPT FILE NAME]');

[PeteAH]

It's available in the installation?! Can you tell me how i find it?

So i create the module as normal and add that to the .php file?

[CartExpert.net]

Hello,

 

You can check '[YOUR_ADMIN]/functions.php' function includeDatepicker() how it is used.

[PeteAH]

I'm a bit of a newb when it comes to this. I can see function.php and i've found datepicker inside the js folder.

 

I reckon i can get the js into a module and load into my product page - i'm slightly stuck on the hook for the product page, would you know? Here is a sample product page i'm trying to get into: http://www.perfect-thailand.com/en/56-bangkok-city-tour-incl-grand-palace.html although i need it on all of them! Do i need to put it into the product.tpl or product.php ?

 

Also how do i make it a variable that appears on the confirmation page and also in the back-end?

[PeteAH]

Alright i assume i've got to put it into the product.tpl bit? The product.tpl within my theme is HUGE so i assume it's got to go in there.

Any help with this is greatly appreciated!

[PeteAH]

REPOST =/

[CartExpert.net]

Hello,

 

If it is a module you should not edit core files.

 

You can hook the module to 'productfooter' and you will have it displayed under the product description.

[PeteAH]

I tried hooking it to product footer using;

 

public function hookProductFooter( $params )

{

global $smarty;

return $this->display( __FILE__, 'datepicker.tpl' );

}

 

Is that correct?

 

Also when i enable it now i get a 500 server error?

It appeared in left column OK but the javascript didn't work... bleh... this is hard! I'll post my full code in the next post

[PeteAH]

datepicker.php ::

 

<?php

if ( !defined( '_PS_VERSION_' ) )

exit;

 

class DatePicker extends Module

{

public function __construct()

{

$this->name = 'datepicker';

$this->tab = 'Products';

$this->version = 1.0;

$this->author = 'PeteAH';

$this->need_instance = 0;

 

parent::__construct();

 

$this->displayName = $this->l( 'Date Picker' );

$this->description = $this->l( 'Allows a date to be picked' );

}

 

public function install()

{

if ( parent::install() == false )

return false;

return true;

}

 

public function hookLeftColumn( $params )

{

global $smarty;

return $this->display( __FILE__, 'datepicker.tpl' );

}

 

public function hookProductFooter( $params )

{

global $smarty;

return $this->display( __FILE__, 'datepicker.tpl' );

}

 

public function hookRightColumn( $params )

{

return $this->hookLeftColumn( $params );

}

 

public function uninstall()

{

if ( !parent::uninstall() )

Db::getInstance()->Execute( 'DELETE FROM `' . _DB_PREFIX_ . 'datepicker`' );

parent::uninstall();

}

}

 

datepicker.tpl

 

 

<!-- Block mymodule -->

<div id="mymodule_block_left" class="block">

<h4>Welcome!</h4>

<div class="block_content">

<ul>

Tools::addJS(($this->_path).'{$base_dir}js/jquery/datepicker/datepicker.js')

<link type="text/css" rel="stylesheet" href="{$base_dir}js/jquery/datepicker/datepicker.css" />

{literal}

$(function() {

$("#TRdatepicker").datepicker({

prevText:"",

nextText:"",

dateFormat:"yy-mm-dd"});

});

{/literal}

<input type="text" name="TRdatepicker" id="TRdatepicker" value="{$date_now}">

</ul>

</div>

</div>

<!-- /Block mymodule -->

 

I think i've gone horribly wrong somewhere here... =/

[CartExpert.net]

Hello!

 

1. When you install a module you need to attach it to a hook.

$this->registerHook('productFooter')

 

2. 'datepicker' table was not created

3. if 'datepicker' table is used only by module, you need to drop it, not just empty it

4. no need to call the uninstall function 2 times after each other

5. no need to give $smarty a global scope if you're not using it

6.

Tools::addJS(($this->_path).'{$base_dir}js/jquery/datepicker/datepicker.js')

Will not be recognised by smarty.

7. script for the datepicker will not be executed:

a. it is located before the element in the selector would be loaded

b. isn't bound to a document's ready event.

[PeteAH]

Thanks for all your help CartExpert.

 

I understood 1, 4 and 5!

Bit of a newbie to programming; well, i used to be able to do it fine but i'm struggling now.

 

How do i create the table? Also how do i fufill 7?

I need the date to show itself on the customer confirmation and also on my back-end; any idea how i achieve that end?

 

Thanks!

[CartExpert.net]

hello,

 

I do not know why you are using a separate table for this, but this is how to create it.

 

CREATE [iF NOT EXISTS] tbl_name [(create_definition,...)]

 

The 'delete' query just empties the table, you need 'drop' to delete the table.

 

Nr 7: Use $(document).ready to call the function.

[PeteAH]

To be honest i found the above code and copied it in; i've not written it.

I do understand (sort of) whats it doing... i'm struggling with this to be honest. I'd sort of rather buy the module now but i can't find and some dude offered 380 euro but i just can't afford that.

I've had loads of people who want it too. Bleh.

 

Is there any bit i've done right? I think i'm way over my head tbh.

 

Here's what i've got atm;

datepicker.tpl -> http://www.pastebin.com/KKzTrKjN

datepicker.php -> http://www.pastebin.com/adbxN2dk

 

I'm not sure where to add the tools::addJS stuff, if i put it into the PHP it causes parse errors, do i put it into the TPL? If so do i put it at the top?

I'm trying to read the tutorials i find online but i feel like a sinking ship here; might need to just find someone to code it and pay them for it!

 

e2a: CartExpert - could you code this for a fee? I am in touch with about 5 other users who all need this module and are prepared to buy it so you could code it and host it on your site and i could point them towards you?

[CartExpert.net]

Hello,

 

We have sent you a private message.

[BWT]

I need the same sort of thing I want to be able to verify the date with a product, my product is a rental and want customers to be able to verify that a rental/product is available that date