Skip to content
  • There are no suggestions because the search field is empty.

E-commerce Widgets

What It Does

You can now “take your store with you”! The ProductCart E-Commerce Widget allows you to easily show select products on your blog, and even in many social networks. With the widget, you can take selected products you have for sale on your ProductCart-powered store and have them show up on your blog, other Web sites, or even social networking pages. The process only takes minutes, and it can be an effective way to easily market your products.


Although the ProductCart E-Commerce Widget is certainly not designed to be an advertising system, it does support affiliate IDs in the product links that point back to your store, and works seamlessly with the affiliate tracking system that is built into ProductCart. This means that you can also deliver the Widget to affiliates that may want to easily show products on their blogs, Web sites, or social networking pages.

As for the look & feel, The Widget can be styled to match the look and feel of any web site. Read below for more information.
 

System Requirements

Supported Blogs
The E-commerce Widget works with today's most popular blogging engines. Among them:
  • Blogger
    It only takes a moment: just add an HTML/JavaScript component to your layout and paste the code you copied from your ProductCart Control Panel.
  • WordPress
    You need to be able to edit your template, which can be done only if your Wordpress blog is hosted on your own server. See the section below for specific details.
 

How to use it

The feature is built-in. Select Marketing > Generate File for... > E-commerce Widget.

In a nutshell, you will set some properties for the Widget in your ProductCart Control Panel. Then you publish the widget to your blog or social network pages. If your blog or social network allows JavaScript, then you can add your widget with a simple code snippet.
 

Settings

Log into your ProductCart Control Panel and select Marketing > Generate E-Commerce Widget. If you don't see this menu item, manually load the page “genSocialNetworkWidget.asp” (i.e. replace “menu.asp” with “genSocialNetworkWidget.asp” in the browser address field and hit the Enter key on your keyboard). 

The page allows you to tell ProductCart which products should be “served” through the Widget. For example: which products would you like to show on your blog?
 
  1. Choose from two publishing methods:
    1. Static Widget (Recommended): ProductCart will generate a static file to store your product names and prices. This file will be used by the E-Commerce Widget to display your products. This approach is used to eliminate redundant queries to the store database to collect the same information over and over (product information that might not have changed since the last time it was queried). Since it reduces the server load and improves performance, this is the recommended method. However, please note that since the information is saved to a static file, the product information shown through the Widget will not change automatically when you add/edit products. Remember to re-run this feature when you update your product catalog (e.g. update pricing).
    2. Dynamic Widget: ProductCart will query the store database and send to the E-Commerce Widget the latest product details every time the Widget is displayed. This means the product information will always be up-to-date. However, you should be aware that this method uses more system resources and may lead to a much longer page loading time.
  2. Share with Affiliates. Choose “Yes” and the Widget's code snippet will be shown in your affiliates' account area in the storefront. That is: when they log into their affiliate account in your storefront, they will see it and will be able to use it.
  3. Set maximum number of products (the widget will show 3 items per page, and create page navigation if needed as you can see in the Widget working on this very page)
  4. Pick a category
    The best way to pick the products to be shown on the widget is to create a new category in ProductCart and make it “hidden” in the storefront. Add to this category the products that you would like to show through the Widget. Then, pick this special category on the Widget settings page.

Publish Using a Code Snippet
Use this option for a blog or any Web page that supports JavaScript. For instance, Blogger allows for this. Check with your blogging platform's help files for something like “adding javascript code” to see if the platform supports it and which steps you need to take.

When you generate the E-Commerce Widget in your ProductCart Control Panel, ProductCart will return a simple line of JavaScript. This is the code that you will need to copy and paste in your blog or social networking pages. The code looks as follows, where “myStoreURL.com” is your Web store's domain name and the “productcart” folder is often renamed (e.g. “store”):
  
<script type="text/javascript" src="http://www.myStoreURL.com/productcart/pc/pcSyndication.js"></script>

You can also add an Affiliate ID to the Widget by adding an additional 3 lines of code at the top, where the second line defines the Affiliate ID to be used in the links shown by the Widget:
  
<script language="javascript"> idaffiliate="246"; // Affiliate ID </script> <script type="text/javascript" src="http://www.myStoreURL.com/productcart/pc/pcSyndication.js"></script>

 

Getting the Widget to work on Wordpress


To implement the code in a Wordpress blog, the /wordpress/wp-content/themes/default/sidebar.php script must be edited. These statements were added just above the final </div> in the file:
  
<h2>Featured Products</h2> <br><script type="text/javascript" src="http://www.yourWebStoreURL.com/productcart/pc/pcSyndication.js"></script>
 

Styling Your Widget

 

Overview

The ProductCart E-commerce Widget for Blogs can match the look and feel of your store. You can change the colors and fonts using CSS styles. Advanced HTML users can change entire layout (additional layouts will be available in future versions). The only existing limitation is that affiliates cannot change the styles to match their own site. You are in control of the widget’s appearance.
 

Fonts & Colors

All of the colors and fonts are defined using CSS in the file “pc/pcSyndication.css”. The background color of the product area (the region surrounding the product name and price) is also defined in the CSS. We recommend that this color contrast the background of your store.
 

Backgrounds

The background of the actual widget (which contains your product area) is white by default. We recommend that the widget’s background match your store’s background. To change the widget background color you will need to open up the file “pcSyndication.js” and change ”#FFFFFF” (white) to the color of your choice.

 

Sizing

By default the widget is vertical with a height of 440 pixels. There is an extra pad of space at the bottom of the widget to accommodate font styles and different browser views. The widget is 200 pixels wide by default, which fits nicely into most blog layouts. A widget must have a fixed height and width. For this reason we recommend that you do not adjust the height of the images. The images should have a fixed height for a consistent layout. If you change the image height or the number of images per page, then you may also need to change additional CSS Styles to make the widget display properly.


If you are not comfortable with CSS and HTML you should not attempt to modify the layout's sizing. Most changes, such a font and color, can be made with a couple small changes to CSS. However, sizing a widget can be more complex.

 

Sizing Limitations

Like most widgets, this widget uses an iframe. An iframe is what allows the widget to display products on different web sites. It also acts as a layer of protection for the hosting page. For example, many Social Networks require iframes because they can block scripts from “hacking” their servers. As such, you must always define a set height and width.
 

Customer Comments

We received the following feedback from a customer that implemented the widget on a WordPress blog:

To adjust the width of the column in which the widget content appears, the width in /productcart/pc/pcSyndication.js had to be adjusted as well as the width in /productcart/pc/pcSyndication.css.

To adjust the height of an individual product area, which was necessary because prices were overlaying the image below, we edited this style in /productcart/pc/pcSyndication.css
  
#pcSyndicationBox { height: 120px }

To adjust the number of items to be shown in the widget column before forcing the previous/next overflow navigation, the /productcart/pc/pcSyndication_ShowItems.asp script contains 2 references to {pageSize: 6} that need to be edited.
 

Feature Limitations


Although the ProductCart E-Commerce Widget supports affiliate IDs, it is not intended to work as an ad-serving syndication system. An affiliate can use a Widget on their website and pass their affiliate ID in the links. However, they do not currently have control over the “look and feel” of the widget. You control the widget's look with a CSS Style Sheet.

There is also no product syndication feed. The only way for an Affiliate to host your products is by placing a widget on his or her site.

In a future version, affiliates will be able to request and subscribe to RSS feeds. You can view RSS feeds in a reader, or style them with your own custom code.

Lastly, the current widget uses JavaScript. So your affiliate's web site will need to support the use of JavaScript. JavaScript is common on most web sites. For example, ProductCart uses JavaScript extensively.