ProductCart E-commerce Widget for Blogs - E-commerce Software

Create an account to edit articles | See Formatting Syntax for Wiki syntax | We look forward to your contribution!
You are here: The ProductCart Encyclopedia » Widgets, snippets, add-on's, and more » ProductCart E-commerce Widget for Blogs
This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== ProductCart E-commerce Widget for Blogs ======

===== Overview =====

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. 

===== What it does =====

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.

{{widgets:2008-pc-ecommerce-widget.gif?nolink|The ProductCart E-Commerce Widget for Blogs makes it really easy to showcase products from your Internet storefront on your blog}}

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.

===== System Requirements =====

==== Supported ProductCart Versions ====

Compatible with ProductCart v3.051 or higher

==== Supported Blogs ====

<html>
 <div style="float:right; padding: 20px; margin: 15px; border: 1px dashed #e1e1e1;"><script type="text/javascript" src="http://www.earlyimpact.com/eistore/productcart/pc/pcSyndication.js"></script></div>
</html>

The E-commerce Widget works with today's most popular blogging engines. Among them:

  * [[https://www.blogger.com/|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.
  * [[http://wordpress.com/|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.
  * [[http://www.typepad.com/|TypePad]] \\ We haven't tried ourselves, but you should be able to add JavaScript to an Advanced Template ([[http://support.typepad.com/cgi-bin/typepad.cfg/php/enduser/std_adp.php?p_faqid=262&p_created=1143234147&p_sid=r7U3Uj*i&p_lva=262&p_sp=cF9zcmNoPTEmcF9zb3J0X2J5PSZwX2dyaWRzb3J0PSZwX3Jvd19jbnQ9MTYmcF9wcm9kcz0mcF9jYXRzPTAmcF9wdj0mcF9jdj0mcF9wYWdlPTEmcF9zZWFyY2hfdGV4dD1qYXZhc2NyaXB0&p_li=&p_topview=1|see FAQ on this topic]])

==== Other Web sites and Social Networks ====

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):

  * [[http://www.bebo.com/|Bebo]]
  * [[http://www.facebook.com/|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 :-)
  * [[http://www.netvibes.com/|Netvibes]]
  * [[http://www.pageflakes.com/|Pageflakes]]
  * [[http://www.piczo.com/|Piczo]]
  * [[http://www.orkut.com/|Orkut]]
  * [[http://hi5.com/|Hi5 (Open Social)]]
  * [[http://www.ning.com/|Ning]]



===== Download =====

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

{{widgets:productcart_e-commerce_widget_041508.zip|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.

===== How to use it =====

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 [[http://www.widgetbox.com/widget/ProductCartEcommerce|WidgetBox]].

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

{{widgets:marketing-ecommerce-widget.gif?nolink|ProductCart e-commerce widget for blogs: Control Panel settings page}}

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?

  - 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.
  -- **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.
  -- 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)
  - 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 ====

<note>Use this option for a blog or any Web page that supports JavaScript. For instance, [[https://www.blogger.com/|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.</note>

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"):

<code>
<script type="text/javascript" src="http://www.myStoreURL.com/productcart/pc/pcSyndication.js"></script>
</code>

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:

<code>
<script language="javascript">
  idaffiliate="246"; // Affiliate ID
</script>
<script type="text/javascript" src="http://www.myStoreURL.com/productcart/pc/pcSyndication.js"></script>
</code>


==== Publish Using WidgetBox ====

<note>Use this option for Social Networks and other Web sites that don't allow code snippets containing JavaScript.</note>

  - Load ProductCart's [[http://www.widgetbox.com/widget/ProductCartEcommerce|WidgetBox Tool]]  
  - If your new to WidgetBox.com you will need to create a FREE account
  - Make sure you are logged into your account
  - On the WidgetBox Tool page you will see two boxes "Widget Settings" and "Preview".
  - 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.
  - Verify the results by viewing the "Preview" window
  - Once you are satisfied click "Get Widget"
  - You will be asked where you want to send your widget (e.g. Blogger, OpenSocial, WordPress, etc.)
  - Follow the on screen instructions (instructions may vary by location)
  - Once you are finished you should be able to view the widget on your Social Networking site or Blog

==== 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:

<code>
<h2>Featured Products</h2>
<br><script type="text/javascript" src="http://www.yourWebStoreURL.com/productcart/pc/pcSyndication.js"></script>
</code> 

===== 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 and 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.  

<note tip>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.</note>
 
==== 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 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//

<code>
#pcSyndicationBox {
 height: 120px
}
</code> 

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.

===== Credits =====

The artwork shown in some of the screen shots on this page is courtesy of Anne Ormsby. [[http://www.ormsbyeditions.com|Visit Anne's online gallery today]].
Trace:
Navigation

Search

Toolbox
