How To ? Grid view with mouseover effect andTop of Page slider

[kingsinnersoul]

Hi Team,

First, I have tried, with no great success, to integrate into PS 1.4.4.1 two things.

 

I have been looking for a solid explanation of how to implement two things:

 

1st

How can i make the the product view, on homepage and category pages to view as grid, Image only. But when you hover over it - a text shows up with prices and description.

 

2nd

I have tried few sliders, and I want them to be placed just under the Top of Page menu, and to span for the width of the three columns. But, it managed to add a new hook, and the slider was in the right side only.

 

Please, there is a limit to what I know. But I know some. that 'some' can be a lot for some of you, but a little to most of you. Please take the time to explain how, where, and what.

 

Any suggestion will be appreciated.

 

Thanks.

[kingsinnersoul]

I started working on that, and with the help of BuildInternet I have implemented the effect that the sliding box of content of Product Description and Buttons slides up above the Product's Image.

First I created a copy of the default theme and called it MY Theme.

I used:

• Header.TPL file in the new My Theme folder.
  
• Global.CSS in the new My Theme/css folder
  
• Homefeatured.TPL in the Modules folder in the root of prestashop (in homefeatured folder)
  

It is only first try, and it is does not look perfect, but it does the trick, and its a good start. From here I will go to the product listings and will do the same thing. :-)

Please add comments :-)

 

To Global.CSS I added the following code at the end:

/*************************************** added for prodcut div slide ******************************/
/* Special style for home featured*/ 
.boxgrid{
/*width: 325px;*/
height: 130px;  /*height of sliding description box from top*/
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
padding: 0 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
top: 130;
left: 0;
}
.caption .boxcaption {
top: 110;
left: 0;
}

 

Then I added added two divs in the homefeatured.TPL file. and I rearranged the different parts of the TPL file.

here is the code:

<!-- MODULE Home Featured Products -->
<div id="featured-products_block_center" class="block products_block">
<h4>{l s='Featured products' mod='homefeatured'}</h4>
{if isset($products) AND $products}
 <div class="block_content">
  {assign var='liHeight' value=342}
  {assign var='nbItemsPerLine' value=4}
  {assign var='nbLi' value=$products|@count}
  {math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
  {math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}
  <ul style="width: 100%;">
  {foreach from=$products item=product name=homeFeaturedProducts}
<!-- item start -->
  <li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1}clear{/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}">   
  <!--  <li style="width: 33%;">  -->
<!-- product title -->
 <h5><a href="{$product.link}" title="{$product.name|truncate:32:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:27:'...'|escape:'htmlall':'UTF-8'}</a></h5>
<!--******** BACK BOX  ******************* -->
<div class="boxgrid captionfull">
<!-- product image -->
 <a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" class=""/></a>
<!--******** COVER SLDIE UP BOX*********** -->
<div class="cover boxcaption">
<!-- product description -->
 <div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:130:'...'}</a></div>
<!-- BUTTONS starts-->
 <div>
  {if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if}
  <a class="button" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>
  {if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}
   {if ($product.quantity > 0 OR $product.allow_oosp)}
   <a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>
   {else}
   <span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>
   {/if}
  {else}
   <div style="height:23px;"></div>
  {/if}
 </div>
<!-- BUTTONS ends -->
<!-- ******** END COVER BOX ************** -->
 </div> 
<!-- ******** END BACK BOX *************** -->
</div>
<!-- ************************************* -->
   </li>
<!-- item end -->
  {/foreach}
  </ul>
 </div>
{else}
 <p>{l s='No featured products' mod='homefeatured'}</p>
{/if}
</div>
<!-- /MODULE Home Featured Products -->

 

Finally, I added javascript to the header.TPL just after the first Javascript snippet there file in order to make the slide happen:

{literal}  
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 //Full Caption Sliding (Hidden to Visible)
 $('.boxgrid.captionfull').hover(function(){
  $(".cover", this).stop().animate({top:'2px'},{queue:false,duration:160});
 }, function() {
  $(".cover", this).stop().animate({top:'130px'},{queue:false,duration:160});
 });
});
</script>
{/literal}

[crea34]

Works fine with some css arrangements for my design, thx !

[kingsinnersoul]

for grid view in the product-list tpl file just copy the content of homefeatured.tpl to product-list.tpl

remove all the lines that have mod='homefeatured

[kingsinnersoul]

Yeah, I kinda hit a wall with the css... got too tired to finalize it.

Do you mind sharing some of the css you changed? it might be useful for someone :-)

[crea34]

Yeah, I kinda hit a wall with the css... got too tired to finalize it.

Do you mind sharing some of the css you changed? it might be useful for someone :-)

It's just some colors abd size of images for my own theme...not very interresting i think

[kingsinnersoul]

well, thanks anyways. :-)

[crea34]

I'm back, there is a problem with thumbs and your script, tryed with defaut theme, view here :

 

 

 

 

Same error with or without global.css modified, i think error is in header.tpl

any idea ??

[kingsinnersoul]

I just checked my product list and it looks fine.

the rest of the images are in one line and can be browsed left or right. I am using Chrome 14.0

 

I did change the class name gridbox to top_box and changed it in the

Header.tpl

Homefeatured.tpl

product-list.tpl

 

thats roughly the only changes i did since we spoke last time.

 

if you want i can attach the global.css and the three above files if you want to... or if it will help in any way.

 

can you use FireFox with FireBug to see what tags/classes/css is being used in that section?

 

untitled.bmp