Topic: need help with catalog display please!

Hi guys,

Ive been following the agile development book trying to build an ecommerce site. Im now trying to fix the css to have the site looking the way i want. From the book the products on the store page just list down in a line one after the other, only one per line. How would i specify that i want five products details in a row, then new line with five more products, and so forth till all products displayed. I guess it would also be good if they all dont fit on one page that there would be a next or something so the rest could be displayed.

the products are Cards so each line/row also Id like to be linked maybe to a category ie birthdays. So all cards in the first row would be birthday cards etc.  second row mite be congratulation cards etc 

so ideally id like to have 5/6 images across in a row followed by more underneath. 

any ideas appreciated!   

the code on the store index view is as follows:

<% if notice %>
<p id="notice" ><%= notice %></p>
<% end %>
<h1>Your Pragmatic Catalog</h1>
<% @products.each do |product| %>
<div class="entry" >
<%= image_tag(product.image_url) %>
<div class="price_line" >
<span class="price" ><%= product.price %></span>
<%= button_to 'Add to Cart', line_items_path(:product_id => product),
:remote => true %>
</div>
</div>
<% end %>

Last edited by fairycakes (2011-04-14 06:43:31)

Re: need help with catalog display please!

The trick is to use ul and li

something like:

<ul class="x">
<% @products.each do |product| %>
  <li class="y">

  </li>
<% end %>
</ul>

if you set the width of x = 500px,  and the width of y = 100px,  you'll get 5 columns across.

I think you'll have to set display:inline for y as well

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: need help with catalog display please!

hey

thanks for that. i cant seem to get it working doe i think im putting it down wrong in the css or something.

for the store/index page i have:



<% if notice %>
<p id="notice" ><%= notice %></p>
<% end %>
<h1>Your Pragmatic Catalog</h1>

<ul class="x">
<% @products.each do |product| %>
<li class="y">
<div class="entry" >   
<%= image_tag(product.image_url) %>
<div class="price_line" >
<span class="price" ><%= product.price %></span>
<%= button_to 'Add to Cart', line_items_path(:product_id => product),
:remote => true %>

</div>
</div>
</li>
<% end %>
</ul>


and for the css im not sure how to write it:


#store .ul .x{ width: 500px;}
#store .ul .x .li .y {width: 100px;
          display:inline;}

Last edited by fairycakes (2011-04-17 08:02:33)

Re: need help with catalog display please!

I think the float:left is also required.

This is some css for something I did that does what you want (I think):

ul.cat_list  {
    list-style:none;
    display:inline;
}
ul.cat_list li {
    width:160px;
    height:200px;   
    float:left;
}

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.