Jump to content

Two culomn layout and other my questions

mskarka
 Share

Recommended Posts

mskarka Newbie

mskarka

Posted
Posted

Hello,

i am pretty new to e-shop systems and PrestaShop. I have exeriences with creating websites and I can do pretty good changes with Wordpress, Joomla and Drupal.

 

So i would like to learn some e-shop system and Presta looks good.

 

But I have few question.

 

The default theme is not bad for learning, but i don't know how to easily do this:

- Change 3 column layour to 2 column or on some pages 1 column (homepage) and then 2 columns...

-> Do i need to do a large change in code or there is some better way?

 

- How to change easily order of modules in menus or add others...

 

- What is ".tpl" files? This is first time i see this format of web files. And how to approach them? Like any php with some more data?

 

Sorry for my english and thank you for your advice :)

 

Regards

mskarka

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

Check tutorials below, i described there step by step how to create layouts like you expect.

  1. one column homepage layout
  2. two columns layout

 

- How to change easily order of modules in menus or add others...

go to the modules > positions and drag'n'drop module to the new position (or click on the small arrows)

 

What is ".tpl" files? This is first time i see this format of web files. And how to approach them? Like any php with some more data?

 

tpl file is a template file for smarty, it's based on smarty "language" and simple html tags

  • Like 1
Link to comment
Share on other sites
mskarka Newbie

mskarka

Posted
  • Author
Posted
Check tutorials below, i described there step by step how to create layouts like you expect.
  1. one column homepage layout
  2. two columns layout

go to the modules > positions and drag'n'drop module to the new position (or click on the small arrows) tpl file is a template file for smarty, it's based on smarty "language" and simple html tags

 

Thank you. I will definitely read more of your blog. But i do the 2 column layout and i have a problem with home page. You can look at my test site. http://eshop.matejskarka.cz/

 

There is too much space on the righ side of center column and the products in this column are broken.

 

 

+ New question:

How can i turn on grid view on category site and not only on home page? (I want to view products in grid.

 

Thank you very much

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

well, everything depends on modules that you use, for example, you've got there (on homepage) homefeatured module.

in the module .tpl file you have to define how many products in row you've got:

 

modules/homefeatured/homefeatured.tpl

{assign var='nbItemsPerLine' value=4}

 

change the "value" param, put there number of products in one row

Link to comment
Share on other sites
  • 3 weeks later...
DillyDog Newbie

DillyDog

Posted
Posted

It should be pointed out that I have put it back how it was with 1 column for the index and 3 columns for the rest.

 

Here is header.tpl

 

 

{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2012 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 lt-ie6 " lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8 ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]> <html lang="fr" class="no-js ie9" lang="en"> <![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
<head>
 <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
 <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
 <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
 <meta http-equiv="content-language" content="{$meta_language}" />
 <meta name="generator" content="PrestaShop" />
 <meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
 <link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
 <link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
 <script type="text/javascript">
  var baseDir = '{$content_dir}';
  var baseUri = '{$base_uri}';
  var static_token = '{$static_token}';
  var token = '{$token}';
  var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
  var priceDisplayMethod = {$priceDisplay};
  var roundMode = {$roundMode};
 </script>
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}
{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}
 {$HOOK_HEADER}
</head>

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if} {if $content_only} content_only {/if}">
{if !$content_only}
 {if isset($restricted_country_mode) && $restricted_country_mode}
 <div id="restricted-country">
  <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
 </div>
 {/if}
 <div id="page" class="container_9 clearfix">   <!-- Header -->
  <div id="header" class="grid_9 alpha omega">
   <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
 <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
   </a>
   <div id="header_right" class="grid_6 omega">
 {$HOOK_TOP}
   </div>
  </div>
  <div id="columns" class="grid_9 alpha omega clearfix">
   <!-- Left -->
   {if $page_name !='index'}
   <div id="left_column" class="column grid_2 alpha">
    {$HOOK_LEFT_COLUMN}
   </div>
{/if}<!-- Center -->
<div id="center_column" class="{if $page_name !='index'}grid_5{else}grid_9{/if}">
{/if}

 

 

 

And here is footer.tpl

 

 

{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2012 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
 {if !$content_only}
   </div><!-- Right -->
{if $page_name !='index'}
   <div id="right_column" class="column grid_2 omega">
    {$HOOK_RIGHT_COLUMN}
   </div>
{/if}   </div>
<!-- Footer -->
  <div id="footer" class="grid_9 alpha omega clearfix">
   {$HOOK_FOOTER}
   {if $PS_ALLOW_MOBILE_DEVICE}
 <p class="center clearBoth"><a href="{$link->getPageLink('index', true)}?mobile_theme_ok">{l s='Browse the mobile site'}</a></p>
   {/if}
  </div>
 </div>
{/if}
</body>
</html>

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

okay

 

files looks well, you have now:

1) one wide block on homepage

2) three blocks (left column, center block, right column) on the rest

 

what you want to achieve? which columns you want to use in the home?

Link to comment
Share on other sites
DillyDog Newbie

DillyDog

Posted
Posted

Thanks for your time by the way, it is much appreciated.

 

The home page is fine as it is with the one wide column.

For the rest of the site, I would like to remove the right column and widen the centre column, as in your tutorial, but I don't seem to be able to make it work.

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

from footer remove or comment this:

 

{if $page_name !='index'}
   <div id="right_column" class="column grid_2 omega">
	    {$HOOK_RIGHT_COLUMN}
   </div>
{/if}

 

then in the header.tpl instead the:

<div id="center_column" class="{if $page_name !='index'}grid_5{else}grid_9{/if}">

use this:

<div id="center_column" class="{if $page_name !='index'}grid_7{else}grid_9{/if}">

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...