internet prodavnica u javascriptu · 1. koriš ćene tehnologije 1.1 bootstrap twitter bootstrap je...
Post on 29-Feb-2020
11 Views
Preview:
TRANSCRIPT
VISOKA ŠKOLA STRUKOVNIH STUDIJA
ZA INFORMACIONE I KOMUNIKACIONE TEHNOLOGIJE
INTERNET TEHNOLOGIJE
INTERNET PRODAVNICA U JAVASCRIPTU
Predmet: Praktikum 2
Profesor: Student:
Dr. Nenad Kojić, dipl. inž. Miloš Manojlović 97/07
Beograd, 2013.
Sadržaj1. Korišćene tehnologije ............................................................................................................ 3
1.1 Bootstrap .......................................................................................................................... 3
1.2 Backbone.......................................................................................................................... 3
1.3 Simplecart ........................................................................................................................ 4
1.4 Slim .................................................................................................................................. 4
1.5 Magento ........................................................................................................................... 4
2. Dizajn aplikacije .................................................................................................................... 5
2.1 Kategorije ......................................................................................................................... 6
2.2 Proizvodi .......................................................................................................................... 7
2.3 Korpa................................................................................................................................ 8
3. Kodovi.................................................................................................................................... 9
3.1 Početna stranica ............................................................................................................... 9
3.2 Javascript........................................................................................................................ 19
3.2.1 Models..................................................................................................................... 19
3.2.1.1 CategoryModel.js ....................................................................................... 19
3.2.1.2 ProductModel.js ......................................................................................... 22
3.2.2 Views ...................................................................................................................... 27
3.2.2.1 CategoryView.js ........................................................................................ 27
3.2.2.2 Home.js ...................................................................................................... 28
3.2.2.3 ProductListView.js .................................................................................... 30
3.2.2.4 ProductView.js ........................................................................................... 31
3.2.3 Main.js .................................................................................................................... 32
3.2.4 Utils.js ..................................................................................................................... 40
3.3 Templejti ........................................................................................................................ 42
3.3.1 CategoryView.html ....................................................................................... 42
3.3.1 HomeView.html ............................................................................................ 42
3.3.1 ProductListView.html ................................................................................... 42
3.3.1 ProductView.html ......................................................................................... 44
3.4 Rest ................................................................................................................................ 45
4. Zaključak.............................................................................................................................. 53
Literatura .................................................................................................................................. 54
1. Korišćene tehnologije
1.1 Bootstrap
Twitter Bootstrap je besplatna kolekcija alata za kreiranje web sajtova i web aplikacija. Sadrži HTML5 i CSS3 dizajn templejte za navigaciju, forme, dugmad i ostale interfejs komponente. Ima podržan "responsive design" prikaz web strana sa integrisanom "mrežom 940px". Takođe sadrži i neke često korišćene Javascript extenzije kao sto su notifikacije, validacije, slajder slika i modalne prozore.
Koristi se uglavnom za brzo pravljenje prototipa web aplikacije zbog svojih već predefinisanih izgleda komponenti. Zbog podržanog "responsive design" i mreže koja ima 12 kolona, lako se prilagođava mobilnim uređaima i tabletima. Primer koda se moze pogledati u poglavlju 3.1.
1.2 Backbone
Backbone je Javascript biblioteka koja se koristi za pravljenje jednostraničnih web aplikacija i za sinhronizaciju pojedinačnih delova web strane sa serverom i drugim konekcijama. Koristi model-view-presenter (MVP) dizajn patern i zavisi od Javascript-a i Underscore.js biblioteke.
U Backbone-u podaci su predstavljeni preko modela(models). Više istih modela čini kolekciju(collection) i oni su povezani sa prikazom(view) preko događaja(events). Kada se desi promena u prikazu HTML-a(view), preko događaja(events) se obavestava kolekcija modela(collection) da treba da promeni podatke i obrnuto.
Backbone ruter(router) predstavlja mehanizam koji na ostnovu URL adrese, poziva određenu metodu. Uzmimo za primer URL adresu "www.example.com/#product", ako je za "#product" definisana metoda "getProduct", unonsom URL adrese "www.example.com/#product" u web čitač biće pozvana metoda "getProduct" koja će promeniti podatke i zatim te podatke prikazati korisniku preko templejta(templates). Backbone nema svoj templejt mehanizam, već koristi templejte(templates) od Undersocre.js biblioteke. U poglavlju 3.3 su predstavljeni primeri templejta.
Backbone se koristi za organizaciju aplikacije i sa svojim vec predefinisanim funkcionalnostima olakša pravljenje aplikacije. U kodu aplikacije, moduli i kolekcije su pisani u istom fajlu i predstavljeni su u poglavlju 3.2.1. Primer rutera se moze naći na početku poglavlja 3.2.3, dok je mehanizam za automacko učitavanje templejta u poglavlju 3.2.4.
1.3 Simplecart
Simplecart ja Javascript biblioteka koja ima funkcionalnost korpe za web prodavnicu. Ima mogućnosti podešavanja poreza i načina plaćanja. Sve podatke čuva u memoriji web čitača tj. u lokalno skladište(localStorage) čitača.
Biblioteka je iskorišćena za čuvanje porudzbenice i naplate proizvoda. Podesavanja Simplecart bibilioteke mogu se videti na kraju poglavlja 3.2.3.
1.4 Slim
Slim je mali skup alata(framework) u PHP-u koji omogućava da se na lak i brz način naprave RESTFul web servisi. Podržava sve HTTP metode(GET, POST, PUT, DELETE) i na prost način se definišu URL adrese za određene metode tj. na prost način se pravi ruter(router) aplikacije.
U projektu se koristi da komunicira sa Magento-m preko Magento core API-a i da sa druge strane te podatke predstavi na RESTFul web servis. Primer koda je u poglavlju 3.4.
1.5 Magento
Magento je platforma za web prodavnice. Modularnog je tipa, tako da postoji puno dodataka za razne dodatne funkcionalnosti i izglede web prodavnica. Magento ima implementirane mehanizme za upravljanje proizvodima, kategorijama proizvoda, skladištima, korpama za web prodavnice, metodama naplata i promocijama.
U projektu je iskorišćen kao platforma koja će pružiti funkcionalnosti internet prodavnice i kao servis koji čuva podatke.
2. Dizajn aplikacije
Slika 1. - Dizajn aplikacije
Aplikacija je dizajniranda da se izvršava na jednoj stranici. Sve potrebne podatke od servera dobija putem Ajax-a. Tom tehnikom se postiže da se web stranica učitava samo na početku i da sa ostalim promenama podataka menjaju samo delovi web stranice.
Na slici 1. predstavljen je dizajn aplikacije, gde zeleni kvadrat predstavlja serverski deo. U simbolu oblaka su predstavljeni servisi za plaćanje na internetu a u plavom kvadratu je klijenci deo tj. deo koji se izvršava u korisničkom web čitaču.
2.1 Kategorije
Slika 2. - Kategorije
Prilikom prvog učitavanja web stranice definisano je da se izvrši listanje kategorija koje se preuzimaju sa servera Magento platforme. U poglavlju 3.2.3 u metodi “initialize” Backbone rutera se kreira objekat kategorije(Backbone model). Nad objektom kategorije se poziva metoda “fetch” koja na ostovu URL adrese koji je definisan u modelu, šalje zahtev serveru na definisanu adresu. Zahtev je tipa “GET”, što znači da su potrebni podaci od servera.
Zahtev stiže do Slim rutera. Slim na osnovu tipa zahteva i adrese(“/rest/index.php/categories”) poziva određenu metodu(“get categories”). U poglavlju 3.4 su prikazane sve metode koje su podržane za tipove zahteva i adrese.
Pozvana metoda za dobijanje kategorija u svom telu ima kod Magento core API-a koji dohvata sve kategorije. Slim metoda kada dobije sve kategorije, te podatke enkoduje u “JSON” format. Tako formirane podatke šalje odgovorom natrag Backbone-u.
U poglavlju 3.2.1.2 metod “parse” podaci se preoblikuju i od tih podataka se pravi Backbone kolekcija. Zatim se u metodu “fetch” u delu “success” u određeni deo na web stranici(levi navihacioni meni) kreira objekat “CategoryView”.
Kreiranjem objecta “CategoryView” i pozivanjem metode “render”, uzima se templajt za kategorije(poglavlje 3.3.1), popunjava se prosleđenima podacima i prikazuje se korisniku na web stranici.
2.2 Proizvodi
Slika 3. - Proizvodi
Proizvodi se listaju klikom na jednu od kategorija i prikazani su na slici 3. Klikom na link kategorije(“Furniture”) poziva se adresa(“/ecommerce/#category/10”). Backbone ruter na osnovu dela adrese(“category/10”) poziva metodu “category” i prosleđuje vrednost 10 kao parametar “id”, pogledati poglavlje 3.2.3. U metodi se kreira objecat modela “Product” i nad njim se poziva metod “fetch” koji šalje zahtev serveru sa parametrom “id” kategorije 10. URL adresa tog poziva je “/rest/index.php/products/category_id/10”.
Slim metod koji je pozvan na osnovu date adrese, prosleđuje parametar kategorije Magentu koji vraća sve prizvode iz te kategorije. Slim metod te podatke prizvoda enkoduje u “JSON” format i odgovara na zahtev Backbone modela. Vraćeni podaci formiraju kolekciju, i zatim se preko templejta prikazuju u web čitaču.
2.3 Korpa
Slika 4. - Korpa
Korpa za internet prodavnicu je implementirana sa Simplecart bibliotekom, čija se konfiguracija nalazi u poglavlju 3.2.3. Dizajn korpe je prilagođen sajtu.
Dodavanjem određenih CSS klasa u HTML templejta “ProdutListView” omogućeno je da proizvodi mogu da se dodaju u korpu. U poglavlju 3.3.1 pogledati klase “item_name, item_price, item_add”. Biblioteka na osnovu tih podataka automacki računa ukupne cene za pojedinačni proizvod i ukupnu sumu poruđbenice.
Svi podaci proizvoda u korpi se čuvaju u lokalnoj memori web čitača. To pomaže pri problemu kada korisnik menja strane ili u slučaju da zatvori stranicu. Svi podaci ostaju sačuvani i vezani za tog korisnika.
Klikom na dugme “Checkout” kupi se lista proizvoda, njihova cena, ukupna suma i šalju se definisanom servisu za plaćanje(PayPal). Servis prima uplatu i obaveštava o uspešnosti uplate.
3. Kodovi
3.1 Početna stranica
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">eCommerce Shop</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ><a href="#">Home</a></li> <!-- class="active" -->
<li><a href="#products">Products</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Categories</h3>
</div>
<div class="panel-body">
<div class="list-group" id="categories">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<p>
<img src="http://localhost/ecommerce/img/free_shipping_callout.jpg" class="img-responsive freeshipping">
</p>
<div id="content"></div>
</div>
<div class="col-md-3">
<div class="panel panel-default panel-success">
<div class="panel-heading">
<h3 class="panel-title">Shopping Cart</h3>
</div>
<div class="panel-body">
<div class="simpleCart_items"></div>
<div class="well well-sm">
<p class="totalpricetext">
<span class="simpleCart_quantity"></span> items - <span class="simpleCart_total"></span>
</p>
<a href="javascript:;" class="simpleCart_checkout btn btn-success btn-lg btn-block">Checkout</a>
</div>
</div>
</div>
<div class="paypal">
<img src="/ecommerce/img/paypal_mc_visa_amex_disc_150x139.gif" class="img-responsive">
<img src="/ecommerce/img/bnr_nowAccepting_150x60.gif" class="img-responsive">
</div>
</div>
</div>
<hr>
<footer>
<p>© eCommerce Shop 2013</p>
</footer>
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/underscore-min.js"></script>
<script src="js/vendor/backbone-min.js"></script>
<script src="js/vendor/simpleCart.min.js"></script>
<script src="js/vendor/nprogress.js"></script>
<script src="js/utils.js"></script>
<script src="js/models/productModel.js"></script>
<script src="js/models/categoryModel.js"></script>
<script src="js/views/home.js"></script>
<script src="js/views/productListView.js"></script>
<script src="js/views/productView.js"></script>
<script src="js/views/categoryView.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
3.2 Javascript
3.2.1 Models
3.2.1.1 CategoryModel.js
window.Category = Backbone.Model.extend({
url: function() {
var defaultUrl = "../zcommerce/rest/index.php/categories";
return defaultUrl;
},
defaults: {
id: '',
name: '',
},
initialize:function() {
this.categories = new CategoryCollection();
},
parse: function(response) {
console.log('Category Model Parse');
// {"objName": [
// {"objOneVar1": "objOneVal1", "objOneVar2": "objOneVal2"},
// {"objTwoVar1": "objTwoVal1", "objTwoVar2": "objTwoVal2"}
// ]}
response.results = { categories: []};
for (var i = 0; i < response.length; i++) {
var arrayObject = response[i];
response.results['categories'].push({
id: arrayObject.id,
name: arrayObject.name
});
};
console.log(response.results);
return response.results;
}
});
window.CategoryCollection = Backbone.Collection.extend({
model: Category,
});
3.2.1.2 ProductModel.js
window.Product = Backbone.Model.extend({
url: function() {
var defaultUrl = '../zcommerce/rest/index.php/products';
if(this.id !== '') {
defaultUrl = defaultUrl+"/"+this.id;
}
else if(this.attributes.categoryId) {
defaultUrl = defaultUrl+"/category_id/"+this.attributes.categoryId;
}
return defaultUrl;
},
defaults: {
id: '',
name: '',
price: 0,
image: ''
},
initialize:function() {
this.products = new ProductCollection();
},
parse: function(response) {
console.log('Product Model Parse');
// {"objName": [
// {"objOneVar1": "objOneVal1", "objOneVar2": "objOneVal2"},
// {"objTwoVar1": "objTwoVal1", "objTwoVar2": "objTwoVal2"}
// ]}
if(response.length > 1) {
response.results = { products: []};
for (var i = 0; i < response.length; i++) {
var arrayObject = response[i];
response.results['products'].push({
id: arrayObject[0],
name: arrayObject[1],
price: arrayObject[2],
image: arrayObject[3],
description: arrayObject[4]
});
};
} else { // one product parse
var arrayObject = response[0];
response.results = { product: {
id: arrayObject[0],
name: arrayObject[1],
price: arrayObject[2],
image: arrayObject[3],
description: arrayObject[4]
}};
}
console.log(response.results);
return response.results;
}
});
window.ProductCollection = Backbone.Collection.extend({
model: Product,
findById:function (key) {
var url = (key == '') ? "../zcommerce/rest/index.php/products" : "../zcommerce/rest/index.php/products/" + key;
console.log('findById: ' + key);
var self = this;
$.ajax({
url:url,
dataType:"json",
success:function (data) {
console.log("search success: " + data.length);
self.reset(data);
}
});
}
});
3.2.2 Views
3.2.2.1 CategoryView.js
window.CategoryView = Backbone.View.extend({
initialize:function () {
console.log('Initializing Categroy View');
},
render:function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
3.2.2.2 Home.js
window.HomeView = Backbone.View.extend({
initialize:function () {
console.log('Initializing Home View');
// this.template = _.template(directory.utils.templateLoader.get('home'));
// this.template = templates['Home'];
},
events:{
"click #showMeBtn":"showMeBtnClick"
},
render:function () {
$(this.el).html(this.template());
return this;
},
showMeBtnClick:function () {
app.headerView.search();
}
});
3.2.2.3 ProductListView.js
window.ProductListView = Backbone.View.extend({
initialize:function () {
console.log('Initializing Product List View');
},
render:function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
3.2.2.4 ProductView.js
window.ProductView = Backbone.View.extend({
initialize:function () {
console.log('Initializing Product View');
},
render:function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
3.2.3 Main.js
window.Router = Backbone.Router.extend({
routes: {
"": "home",
"products": "products",
"products/:id": "productDetails",
"category/:id": "category"
},
initialize: function () {
var category = new Category();
category.fetch({
success: function (data, xhr) {
console.log('Main Categories Fetch');
$('#categories').html(new CategoryView({model: data}).render().el);
}
});
},
home: function () {
// Since the home view never changes, we instantiate it and render it only once
if (!this.homeView) {
this.homeView = new HomeView();
this.homeView.render();
} else {
this.homeView.delegateEvents(); // delegate events when the view is recycled
}
$("#content").html(this.homeView.el);
},
contact: function () {
if (!this.contactView) {
this.contactView = new ContactView();
this.contactView.render();
}
$('#content').html(this.contactView.el);
this.headerView.select('contact-menu');
},
products: function () {
var product = new Product();
product.fetch({
success: function (data, xhr) {
console.log('Main Products Fetch');
$('#content').html(new ProductListView({model: data}).render().el);
}
});
},
productDetails: function (id) {
var product = new Product({id: id});
product.fetch({
success: function (data, xhr) {
// Note that we could also 'recycle' the same instance of ProductView
// instead of creating new instances
console.log('Main ProductDetails Fetch');
$('#content').html(new ProductView({model: data}).render().el);
}
});
},
category: function(id) {
var product = new Product({categoryId: id});
product.fetch({
success: function (data, xhr) {
console.log('Main Category Product Fetch');
$('#content').html(new ProductListView({model: data}).render().el);
}
});
}
});
templateLoader.load(["HomeView", "ProductListView", "ProductView", "CategoryView"],
function () {
app = new Router();
Backbone.history.start();
});
// Another plugins
simpleCart({
});
simpleCart({
checkout: {
type: "PayPal",
email: "muja3.ict@gmail.com",
currency: "US Dollar"
},
cartColumns: [
{ attr: "name" , label: false, view: function(item, column) {
return '<h4>'+ item.get('name') +'</h4>';
}},
{ attr: "price", label: false, view: "currency" },
{ view: "decrement", label: false, text: '-'},
{ attr: "quantity" , label: false, className: "badge"},
{ view: "increment", label: false, text: '+'},
{ attr: "total" , label: false, view: "currency" },
{ view: "remove" , text: '<span class="btn btn-warning btn-xs">Remove</span>' , label: false },
//custom view: link to product detail
// {view: function (item, column) {
// var linkTitle = item.get('name');
// return linkTitle;
// },
// text: "View Details",
// label: false
// } //end custom column view
]
}); //end simpleCart object instance
// NProgress start and done
$(document).ajaxStart(function() {
NProgress.start();
});
$(document).ajaxComplete(function() {
NProgress.done();
});
3.2.4 Utils.js
// The Template Loader. Used to asynchronously load templates located in separate .html files
window.templateLoader = {
load: function(views, callback) {
var deferreds = [];
$.each(views, function(index, view) {
if (window[view]) {
deferreds.push($.get('tpl/' + view + '.html', function(data) {
window[view].prototype.template = _.template(data);
}, 'html'));
} else {
alert(view + " not found");
}
});
$.when.apply(null, deferreds).done(callback);
}
};
3.3 Templejti
3.3.1 CategoryView.html
<% _.each(categories, function(category) { %>
<a href="#category/<%= category.id %>" class="list-group-item"><%= category.name %></a>
<% }); %>
3.3.1 HomeView.html
<h3>eCommerce Shop</h3>
<p>Predmet: Praktikum 2</p>
<p>Student: Miloš Manojlović 97/07 IT</p>
3.3.1 ProductListView.html
<div class="row">
<% _.each(products, function(product) { %>
<div class="col-sm-3 col-md-4">
<div class="thumbnail simpleCart_shelfItem well well-sm">
<img src="<%= product.image %>" class="img-responsive">
<div class="caption">
<h5 class="item_name"><a href="#products/<%= product.id %>"><%= product.name %></a></h5>
<p class="item_price"><%= product.price %></p>
<button type="button" class="btn btn-info item_add">Add to Cart</button>
</div>
</div>
</div>
<% }); %>
</div>
3.3.1 ProductView.html
<div class="row simpleCart_shelfItem">
<div class="col-sm-6 col-md-4">
<div class="thumbnail ">
<img src="<%= product.image %>" class="img-responsive">
</div>
</div>
<div class="col-sm-6 col-md-4">
<h3 class="item_name"><%= product.name %></h3>
<p class="item_price">Price: <%= product.price %></p>
<p><button type="button" class="btn btn-info pull-right item_add">Add to Cart</button></p>
</div>
<div class="col-sm-12 col-md-8">
<%= product.description %>
</div>
</div>
3.4 Rest
<?php
// init Slim
require 'Slim/Slim.php';
\Slim\Slim::registerAutoloader();
// init Magento
include_once '../app/Mage.php';
Mage::app();
$app = new \Slim\Slim();
$app->response->headers->set('Content-Type', 'application/json');
$app->get('/products', function() {
$your_category_id = 8; //2
$category = Mage::getModel('catalog/category')->load($your_category_id);
$collection = $category->getProductCollection();
$collection->addAttributeToSelect('name');
$collection->addAttributeToSelect('description');
$collection->addAttributeToSelect('price');
$collection->addAttributeToSelect('image');
$products;
$imgRoot = 'http://localhost/zcommerce/media/catalog/product';
foreach ($collection->getItems() as $product) {
$products[] = array( $product->getEntityId(), $product->getName(), $product->getPrice(), $imgRoot . $product->getImage(), $product->getDescription() );
}
echo(json_encode($products));
});
$app->get('/products/:id', function($id) {
$product = Mage::getModel('catalog/product')->load($id);
$imgRoot = 'http://localhost/zcommerce/media/catalog/product';
$productArray[] = array( $product->getEntityId(), $product->getName(), $product->getPrice(), $imgRoot . $product->getImage(), $product->getDescription() );
echo(json_encode($productArray));
});
$app->get('/products/category_id/:id', function($id) {
$your_category_id = $id;
$category = Mage::getModel('catalog/category')->load($your_category_id);
$collection = $category->getProductCollection();
$collection->addAttributeToSelect('name');
$collection->addAttributeToSelect('description');
$collection->addAttributeToSelect('price');
$collection->addAttributeToSelect('image');
$products;
$imgRoot = 'http://localhost/zcommerce/media/catalog/product';
foreach ($collection->getItems() as $product) {
$products[] = array( $product->getEntityId(), $product->getName(), $product->getPrice(), $imgRoot . $product->getImage(), $product->getDescription() );
}
//var_dump($products);
echo(json_encode($products));
});
$app->post('/products', function() {
});
$app->put('/products/:id', function($id) {
echo 'products';
});
$app->delete('/products/:id', function($id) {
echo 'products';
});
$app->get('/categories', function() {
$categories = Mage::getModel('catalog/category')->getCollection()
->addAttributeToSelect('id')
->addAttributeToSelect('name')
->addAttributeToSelect('url_key')
->setLoadProductCount(true)
->addAttributeToFilter('is_active',array('eq'=>true))
->addAttributeToFilter('level',array('eq'=>2))
->load();
$categoriesArray;
foreach ($categories as $category) {
$categoriesArray[] = array('id' => $category->getId(), 'name' => $category->getName());
}
echo(json_encode($categoriesArray));
});
$app->get('/popular', function() {
// $collection = Mage::getModel('reports/product_index_viewed')
$collection = Mage::getResourceModel('reports/product_collection')
->addAttributeToSelect('*')
->addViewsCount()
->setOrder('views_count', 'desc')
->setPageSize(5)
->setCurPage(1);
$collection->load();
$products;
$imgRoot = 'http://localhost/zcommerce/media/catalog/product';
foreach ($collection->getItems() as $product) {
$products[] = array( $product->getEntityId(), $product->getName(), $product->getPrice(), $imgRoot . $product->getImage(), $product->getDescription() );
}
echo(json_encode($products));
});
$app->run();
?>
4. Zaključak
Internet prodavnice su u poslednje vreme doživele veliki razvoj. Puno platformi je razvijeno i postale su bitan deo svakog poslovanja.
Razvojem Ajax tehnike, Javascript zamenjuje ostale jezike na klijentskoj strani. Programski jezike je bio zanemarljivo zastupljen sve do pojave „Node js“-a, gde Javascript dobija na popularnosti i danas je jedan od najkorišćenijih programskih jezika.
Usled velike potrebe za internet prodavnicama i velikom popularnosti javascripta doslo je do ideje pravljanje projekta, gde bi se na lak i brz način napravile potrebne komponente jedne prodavnice.
Literatura
1. http://html5boilerplate.com/ 2. http://getbootstrap.com/ 3. http://backbonejs.org/ 4. http://simplecartjs.com/ 5. http://www.slimframework.com/ 6. http://magento.com/ 7. http://www.magentocommerce.com/wiki/1_-
_installation_and_configuration/magento_installation_guide
top related