Date Pickers for Product Options

Date Pickers for Product Options

Easily add date pickers to custom text field based product options...

This is useful if you have products where the customer needs to schedule something or other.

Share

Easily add date pickers to 'Custom text field' type product options...

This is useful if you have products where the customer needs to schedule something or other.

This mod should be fine for X-Cart v4.4.x - v4.6.x

A demo is available here.


1) In Tools > Patch/Upgrade in the SQL query(ies) box paste and apply the following...

ALTER TABLE `xcart_classes` ADD `is_datepicker` CHAR( 1 ) DEFAULT 'N' NOT NULL ;
REPLACE INTO xcart_languages SET code='en', name='lbl_date_picker', value='Date Picker', topic='Labels';

2) In skin/common_files/modules/Product_Options/add_product_options.tpl

BEFORE...

<tr>
  {if $geid ne '' and $product_option ne ''}<td width="15" class="TableSubHead"><input type="checkbox" value="Y" name="fields[orderby]" /></td>{/if}

INSERT...

{* Date Picker *}
<tr>
  {if $geid ne '' and $product_option ne ''}<td width="15" class="TableSubHead"><input type="checkbox" value="Y" name="fields[is_datepicker]" /></td>{/if}
 <td class="DataField"><b>{$lng.lbl_date_picker}:</b></td>
  <td>&nbsp;</td>
 <td class="DataField"><input type="checkbox" name="add[is_datepicker]" value="Y"{if $product_option.is_datepicker eq "Y"} checked="checked"{/if} /></td> 
</tr>
{* /Date Picker *}

3a) In skin/common_files/modules/Product_Options/product_options.tpl

BEFORE...

  <td class="DataTable">{$lng.lbl_orderby}</td>

INSERT...

  {* Date Picker *}
  <td class="DataTable">{$lng.lbl_date_picker}</td>
  {* /Date Picker *}

3b) In skin/common_files/modules/Product_Options/product_options.tpl

BEFORE...

  <td valign="top" class="DataTable"><input type="text" name="po_classes[{$v.classid}][orderby]" size="5" maxlength="11" value="{$v.orderby}" /></td>

INSERT...

  {* Date Picker *}
  <td valign="top" class="DataTable"><input type="checkbox" name="po_classes[{$v.classid}][is_datepicker]" value="{$v.is_datepicker}" {if $v.is_datepicker eq 'Y'} checked="checked"{/if} /></td>
  {* Date Picker *}

4a) In modules/product_options/product_options.php

BEFORE...

 'orderby' => $add['orderby'],

INSERT...

 'is_datepicker' => $add['is_datepicker'],

4b) In modules/product_options/product_options.php

REPLACE...

 db_query("UPDATE $sql_tbl[classes] SET orderby = '$v[orderby]', avail = '$v[avail]' WHERE classid = '$k'");

WITH...

 db_query("UPDATE $sql_tbl[classes] SET is_datepicker = '$v[is_datepicker]', orderby = '$v[orderby]', avail = '$v[avail]' WHERE classid = '$k'");

5) In /skin/common_files/modules/Product_Options/customer_options.tpl

(location may differ if using a non-standard or custom skin)

REPLACE...

 <input id="po{$v.classid}" type="text" name="{$poname}" value="{$v.default|escape}" />

WITH...

 {* Date Picker *}
 {if $v.is_datepicker eq 'Y'}
 {literal}<script>$(function() { $('input[name="product_options[{/literal}{$v.classid}{literal}]"]').datepicker({ dateFormat: "{/literal}{$config.Appearance.ui_date_format}{literal}", showOn: "both", buttonImageOnly: true, buttonImage: "{/literal}{$ImagesDir}{literal}/calendar.png" }); });</script>{/literal}
 {/if}
 {* /Date Picker *}

 <input id="po{$v.classid}" type="text" name="{$poname}" value="{$v.default|escape}" {if $v.is_datepicker eq 'Y'}style="margin-right:5px" required{/if}/>

6) IMPORTANT!

In Tools > Maintenance, click the 'Force cache generation' button underneath 'Force cache generation'.

In Tools > Maintenance, click the 'Clear' button underneath 'Clear templates/X-Cart cache'.

Done.

NOTE, in your product options, for date pickers to appear, 'Option group type' must be set to 'Custom text field'.

: *
: *
: *
Type the characters you see in the picture:
Captcha

*
Adding X-Cart Custom Product Fields

Adding X-Cart Custom Product Fields

This is something we get asked a lot, so we thought we'd make it our first tutorial.

Sometimes product 'extra fields' can be fiddly to work with and you want to have more flexibility with your product data.

By adding 'custom' product fields, you can do a lot more, for example you might want to add extra specification fields, product video / download links or anything else.

In this quick v4.4.x - v4.7.x tutorial, we'll show you how to add 3 new custom product fields...

More...