Components PriceSpider
This Animate CC component leverages the PriceSpider API Service to display search results for a Product by its PriceSpider SKU Code. The user interface for this component is designed to approximated the same user interface available directly from the PriceSpider website.
An example page for “Scott’s Turf Builder Weed and Feed” can be found here:
http://pterodactylus.tremorvideo.com/ws/pricespider/US_prod11670004.html
The first call to the PriceSpider API uses the default zip code for the ad. The user can enter a new zip code in a Search input box to display results for a different location. The user my also click on the “Share Location” icon to use the current location.
Using the component (End-User)
There are 2 buttons in the navigation bar:
- Find Online
- Find Locally `` The using can switch between the “Find Online” and “Find Locally” panels by clicking the tab buttons in the navigation bar.
Find Online
The component initially displays the “Find Online” panel, which has a table with 3 columns:
- Retailer Logo (clickable link to the Retailer’s web site displaying the product)
- Availability: either “In Stock” or “See website”
- A clickable button labelled “See Price” (clickable link to the Retailer’s web site displaying the product)
Find Locally
The Find Locally panel consists of three vertically stacked sections, each at full display width:
- Search Bar, with an input field for the zip code
- Map, with numbered Pushpin graphical elements for each Retailer location
- Table, with a list of each Retailer sorted by distance
The table consists of 4 columns:
- Clickable number Pushin, which zooms in on that Retailer location on the map
- Store name, distance, and clickable “Directions” link
- Store address and phone number
- Today’s Hours / Call for Hours
Designing with the component
Placement
First, ensure the Components panel is showing in Animate CC (Winow > Components). Expand the
Blink Components folder and drag the desired PriceSpider component onto the canvas. Usually
only one PriceSpider component is placed on the Slate Movie Clip of an SPR (Super-Pre-Roll).
Instance Name
To adjust the properties of the component, ensure the desired Retailigence component is selected and open the Properties panel (Window > Properties).
Size and Position
The position and size can be manipulated on the canvas or through the properties pane. Note: clicking the link icon next to the size properties will lock the aspect ratio.
Parameters
The only parameter is the SKU (Stock Keep Unit) code for the product assigned by PriceSpider. The Account Manager for the ad campaign is responsible for providing this value.
Helper Methods
The component utilizes helper methods from a utility file. The _handleComponentUpdate method invoked during updates helps keep the component scaled appropriately.