Order of products on the featured products block

AnieCharlie · August 6, 2014

Please i need an assistance as to how i correct the order of products on the featured products block. Kindly find attached. Thanks in anticipation

Thumbnail.doc

vekia · August 6, 2014

hello

can you attach simple picture, please? im not able to read .doc documents

NemoPS · August 6, 2014

You can simply change their position in the home category. Just go to products, filter by category and choose home then move them, and refresh the site's cache

AnieCharlie · August 7, 2014

Please find attached pics as requested. Thanks in anticipation

vekia · August 7, 2014

it's a screenshot of front office ;-)

check this:

screenshot is from ps 1.5 but in 1.6 works exactly the same, exactly as Nemo1 said

AnieCharlie · August 8, 2014

Thanks Vekia for your response. I have done the position earlier on but i wasn't just getting the effect right as the item positioning was scattered. What i mean is that some items were 4 in a row, second row had 1, third row had 3 and so on. I discussed it with a friend who suggested i do a little of hard coding to the homefeatured.tpl file and a few other file.

Please find below homefeatured.tpl file to see what i did.

{*

* 2007-2013 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]>

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

<div>

<tr>

<tr>

<td><p style="padding: 5px;font-size: 18px;color: #990000;padding-bottom:0;font-weight: bold;"></br>Lenovo A369i</p>

<!--<div style="padding: 10px 30px;font-size: 15px;color: #111;padding-bottom:0;line-height:20px;">

<ul>

<li>Dual Core Processor</li>

<li>Android Jelly Bean</li>

<li>Wi-Fi Hotspot</li>

<li>Micro SD Storage</li>

<li>Social Networking</li>

</ul>-->

<ul>

<li>Dual Core Processor</li>

<li>Android Jelly Bean</li>

<li>Wi-Fi Hotspot</li>

<li>Micro SD Storage</li>

<li>Social Networking</li>

</ul>

</div>

</table>

</table>

</div>

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

{if isset($products) AND $products}

{assign var='liHeight' value=250}

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

<table>

<tr>

<table>

<tr><td><p class="s_title_block">ThinkPad X1 Carbon Ultrabook</p>

<tr><td><div class="product_desc">New 14" ThinkPad, Core i7, 4GB RAM, 8GB Solid Face Drive, Windows 8.1</div>

</table>

<table>

<tr><td><p class="s_title_block">Dell Inspiron 3521</p>

<tr><td><div class="product_desc">Dell Inspiron 3521 Dual Core (4GB, 500GB HDD) Windows 8 15.6-Inch Laptop</div>

</table>

<table>

<tr><td><p class="s_title_block">Apple iphone 5s (64GB)</p>

<tr><td><div class="product_desc">Back-illuminated sensor (BSI), Autofocus, Touch to focus...</div>

</table>

<table>

<tr><td><p class="s_title_block">HP Pavilion 15</p>

<tr><td><div class="product_desc">HP Pavilion 15-n002sia Intel Core i3-2.4GHz, 4GB RAM, 500GB HDD</div>

</table>

<tr>

<table>

<tr><td><p class="s_title_block">Apple Macbook Air</p>

<tr><td><div class="product_desc">Apple Macbook Air 13 inch, 128GB 1.3GHz Dual-Core Intel Core i5...</div>

</table>

<table>

<tr><td><div class="product_desc">HP 250 Intel Pentium 4GB, 500GB, DVD RW, 15.6, Wireless</div>

</table>

<table>

<tr><td><p class="s_title_block">APC Essential Surge Arrest</p>

<tr><td><div class="product_desc">This P5B-UK surge protector by APC is the ideal way to keep your computer...</div>

</table>

<table>

<tr><td><p class="s_title_block">HP Desktop 3500MT</p>

<tr><td><div class="product_desc">HP DESKTOP 3500MT 4GB 500GB DOS</div>

</table>

<tr>

<table>

<tr><td><div class="product_desc">HP Deskjet Ink Advantage 3525</div>

</table>

<table>

<tr><td><p class="s_title_block">Apple CAMPUS MINI BACKPACK</p>

<tr><td><div class="product_desc">The Campus Collection Mini Backpack features a trimmed down silhouette...</div>

</table>

<table>

<tr><td><p class="s_title_block">Toshiba STOR.E</p>

<tr><td><div class="product_desc">Toshiba STOR.E CANVIO V7 USB 3.0 500GB (RED) HARD DISC.</div>

</table>

<table>

<tr><td><p class="s_title_block">Lenovo A680</p>

<tr><td><div class="product_desc">Lenovo A680 5 Inch Display Screen Dual SIM Android 4.2 Jelly Bean.</div>

</table>

<tr>

<table>

<tr><td><p class="s_title_block">Apple iphone 5C</p>

<tr><td><div class="product_desc">iPhone 5C is essentially a repackaged iPhone 5 available in five colorful new plastic shells </div>

</table>

<table>

<tr><td><p class="s_title_block">HP Pavilion 14</p>

<tr><td><div class="product_desc">HP Pavilion 14-Intel Core i5 with Turbo Boost Technology up to 2.7GHz</div>

</table>

<table>

<tr><td><p class="s_title_block">Lenovo S960(Vibe X) </p>

<tr><td><div class="product_desc">Enjoy unimagined clarity with the Vibe X 5inch 1920 x 1080</div>

</table>

<table>

<tr><td><p class="s_title_block">HP SLATE 10 HD TABLET</p>

<tr><td><div class="product_desc">Dual Core-1.2GHz (1GB,16GB HDD,WiFI,3G) 10-Inch Android Tablet</div>

</table>

</table>

</div>

{else}

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

{/if}

</div>

AnieCharlie · August 11, 2014

Please team any update on this?

NemoPS · August 11, 2014

But if you do what vekia says, positions should change with no further issues, but looking at your template... well, it's confused, can't really find out the number of products per line, can you try with the default?

AnieCharlie · August 11, 2014

Thanks for your response. The featured products are always scattered so i decided to be using the above code. However, i will revert to default like you have suggested.

AnieCharlie · August 12, 2014

Please find link : http://www.taskdirect.com/mainstore/

I really don't know how to work around the layout and morever, the products were scattered but after positioning the tend to be uniformed

vekia · August 12, 2014

i checked link above,

seems like everything is allright there with products per row ?

AnieCharlie · August 12, 2014

Thanks Vekia for your response. Yeah, to an extent it appears alright. But if i should try adding new products they will appear scattered and i will love the grid line to be justified.

vekia · August 12, 2014

i suppose that problem is related to different height of "product rows" there

if one element has got different height, it can destroy whole block.

is there any chance to see it when it's crashed?

AnieCharlie · August 12, 2014

Will try adding different products to see the effect, hopefully it shows up

AnieCharlie · August 13, 2014

I think the problem is actually from the second row. The first image from the left doesn't appear rather it pushes the next image the right and the page looks scattered. Please find image attached.

NemoPS · August 13, 2014

It seems the first item is taller than second one, can you confirm?

vekia · August 13, 2014

it is, definitely :-)

in homefeatured.css you've got bug

#featured-products_block_center li {
margin-right: 10px;
padding: 10px 5px;
width: 165px;
height: 250px margin-bottom:20px;
}

there is no semicolon after height: 250px

AnieCharlie · August 14, 2014

There's, this is what have got in there

.

#featured-products_block_center li {

margin-right:10px;

padding:10px 0;

width:126px;

height:240px

}

#featured-products_block_center li.last_item_of_line {margin-right:0;}

#featured-products_block_center .s_title_block, #featured-products_block_center h5 {

padding-top:5px;

height:30px;

font-size:12px;

color:#222;

padding-bottom: 0;

font-weight:bold;

}

#featured-products_block_center .product_image {

display:block;

position:relative;

overflow:hidden

}

#featured-products_block_center .product_image span.new {

display: block;

position: absolute;

top: 15px;

right:-30px;

padding: 1px 4px;

width: 101px;

font-size:10px;

color: #fff;

text-align: center;

text-transform: uppercase;

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-o-transform:rotate(45deg);

-ms-transform: rotate(45deg);

background-color: #990000;

transform: rotate(45deg); /* Newer browsers */

}

#featured-products_block_center .product_desc {height:45px;}

#featured-products_block_center .product_desc,

#featured-products_block_center .product_desc a {

color:#666

}

#featured-products_block_center .lnk_more {

display:inline;

padding-right:10px;

font-weight:bold;

font-size:10px;

color:#0088cc;

background:url(../img/arrow_right_1.png) no-repeat 100% 3px;

}

#featured-products_block_center .price_container {

margin-top:10px;

padding:0;

}

#featured-products_block_center .price {

font-weight:bold;

font-size:14px;

color:#990000

}

#featured-products_block_center li .ajax_add_to_cart_button {display:none;}

#featured-products_block_center li span.exclusive {display:none;}

AnieCharlie · August 14, 2014

Please moreover, any help on how to align the displayed featured products with the featured product title bar will be appreciated. thanks

vekia · August 14, 2014

hello

i think that i don't get it

can you shed some more light on what you're trying to achieve right now?

AnieCharlie · August 14, 2014

The link: http://www.taskdirect.com/mainstore/

The title bar "Featured Products" seems to be longer in width than the width of the entire featured products. Moreover, the grid for each product isn't aligned.

Thanks

NemoPS · August 15, 2014

The height value in homefeatured.css is broken

#featured-products_block_center li {

margin-right: 10px;

padding: 10px 5px;

width: 165px;

height: 250px margin-bottom: 20px;

}

Missing a semicolon

As for the longer block, try increasing each element's width or margin

AnieCharlie · August 15, 2014

Please i can't find where the broken block is nor the missing semi-colon. Moreover, please how do i increase each element's width or margin?

Thanks in anticipation

NemoPS · August 15, 2014

Exactly as I told you, did you carefully read my post? homefeatured.css file, look for that entry (#featured-products_block_center li)

AnieCharlie · August 15, 2014

Thanks, Nemo1. I have searched through all the line of code in homefeatured.css and everything appears fine (i guess).

Be patience with me as am entirely new to prestashop. I don't know where to increase each element's width or margin for a longer block

NemoPS · August 16, 2014

It's not fine, can't you see it's missing semicolon here?

height: 250px margin-bottom: 20px;

After height 250px

As for width, just increase 165px

AnieCharlie · August 18, 2014

Thanks Nemo1, really appreciate your effort. Have gotten exactly what i needed. One more thing please, i want the products under featured products to display random products from category. Really don't know how to achieve this.

Thanks

NemoPS · August 19, 2014

yes, but you have to hardcode the change in homefeatured.php

HomeFeatured::$cache_products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 8), 'position');

to

HomeFeatured::$cache_products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 8), null, null, false, true, true);

The clear cache

AnieCharlie · August 19, 2014

Thanks Nemo1, i applied the above changes, but discovered that it was only displaying one product at a time. What i really want to achieve is getting products under category displayed randomly. For example, the first row displaying accessories, second row displaying laptops, third row displaying printers etc. so i can have different headings for each row. If possible it should alternate products automatically.

Thanks in anticipation

NemoPS · August 20, 2014

Ah! I see, well no you can't do that with the default functionality. I have a module named Your Featured products in my addons store for that, although you have to tweak it slightly for the randomness

AnieCharlie · August 21, 2014

Oh! Thanks, Please how do i access your store?

NemoPS · August 21, 2014

I can't link it directly, but you can reach my main site (nemops.com) and then head to 'prestashop modules'

AnieCharlie · August 25, 2014

Thanks, Nemo1. I do appreciate your effort.

Order of products on the featured products block

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites