Those functionalities will be part of Shopizer 1.2

- Support for multiple currencies
- Support for product availability by region
- Price by region
- Multiple Branding by Merchant
- Multiple product-category assignation
- Different stores can use the same product sets

The next post on Shopizer 1.2 will be dedicated to the changes in the technology stack

Stay tuned !

The tags have been simplified and refactored to easily create new store front templates. A new section of commercial store front templates will be available soon.

The administartion section will also be revamped with jQuery UI

We added a few extra css lines to enhance the UI to fit a store front page and display text below product images. This jQuery product slider widget can display product images and html text under the images such as the price, short description or even product reviews.

See a demo
Download the code by clicking on Like Button on our Facebook page (Downloads section)

This article describes

- Extend jCarousel css to fit a certain number of products in a page
- Extend jCarousel css to modify the slider appearance
- Extend jCarousel css to fit text below product image
- Add extra HTML to the jQuery product slider

HTML header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="lib/jquery.jcarousel.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/skin.css" />
<link rel="stylesheet" type="text/css" href="css/product-slider-skin.css" />

This example uses jQuery 1.42.hosted on google but has been tested with previous jQuery 1.3.2 version.

I have downloaded the latest version of jCarousel

Fortunatly no changes are required to jCarousel javascript to implement the slider, the onlycahnges required are in the css file. The HTML header includes above shows the extension of jCarousel css file by adding our product-slider-skin.css after jCarousel skin.css to overwrite properties.

Clip spacing and customization

The default css file is configured by default for 75 x 75 pixels images with a 10 pixels margin between images. In this case, images will be 120 x 100 pixels and the component needs to fit in a 650 pixels page area width.

The horizontal calculation will be :
(IMAGE WIDTH * NUMBER OF IMAGES TO DISPLAY) + (PADDING[10 px] * NUMBER OF IMAGES TO DISPLAY)

In our case, let’s assume 4 images (120 * 4) + (10 * 4) = 520 px required for the clip.

An additional static text area of 120 px added at the end of the clip and a 10 px marging will be added

Total horizontal spacing  650 px

Now let’s add 40 pixels under the image to display text in the clip area.

Our product-slider-skin.css file will overwrite original jCarousel properties with these new dimensions

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 650px;
    height: 150px;
    padding: 10px 40px; /** REDUCED WIDGET PADDING **/
}
 
.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  520px;
    height: 140px;
    float: left;
}
 
.jcarousel-skin-tango .jcarousel-item {
    width: 120px; /** IMAGE WIDTH **/
    height: 140px; /** IMAGE HEIGHT = 100px + 40px TO DISPLAY DESCRIPTION **/
}

We will also add a static text section at the end of the clip which will have to be defined this way

/** TEXT MESSAGE */
.jcarousel-skin-tango .message {
    position: absolute;
    top: 10px;
    right: 40px;
    width: 120px;
    height: 140px;
}
 
.jcarousel-skin-tango .text {
    margin-top: 20px;
    font-size: 45px;
    color: #333333;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: -4px;
    text-align:center;
}

Finally, i have decided to remove the original box around the viewer, modified background color and added lines on the top and bottom of the slider to give it a look similar to Amazon.com product slider

.jcarousel-skin-tango .jcarousel-container {
    background: #FFFFFF; /** CHANGED THE BG TO WHITE **/
    border: none; /** overwrites jcarousel border **/
    border-top: 1px solid #cccccc; /** ADDED TOP LINE **/
    border-bottom: 1px solid #cccccc; /** ADDED TOP LINE **/
}

HTML

Now here is the html that will display the products

<div id="products" class="jcarousel-skin-tango">
<div class="jcarousel-clip">
<ul class="jcarousel-list">
	<li class="jcarousel-item"><a id="image1">
<img src="http://farm4.static.flickr.com/3469/3920261056_4c23fd4847_m.jpg" border="0" alt="" width="120" height="100" /></a>
 
Puma Drift Cat II
<strong><span style="text-decoration: line-through;">$99.99</span> <span style="color: red;">$69.99</span></strong></li>
 
...
 
</ul>
</div>
<div class="message">
<div class="text">Shoes
<span style="font-size: 22px; letter-spacing: -1px;">featured selection</span>
<span style="font-size: 10px; letter-spacing: 4px;">.............</span></div>
</div>
</div>

And the javascript to enable jCarousel starting at item 1

 
jQuery(document).ready(function() {
 
    jQuery('#products').jcarousel({
        start: 1
    });
});
 
</script>

Integrate product slider widget to Shopizer

Since this s pure client side html and javascript coding, the integration will be done in product detail content section.

1) First upload jCarousel files sing sm-central – Store Front – Files management panel

- skin.css
- prev-horizontal.png
- next-horizontal.png
- jquery.jcarousel.min.js

unless the CMS configurartion are changed images will reside in

http://host/media/bin/images/merchant_id/

and files will reside in

http://host/media/bin/files/merchant_id/

2) You will need to add those lines to product-slider-skin.css in order to view navigation arrows. Those properties will overwrite jCarousel properties assuming images are in the same folder as the css file. The host and merchant id have to be replaced by your values

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://localhost:8080/media/bin/images/1/next-horizontal.png) no-repeat 0 0;
}
 
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(http://localhost:8080/media/bin/images/1/prev-horizontal.png);
}
 
.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://localhost:8080/media/bin/images/1/prev-horizontal.png) no-repeat 0 0;
}
 
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(http://localhost:8080/media/bin/images/1/next-horizontal.png);
}

3) Upload product-slider-skin.css using file management panel

4) You will need this block of code only to display the widget
Paths have to be replaced by your server configuration

<script src="http://&lt;host" type="text/javascript"><!--mce:3--></script>
<div id="wrap">
<div id="products" class="jcarousel-skin-tango">
<div class="jcarousel-clip">
<ul class="jcarousel-list">
	<li class="jcarousel-item"><a id="image1" href="#"><img src="http://%3chost%3e/media/images/products/%3Cmerchant%20id%3E/image.gif" border="0" alt="" width="120" height="100" /></a>
Product name
<strong><span style="text-decoration: line-through;">$99.99</span> <span style="color: red;">$69.99</span></strong>
 
...</li>
</ul>
</div>
<div class="message">
<div class="text">Shoes
<span style="font-size: 22px; letter-spacing: -1px;">featured selection</span>
<span style="font-size: 10px; letter-spacing: 4px;">.............</span></div>
</div>
</div>
</div>
<script type="text/javascript"><!--mce:4--></script>

5) Create a new sectioncode in central -> Store Front -> Store Front content section. The content section is ‘Product pages bottom’ or where you want to display the widget.

It will render as the illustration below

See a more detailed lists of changes here in version 1.1.1

Yes we work hard to implement the best eCommerce features required. The current buzz is on ‘sharing may lead to selling’ and we put emphasis on social network integration / social tagging.

Let us know what would be a great feature for your business.

Shopizer source code can be downloaded but also a click and run version bundled with Jetty, only requires to configure an smtp server, the rest is pre-configured. This click and run version is bundled with Jetty.

We are currently setting up an AMI instance on Amazon EC2 easily deployable.

More details to come.

http://www.decoandtrends.com

Online boutique created 100% using the administration panel
Attached shopping cart
FedEx shipping method
PayPal – Psigate CC Gateway and money order configured