How to build an Online Store using Vendor APIs?


I was amazed to find a very simple way of putting together a Web based online store using Javascript, jQuery and Gilt API. The Gilt API offers a number of ways for you to retrieve a list of items on sale. To look up a particular brand of boots – for example. The code below demonstrates the following technical aspects:
a)Looking up Products by Product ID
b)Looking up Products by Brand
c)Looking up Products by Category
d)Looking up Products by Price Range

  1. gilt.js

window.GILT = {};

window.GILT.indexProducts = function(products) {
var productById = {};
var productIdsByBrand = {};
var productIdsByCategory = {};
var productIdsByPriceRange = {
“less than $50”: [],
“from $50 to less than $100”: [],
“from $100 to less than $200”: [],
“$200 or more”: []
};

// loop through each product
for(var pIdx = 0; pIdx < products.length; pIdx++) {
var product = products[pIdx];

// index current product by ID
productById[product.id] = product;

// index current product by brand
var productBrand = product.brand;
if(!(productIdsByBrand[productBrand] instanceof Array)) {
productIdsByBrand[productBrand] = [];
}
productIdsByBrand[productBrand].push(product.id);

// index current product by categories
for(var cIdx = 0; cIdx < product.categories.length; cIdx ++) {
var category = product.categories[cIdx];
if(!(productIdsByCategory[category] instanceof Array)) {
productIdsByCategory[category] = [];
}
productIdsByCategory[category].push(product.id);
}

// index current product by price range
for(var sIdx = 0; sIdx < product.skus.length; sIdx ++) {
var sku = product.skus[sIdx];
var salePrice = Math.floor(parseFloat(sku.sale_price));

if(salePrice < 50) {
productIdsByPriceRange[“less than $50”].push(product.id);
} else if(salePrice < 100) {
productIdsByPriceRange[“from $50 to less than $100”].push(product.id);
} else if(salePrice < 200) {
productIdsByPriceRange[“from $100 to less than $200”].push(product.id);
} else {
productIdsByPriceRange[“$200 or more”].push(product.id);
}
}
}

window.GILT.productById = productById;
window.GILT.productIdsByBrand = productIdsByBrand;
window.GILT.productIdsByCategory = productIdsByCategory;
window.GILT.productIdsByPriceRange = productIdsByPriceRange;
};

$(window).on(“products”, function(e, p) {
$(“.label.loading”).hide();
$(“.label.loading”).after(“<span>” + p.products.length + ” products loaded</span>”);
// $(“.dataresult”).parent().hide();
$(“.selects”).show();

GILT.indexProducts(p.products);

$.each(GILT.productIdsByBrand, function(key) {
$(“select.brand”).append(“<option>” + key + “</option>”);
});

$.each(GILT.productIdsByCategory, function(key) {
$(“select.category”).append(“<option>” + key + “</option>”);
});

$.each(GILT.productIdsByPriceRange, function(key) {
$(“select.price”).append(“<option>” + key + “</option>”);
});

$(window).trigger(“html_loaded”);
});

$(document).ready(function() {
$.getScript(“https://raw.github.com/gilt/codecademy/master/extra/build_html.js&#8221;, function() {
$(“.label.loading”).show();
$.getScript(“https://raw.github.com/gilt/codecademy/master/data/active_products.js&#8221;);
});
});

$(window).on(“html_loaded”, function(e) {
$(“.submit_button”).click(function(e) {
window.run($(“select.brand”).val(), $(“select.category”).val(), $(“select.price”).val(), function(result) {
$(“.dataresult”).html(JSON.stringify(result, undefined, 2));
});
});
});

2.gilt_app.js

// in this final function you will get three values
// that are going to be set by the three dropdowns
// that you can see in the Result tab
function run(brand, category, price, done) {
// “brand” will be set to the value of the first dropdown
// this will be the selected brand
//
// “category” will be set to the value of the second dropdown
// this will be the selected category

// “price” will be set to the value of the third dropdown
// this will be the selected price range

// you will have access to the data that you created in the
// previous exercises:
//
// GILT.productById
// GILT.productIdsByBrand
// GILT.productIdsByCategory
// GILT.productIdsByPriceRange
//
// Note: to access these objects you must prepend their name with
// the GILT prefix as in the above examples.

// we set allProducts to an array of all the product IDs
var allProductIds = Object.keys(GILT.productById);

// productIdsForBrand is set to the product IDs of the selected
// brand OR is going to be undefined if no brand is selected
var productIdsForBrand = GILT.productIdsByBrand[brand];

// productIdsForCategory is set to the product IDs of the selected
// category OR is going to be undefined if no category is selected
var productIdsForCategory = GILT.productIdsByCategory[category];

// productIdsForPriceRange is set to the product IDs of the selected
// price range OR is going to be undefined if no price is selected
var productIdsForPriceRange = GILT.productIdsByPriceRange[price];

// you are going to fill the selectedProducts array with the
// product objects that belongs to the brand, the category and
// the price renge selected from the interface
var selectedProducts = [];

// 1. loop through the allProductIds array

// 2. for each product ID check that it is contained in the
// productIdsForBrand, productIdsForCategory and the
// productIdsForPriceRange arrays using the provided
// isProductInCollection function

// 3. if the product ID satisfies the requirements, get the
// corresponding product object from the GILT.productById
// object

// 4. append the product object to the selectedProducts array

done(selectedProducts);
}

// This function returns true if the productId is contained in
// the productCollection array OR if the productCollection
// array is undefined, returns false otherwise.
function isProductInCollection(productId, productCollection) {
if(typeof productId === “string”) {
productId = parseInt(productId, 10);
}
if(typeof productCollection === “undefined”) {
return true;
}
return(productCollection.indexOf(productId) > -1);
}

3. Additionally you need an Index.html file to reference the above said Javascript files and JQuery CDN Path.

Drop it in Apache htdocs/gilt folder and run!

gilt1 gilt2 gilt3

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s