Automated Comparisons
Overview
The Automated Price Comparison allows for the dynamic insertion of price comparison widgets into web pages that contain product links facilitated by a customizable JavaScript library. It provides various options for widget types, placement, and additional configurations to enhance user interactivity and scale the price comparisons across your content.
A demo page can be found here: Demo Automated Comparisons.
Parameters
The library accepts the following configuration options:
Parameter | Type | Description |
---|---|---|
selector | string | CSS selector for the target element. |
urlSelector | string | Optional. CSS selector for the URL element.
|
widgetPlacementSelector | string | CSS selector to determine where the widget should be placed. |
widgetSwap | string | Optional, method of widget placement. These are the available options for the
|
geolocation | boolean | Optional, flag to enable or disable geolocation. Enabling geolocation will present relevant merchant results based on the viewer's geolocation. By default set to |
resultsLimit | number | Optional, limits the number of results displayed. By default set to |
widgetType | string | Optional, type of widget to be used. |
templateId | string | Optional, ID of the template to use for the widget. Templates must be created here. Create a new price comparison in the platform, under “Template layout” select “Create a custom template”, style it to fit your content, and name the template. The |
epcSort | boolean | Optional, sort by EPC highest first. If true the results are sorted by EPC highest first, otherwise, the results are sorted by the default sorting. By default set to |
market | string | Optional, a supported market.
NOTE: The market takes priority over geolocation If the market is not defined and the geolocation is set as |
searchKeywordsSelector | string | Optional, CSS selector for the keywords element. NOTE:
|
priceSelector | string | Optional, CSS selector for the price element. NOTE: the decimal is defined by the dot |
delta | number | Optional, is a percentage that is used to calculate, together with the |
showTitle | boolean | Optional, is a boolean value that specifies whether to display a title for the widget or not. The title will be defined by the keywords took through the The title shown can be customized later through the CSS template. |
excludeSearchedMerchant | boolean | Optional, is a boolean value that specifies whether to remove the merchant you are searching for from the results or not. By default is set to Example: if you are making a search by url by providing a Walmart product url and you specify the key |
Usage
Initialization
Implement the following updated Javascript on to your content with your corresponding API key (found under your platform Settings > Site).
<script type="text/javascript">
var vglnk = {
key: <api key>,
automatedLibrary: {
selector: '.card',
urlSelector: '.card-title a',
widgetPlacementSelector: '.widgetDisplay',
widgetSwap: 'inside',
geolocation: false,
widgetType: 'price-comparison',
templateId: 'table1'
}
};
(function (d, t) {
var s = d.createElement(t);
s.type = 'text/javascript'; s.async = true;
s.src = '//cdn.viglink.com/api/vglnk.js';
var r = d.getElementsByTagName(t)[0];
r.parentNode.insertBefore(s, r);
}(document, 'script'));
</script>
Validation
All the provided parameters are checked for validity.
The library will throw an error with a descriptive message if any option is invalid. Error messages generated by this library are visible in the browser's developer console.
Creating Widgets
The widgets are dynamically created and inserted into the DOM based on the specified options.
Notes
- Ensure that the selectors used in options are valid and reference existing elements in the DOM. The library's functionality hinges on the correct configuration of options. Improper configuration can lead to unexpected behavior or errors.
- There is no delay when updating the fields in the custom library to when they update within the widget.
- This documentation provides a basic understanding of the AutomatedLibrary JavaScript library, outlining its structure, usage, and error handling. For further customizations or specific use cases, please contact support ([email protected]).
Updated 30 days ago