Out of the box, annex | Salmon eCommerce

Salmon Out of the box, annex

The containers below provide further settings relevant to the page they are intended for. Each container settings is different on each page (except for all pages containers). Make sure you copy/past for the relevant page.

- General information
- Containers preset for all pages
- Containers preset for index.html
- Containers preset for prod_detail.html
- Containers preset for listing.html
- Containers preset for cart.html
- Containers and setup for checkout.html
- Additional elements

CONTAINERS

General information

Elements IDs must be made of columns names preceded by the container prefix. For example, to render the product name within a 'featured product' container, the element ID would be prefix 'e2cfeat' + product column 'name': e2cfeatname.

There are a few additional element IDs which can be used for specific purpose, as listed below. When indicated as required, this additional elements can be hidden (display:none;) but must be present in the container.

cartproductID : used to automatically set an 'add to cart' link for the product
itemIDlink : used to automatically set a link to the product detail page

If your container <!-- e2c_eq statement call any value that is not available it will not work properly. For example, for 'itemIDlink=*seo_url(itemID)*' you need itemIDlink and itemID (prefixed with relevant container prefix).

All pages containers (ALL PAGES)

Below default settings are valid for all pages.

Categories columns:

reference | categoryID | name | level | parent | sort | gp | pic | numofitems | url | status

Categories listing container
Used on all pages, renders categories for catalog navigation purposes

//container ID: e2ccatnav | prefix: e2ccatnav
<ul id="e2ccatnav">
<!-- e2c_container start [id=4;t=categories;w= orderby gp, level, sort;pf=e2ccatnav;loops=0] -->
 <!-- e2c_eq name=name -->
      ... here your HTML elements with their Salmon IDs set ...
      ... ie: <a id="e2ccatnavurl" href=""><span id="e2ccatnavname"></span></a> ...
<!-- e2c_container end -->
</ul>

show code example

<div class="section">
<h4>Categories</h4>
    <div class="glossymenu">
    <ul id="e2ccatnav">
<!-- e2c_container start [id=4;t=categories;w=status=on orderby gp, level, sort;n=e2ccatnav;pf=e2ccatnav;loops=0] -->
 <!-- e2c_eq name=name -->
           <li class="e2ccatnavdiv">
               <div style="display:none;">
                  <span id="e2ccatnavcategoryID"></span><span id="e2ccatnavnumofitems"></span><span id="e2ccatnavurl"></span><span id="e2ccatnavpic"></span><span id="e2ccatnavgp"></span><span id="e2ccatnavlevel"></span><span id="e2ccatnavsort"></span><span id="e2ccatnavparent"></span>
               </div>
               <a id="e2ccatnavitemIDlink" href=""><span id="e2ccatnavname" class=""></span></a>
           </li>
<!-- e2c_container end -->
    </ul>
    </div>
</div>

Home page containers (INDEX.HTML)

Below default settings are valid for index.html only.

Product columns:

reference | itemID | store | vendor | vendorlogin | category | name | short_description | description | price | currency | quantity | pics | featured | url

Latest products container
Used on the home page (index.html), renders latest products from the site.

//container ID: e2clatest | prefix: e2clast
<div id="e2clatest">
<!-- e2c_container start [id=2;t=items;w= orderby itemID desc limit 4;pf=e2clast;loops=4] -->
  <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)* -->
      ... here your HTML elements with their Salmon IDs set ...
      ... ie: <span id="e2clastname"></span> <span id="e2clastprice"></span> ...
      ... requiered: e2clastitemIDlink | e2clastcartproductID | e2clastitemID
<!-- e2c_container end -->
</div>

show code example

<div class="prod_listing">
   <h3 class="subheading">New products </h3>
   <ul id="e2clatest">
<!-- e2c_container start [id=3;t=items;w= orderby itemID desc limit 4;pf=e2clast;loops=4] -->
 <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)* -->
 <li>
      <a id="e2clastitemIDlink" href=""><img class="prodlist" id="e2clastpics" src="pics/large/" alt="" /></a>
      <p class="title" id="e2clastname"></p>
      <p>#<span id="e2clastitemID"></span> <span id="e2clasturl" style="display: none;"></span> <span class="price bold">$</span> <span id="e2clastprice" class="price bold"></span></p>
      <a id="e2clastcartproductID" href="javascript: e2c_pushToCart(PID,1);" class="button"><span>Buy Now</span></a>
    </li>
<!-- e2c_container end -->
   </ul>
</div>

Featured products container
Used on the home page (index.html), renders featured products from the site.

//container ID: e2cfeatured | prefix: e2cfeat
<div id="e2cfeatured">
<!-- e2c_container start [id=3;t=items;w=featured='yes' limit 8;pf=e2cfeat;loops=8] -->
  <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)* -->
      ... here your HTML elements with their Salmon IDs set ...
      ... ie: <span id="e2cfeatname"></span> <span id="e2cfeatprice"></span> ...
      ... requiered: e2cfeatitemIDlink | e2cfeatcartproductID | e2cfeatitemID
<!-- e2c_container end -->
</div>

show code example

<div class="prod_listing">
            	<h2 class="heading">Featured products</h2>
                <ul id="e2cfeatured">
<!-- e2c_container start [id=2;t=items;w=featured='yes' limit 8;pf=e2cfeat;loops=8] -->
 <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)* -->
<li>
<a id="e2cfeatitemIDlink" href=""><img class="prodlist" id="e2cfeatpics" src="pics/large/" alt="" /></a>
<p class="title" id="e2cfeatname"></p>
<p>#<span id="e2cfeatitemID"></span> <span id="e2cfeaturl" style="display: none;"></span> <span class="price bold">$</span> <span id="e2cfeatprice" class="price bold"></span></p>
<a id="e2cfeatcartproductID" href="javascript: e2c_pushToCart(PID,1);" class="button"><span>Buy Now</span></a>
</li>
<!-- e2c_container end -->
               </ul>
            </div>

Product detail page containers (PROD_DETAIL.HTML)

Below default settings are valid for prod_detail.html only.

Product columns:

reference | itemID | store | vendor | vendorlogin | category | name | short_description | description | price | currency | quantity | pics | featured | url

Product details container
Used on the product details page (prod_detail.html), renders all details relevant to a specific product.

// container ID: e2cproduct | prefix: e2c
<div id="e2cproduct">
  <!-- e2c_container start [id=0;t=items;w=itemID=*data*;pf=e2c;loops=0] -->
    <!-- e2c_eq cartproductID=*replace(PID,itemID)* -->
      ... here your HTML elements with their Salmon IDs set ...
      ... ie: <span id="e2cname"></span> <span id="e2cprice"></span> ...
      ... requiered:  e2ccartproductID | e2citemID
<!-- e2c_container end -->
</div>

show code example


<!-- e2c_container start [id=0;t=items;w=reference=*data*] -->
            <!-- e2c_eq picimg=pics;cartproductID=*replace(PID,itemID)* --> 
            <div class="prod_detail" id="e2cproduct">
            	<h2 class="heading">#<span id="e2citemID"></span> <span id="e2cname"></span ></h2>
<div class="prod_info">
  Price: <strong>$ <span id="e2cprice"></span></strong>
 <span id="e2cvendor"></span><span id="e2ccategory"></span>
 <a id="e2ccartproductID" href="javascript: e2c_pushToCart(PID,1);" class="button"><span>Add to Cart</span></a>
 <a id="e2cpiclink" href=""><img id="e2cpicimg" src="pics/large/" width="70" height="40" alt="" class="image0" /></a>
</div>
<!-- e2c_container end -->

Latest products container
Used on the product details page (prod_detail.html), renders latest products from the product category.

//container ID: e2clatest | prefix: e2clast
<div id="e2clatest">
<!-- e2c_container start [id=2;t=items;c=0;w=category=e2ccategory limit 4;pf=e2clast;loops=4] -->
  <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)*;itemIDlink=*replaceAll(PID,itemID)*;itemIDlink=*replaceAll(PURL,url)* -->
      ... here your HTML elements with their Salmon IDs set ...
      ... ie: <span id="e2clastname"></span> <span id="e2clastprice"></span> ...
      ... requiered: e2clastitemIDlink | e2clastcartproductID | e2clastitemID
<!-- e2c_container end -->
</div>

show code example


<div class="prod_listing">
   <h3 class="subheading">New products for <span class="e2cCatName">this</span> category</h3>
   <ul id="e2clatest">
<!-- e2c_container start [id=2;t=items;c=0;w=category=e2ccategory limit 4;pf=e2clast;loops=4] -->
 <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)*;itemIDlink=*replaceAll(PID,itemID)*;itemIDlink=*replaceAll(PURL,url)* -->
    <li>
      <a id="e2clastitemIDlink" href="" onclick="return e2c_action('PID','','','act=1;', 'PURL');"><img class="prodlist" id="e2clastpics" src="pics/large/" alt="" /></a>
      <p class="title" id="e2clastname"></p>
      <p>#<span id="e2clastitemID"></span> <span id="e2clasturl" style="display: none;"></span> <span class="price bold">$</span> <span id="e2clastprice" class="price bold"></span></p>
      <a id="e2clastcartproductID" href="javascript: e2c_pushToCart(PID,1);" class="button"><span>Buy Now</span></a>
    </li>
<!-- e2c_container end -->
   </ul>
</div>

Featured products container
Used on the product details page (prod_detail.html), renders featured products from the product category.

//container ID: e2cfeatured | prefix: e2cfeat
<div id="e2cfeatured">
<!-- e2c_container start [id=3;t=items;c=0;w=category=e2ccategory limit 4;pf=e2cfeat;loops=4] -->
  <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)*;itemIDlink=*replaceAll(PID,itemID)*;itemIDlink=*replaceAll(PURL,url)* -->
      ... here your HTML elements with their Salmon IDs set ...
      ... ie: <span id="e2cfeatname"></span> <span id="e2cfeatprice"></span> ...
      ... requiered: e2cfeatitemIDlink | e2cfeatcartproductID | e2cfeatitemID
<!-- e2c_container end -->
</div>

show code example


<div class="prod_listing">
   <h3 class="subheading">New products for <span class="e2cCatName">this</span> category</h3>
   <ul id="e2cfeatured">
<!-- e2c_container start [id=2;t=items;c=0;w=category=e2ccategory limit 4;pf=e2cfeat;loops=4] -->
 <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)*;itemIDlink=*replaceAll(PID,itemID)*;itemIDlink=*replaceAll(PURL,url)* --> 
    <li>
      <a id="e2cfeatitemIDlink" href="" onclick="return e2c_action('PID','','','act=1;', 'PURL');"><img class="prodlist" id="e2cfeatpics" src="pics/large/" alt="" /></a>
      <p class="title" id="e2cfeatname"></p>
      <p>#<span id="e2cfeatitemID"></span> <span id="e2cfeaturl" style="display: none;"></span> <span class="price bold">$</span> <span id="e2cfeatprice" class="price bold"></span></p>
      <a id="e2cfeatcartproductID" href="javascript: e2c_pushToCart(PID,1);" class="button"><span>Buy Now</span></a>
    </li>
<!-- e2c_container end -->
   </ul>
</div>

Category listing page containers (LISTING.HTML)

Below default settings are valid for listing.html only.

Product columns:

reference | itemID | store | vendor | vendorlogin | category | name | short_description | description | price | currency | quantity | pics | featured | url

Category products listing container
Used on the category listing page (listing.html), renders all products from the category.

//container ID: e2cprods | prefix: e2c
<div id="e2cprods">
<!-- e2c_container start [id=1;t=items;w=category=%*data*% limit 8;n=e2cprods;pf=e2c;loops=8;] -->
  <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)* -->
      ... here your HTML elements with their Salmon IDs set ...
      ... ie: <span id="e2cname"></span> <span id="e2cprice"></span> ...
      ... requiered: e2citemIDlink | e2ccartproductID | e2citemID
<!-- e2c_container end -->
</div>

show code example


<div class="prod_listing">
<h2 class="heading">Products for <span class="e2cCatName">this</span> category</h2>
 <ul id="e2cprods">
<!-- e2c_container start [id=1;t=items;w=category=%*data*% limit 8;n=e2cprods;pf=e2c;loops=8;] -->
  <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)* -->
  <li>
  <a id="e2citemIDlink" href=""><div class='e2cwrapper'><div id='e2cpicswrap'></div><img class="prodlist" id="e2cpics" src="pics/large/" alt="" /></div></a>
  <p class="title" id="e2cname"></p>
  <p>#<span id="e2citemID"></span> <span id="e2curl" style="display: none;"></span> <span class="price bold">$</span> <span id="e2cprice" class="price bold"></span></p>
  <a id="e2ccartproductID" href="javascript: e2c_pushToCart(PID,1);" class="button"><span>Buy Now</span></a>
  </li>
<!-- e2c_container end -->
 </ul>
</div>

Latest products container
Used on the category listing page (listing.html), renders latest products from the category.

//container ID: e2clatest | prefix: e2clast
<div id="e2clatest">
<!-- e2c_container start [id=2;t=items;w=category=*data* orderby itemID desc limit 4;pf=e2clast;loops=4] -->
  <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)* -->
      ... here your HTML elements with their Salmon IDs set ...
      ... ie: <span id="e2clastname"></span> <span id="e2clastprice"></span> ...
      ... requiered: e2clastitemIDlink | e2clastcartproductID | e2clastitemID
<!-- e2c_container end -->
</div>

show code example

 <div class="prod_listing">
                <h2 class="heading"><span class="e2cCatName">Demo store</span> new products</h2>
                <ul id="e2clatest">
<!-- e2c_container start [id=1;t=items;w=category=*data* orderby itemID desc limit 4;pf=e2clast;loops=4] -->
  <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)* --> 
<li id="1">
<a id="e2clastitemIDlink" href=""><img class="prodlist" id="e2clastpics" src="pics/large/" alt="" /></a>
<p class="title" id="e2clastname"></p>
<p>#<span id="e2clastitemID"></span> <span class="price bold">$</span> <span id="e2clastprice" class="price bold"></span></p>
<a id="e2clastcartproductID" href="javascript: e2c_pushToCart(PID,1);" class="button"><span>Buy Now</span></a>
</li>
<!-- e2c_container end -->
                </ul>
            </div>

Featured products container
Used on the category listing page (listing.html), renders featured products from the category.

//container ID: e2cfeatured | prefix: e2cfeat
<div id="e2cfeatured">
<!-- e2c_container start [id=3;t=items;w=category=*data* orderby itemID desc limit 4;pf=e2cfeat;loops=4] -->
  <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)* -->
      ... here your HTML elements with their Salmon IDs set ...
      ... ie: <span id="e2cfeatname"></span> <span id="e2cfeatprice"></span> ...
      ... requiered: e2cfeatitemIDlink | e2cfeatcartproductID | e2cfeatitemID
<!-- e2c_container end -->
</div>

show code example

<div class="prod_listing">
                <h2 class="heading"><span class="e2cCatName">Demo store</span> new products</h2>
                <ul id="e2cfeatured">
<!-- e2c_container start [id=1;t=items;w=category=*data* orderby itemID desc limit 4;pf=e2cfeat;loops=4] -->
  <!-- e2c_eq itemIDlink=*seo_url(itemID)*;cartproductID=*replace(PID,itemID)* --> 
<li id="1">
<a id="e2cfeatitemIDlink" href=""><img class="prodlist" id="e2cfeatpics" src="pics/large/" alt="" /></a>
<p class="title" id="e2cfeatname"></p>
<p>#<span id="e2cfeatitemID"></span> <span class="price bold">$</span> <span id="e2cfeatprice" class="price bold"></span></p>
<a id="e2cfeatcartproductID" href="javascript: e2c_pushToCart(PID,1);" class="button"><span>Buy Now</span></a>
</li>
<!-- e2c_container end -->
                </ul>
            </div>

Cart page containers (CART.HTML)

Below default settings are valid for cart.html only..

Cart columns:

reference | orderID | ownerID | productID | title | quantity | price | currency | total | ownerlogin | rowID

Cart container
Used on the cart page (cart.html), renders products in cart.

// container ID: e2ccart | prefix: e2ccart
<div id="e2ccart">
<!-- e2c_container start [id=5;t=orders;w=reference='';pf=e2ccart] -->
 <!-- e2c_eq title=title -->
      ... here your HTML elements with their Salmon IDs set ...
      ... ie: <span id="e2ccarttitle"></span> <span id="e2ccartprice"></span> ...
      ... requiered: e2ccartproductID |  e2ccartrowID
<!-- e2c_container end -->
</div>

show code example

<div class="cart_sec">
<ul class="listing" id="e2ccart">
<!-- e2c_container start [id=5;t=orders;w=reference='';pf=e2ccart] -->
 <li class="items">
   <ul class="cartitems">
    <li class="image"><a id="e2ccartitemIDlinkpic" href="" target="_blank"><img id="e2ccartpicssrc" src="" alt="" /></a></li><li class="name"><h3><a id="e2ccartitemIDlink" href="" target="_blank"><span id="e2ccarttitle"></span></a></h3></li><li class="price smalltext">$<span id="e2ccartprice"></span></li><li class="quantity smalltext"><input type="hidden" id="e2ccartproductID"><input id="e2ccartquantity" class="e2ccartquantity" type="text" /></li><li class="action"><a href="#" class="cross" id="e2ccartremFromCart"> <span class="dis_none">Delete Item</span></a></li><li class="total smalltext">$<span id="e2ccarttotal"></span></li>
   </ul>
 </li>
<!-- e2c_container end -->
</ul>
 <div class="sub_total">
   <ul>
     <li class="s_total">Sub Total</li>
     <li>$ <span id="e2ccartsubtotal">0.00</span></li>
    </ul>
 </div>
</div>
<a href="javascript: e2c_cartUpdate();" class="button left marglet"><span>Update</span></a>

For the cart page, you may also want to have increment/decrement quantity buttons. To achieve this, Salmon will try to call a function named e2c_scripts_js_quan_but(), which you should provide to your page.

show function + DOM example

function e2c_scripts_js_quan_but(data, cbfparams) {
  $(".plusminus").on('click', function () {
    var $button = $(this);
    var oldValue = $button.closest('.product-quantity').find(".qty-text").val();
    if ($button.hasClass("plus")) {
         var newVal = parseFloat(oldValue) + 1;
    } else {
       if (oldValue > 1) {
         var newVal = parseFloat(oldValue) - 1;
       } else {
         var newVal = 1;
       }
    }
    $button.closest('.product-quantity').find(".qty-text").val(newVal);
  });
}

<td class="product-quantity">
  <div class="quantity buttons_added">
     <input type="button" class="plusminus minus" value="-">
     <input id="e2ccartquantity" type="text" style="width:25px; padding:3px; text-align:center;" class="input-text qty text qty-text">
     <input type="button" class="plusminus plus" value="+">
  </div>
</td>

Checkout page containers (Checkout.HTML)

Please refer to the checkout setup for full details how to set up your checkout page.
However, if you want to add containers (latest products, featured, etc...) to your checkout page, use containers settings as in homepage (index.html).

ADDITIONAL ELEMENTS

Some out of the box features can be reached without a specific container, just with element IDs. Salmon will simply update the element with relevant values at run-time.

Shopping bag on top of pages, linking to cart, updated when adding a product to cart.

e2ccartitemsincount : show the number of items currently in cart
e2ccartpriceintotal ; show the price total of current cart

In cart page

e2ccartsubtotal: show the total of the cart invoice
To make an update cart button, the link should point to: "javascript: e2c_cartUpdate();"
To make an item delete button/pic, wrap it with <a id="e2ccartremFromCart" href="">
To show an item picture, give the img tag an id="e2ccartpicssrc"
To link an item title or pic to the product page, wrap it with <a id="e2ccartitemIDlink" href="">