Friday, August 28, 2015

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>

Friday, May 22, 2015

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.

Tuesday, May 19, 2015

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.

Thursday, May 7, 2015

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

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

Tuesday, April 21, 2015

Enable email sending or useFileTransport in yii2

In yii2 contact us, if you are seeing this message
Note that if you turn on the Yii debugger, you should be able to view the mail message on the mail panel of the debugger. Because the application is in development mode, the email is not sent but saved as a file under C:\UniServerZ\www\runtime/mail. Please configure the useFileTransport property of the mail application component to be false to enable email sending. 
the solution here is simple, just open
/yii2/config/web.php
and find the word useFileTransport and set it to false
  'mailer' => [
            'class' => 'yii\swiftmailer\Mailer',
            // send all mails to a file by default. You have to set
            // 'useFileTransport' to false and configure a transport
            // for the mailer to send real emails.
            'useFileTransport' => false,
        ],
note: your previous email that was not sent can be found in yii2\runtime\mail