prestashop add custom field in contact us form

In this tutorial, i will show you how to add custom field in our prestashop1.6 default contact form, first lets open \default-bootstrap\contact-form.tpl and add this codes

<p class="form-group">
 <label for="email">{l s='Name'}</label>
 <input class="form-control grey" type="text" id="name" name="name" value="{if isset($name)}{$name|escape:'htmlall':'UTF-8'|stripslashes}{/if}" />      
</p>
<p class="form-group">
 <label for="email">{l s='Contact Number'}</label>
 <input class="form-control grey" type="text" id="number" name="number" value="{if isset($number)}{$number|escape:'htmlall':'UTF-8'|stripslashes}{/if}" />
</p>

You may add this in any arrangement you like but make sure that is is within the form

 Next Step: lets open our Controller for our contact form. \controllers\front\ContactController.php
Find this line

$message = Tools::getValue('message'); // Html entities is not usefull, iscleanHtml check there is no bad html tags.

add this after

$name = Tools::getValue('name');
$number = Tools::getValue('number');

And then we must pass this to the mail template, find this line of codes

if (!count($this->errors))
   {
    $var_list = array(
        '{order_name}' => '-',
        '{attached_file}' => '-',
        '{message}' => Tools::nl2br(stripslashes($message)),
        '{email}' =>  $from,
        '{product_name}' => '',       
       ); 

It should look like the codes below, we added 2 new variable

if (!count($this->errors))
   {
    $var_list = array(
        '{order_name}' => '-',
        '{attached_file}' => '-',
        '{message}' => Tools::nl2br(stripslashes($message)),
        '{email}' =>  $from,
        '{product_name}' => '',
        '{name}' => Tools::nl2br(stripslashes($name)),
        '{number}' => Tools::nl2br(stripslashes($number)),
       ); 

We are going to give back the variables that we have submitted in our controller to our view so that when a user encounter an mistake, his/her input will remain. find this code

public function initContent()
{
 parent::initContent();

 $this->assignOrderList();

 $email = Tools::safeOutput(Tools::getValue('from',
 ((isset($this->context->cookie) && isset($this->context->cookie->email) && Validate::isEmail($this->context->cookie->email)) ? $this->context->cookie->email : '')));
 $this->context->smarty->assign(array(
  'errors' => $this->errors,
  'email' => $email,
  'fileupload' => Configuration::get('PS_CUSTOMER_SERVICE_FILE_UPLOAD'),
  'max_upload_size' => (int)Tools::getMaxUploadSize()
 ));

 if (($id_customer_thread = (int)Tools::getValue('id_customer_thread')) && $token = Tools::getValue('token'))
 {
  $customer_thread = Db::getInstance()->getRow('
   SELECT cm.*
   FROM '._DB_PREFIX_.'customer_thread cm
   WHERE cm.id_customer_thread = '.(int)$id_customer_thread.'
   AND cm.id_shop = '.(int)$this->context->shop->id.'
   AND token = \''.pSQL($token).'\'
  ');

  $order = new Order((int)$customer_thread['id_order']);
  if (Validate::isLoadedObject($order))
   $customer_thread['reference'] = $order->getUniqReference();
  $this->context->smarty->assign('customerThread', $customer_thread);
 }

 $this->context->smarty->assign(array(
  'contacts' => Contact::getContacts($this->context->language->id),
  'message' => html_entity_decode(Tools::getValue('message')),
 ));

 $this->setTemplate(_PS_THEME_DIR_.'contact-form.tpl');
}

change $this->context->smarty->assign(array( take note that we added our 2 variables

$this->context->smarty->assign(array(
 'contacts' => Contact::getContacts($this->context->language->id),
 'message' => html_entity_decode(Tools::getValue('message')),
 'name' => html_entity_decode(Tools::getValue('name')),
 'number' => html_entity_decode(Tools::getValue('number')),
));

At this point everything is already working but first we need to indicate in our email template that we must add the 2 new variables, Open \mails\en\contact.html 

<span style="color:#333"><strong>Customer Name:</strong></span> {name}<br /><br />
<span style="color:#333"><strong>Customer Number:</strong></span> {number}<br /><br />

And thats it it should work!!

Add back button to prestashop1.6 inside product page

This code shows how to add back button inside prestashops product page, The button will only show if you are inside a product page ,you can also add the codes to breadcrumbs.tpl for better viewing

{if $page_name == 'product'} 
 <div class="pull-right">   
   <a class="backCat" href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" title="Back"><i class="fa fa-arrow-left"></i> Back</a>
 </div> 
{/if}

Css

.backCat{
 display: inline-block;
 padding: 0px 11px;
 border: 1px solid #D6D4D4;
 font-weight: bold;
 font-size: 12px;
 line-height: 24px;
 min-height: 6px;
 border-radius: 3px;
 overflow: hidden;
 margin-bottom: 16px;
 position: relative;
 z-index: 1;
}

In some case, if the category of our product is two or more, we can use an alternative that is much simple

<a class="backCat" href="{literal}javascript:history.back();{/literal}" title="Back"><i class="fa fa-arrow-left"></i> Back</a>

Real time calculator using jquery

In this tutorial, i will show you how i created a realtime calculator using jquery
This is the specs of our calculator
-on type, the calculator must automatically solve the math equation.
-when we click the operators, it must automatically calculate the inputed numbers in the field
-there must be validation, only numbers is required.
Im going to show first the live example.
first we created the html

 
   
 
     
    
  +
   
   = 
  
 
       
 

  +
  -
  x
  /     
 
 

Then the javascript
We will capture the input of the user when he/she types on the field

 $( ".1st" ).keyup(function() {
  var1s = $( ".1st" ).val(); //get the value of input      
  if(var1s.match(/^\d+$/)){
   $('.messageError').html(''); //validate if numbers
   sums();      
  }else{
   $('.messageError').html('sorry number only for the first value'); //throws warning if error      
  }     
 });
 
 $( ".2nd" ).keyup(function() {
  var2s = $( ".2nd" ).val();      
  if(var2s.match(/^\d+$/)){
   $('.messageError').html('');
   sums();      
  }else{
   $('.messageError').html('sorry number only for the second value');      
  }     
 });     
 

Next is we will capture the event when an user clicks on our operator

$( ".add" ).click(function() {     
  $('.operator').html('+'); 
  sums();      
 });
 $( ".minus" ).click(function() {
  $('.operator').html('-'); 
  sums();     
 });
 $( ".times" ).click(function() {
  $('.operator').html('x');
  sums();     
 });
 $( ".divide" ).click(function() {
  $('.operator').html('/');
  sums();     
});

We will create an function for sum(), this will calculate the math equation.

 function sums(){
  var1 =  parseInt($( ".1st" ).val()); 
  var2 =  parseInt($( ".2nd" ).val()); 
  operator = $( ".operator" ).html();   
  sum = (var1 + var2);
  switch (operator) { 
   case '+': 
    sum = (var1 + var2);
    break;
   case '-': 
    sum = (var1 - var2);
    break;
   case 'x': 
    sum = (var1 * var2);
    break;  
   case '/': 
    sum = (var1 / var2);
    break;
   default:
    sum = (var1 + var2);
  }     
   $( ".answer" ).html(sum);
   
   $(".answer").each(function(c, obj){
     $(obj).text(addCommas(parseFloat($(obj).text()).toFixed(2)));
   });    
 }

We also add addCommas() function for auto conversion of commas ex. 5,000.00

 
 function addCommas(nStr)
 {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
 } 

And then the is the overall script when combined

$( document ).ready(function() {
 $( ".1st" ).keyup(function() {
  var1s = $( ".1st" ).val(); //get the value     
  if(var1s.match(/^\d+$/)){
   $('.messageError').html('');//validate if numbers
   sums();      
  }else{
   $('.messageError').html('sorry number only for the first value');//throws warning if error     
  }     
 });
 
 $( ".2nd" ).keyup(function() {
  var2s = $( ".2nd" ).val();      
  if(var2s.match(/^\d+$/)){
   $('.messageError').html('');
   sums();      
  }else{
   $('.messageError').html('sorry number only for the second value');      
  }     
 });     
 
   
 $( ".add" ).click(function() {     
  $('.operator').html('+'); 
  sums();      
 });
 $( ".minus" ).click(function() {
  $('.operator').html('-'); 
  sums();     
 });
 $( ".times" ).click(function() {
  $('.operator').html('x');
  sums();     
 });
 $( ".divide" ).click(function() {
  $('.operator').html('/');
  sums();     
 });    
 
 function sums(){
  var1 =  parseInt($( ".1st" ).val()); 
  var2 =  parseInt($( ".2nd" ).val()); 
  operator = $( ".operator" ).html();   
  sum = (var1 + var2);
  switch (operator) { 
   case '+': 
    sum = (var1 + var2);
    break;
   case '-': 
    sum = (var1 - var2);
    break;
   case 'x': 
    sum = (var1 * var2);
    break;  
   case '/': 
    sum = (var1 / var2);
    break;
   default:
    sum = (var1 + var2);
  }     
   $( ".answer" ).html(sum);
   
    $(".answer").each(function(c, obj){
     $(obj).text(addCommas(parseFloat($(obj).text()).toFixed(2)));
     });    
 }
 
 function addCommas(nStr)
 {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
 }      
}); 

Palindrome solution type2 using array_reverse

In this tutorial i created an function that will tell if a given word is palindrome or not this is another solution to palindrome using array_reverse

 
 palindrome('axa');
 function palindrome($input){ 
    $split = str_split($input); //make the input array
    $reverse = array_reverse($split); // reverse the array
    foreach($reverse as $char){
      $newChar .= $char; //append the letters
    } 
    if($input === $newChar){
      echo "Palindrome";
    }else{
      echo "Not Palindrome";
    }
 }

the result will look like this

Palindrome

note that "axa" is the word that i want to check if it is palindrome or not, you can change it to the one you desired to check.

Palindrome solution for php

In this tutorial i created an function that will tell if a given word is palindrome or not

 
 palindrome2('axa');
 function palindrome2($input){ 
    $split = str_split($input); //make the input array
    $count = strlen($input) - 1;//minus 1 bec array start at 0
    for($x=$count;$x >= 0;$x--){
      $newChar .= $split[$x]; //append the letters
    }  
    if($input === $newChar){
      echo "Palindrome";
    }else{
      echo "Not Palindrome";
    }
 }

the result will look like this

Palindrome

note that "axa" is the word that i want to check if it is palindrome or not, you can change it to the one you desired to check.

Enable tooltip and popover in bootstrap

By default, tooltip and popover in bootstrap is not yet enabled. to enable this
We just need to add this code anywhere to our html to make tooltip and popover work.

Select default dropdown value using jquery

If we want set our dropdowns default value using jquery, we can use .val() jquery function
This is an alternative to the static html selected="selected" if we want to set an default value when our page load dynamically.

Html

   
    -
    
   
    test1
    
   
    test2
            

Jquery

  $('select.sampleClass').val('test2');