internet prodavnica u javascriptu · 1. koriš ćene tehnologije 1.1 bootstrap twitter bootstrap je...

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>







 <html class="no-js"> 

<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>

<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>



</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> 

<li><a href="#products">Products</a></li>

</ul>

</div>

</div>

</div>



<div class="jumbotron">


</div>

</div>

<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>


<p>

<img src="http://localhost/ecommerce/img/free_shipping_callout.jpg" class="img-responsive freeshipping">

</p>

<div id="content"></div>

</div>


<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>  <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>

</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({


console.log('Initializing Home View');

// this.template = _.template(directory.utils.templateLoader.get('home'));

// this.template = templates['Home'];

},

events:{

"click #showMeBtn":"showMeBtnClick"

},


$(this.el).html(this.template());

return this;

},

showMeBtnClick:function () {

app.headerView.search();

}

});

3.2.2.3 ProductListView.js

window.ProductListView = Backbone.View.extend({


console.log('Initializing Product List View');

},



return this;

}

});

3.2.2.4 ProductView.js

window.ProductView = Backbone.View.extend({


console.log('Initializing Product View');

},



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({


console.log('Main Products Fetch');

$('#content').html(new ProductListView({model: data}).render().el);

}

});

},

productDetails: function (id) {

var product = new Product({id: id});

product.fetch({


// 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({


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: "[email protected]",

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="thumbnail ">

<img src="<%= product.image %>" class="img-responsive">

</div>

</div>


<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>


<%= 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);


$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;




}

//var_dump($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;




}


});

$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

internet prodavnica u javascriptu · 1. koriš ćene tehnologije 1.1 bootstrap twitter bootstrap je...

Documents