Jump to content
gadlol

products listing proposal :: equal heights a different approach

Recommended Posts

Hello to all osc fellows...
 
In the products listing we use a a div row and add inside col-sm-4

<div id="products" class="row list-group">

<div class="col-sm-4">
<!-- product stuff here -->
</div>

<div class="col-sm-4">
<!-- product stuff here -->
</div>

</div>

and we use  a Header Tags Module Equal Height Divs (jQuery) . We get the products listed in a row and if we have a product with big name or image with big height e.t.c. then equal heights will make it probably ugly.
 
SO WHY NOT ORGANIZE THE PRODUCTS INTO COLUMNS.
 
For example:
 
if we have lg then we want to display for example 3 products at a row ( as we normally do but now organized into columns ) ::
 
p1 p2 p3
p4 p5 p6
p7 p8 p9
 
the code will be:

<div class="row visible-lg-block"> <!-- only visible to lg -->

  <div class="col-lg-4">

    <div class="item">p1</div>
    <div class="item">p4</div>
    <div class="item">p7</div>

  </div>
  <div class="col-lg-4">

   <div class="item">p2</div>
   <div class="item">p5</div>
   <div class="item">p8</div>

  </div>
  <div class="col-lg-4">

    <div class="item">p3</div>
    <div class="item">p6</div>
    <div class="item">p9</div>

  </div>
</div>

When we have md code will be:

<div class="row visible-md-block"> <!-- only visible to md -->

  <div class="col-md-6">

    <div class="item">p1</div>
    <div class="item">p3</div>
    <div class="item">p5</div>
    <div class="item">p7</div>
    <div class="item">p9</div>

  </div>
  <div class="col-md-6">

    <div class="item">p2</div>
    <div class="item">p4</div>
    <div class="item">p6</div>
    <div class="item">p8</div>

  </div>
</div>

When we have xs code will be:

<div class="row visible-xs-block"> <!-- only visible to xs -->

  <div class="col-xs-12">

    <div class="item">p1</div>
    <div class="item">p2</div>
    <div class="item">p3</div>
    <div class="item">p4</div>
    <div class="item">p5</div>
    <div class="item">p6</div>
    <div class="item">p7</div>
    <div class="item">p8</div>
    <div class="item">p9</div>

  </div>

</div>

 
I have already implemented it. Check the screenshots bellow:
 
Screenshot 1:  http://www.johnbarounis.com/dev/osCommerce/images/products_listing_into_columns_lg.png
Screenshot 1:  http://www.johnbarounis.com/dev/osCommerce/images/products_listing_into_columns_md.png
 
What do you think? Does it worth displaying products that way?


Check out the great Alternative Administration System addon for osCommerce!

Share this post


Link to post
Share on other sites

Thanks @@gadlol,

 

its look like good at first but I have some lack. The minimal border design not drive my eyes on products. Conventional hand writing when studied in the school give us a rule to get informations quickly from rows. We lost it by this way. So I think that would be better to display instead more caracteristic bordered patches (divs).

Secondly I lost the alphabetical order

In this structure whould be better to swap the sort order from up to down in each columns:

p1 p4 p7
p2 p5 p8
p3 p6 p9


:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites

Thanks @@gadlol,

 

its look like good at first but I have some lack. The minimal border design not drive my eyes on products. Conventional hand writing when studied in the school give us a rule to get informations quickly from rows. We lost it by this way. So I think that would be better to display instead more caracteristic bordered patches (divs).

 

Secondly I lost the alphabetical order

 

In this structure whould be better to swap the sort order from up to down in each columns:

 

p1 p4 p7

p2 p5 p8

p3 p6 p9

 

Hi Gergely,

 

"its look like good at first but I have some lack. The minimal border design not drive my eyes on products. Conventional hand writing when studied in the school give us a rule to get informations quickly from rows. We lost it by this way. So I think that would be better to display instead more caracteristic bordered patches (divs)." I actually do not understand what you say here.

 

I do not think organizing products from top to bottom is handy and friendly because imagine if we have many products then we have to scroll down to find next products when having sorted them.

 

p1 p4 p7

p2 p5 p8

p3 p6 p9

 

If for example we list products using an alphanumeic sort then we want:

 

a b c

d e f

g h i

 

and not

 

a d g

b e h

c f  i

 

because users will scroll down to find a products that will normally be in their view if we used the left to right listing


Check out the great Alternative Administration System addon for osCommerce!

Share this post


Link to post
Share on other sites

You answered the problem. (I used more letter for larger product containers. Colors demostrates my first patch problem)

Is it nice?

a b c

a e c

d h f
g h f

   h i

In this situation the "rows" have no functions. So the "columns" could be better.

a d g

a e h

b h

c h

c    i

 

Its not bad but its a finite element solution. You can not display only a few blocks by screens. I think the block is working for this way.


:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites

I don't know if it's the good topic, but the script has a problem for example in the home page. if you have news products and  specials products on the same page.

The equal heighs x2 the heighs.

And if I insert another like favorites products (equal heighs) the heighs is x3

 

products news (with equal heighs) become (x2)

a b c

 

a c

 

specials (equal heighs) become (x2)

a b c

 

a c

 

 

Original (x1)

a b c

a c

Edited by Gyakutsuki


Regards
-----------------------------------------
Loïc

Contact me by skype for business
Contact me @gyakutsuki for an answer on the forum

 

Share this post


Link to post
Share on other sites

Personal i not like it either, it looks messy, but yes it solves a problem.

 

However if you style it fancy , like with a 3 or 4 different color tone 1 per product, so it will go look like tiles.... then yes it will look amazing.

So the reason i think it is now messy is simply because there is no style/design involved.

 

In past topics i referenced to equal rows instead of equal product heights.

From my opinion it is the solution, but needs some work, i can imagine some admin settings for it.

 

http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

 

I think equal rows : will make each row height according to the product that has the max height (plus all other products have same height with max).

Yeah sounds good but I prefer the columns organized solution

 

If you style them properly design looks like good. Check for example how it looks in RACF https://www.rentacyberfriend.com/gigs  I have used the same technic.


Check out the great Alternative Administration System addon for osCommerce!

Share this post


Link to post
Share on other sites

@@gadlol pastebin your code so that others can try it and come up with some ideas...

 

The equal heights 'thing' is bloody awful and needs to be changed.  


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Here it is: http://pastebin.com/txMwtWuA

The code in paste bin is for the includes/modules/product_listing.php

 

Note: In order to achieve the left to right presentation of products while maintain the column structure we need to loop over products and to add them to specific div - column.

In order to do that we check:

 

if($clKey%3 == 0) //add to first column

 

if($clKey%3 == 1) //add to second column

 

if($clKey%3 == 2) //add to third column

 

when having 2 columns in MD

 

if($clKey%2 == 0) //add to first column

 

if($clKey%2 == 1) //add to second column

 

 

P.S. This technic has a disadvantage of creating elements even for not currently displaying screen size: for example if we display 3 columns for LD the MD with 2 columns is hidden and visible only if MD screen.


Check out the great Alternative Administration System addon for osCommerce!

Share this post


Link to post
Share on other sites

I don't like the idea of repeating the info, and having it display this or that ...

 

http://www.bootply.com/render/1Tq35rlkbxmight be of interest ?


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

@@burt I have described the same. http://www.bootply.com/render/DRySqKYn7k

Edited by Gergely

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites

I don't like the idea of repeating the info, and having it display this or that ...

 

http://www.bootply.com/render/1Tq35rlkbxmight be of interest ?

 

Perhaps if we used javascript and make javascript wrap unwrap items depending on LG MD SM XS would do the job without repeating the info

 

http://www.bootply.c...nder/1Tq35rlkbx Looks good but the content is aligned top to bottom and not left to right.

 

@@burt I have described the same. http://www.bootply.com/DRySqKYn7k

 

Same: content is aligned top to bottom and not left to right. And I think not working properly...


Check out the great Alternative Administration System addon for osCommerce!

Share this post


Link to post
Share on other sites

i did not notice that your suggest ws the same @@Gergely

i did not also notice the ordering is up and down, not side to side @@gadlol

 

Radical proposal;

 

1. put the onus on the shopowner to supply square images.

2. equal height the product name div

 

For #1 let's see who can come up with the best excuse why this won't work for 99% of shops.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

i did not notice that your suggest ws the same @@Gergely

i did not also notice the ordering is up and down, not side to side @@gadlol

 

Radical proposal;

 

1. put the onus on the shopowner to supply square images.

2. equal height the product name div

 

For #1 let's see who can come up with the best excuse why this won't work for 99% of shops.

 

 

I have another proposal: lets see how are the other eshop cms are doing it...

 

Hmmm let me make an investigation.... :-)


Check out the great Alternative Administration System addon for osCommerce!

Share this post


Link to post
Share on other sites

Good artists copy, great artists steal.

Pablo Picasso


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

A very quick (and therefore very unscientific) glance at Magento, Opencart and Presta shows that listings use square images.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

What with different length texts?


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

I don't understand the fuss about the product listing.

Edit your images to be all the same size, use canvas padding in photoshop if necessary and then you don't need any equal heights script or workaround.

Edited by Tsimi

Share this post


Link to post
Share on other sites

I don't understand the fuss about the product listing.

Edit your images to be all the same size, use canvas padding in photoshop if necessary and then you don't need any equal heights script or workaround.

I strongly disagree

 

I agree with "ensure your thumbnails are all the same size, apply padding, or cropping to enforce the same size"

 

but you can not enforce the same length product names. You can truncate with ... or use overflow:hidden.

 

Another solution is to not show product name at all in the listing and use some kind of flip card or onhover effect to show details, or on click like in this materialize card reveal example

http://materializecss.com/cards.html


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

@@bruyndoncx "equal height the product name div"...


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

I think we should create first a better img class. So when an admin uploads the image for the product, the img class will:

 

1. Resize the image so to be smaller (i.e. max width=960, max height=640), keeping aspect ratio. Also maybe lowering the quality so to reduce file size. SAVES TO catalog/images/products/

2. Generate thumb at the dimensions defined by admin options (keeping aspect ratio) SAVES TO catalog/images/products/thumbs/

 

In the front store: In product listing display the thumbnails (same dimensions). If name is too big in the listing then use elipsis with overflow hidden.

 

P.S. Guys osc needs also improvement into admin section. We need to adapt a bootstap version or something. And please, coders try to make admin section as independent from front as possible. I mean do not use the bts files from front store.

 

You cannot have a Ferrari and put inside bad oil.

 


Check out the great Alternative Administration System addon for osCommerce!

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

×