Spitzer Software Solutions

Monday, April 30, 2012

Prestashop Change name of Category Home

Hello Prestashoppers, today's tip is about a small tip that may take a lot of time searching. When installing a fresh new prestashop version, you notice that the main category is called home. it is a built in category that you can't change from your back office, and mainly it doesn't appear in your front office as well. But when you install a third party module like Top Horizontal Menu, it appears in the menu as Home !!! which is confusing, as it looks like referring to homepage, while it actually points to products categories. So, how we change it !?

1- Open your database using a database management system ( like phpmyadmin ), and backup your database before any changes.
2- Open Table ps_category_lang.
3- find the category with id_category=1, and click the Edit icon beside it.
4- Change name ... replace Home with whatever you want ( eg. Products ).
5- Change link_rewrite ... replace home with whatever you want ( eg. products ).
6- Click Go.

And that's it. Again and again, don't forget to bakup your database before any changes.

Tuesday, April 24, 2012

Drupal convert any theme to RTL theme

Drupal themes and templates change the look of your site, controlling layout, block shapes and colors and so on. When you use any drupal theme, by default it is aligned left to meet most of languages.
today's tip is more than an easy tip, and it talks about how to convert your theme to be aligned right, to fit RTL ( Right To Left ) languages like Arabic and Hebrew.
Using Internationalization module, you could be able to create multilanguage website. if you use a language that is right to left and want you site to be switched when you change the language ... just do the following :

1- Open your theme folder ( sites/all/themes/[THEME_NAME] ).
2- copy your style.css file.
3- paste it again, and rename it to : style-rtl.css

That's it. Now drupal will switch your design by itself ( with no coding or anything of this ) to fit your site's language.

Thursday, April 19, 2012

Drupal add background images to primary links

Drupal is the most powerful free CMS I have ever seen. Today's tip is about making image menu, or a menu with text and background images inside drupal.

To make this follow the steps below :

1- Open your template.php file ( found inside your theme folder ), find the line :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

and add the following code just before it :

<?php

function primary_links_icons_bg() {

$links = menu_primary_links();

$level_tmp = explode('-', key($links));

$level = $level_tmp[0];

$output = "<ul class=\"primary-links-$level\">\n";

if ($links) {

foreach ($links as $link) {

$link = l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']);

$cssid = str_replace(' ', '_', strip_tags($link));

$output .= '<li id="'.$cssid.'">' . $link . '</li>';

};

$output .= '</ul>';

}

return $output;

}

2- Open your page.tpl.php ( found in your theme's folder ) and search for navigation code, in most themes it is called ( $primary_links ), search for it, it will look like :

<?php if ($primary_links): ?>

SOME CODE [replace this code]

<?php endif; ?>

Replace the SOME CODE with the following code :

<?php print primary_links_icons_bg(); // function name must be the same as created in template ?>

</div>

3- Now if you check you navigation links, you will find that every menu item has its own id, you can put background image in the css file for each item.

and that's it. now you can make a very neat and attractive menus using drupal.

Monday, April 9, 2012

Drupal Thickbox Remove Scrollers

Hello Developers, how is life going ?! Today's Tip is about removing scrolling bars from the thickbox popup page, In General, and using Drupal Thickbox module.

In General ... Thickbox generates an HTML iframe. To remove the scrolling bars from it, we can use the CSS property ( overflow : hidden ; ) ... but this property doesn't work in IE and Chrome.

To fix this issue for all browsers, you can add this property to the iframe itself ( scrolling="no" ).

Drupal Thickbox Module:

1- Open your sites/all/modules/thickbox
2- Open thickbox.js
3- near the line 223, you will find this line :

$('#TB_window').append('<div id="TB_title"><div id="TB_ajaxWindowTitle">' + caption + '</div><div id="TB_closeAjaxWindow"><a href="#" id="TB_closeWindowButton" title="' + settings.close + '">' + settings.close + '</a> ' + settings.esc_key + '</div></div><iframe frameborder="0" hspace="0" src="' + urlNoQuery[0] + '" id="TB_iframeContent" name="TB_iframeContent' + Math.round(Math.random()*1000) + '" onload="tb_showIframe()" style="width:' + (ajaxContentW + 29) + 'px;height:' + (ajaxContentH + 17) + 'px;"></iframe>');

Replace it with the following :

$('#TB_window').append('<div id="TB_title"><div id="TB_ajaxWindowTitle">' + caption + '</div><div id="TB_closeAjaxWindow"><a href="#" id="TB_closeWindowButton" title="' + settings.close + '">' + settings.close + '</a> ' + settings.esc_key + '</div></div><iframe scrolling="no" frameborder="0" hspace="0" src="' + urlNoQuery[0] + '" id="TB_iframeContent" name="TB_iframeContent' + Math.round(Math.random()*1000) + '" onload="tb_showIframe()" style="width:' + (ajaxContentW + 29) + 'px;height:' + (ajaxContentH + 17) + 'px;"></iframe>');

this will remove any scrolling bar from the popup window, and THAT's IT.

Sunday, March 25, 2012

Drupal : give body tag a unique id depending on page path

Hello Developers, Today's tip title may be strange and need some clarification so i will first explain the title. When you use Drupal for development you may need to make different style for each page. To do so, you should have a unique ID for each page.
Today's tip will use the page path as an ID for the body.

1- open your template.php file.
2- find the following statement :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3- paste the following code just before that statement :

<?php
$uri_path = trim($_SERVER['REQUEST_URI'], '/');
$uri_bits = explode('/', $uri_path);
if ($uri_bits[0] == '') {
$body_id = 'front';
} else {
$body_id = str_replace('/','-', $uri_path); // use dashes to replace slashes in the URI
}
$body_id = 'page-'.$body_id; // add 'page-' to the front of the id
$vars['body_id'] = $body_id;
?>
4- Inside the body tag, put the following identifier :
id="<?php print $body_id ?>"

so that your body tag will look like that :
<body id="<?php print $body_id ?>" <?php if (!empty($body_classes)) { echo 'class="'.$body_classes.'"'; } ?>>

AND ... That's it :)

That code in step 3 creates a variable that trims the path of your node, and converts the slash separator to dash separator, then put the path in a variable, that you can use as ID for your page.

Friday, February 24, 2012

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

Thursday, February 23, 2012

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 :)

Wednesday, February 22, 2012

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 :)

Tuesday, February 21, 2012

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 ;)

Thursday, February 9, 2012

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').'  </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.