Product List

Product lists all use similar markup with plenty of hooks to achieve very different designs.

The outer box of product lists has the class name .product-list so it is easy to define a site wide product list style eg. in favourites, special products or the order pad.

An example of a product list:

<ol>
    <li class="odd c one">
      <h3><a href="...">Some Clothing <span class="pid">CLTH9</span></a></h3>
      <a href="..."><img alt="#" src="..." width="100" height="100" class="image" /></a>
      <div class="body">
         This is a really nice piece of clothing...
      </div>
      <p class="stock"><span>3</span> in stock</p>
      <p class="price-box"><span class="price">£20.00</span></p>
      <div class="options">
        <form method="post" action="..." class="small enquiry">
          <fieldset>
            <input type="submit" value="Add to Enquiry" />
          </fieldset>
        </form>
        <form method="post" action="..." class="small basket">
          <fieldset>
            <input type="submit" value="Add to Basket" />
          </fieldset>
        </form>
        <form method="post" action="..." class="small favourites">
          <fieldset>
            <input type="submit" value="Add to Favourites" />
          </fieldset>
        </form>
      </div>
    </li>
    <li class="even a two">
      <h3><a href="...">Some More Clothing <span class="pid">CLTH10</span></a></h3>
      <a href="..."><img alt="#" src="..." width="100" height="100" class="image" /></a>
      <div class="body">
         This is a really nice piece of clothing...
      </div>
      <p class="stock"><span>0</span> in stock</p>
      <p><span class="price">£20.00</span></p>
      <div class="options">
        <form method="post" action="..." class="small enquiry">
          <fieldset>
            <input type="submit" value="Add to Enquiry" />
          </fieldset>
        </form>
        <form method="post" action="..." class="small basket">
          <fieldset>
            <input type="submit" value="Add to Basket" />
          </fieldset>
        </form>
        <form method="post" action="..." class="small favourites">
          <fieldset>
            <input type="submit" value="Add to Favourites" />
          </fieldset>
        </form>
      </div>
    </li>
  </ol>

As you can see there are plenty CSS hooks available. From the top:
 

  • <li class="odd c one"> \ You won't need to use all of these selectors, typically just one type
    • .odd / .even these classes are applied alternately to the list items to allow 2 column lists or row striping
    • .a / .b / .c these classes are applied every 3 list items, see the pattern forming? :-D
    • .one / .two / .three /.four these classes are applied every four list items
  • <h3><a href="...">Some Clothing <span class="pid">CLTH1</span></a></h3>** \ The only unusual part is the <span> containing the product code. The class name .pid is used on every element containing a product id, incase you want to alter it typographically or hide it altogether.
  • <a href="..."><img src="..." alt="..." class="image" /></a>**\ :?: probably worth getting rid of the .image class
  • <div class="body">...</div> \ This is a container with a short excerpt from the body text of the product detail. You can hide it altogether if desired using .product-list li .body { display: none; }
  • <p class="stock"><span>3</span> in stock</p> \ You can style the stock amount listing if has been enabled in site admin by unchecking 'allow zero stock orders'
  • <p class="price-box"><span class="price">£23.00</span></p> \ The class .price is used throughout the freestyle template, can be used to make price tags look consistent across the board. Other text in the <p> element will be phrases like 'from', 'inc VAT', 'per pack' so you might want to alter the paragraph text styling here.
  • <div class="options"> \ There is an '.options' <div> around every set of buttons on freestyle. Useful for positioning or adding a background.
  • <form action="..." class="small basket"> \ These mini forms are small forms? so you only need to style the one input within them. There are a couple of class names that can be associated with small forms in product lists and elsewhere, small forms?.

Other product list styles


Different product list BOXES may use a combination of the small forms.

These are the small form class names and the BOXES they are used in:
 

.basket

  • #favourites
  • #order-pad
  • #product-list
  • #search-results

 

.favourites

  • #order-pad
  • #product-list
  • #search-results

 

.enquiry

  • #favourites
  • #order-pad
  • #product-list
  • #search-results

 

.remove

  • #favourites