Store Widget

The Store widget allows you to implement a store in DotNetNuke in no time. Go to ecwid and create your free store there (free till 100 products, $19 a month for up to 1000 products). Then you can use your storeId in this widget and you are good to go. If you first want to see how it works we have included a demo storeId.

Widget Suite Version:  01.03.00 and up

Object Tag

The following is the required structure to begin putting together this widget.

<object id="ANY-UNIQUE-ID-YOU-WANT" codetype="dotnetnuke/client" codebase="WillStrohl.Widgets.ecwid" declare="declare">
 
</object>

This is the simplest method of implementing this widget. The ID attribute is required, but can be any unique value that you want to assign to it. The rest of the values must be in place how you see them above

Important

After installing this widget you nee to add the following script to the page header tags in your page settings

<script src="/Resources/Widgets/User/WillStrohl/js/jquery.liveQuery.js" type="text/javascript"></script>

Also dont forget to have a holder for your store in skin or content

<div id="ecwidholder"></div>

Parameters

The following parameters are optional, but allow you to customize how this widget will work and affect your page.

wrapper

Is used to set the HTML element which holds the store.

Default - #ecwidholder
Notes - None
Usage

<param name="wrapper" value="#ecwidholder" />

storeId

The id of your store.

Default - 1003
Notes - None
Usage

<param name="storeId" value="1003" />

catCount

The number of categories per row

Default - 3
Notes - If you want more categories per row images are automatically scaled to fit.
Usage

<param name="catCount" value="3" />

prodRows

The numberr of rows for your product display

Default - 3
Notes - None
Usage

<param name="prodRows" value="3" />

prodColumns

The numberr of columns for your product display

Default - 3
Notes - If you want more columns images are automatically scaled
Usage

<param name="prodColumns" value="3" />

tableRows

The number of rows for the table display of the products.

Default - 10
Notes - None
Usage

<param name="tableRows" value="10" />

listRows

The number of rows for the list display of the products.

Default - 10
Notes - None
Usage

<param name="listRows" value="10" />

categoryView

The view you want to use for your category display

Default - 10
Notes - Can be 'grid', 'list' or 'table'
Usage

<param name="categoryView" value="grid" />

Example Usage

This is an example of a production usage of this widget.

<object id="wgtecwid" codetype="dotnetnuke/client" codebase="WillStrohl.Widgets.Store" declare="declare"> 
 
     <param name="wrapper" value="#ecwidholder" /> 
 
     <param name="StoreId" value="1003" /> 
 
     <param name="catCount" value="3" /> 
 
     <param name="prodRows" value="3" /> 
 
     <param name="prodColumns" value="3" /> 
 
     <param name="tableRows" value="10" /> 
 
     <param name="listRows" value="10" /> 
 
     <param name="categoryView" value="grid" /> 
 
     <param name="searchView" value="list" /> 
 
</object>

Create the Widget HTML Mark-Up
  1. Enter or select the appropriate values in the form below to generate the skin widget mark-up to use in your site. Copy and paste it into your site.
  12. >> Generate Widget Code

This is a live demonstration of the Store Widget in action.  It is a simple 3-step process.  First, create a store on the ecwid website, add a single line of HTML to your Page Settings, and then apply the widget HTML on your website.