Build Shopping Widget(s) in pure JS from JSON
- or -
Post a project like this£300(approx. $377)
- Posted:
- Proposals: 5
- Remote
- #880142
- Expired
Description
Experience Level: Intermediate
General information for the website: Shopping widgets will be placed on 3rd party websites.
Num. of web pages/modules: 1
Description of every page/module: This page shows a demo of a simple shopping widget on the right-hand-side....
http://www.ultimatejujitsu.com/jujitsu-for-beginners/jujitsu-equipment/?bbxmarket=WW
We need many more creating of differing styles and layouts, showing 1 or more products at a time, carousels, sliders, hovers, etc, but all in pure JS, no jQuery, etc.
Description of requirements/features: From a JSON data structure, build a widget dynamically in pure Javascript, creating elements and setting styling.
No jQuery.
No Plugins.
Your code will be dropped into an existing framework, so ideally want to be a single function.
ie...
function bbxShoppingWidget(bbxd)
{
if ( bbxd.parameters && bbxd.parameters.container )
{
var bbxc = document.getElementById( bbxd.parameters.container );
var header = document.createElement("div");
header.style[ 'margin' ] = 0;
header.style[ 'fontFamily' ] = 'Tahoma, Geneva, sans-serif';
header.style[ 'fontSize' ] = '16.0px';
header.style[ 'fontWeight' ] = 'bold';
header.style[ 'textDecoration' ] = 'none';
header.style[ 'color' ] = '#dbaa70';
header.style[ 'borderWidth' ] = 0;
header.style[ 'borderStyle' ] = 'none';
header.style[ 'padding' ] = '0 0 6px 0';
bbxc.appendChild(header);
etc. etc.
}
Extra notes: Example JSON structure...
Multiple products, each with multiple offers (usually just one).
{
"parameters" : {
"market" : "US",
"keyword" : "ipod",
"ua" : "Firefox",
"page" : "7",
"ip" : "8.8.8.8",
"affiliate" : "12345",
"key" : "6a008bcf22ec83b33ec0c1234ded059c8f5cbc6c2fd11b5b604cc61c70ca430f",
"pretty" : "1",
"url" : "http://example.com/phones",
"partner" : "PG",
"container" : "some div id"
},
"messages" : {
"errors" : []
},
"matches" : 1324,
"time" : 0.0655958652496338,
"products" : [
{
"offers" : [
{
"market" : "US",
"currency" : "USD",
"url" : "http://...",
"merchant" : "Wholesale Marine",
"price" : 259.95,
"id" : "PG-US-18795-1794692091",
"partner" : "PG"
}
],
"name" : "Vexilar Fp100 Fishphone Camera System Iphone Ipod Ipad Android",
"category" : "Other Equipment",
"brand" : "",
"description" : "As the name implies, FishPhone turns your smart phone or tablet into a fully functional underwater camera monitor. Now anyone with a smart phone or tablet will get a high quality video image delivered right to the palm of your hand. Using Wi-Fi signal tec",
"image" : "http://d3vv6xw699rjh3.cloudfront.net/c87574-1794692091_1_200.jpg"
},
{
"offers" : [
{
"market" : "US",
"currency" : "USD",
"url" : "http://...",
"merchant" : "Groupon Goods",
"price" : 149.99,
"id" : "PG-US-23158-1860373946",
"partner" : "PG"
}
],
"name" : "Internet/FM Radio Player and Ipod/Iphone Dock Domino D2",
"category" : "Misc Electronics",
"brand" : "Revo",
"description" : "Speaker gives you access to clear, crisp music from your iPod or iPhone, nearby FM stations, or the Internet",
"image" : "http://d3vv6xw699rjh3.cloudfront.net/8b81b7-1860373946_1_200.jpg"
},
Num. of web pages/modules: 1
Description of every page/module: This page shows a demo of a simple shopping widget on the right-hand-side....
http://www.ultimatejujitsu.com/jujitsu-for-beginners/jujitsu-equipment/?bbxmarket=WW
We need many more creating of differing styles and layouts, showing 1 or more products at a time, carousels, sliders, hovers, etc, but all in pure JS, no jQuery, etc.
Description of requirements/features: From a JSON data structure, build a widget dynamically in pure Javascript, creating elements and setting styling.
No jQuery.
No Plugins.
Your code will be dropped into an existing framework, so ideally want to be a single function.
ie...
function bbxShoppingWidget(bbxd)
{
if ( bbxd.parameters && bbxd.parameters.container )
{
var bbxc = document.getElementById( bbxd.parameters.container );
var header = document.createElement("div");
header.style[ 'margin' ] = 0;
header.style[ 'fontFamily' ] = 'Tahoma, Geneva, sans-serif';
header.style[ 'fontSize' ] = '16.0px';
header.style[ 'fontWeight' ] = 'bold';
header.style[ 'textDecoration' ] = 'none';
header.style[ 'color' ] = '#dbaa70';
header.style[ 'borderWidth' ] = 0;
header.style[ 'borderStyle' ] = 'none';
header.style[ 'padding' ] = '0 0 6px 0';
bbxc.appendChild(header);
etc. etc.
}
Extra notes: Example JSON structure...
Multiple products, each with multiple offers (usually just one).
{
"parameters" : {
"market" : "US",
"keyword" : "ipod",
"ua" : "Firefox",
"page" : "7",
"ip" : "8.8.8.8",
"affiliate" : "12345",
"key" : "6a008bcf22ec83b33ec0c1234ded059c8f5cbc6c2fd11b5b604cc61c70ca430f",
"pretty" : "1",
"url" : "http://example.com/phones",
"partner" : "PG",
"container" : "some div id"
},
"messages" : {
"errors" : []
},
"matches" : 1324,
"time" : 0.0655958652496338,
"products" : [
{
"offers" : [
{
"market" : "US",
"currency" : "USD",
"url" : "http://...",
"merchant" : "Wholesale Marine",
"price" : 259.95,
"id" : "PG-US-18795-1794692091",
"partner" : "PG"
}
],
"name" : "Vexilar Fp100 Fishphone Camera System Iphone Ipod Ipad Android",
"category" : "Other Equipment",
"brand" : "",
"description" : "As the name implies, FishPhone turns your smart phone or tablet into a fully functional underwater camera monitor. Now anyone with a smart phone or tablet will get a high quality video image delivered right to the palm of your hand. Using Wi-Fi signal tec",
"image" : "http://d3vv6xw699rjh3.cloudfront.net/c87574-1794692091_1_200.jpg"
},
{
"offers" : [
{
"market" : "US",
"currency" : "USD",
"url" : "http://...",
"merchant" : "Groupon Goods",
"price" : 149.99,
"id" : "PG-US-23158-1860373946",
"partner" : "PG"
}
],
"name" : "Internet/FM Radio Player and Ipod/Iphone Dock Domino D2",
"category" : "Misc Electronics",
"brand" : "Revo",
"description" : "Speaker gives you access to clear, crisp music from your iPod or iPhone, nearby FM stations, or the Internet",
"image" : "http://d3vv6xw699rjh3.cloudfront.net/8b81b7-1860373946_1_200.jpg"
},
Robert B.
0% (0)Projects Completed
-
Freelancers worked with
-
Projects awarded
0%
Last project
7 May 2024
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies