Product Detail View

The product detail view is within the body layout.

The FreeStyle template offers you a customisable product detail view. You can turn cerain information table on or off, and display the Quick Quote/Add to basket/enquiry form in various configurations. Sometimes you will have additional costs that are dependent on other additional costs. To keep the form and markup accessible every option for every combination is actually written into the HTML using combinations of checkboxes and radio buttons. The reason is 2-fold, radios and checkboxes are proven to be easier to use than dropdown boxes and you can use the markup and javascript to create almost any UI you can imagine for the functionality.

The markup for the additional costs uses the following pattern (”…” is used where code has been snipped out, check above it for an example of how it will look):

...
<fieldset class="step1" id="decorations">
  <legend>Choose your print positions</legend>
  <ul class="checkboxes">
    <li>
      <label><input type="checkbox" checked="checked" /> Front</label>
      <fieldset class="step2">
        <legend>Print Method</legend>
        <ul class="radios">
          <li>
            <label><input type="radio" name="front" checked="checked" /> Screen Print</label>
            <fieldset class="step3">
              <legend>Number of colours</legend>
              <ul class="radios">
                <li><label><input type="radio" name="front_screen" checked="checked" /> 1</label></li>
                <li><label><input type="radio" name="front_screen" /> 2</label></li>
                <li><label><input type="radio" name="front_screen" /> 3</label></li>
                <li><label><input type="radio" name="front_screen" /> 4</label></li>
              </ul>
            </fieldset>
          </li>
          <li>
            <label><input type="radio" name="front" /> Embroidery</label>
          </li>
          <li>
            <label><input type="radio" name="front" /> Digital</label>
            <fieldset class="step3">
              <legend>Number of colours</legend>
              <ul class="radios">
		...
              </ul>
            </fieldset>
          </li>
        </ul>
      </fieldset>
    </li>
    <li>
      <label><input type="checkbox" /> Back</label>
      <fieldset class="step2">
	...
      </fieldset>
    </li>
    ...
  </ul>
</fieldset>
...
<!-- Single (independent) additional costs -->
<fieldset id="global-additional-costs">
  <label class="select">
    <span class="desc">Special Packaging</span>
    <select name="packaging">
      <option value="">none</option>
      <option value="paper">Wrapped in brown paper</option>
      <option value="faberge">Inside a Faberge Egg</option>
    </select>
  </label>
  <label class="select">
    <span class="desc">Temperature</span>
    <select name="temp">
      <option>hot</option>
      <option>cold></option>
    </select>
  </label>
</fieldset>

It looks complicated and it is, however the following images show some of the designs that can be accomplished using this markup.

The CSS hooks

You can use the firebug plugin for firefox to inspect and outline elements to find out their exact id or class. The following shows the types of hooks that will be available.

fieldset#decorations {} /* container for all decorations */
 
/* each list item has class names based on which option it contains
------------------------------------------------------------------------------------*/
#decorations li.position-POSITION_NAME {} /* eg. li.position-front */
#decorations li.posIndex3 {} /* class names applied to position list items to select by number order */
#decorations li.method-METHOD_NAME {} /* eg. li.method-embroidery */
 
/* unique ids are applied to each input
------------------------------------------------------------------------------------*/
#decorations input#dec-position3 {}
#decorations input#dec-position3-method2 {} /* unique ID for the radio button under position 3 for choosing method 2 */
 
/* some class names to indicate the type of additional cost
------------------------------------------------------------------------------------*/
#decorations input.additional-cost-multiplier {} /* eg. a no. of colours input */
#decorations input.dec-position3-method2-multiplier {} /* a specific group of no. of colours inputs */
#decorations input.additional-cost {} /* an additional cost option */
 
/* all global additional costs 
------------------------------------------------------------------------------------*/
fieldset#global-additional-costs {} /* container */
#global-additional-costs input.additional-cost {} /* an additional cost option */

You will need to use javascript to achieve any hiding/showing effects or to generate alternative markup should your design require dropdown boxes. An example of some javascript code (using jQuery) to show or hide the sets of radio buttons is shown below:

$("#decorations fieldset").hide();
$("#decorations input[type=checkbox], #decorations input[type=radio]").click(function(){
  $("#decorations fieldset").hide();
  $("#decorations input[type=checkbox]:checked, #decorations input[type=radio]:checked").each(function(){
    $(this).parent().parent().find(">fieldset").show();
  });
});

Some example CSS for the decorations boxes is as follows and works with the standard markup (unaltered by javascript):

#product #decorations legend { color: #000; }
#product #decorations input { width: auto; }
#product #decorations li li { margin: 0; padding: 0; }
#product #decorations fieldset { margin: 0 15px; padding: 0; background: #eee; border-top: 1px dotted #ccc; }
#product #decorations fieldset legend { font-weight: normal; }
#product #decorations fieldset fieldset { background: #ddd; margin-bottom: 5px; }
#product #decorations ul { border-top: 1px dotted #ccc; margin: 0; padding: 0; }
#product #decorations ul ul { border-top: 0; }
#product #decorations fieldset fieldset ul { overflow: hidden; }
#product #decorations fieldset fieldset li { float: left; border: 0; }
#product #decorations fieldset fieldset li label { padding-right: 16px; }

Your UI design may require you to alter the markup of the form to add things like dropdowns. A standard set of javascript and CSS is available via site admin when you are eidting a custom product detail view. Choose from one of the decorations styles or choose custom to roll your own.

The main thing you need to look out for is that if you are using the instant quote price calculator you must preserve all the inputs and their class names and id's. To do this you may be better off hiding the #decorations fieldset off the page and using your alternative interface added in via javascript to check or uncheck the various options.