[Solved]Place content on different areas of the home page.

[TDsouza]

Im trying to build a theme with the following layout

 

[Top of page/ header bar]

A header bar with the logo,menu,categories drop down menu.

 

[Home page content]

A banner that occupies the whole width of the page

A "featured products" section below it, which again occupies the whole width.

A section with thumbnail based categories.

 

[Right column content]

The right column that has "latest products" to the right.

 

now the html markup I get is something like this.

 

<div class="header">

A header bar with the logo,menu,categories.

</div>

 

<div id="colums">

 

<div class="left">

</div>

 

<div class="center">

A banner that occupies the whole width of the page

A "featured products" section below it, which again occupies the whole width.

A section with thumbnail based categories.

</div>

 

<div class="right">

The right column that has "latest products to the right.

</div>

</div>

 

 

Now that the banner and "featured products" occupy the whole width, center div also occupies the whole width. Thus the right column shows below this section. Now the categories thumbnails is in the center div(considering it is hooked to home) and latest products is in the right column (as I need it to display on the right column of each page). I want them to show side by side, however this ain't working out because of the containing divs(center and right).

 

How do I work around this issue??? as in place a module outside the center div(which has hook_home in it) though it is hooked to home.???

 

Hope I have need able to keep this question clear and easy to understand.

 

I have attached a screen shot to better explain what I have... now what Im trying to achieve is more the latest product section up and the categories section besides it to the right. (I'll format the caregories section so 3 thumbnails occupy the space)

Edited August 2, 2013 by TDsouza (see edit history)

[Jiten rash (away)]

u can use custom html modules

[TDsouza]

u can use custom html modules

 

but if I hook that module to the hook_home it would render the html into the center div right??? what I want is it display that part inline besides the right column

[Jiten rash (away)]

any site from which ur inspired?

[NemoPS]

You can try with the new hooks syntax as I describe here http://nemops.com/adding-hooks-to-prestashop-1-5/

[swsindonesia]

the easiest way to do this as Nemo1 propose is to add a new hook (i.e. HOOK_HOME2)

[TDsouza]

I have added a screenshot to better explain what I have at hand right now... now what im trying to achieve is move the latest products section up and the category section to it's right.

[TDsouza]

any site from which ur inspired?

 

Basically the category block part is inspiried from http://www.flipkart.com/ However unlike their site, my banner occupies the entire width, while the category section is a drop down.

[vekia]

definitely new hook, it is more flexible solution than using simple html module

[TDsouza]

Sorry for replying so late, I have been having problems with my internet recently. I liked the idea of adding a new hook and think it gets me closer to a solution. However now I face a new challenge.

 

I have 3 files.

1. Header.tpl:- Contains all the top data, left column div and the opening tag of center column div

2.index.tpl:- Contains the data for center column div

3. Footer.tpl:-Closing tag of center column div and footer elements

 

Now if I place the hook in header.tpl it will render where I want it to, but I suppose it would render on all pages, how would I ensure that it renders only in the home page?

Edited August 1, 2013 by TDsouza (see edit history)

[vekia]

you can create simple if condition:

 

{if $page_name=='index'}

HOOK HERE

{/if}

[TDsouza]

you can create simple if condition:

 

{if $page_name=='index'}

HOOK HERE

{/if}

 

I had that in mind, but then I might repeat this trick for other pages as well, as in, have a

 

{if $page_name=='contact'}

HOOK HERE

{/if}

etc for other pages. Would that affect performance??? I mean is it an optimum approach???

[vekia]

this is only simple if condition, this should not affect the performance. But of course this is not an optimum approach

what to do? disable the hook exec from php (but it will also consue the resources)

[TDsouza]

Ok I finally found a work around which can be implemented with and without additional hooks.

 

Basically I changed the markup to something like this

 

header.tpl

<div id="wrapper">

 

<div id="menu">

</div>

 

index.tpl

<div id="top">

<p>Banner and other full width content</p>

</div>

 

<div style="clear:both"></div>

 

<div id="center">

<p>category thumbnails</p>

</div>

 

footer.tpl

<div id="left">

<p>Left</p>

</div>

 

<div id="right">

<p>right</p>

</div>

</div>

 

and then added the following css

 

#wrapper {

width:980px;

margin:0 auto;

background-color:#4c4c4c;

}

 

#top {

width:100%;

height:80px;

background-color:#aeaeae;

}

 

#left {

background-color:#c4c4c4;

float:left;

height:150px;

width:120px;

}

 

#center {

background-color:#eaeaea;

width:300px;

display:inline-block;

}

 

#right {

float:right;

background-color:#4c4c4c;

height:150px;

width:120px;

}

 

it then renders the divs as needed and thus I can place content as needed. Cheers.

Let me know if this method is optimum, or am I missing out on any problem I might face in the future. Thanks for all the help and inspiration.

[vekia]

thanks for your solution

very nice know-how

 

so, i suppose that problem is solved?

[TDsouza]

thanks for your solution

very nice know-how

 

so, i suppose that problem is solved?

 

Yes I feel it has been solved, im yet to implement it though. How do I mark this as solved???

[vekia]

here is an instruction:

To mark a topic as [solved] :

- Edit the first post of your topic by clicking on the "Edit" button,

- Click on the "Use full editor" button,

 

- Add the "[solved]" string at the beginning of your topic title and click on the "Submit Modified Post" button.