DreamWeaver Toolbar: Product Catalog

This module allows the owner of a website to build and maintain an online store front.  Surfers will be able to shop, check-out, and pay by credit card or PayPal money transfer.

This module requires more set-up than most other Zencil features.  The owner of the site must configure the taxes and shipping charges, and set up a PayPal business account.  The module will attach itself to their PayPal account automatically when provided with the e-mail address they used when registering with PayPal.

Please see the e-Store tutorial form more information.

Features

  • Create and maintain columns (ex: product photo, description, price, and so on).
  • Set column types (image, multi-line text, single line text, currency, integer, and so on).
  • Add, remove and modify catalog items.
  • Adjust inventory levels.
  • Accept Visa, MasterCard, AMEX, Discover, eCheck, PayPal money transfer.

Installation

  1. Open an HTML file in DreamWeaver.
  2. Place the cursor at the insertion point (in code view or design view).
  3. Go to the Zencil toolbar and click the  icon.
  4. Set-up of taxes, shipping charges, and the PayPal connection is done after the store page design is uploaded and the first page of the online store is created (i.e. the first time the site owner chooses the store page layout).

Discussion

  • This module is equipped with a step-by-step that will guide the website owner through any operations they may need to perform.
  • For some reason I can never remember how to spell catalog.

Code

  • The style code should go within the <head> tags or as a style sheet attachment.
  • The <zencil> tags and their contents should go in the html body.
<style type="text/css">
#catalog{
 width: 100%;
 border-collapse: collapse;
}
#catalog img{
 border: 0;
}
#catalog td {
padding: 5px ;
}
#catalogText a{
 text-decoration: none;
}
#catalogBuy a {
font-family: Times New Roman, Times, serif;
text-decoration: none;
font-size: 16px;
color: #6666FF;
background-color: #FFFFFF;
border: 1px solid #C1C1C1;
padding: 2px 5px 2px 5px;
}
#catalogBuy a:hover {
color: #9B9B9B;
background-color: #C1C1C1;
border: 1px solid #C1C1C1;
}
#viewcart a {
white-space: nowrap;
font-family: Times New Roman, Times, serif;
text-decoration: none;
font-size: 16px;
color: #6666FF;
background-color: #FFFFFF;
border: 1px solid #C1C1C1;
padding: 2px 5px 2px 5px;
}
#viewcart a:hover {
color: #9B9B9B;
background-color: #C1C1C1;
border: 1px solid #C1C1C1;
}
#proceedtocheckout a {
white-space: nowrap;
font-family: Times New Roman, Times, serif;
text-decoration: none;
font-size: 16px;
color: #6666FF;
background-color: #FFFFFF;
border: 1px solid #C1C1C1;
padding: 2px 5px 2px 5px;
}
#proceedtocheckout a:hover {
color: #9B9B9B;
background-color: #C1C1C1;
border: 1px solid #C1C1C1;
}
#catalogSearchLine{ display: none; }
</style>
<zencil module="catalogue" name="catalogue1">
  <table id='catalog'>
    <tr id='catalogLine'>
      <td><strong>Image</strong></td>
      <td><strong>Description</strong></td>
      <td><strong>Price</strong></td>
      <td><strong>Weight</strong></td>
      <td>&nbsp;</td>
    </tr>
    <tr id='catalogSearchLine'>
      <form method='get' action=''>
        <input type='hidden' name='pageid' value='1' />
        <td></td>
        <td><input type='text' name='search[2]' value='' /></td>
        <td>$
            <input type='text' size='3' name='search[3][from]' value='' />
          to $
          <input type='text' size='3' name='search[3][to]' value='' /></td>
        <td><select name='search[4]' onchange='form.submit();'>
          <option value=''></option>
        </select></td>
        <td><input name="submit" type='submit' value='Search' /></td>
      </form>
    </tr>
    <tr id='catalogLine'>
      <td id='catalogImage'><a href='#'><img width='32' height="32" /></a></td>
      <td id='catalogText'><a href='#' >Widget</a></td>
      <td id='catalogCurrency'>$4.00</td>
      <td id='catalogDetail'>1 lb</td>
      <td id='catalogBuy'><span id='buytext1'><a href='javascript:;'>Buy</a></span> </td>
    </tr>
    <tr id='catalogLine'>
      <td id='catalogImage'><a href='#'><img width='32' height='32' /></a></td>
      <td id='catalogText'><a href='#' >Device</a></td>
      <td id='catalogCurrency'>$16.00</td>
      <td id='catalogDetail'>2 lb</td>
      <td id='catalogBuy'><span id='buytext2'><a href='javascript:;'>Buy</a></span> </td>
    </tr>
    <tr id='catalogLine'>
      <td colspan='4'>&nbsp;</td>
      <td><div id='viewcart'><a href='#'>View Cart</a></div>
          <br />
        <br />
        <div id='proceedtocheckout'><a href='#'>Proceed to Checkout</a></div></td>
    </tr>
  </table>
</zencil>
 
    Copyright Clear Site Web Solutions Corporation  |  Victoria, B.C. Canada