Salmon Out of the box, how-to

In comparison to other eCommerce and CMS solutions, Salmon is much simple and faster to get your tailored site up and running.
The FAST documentation is especially suited for template integration because you merely need to copy/past as instructed rather than to understand the mechanisms involved.

BEFORE YOU START

Get yourself a design you like

Salmon let you use any web design you want. See our HTML templates suggestions. You don't need a design specific to Salmon. Just get yourself an HTML design, also called an HTML template. Note, there are templates made for specific solutions (ie: Magento template, OsCommerce template, WP template...). Though you could revert them to the HTML template that was used at first to build them, it is time saving to start straight from an HTML template.

Get a webspace with Salmon installed

For test & development purposes, you may request from us a free Salmon enabled web space. This is the easiest way, pre-configured for you. For production, Salmon has to be installed on the server where your web site will be hosted. For performance and stability, such hosting should be of dedicated or VPS grade. We do provide Salmon powered SaaS plans at competitive pricing, saving you much burden. We expect this will allow smaller online businesses to enjoy all benefits of Salmon software at a fraction of the cost.

Salmon EMPOWER YOUR SITE

Now that you got your design handy and an Salmon powered web space, it is time to move things up. Follow the easy steps we describe bellow. You don't need any advanced programming skills. Just copy/past the code on your web pages as instructed. If you do as we said it is guaranteed to work. Generally, this will take you from 30 minutes to 1 hour. Then you can start running your eCommerce business and make money. Good luck!

Adjust your design pages naming accordingly

For out of the box purpose, rename files of your HTML template pages as bellow. Other pages of your site can have the file name you want. If your Salmon powered space came with a default template, you may want to backup its files for reference how it was done prior uploading your own template.
Load Salmon javascript in HEAD section of pages

If your Salmon powered space came with a default template, the Salmon javascript files are already there, in folder assets/js, mainly e2c.js and e2chelpers_ecom.js. Otherwise, download them: e2c.js and e2chelpers_ecom.js, and place them in your assets/js folder. Then, on each page, load them in the HEAD section:

<script type="text/javascript" src="assets/js/e2c.js"></script>
<script type="text/javascript" src="assets/js/e2chelpers_ecom.js"></script>

Also, on each page, add this code in the HEAD section:

<script type="text/javascript">
  $(document).ready(function(ui) {
      e2c_init();
  });
</script>

Salmon uses JQuery. Unless your web design already loads JQuery you will need to place this before e2c.js:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Identify containers on pages

To make it short, containers are areas of the page that will be populated with dynamic content at runtime. For example, categories navigation, items listing, product description and so on. Salmon will insert the relevant data, but needs to know where. Of course, this pretty much depends upon your design.

For example, on one of our designs the categories navigation container (screenshot 001) is within an UL tag, on the Home page (index.html) we decided to have a 'latest articles' container (screenshot 002) which is within a DIV tag. Also, our category page has a listing (screenshot 003) within a DIV tag, and on our product page we have another container within a DIV tag as product description container (screenshot 004).

It should be straight forward for you to find on your design which DOM element delimit an area that will be populated. Once you have identified potential containers into your design, it is simple to tell Salmon how to inject content. This is done through a container definition.

Define containers for dynamic content

Salmon brings a simple mechanism to define each page areas that will have dynamic content. We simply mark such areas as an Salmon container. Then, we give HTML elements an ID that is relevant to the data we want to show at any particular place within the container. Let say your page has HTML code that looks like this:

<div class="product">
  <div>Product Title</div>
  <div>Product Description</div>
  <div>Product Price</div>
</div>             

You would simply add Salmon relevant IDs so your code become as below. When the page is visited, Salmon will then populate the container with the dynamic content. The container start and end comments are needed.

<div id="e2cproduct" class="product">
<!-- e2c_container start [... some data ...] -->
  <div id="e2cname">Product Title</div>
  <div id="e2cdescription">Product Description</div>
  <div id="e2cprice">Product Price</div>
<!-- e2c_container end -->
</div>             

For out of the box purposes, we provide a list of relevant IDs and start comments in annex to make your job easier for each page. Yes, you only need to copy/past from there. Just remember that this can be customized if needed and that this is only a way to help you get a quick start.

We strongly suggest you don't jump into any custom attempts before you manage the out of the box integration with default settings as provided in annex.

A note about rendering

Some containers needs to render multiple items, such as product listings, and have a limit and a loops values in the start comment as bellow:

<!-- e2c_container start [... limit 4 ... loops=4] -->

Salmon will duplicate the container as needed, populating it with each item, for as many times as the loops value. A value of 4 or 8 is a good start for experimenting. Should you need to render a different number of items just adjust both limit and loops values to that number.

A common mistake, when rendering multiple items into a container, is to forget Salmon handles duplication. For example, if you want to render a list of X products, the container should provide the DOM for only one product box. Otherwise you would have X times X products.

WRONG! Would end up as 4 times the 4 items being rendered.
<div>
 <ul id="my_items">
  <!-- e2c_container start ...loops=4...-->
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <!-- e2c_container end -->
 </ul>
</div>

Good! Would render only the 4 items once.
<div>
 <ul id="my_items">
  <!-- e2c_container start ...loops=4...-->
  <li>Item</li>
  <!-- e2c_container end -->
 </ul>
</div>

That is, on the second code example, the good one, we kept only the DOM part that match a single item, knowing Salmon will duplicate it as many times as needed. For this reason, you may need to adjust your HTML design accordingly.

If your Salmon powered space came with a default template, you may want to check the source of the HTML pages to see how it was done. It is indeed pretty obvious, and most can just be copy/pasted to your own template.

See the out of the box annex