Jump to content

Help Me....problem With Featured Product Homepage


Recommended Posts

hye, i have a few question, i hope someone will help me :)

 

1. I want make 6 picture in a row under featured product, i already change in homefeatured tpl file to 6 picture in a row, but it didnt work, i use default theme only, and i remove the right column, and make the center column wider

 

the 6th picture is in the second row, i thought because of not enough space in the first row, so i change the image size through back office-->preferences-->image-->home_default, the size is become smaller, but it didnt change anything, the space between picture (refer the picture) is become bigger....

 

this is picture before i change the size picture

before_zps9fb1784c.jpg

 

 

 

this is picture after change size picture

after_zpsfb611e7d.jpg

 

 

 

because i though there is no solution to fix 6 picture in a row, i try to make the picture bigger to fix 5 picture in a row, but this happened...

 

middle_zpsf7a24287.jpg

 

 

 

ok, my question is why there is a space at the end even i change the size to bigger picture, and why the picture look like that, how to make it fix in a row without space at the end?

 

another question, is there a way to make it it fix for 6 picture in a row?

 

ok. thats all....i hope anyone who read my post understand what i try to tell my problem, sorry if my english is bad :)

Share this post


Link to post
Share on other sites

Hi,

The space in your second screen is not more than in the first. It's an illusion, because none of the text is filling up all the available space. You've got to change the list items width (which is hardcoded) in global.css.

 

Also, be sure your 6th item has the last_row_item or such class, so that you can target it in the css and remove the right border

 

Cheers!

  • Like 1

Share this post


Link to post
Share on other sites

ok, can u please show me where i can change the list item width in global.css ???

 

and for the 6th item, where i can check in css to make sure the 6th item is the last item in the row?

 

please guide me, im still new with coding, tq :)

Share this post


Link to post
Share on other sites

Hi, sorry, in ps 1.5 it's in homefeatured.css (same module folder)

 

You'll immediately see the li selectors (first line)

The default with is 126

 

To inspect the items, use chrome dev tools or another tool like firebug. Basically, in homefeatured.tpl, you said you already edited this file anyway

Share this post


Link to post
Share on other sites

hye again :)

 

ok, in homefeatured, where i need to adjust the width? bcos i dint find any... ><

this is the coding from featuredhome, pls take a look and guide me :)

 

--------------------------------------------------------------------------------------------------------------

 

 

<!-- MODULE Home Featured Products -->

<div id="featured-products_block_center" class="block products_block clearfix">

<p class="title_block">{l s='Featured products' mod='homefeatured'}</p>

{if isset($products) AND $products}

<div class="block_content">

{assign var='liHeight' value=250}

{assign var='nbItemsPerLine' value=6}

{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="height:{$ulHeight}px;">

{foreach from=$products item=product name=homeFeaturedProducts}

{math equation="(total%perLine)" total=$smarty.foreach.homeFeaturedProducts.total perLine=$nbItemsPerLine assign=totModulo}

{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}

<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} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">

<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_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

<p class="s_title_block"><a href="{$product.link}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></p>

<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:65:'...'}</a></div>

<div>

<a class="lnk_more" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>

{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}

 

{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')}?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>

</li>

{/foreach}

</ul>

</div>

{else}

<p>{l s='No featured products' mod='homefeatured'}</p>

{/if}

</div>

<!-- /MODULE Home Featured Products -->

 

-----------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

 

 

 

ok, i inspect the item usind firebug, and it shown like this, thats mean 6 picture in a row right?

 

----------------------------------------------------------------------------------------------------------------------

 

<p class="title_block">Featured products</p>

 

<div class="block_content">

 

<ul style="height: 250px;">

 

<li class="ajax_block_product first_item last_line">

 

<li class="ajax_block_product item last_line">

 

<li class="ajax_block_product item last_line">

 

<li class="ajax_block_product item last_line">

 

<li class="ajax_block_product item last_line">

 

<li class="ajax_block_product last_item last_item_of_line last_line">

</ul>

-----------------------------------------------------------------------------

Share this post


Link to post
Share on other sites

Hi,

The space in your second screen is not more than in the first. It's an illusion, because none of the text is filling up all the available space. You've got to change the list items width (which is hardcoded) in global.css.

 

Also, be sure your 6th item has the last_row_item or such class, so that you can target it in the css and remove the right border

 

Cheers!

 

hye nemo, i change the width from 126px to 100px, and image size is 100px, but still there is space at the end of right side, i try change the width at firebug and shown 6 picture in a row, but when i change the width at homefeatured.css, it doesnt change anything, the 6th picture still at the second row......pls help me :)

Share this post


Link to post
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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More