ProductCart E-commerce Widget for Blogs

You can now “take a your store with you”! This widget allows you to easily show select products on your blog, and even in many social networks.

The ProductCart E-Commerce Widget allows you to 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.

Blow on the right you see is an example of the widget “published” from the Early Impact software store.

Compatible with ProductCart v3.051 or higher

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.
• TypePad
  We haven't tried ourselves, but you should be able to add JavaScript to an Advanced Template (see FAQ on this topic)

The ProductCart E-commerce Widget can also be published to any other Web page that supports JavaScript (e.g. as you see above it's working just fine on this WIKI) and even to select Social Networks via WidgetBox (see instructions lower on the page):

• Bebo
• Facebook
  Note: the application name cannot be changed and therefore it is presented as ProductCart E-Commerce Widget, which does not work great. No workaround yet
• Netvibes
• Pageflakes
• Piczo
• Orkut
• Hi5 (Open Social)
• Ning

The ProductCart E-commerce Widget is completely free of charge to ProductCart users. You can download it here:

ProductCart E-Commerce Widget for Blogs - 04.15.08

• Requires ProductCart v3.051 or higher
• Download the ZIP file and unzip it on your desktop
• Open the Parent Paths Enabled or Parent Paths Disabled folder depending on which version of ProductCart you are using
• Upload the files to the corresponding folders on your Web server (remember that you likely renamed the “pcadmin” folder)
• You're done!

See the “Discussion” tab for bug fixes and release information.

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. On the other hand, if your blog or social network disallow JavaScript you can still easily add your widget, but you will use ProductCart's WidgetBox.

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 following page will be displayed.

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:

   • 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).

   • 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.

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>

1. Load ProductCart's WidgetBox Tool
2. If your new to WidgetBox.com you will need to create a FREE account
3. Make sure you are logged into your account
4. On the WidgetBox Tool page you will see two boxes “Widget Settings” and “Preview”.
5. Fill out the “Widget Settings”
   • Width: The width of your widget. See the “Styling your Widget” section for more details.
   • Height: The height of your widget. See the “Styling your Widget” section for more details.
   • Widget Location: This is the domain name and path to your “pc” folder. Replace the example with your own domain.
   • Affiliate ID: Send a link to the WidgetBox to an affiliate and they can generate their own. The ID will register with ProductCart's Affiliate System.
6. Verify the results by viewing the “Preview” window
7. Once you are satisfied click “Get Widget”
8. You will be asked where you want to send your widget (e.g. Blogger, OpenSocial, WordPress, etc.)
9. Follow the on screen instructions (instructions may vary by location)
10. Once you are finished you should be able to view the widget on your Social Networking site or Blog

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>

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.

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.

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.

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.

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.

We received the following feedback from a customer that implemented the this 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.

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.

The artwork shown in some of the screen shots on this page is courtesy of Anne Ormsby. Visit Anne's online gallery today.