Saturday, January 15, 2011

PrestaShop Tips - How to create a complete new pages

As PrestaShop store owner, some time you may want to create a complete new pages for some reason or purpose. If you just create simple PHP page, it is very easy. But if you want keep your new page compatible with PrestaShop pages, i.e. you want have the same page structure of your PrestaShop with header/footer/left column/right column/center column(main content), you will need to have some basic knowledge.

Here I explain on how to create simple page of new page which is compatible with PrestaShop page structure.

1. You need to create PHP file, which will be contain the logic of you new page.

file location: /helloworld.php

You can use following template as new page template


<?php
include(dirname(__FILE__).'/config/config.inc.php');
include(dirname(__FILE__).'/init.php');

//will be initialized bellow...
if(intval(Configuration::get('PS_REWRITING_SETTINGS')) === 1)
$rewrited_url = null;

/* CSS ans JS files calls */
$css_files = array(__PS_BASE_URI__.'css/jquery.cluetip.css' => 'all', _THEME_CSS_DIR_.'scenes.css' => 'all');

include(dirname(__FILE__).'/header.php');

$errors = array();

//==== Your new page logic begins here ==================



//==== Your new page logic ens here ==================
$smarty->assign('errors', $errors);

$smarty->display(_PS_THEME_DIR_.'choosepledge.tpl');
include(dirname(__FILE__).'/footer.php');
?>



2. Create a tpl file which will contain your UI element usually html content.

file location: /themes/yourstoretheme/hellowworld.tpl

Here is very simple one,only shows text "Hello World"


<div>
Hello World
</div>


At this moment, you should be able to run your new page now. Try to run http://yourstore-url-here/helloworld.php on your browser, you should be able see you new pages message Hello World and with all headers/footer/left/right columns.

3. Now let's do some little more, try display a product name, which product id will be passed as querystring parameter.

Adding following code to right after following line in file /helloworld.php

//==== Your new page logic begins here ==================


//load product by ID
$product = new Product(Tools::getValue('id_product'));
//assign smarty object so that you will be able to use it at your tpl file
$smarty->assign('product', $product);


4. Add following code to the tpl you created at step 2. so that it will display product name.


{l s='The product name I load is'} {$product->name}


At this moment, you should be able to run your new page with id_product parameter and the page will display the product name for you.

try to run http://yourstore-url-here/helloworld.php?id_product=11 on your browser, you should be able to see the page that display product name. (here 11 should be a product ID that really you have at your store).

Congratulations! You did it.

=========================================================
Please visit http://addons-modules.com/ for useful PrestaShop modules and some of them are free.

Agile Paypal is a Paypal Express Checkout module that does not customer registration and finish payment in just a few clicks. Get best payment module at http://addons-modules.com/ and let your customer pay the orders before they leave because of unexpected errors at your store(that you even don't know it).
=========================================================

3 comments:

Unknown said...

thxx a lot..

Unknown said...

thxx alot..

Roberto said...

Thank for your post. It is the best I've found. There is onlt one problem. With your code my top menu doesn't work correctly. how can I set $page_name in new page? this is important becouse I think that is the only way to have the class="selected" to enable the selected color in menu? ty.