Prestashop : Can't access my administration back-office ( forgot my password )

Hello Prestashoppers, how is life ?? did you forget your back-office's admin password and want to retrieve it ?? Unfortunately Prestashop encrypts your passwords so that no body can hack it. and you may have installed the back office with a fake email ( just for testing ) and you forgot to point it to your real e-mail, so you can't use the ( Forgot my password ) tool in Prestashop.

What can we do now ?? Actually there is a technical solution, just go through the following steps :

1- First of all, open your "settings.inc.php" found in YOUR SITE ROOT/config/
2- Search for " _COOKIE_KEY_ ", this is a unique key for every prestashop shop , copy its value.

3- Go to PHPMyAdmin, and open your database, and view the "ps_employee" table where you will find your users and employees, you will find your email, and there is a row called "passwd", this row is where your Encrypted Password stored. Click on the Pencil image beside your user to edit it.

4- Now you can edit your password ... HOW ?? in the "passwd" Value, Paste your _COOKIE_KEY_ and then write your new password after it directly , and select "MD5" from combobox like the image :

Now you entered your cookiekey+new password like that :
 dP47gS2BiDDEeX21eczayFaeySwi8Cr4Sy9bLTNDbjH855jUnvu21wAzMyNewPassword
as if it is one word.

5- Now you can access your back office again :) Save your new password in your wallet not to forget it again :D

CSS Trick : text align justify with hyphenation using hyphens

CSS is Magic. it is really magic. today's tip is a very simple tip that can make your text awesome and looking better.
To make text aligned left or right, and we also know the Justify. but when you use justify, the browser adds spaces between words, may be in some lines 3 or 4 spaces to make the text justified, and sometimes this makes your page look like a SPACESHIP OF WORDS !! :)

Now, CSS adds Hyphens to your style, so you can make justify + hyphens, and it will cut the word at the end, add a [-] and complete the word in the next line ... Example :

.mydiv p
{
text-align:justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}


Now enjoy styling your text in all your websites, with a good Block look and no spaces :)

Novice Tip : Create custom Back link

Everyone on earth has the right to create his own website. Today's tip is a very very novice trick but useful.

What if you needed to create a link that refers you to the previous page !? i know that the Back button in all browsers do this feature ... but now you can implement this also inside your site ( may be for design issues ). To create such a link ( or button ), you need to add a javascript function in your Link mouse click event.
Example :

< a href="#" onclick="history.back(-1)"> Back </a>

This snippet will create a Back link, that will look up your history and go back one step. You don't need to add any javascript file to do this.

Now after we know the easy way, there is another way using PHP. This can be used if javascript is not available or if the javascript solution didn't work ( rarely happen ) !!

Example :
<?php
  $url = htmlspecialchars($_SERVER['HTTP_REFERER']);
  echo "<a href='$url'>back</a>";
?>


Enjoy Development :)

Beginners' Trick : Preloading Images using CSS without Javascript

Hello and welcome dear Developers. Today's tip is a very easy tip and very useful and saves lots of time. What if you make a photo gallery that contains 3 images, and when you hover on every image, it changes to another one. This requires that you make images like that :
<image src="images/image1.jpg" onMouseOver="this.src='images/image1-hover.jpg'" onMouseOut="this.src='images/ image1.jpg'" />

This piece of code will make 2 replaceable images, one standard, and one when you hover the mouse on it.

this action is pretty good, but when you do that, and test it online you will notice that loading the Hover image takes time !! so, we need to PRELOAD all images when the site opens. a known tip for that is to make a preload javascript function that loads all images before the page load.
But here is a very easy tip that is easier, and better than using javascript, it is using CSS.

HOW ????!

1- At the bottom of your html file, create your div that contains LOADED IMAGES like the folowing :

<div id="preloaded-images">
   <img src="images/image1-hover.jpg" width="1" height="1" alt="Image 01" />
   <img src="images/image2-hover.jpg" width="1" height="1" alt="Image 02" />
   <img src="images/image3-hover.jpg" width="1" height="1" alt="Image 03" />
</div>


2- In your css file, write the following style ( or in the header, inside <style></style> ) :

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

this way will load all your images, and the delay time will disappear. This tip works in all browsers well.

Enjoy your time developing nice galleries ;)

Duplicate Prestashop Module

Hello developers, how is life going !?! today's tip is for prestashop developers who need to work with the same module in different place. Also it will be fine for those who want to duplicate a module and make it appear in specific pages with specific cases ( a coming soon tip ).

now let's start our steps. i will use [BlockAdvertising] module as an example.

1- Copy your module's folder, paste it with a new name. example [blockadvertising02].
2- Change the related files inside your folder to different ones. example [blockadvertising.php --> blockadvertising02.php] and [blockadvertising.tpl --> blockadvertising02.tpl] .
3- Open the file " blockadvertising02.php" , and do the following :

      3.1- Change the class name as follows:
              class BlockAdvertising02 extends Module
      3.2- Change your module's name in the class constructor as follows :
               ........
                  public function __construct()
            {
         $this->name = 'blockadvertising02';
                          ......
                          .........
                          $this->displayName = $this->l('Block advertising 2.0');
     3.3- If you don't want to share the parameters ( which is preferred ), change the parameters name as follows :
             public $adv_link02;
             ..........
             ..........
             $this->adv_link02 = htmlentities(Configuration::get('BLOCKADVERT_LINK02'), ENT_QUOTES, 'UTF-8');
              ...........
              .................
              Configuration::updateValue('BLOCKADVERT_LINK02', 'http://www.prestashop.com');
              ......................
              .............................
              if ($link = Tools::getValue('adv_link02'))
{
Configuration::updateValue('BLOCKADVERT_LINK02', $link);
$this->adv_link02 = htmlentities($link, ENT_QUOTES, 'UTF-8');
}
              ......................
              .................................
              <a href="'.$this->adv_link02.'" target="_blank" title="'.$this->l('Advertising').'">';
              ..........................
              ...................................
              <label for="adv_link02">'.$this->l('Image link').'&nbsp;&nbsp;</label><input id="adv_link02" type="text" name="adv_link02" value="'.$this->adv_link02.'" />
           
       3.4- Make your new module use your new tpl file and assign the new values for the smarty in your Hook as follows :
               $smarty->assign('adv_link02', $this->adv_link02);
return $this->display(__FILE__, 'blockadvertising02.tpl');
       3.5- (Optional ) if you want to add more hooks to make your new module transplant-able in them, for example to put your advertisement in the product footer, make as follows :
               function hookProductFooter($params)
          {
        return $this->hookRightColumn($params);
          }
4- Now open your new module's tpl file, blockadvertising02.tpl and change the following :
     <div class="advertising_block2">
<a href="{$adv_link02}" title="{l s='Advertising' mod='blockadvertising'}">...........................</a>
just to pass your new parameter "$adv_link02" to your tpl file to show the right link.

5- Final step is to open your config.xml file and change the name and display name for your new module's name that will appear in the backend as follows :
     <name>blockadvertising02</name>
<displayName><![CDATA[Block advertising 2.0]]></displayName>

AND THAT'S IT !!! .... i know it is some sort of a professional tip, but really if you follow the steps you will find it more than easy. Enjoy duplicating your modules for prestashop.