Ecommerce App باستعمال Vuejs
منذ 5 سنوات
imadbelasri
Vuejs
VS
فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو Ecommerce App المستخدم كيزيد des produits فل panier من بعد يمكنلو يحيدهم أو يزيد فل quantité يلا مكنتيش تبعتي الدروس لي قبل عاود شوفهم باش تفهم اساسيات vuejs.
نظرة سريعة بالفيديو
1- الملف script.js
أول حاجة غادي تزيد مشروع جديد فين ما بغيتي و سميه لي بغيتي من بعد زيد فيه 3 ملفات واحد index.html و style.css و script.js من بعد فتحو ف navigateur من بعد غادي تمشي للملف script.js كنديرinstantiation ديال ل objet من la classe Vue منبعد داخل l'objet كنعطي ل el لي هو element مول ل id app من بعد ف data كنديكلاري les variables لي عندي كاين جدول فيه les produits وآخر خاص بل panier وكاين total لي غادي يكون فيه المجموع ديال ل panier منبعد كاين l'objet methods عندي فيه les fonctions لي غادي نحتاج كاين addItem ولي ملي كنكليكي على bouton ajouter au panier كتزيد ل produit فالجدول cart لي كياخد الid وtitle ول price ديال ل produit ول quantité عاطيينها par défault 1 وقبل ما نزيد ل produit كنتحقق واش déjà كاين فل panier يلا كان فقط كنزيد quantité ديالو وكيتزاد الثمن ديالو ف total منبعد كاين inc لي كتزيد ل quantité ديال produit فل panier وكيتزاد الثمن ديالو ف total منبعد كاين dec لي كتدير العكس ويلا كانت ل quantité أصغر من صفر كتمسح ل produit من لpanier منبعد كاين l'objet filters لي فيه fonction currency لي فقط كت formater المبلغ كتحدد الأرقام لي مور الصفر ف2 وكتزيدلو dh فالتالي الكود ديال الملف هو :
var vm = new Vue({
el: "#app",
data: {
total: 0,
items: [
{ id: 0, title: 'SAMSUNG S8', itemPrice: 8000, link: "images/darija-coding-1.jpeg" },
{ id: 1, title: 'SAMSUNG S7', itemPrice: 5000, link: "images/darija-coding-2.jpeg" },
{ id: 3, title: 'IPHONE 8S', itemPrice: 8000, link: "images/darija-coding-3.jpeg" },
{ id: 4, title: 'TOSHIBA PC', itemPrice: 4000, link: "images/darija-coding-1.jpeg" },
{ id: 5, title: 'SAMSUNG S4', itemPrice: 2000, link: "images/darija-coding-2.jpeg" },
{ id: 6, title: 'HP PAVILLION', itemPrice: 3000, link: "images/darija-coding-3.jpeg" },
{ id: 7, title: 'HTC', itemPrice: 2500, link: "images/darija-coding-1.jpeg" },
{ id: 9, title: 'MOTOROLA', itemPrice: 3000, link: "images/darija-coding-2.jpeg" },
{ id: 10, title: 'MACBOOK', itemPrice: 8000, link: "images/darija-coding-3.jpeg" },
{ id: 11, title: 'SONY Z', itemPrice: 4000, link: "images/darija-coding-1.jpeg" },
],
cart: [],
loading: false
},
methods: {
addItem: function(index) {
var item = this.items[index];
this.total += item.itemPrice;
found = false;
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i].id === item.id) {
found = true;
this.cart[i].qty++;
break;
}
}
if (!found) {
this.cart.push({
id: item.id,
title: item.title,
qty: 1,
itemPrice: item.itemPrice
});
}
},
inc: function(item) {
item.qty++;
this.total += item.itemPrice;
},
dec: function(item) {
item.qty--;
this.total -= item.itemPrice;
if (item.qty <= 0) {
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i].id === item.id) {
this.cart.splice(i, 1);
break;
}
}
}
},
},
filters: {
currency: function(price) {
return (price.toFixed(2)).concat(" dh");
}
}
});
2- الملف index.html
فالملف index.php كن tester ب v-if يلا كانوا الجداول items و cart عامرين كنخدم ب v-for لي بحالها بحال foreach ف php باش كنعرض les produits و les produits لي فل panier ديالي فبلايصهم وكاين ل bouton لي كيمكن باش نزيد produit فل panier ولي ملي كنكليكي عليه كتنفد ل fonction addItem لي كتاخد ل index ديال ل produit وعندي فل panier تحت كل produit كاين جوج ديال les boutons عندي bouton plus ملي كنكليكي عليها كتنفد fonction inc لي كتزيد ل quantité ديال لproduit لي زاد المستخدم و bouton moins لي كتدير العكس ملي كنكليكي عليها كتنفد ل fonction dec وعندي total لي كنعرضو فقط يلا كانت ل panier فيها des produits ويلا كانت ل panier خاوية كنعرض رسالة كتقول بلي خاوية الكود ديال الملف هو :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Vuejs-Store</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Accueil <span class="sr-only"></span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-1">
<div class="products">
<div class="lead" v-if="loading">
chargement...
</div>
<div v-for="(item,index) in items">
<div class="product-image">
<img v-bind:src="item.link" alt="" class="thumbnail" height="200" width="200">
</div>
<div>
<h4 class="item-title">{{item.title}}</h4>
<div class="item-qty">{{item.itemPrice | currency}}</div>
<p><button v-on:click="addItem(index)" class="btn btn-primary">Ajouter au panier</button></p>
</div>
<hr>
</div>
</div>
</div>
<div class="col-md-4">
<div class="cart">
<h3 class="text-info">Panier</h3>
<hr>
<div v-if="cart.length">
<transition-group name="fade" tag="ul">
<li class="list-group-item" v-for="item in cart" v-bind:key="item.id">
<div class="text-info">{{item.title}}</div>
<div class="text-default item-qty">{{item.itemPrice | currency}} * {{item.qty}}</div>
<button class="btn btn-success" v-on:click="inc(item)">+</button>
<button class="btn btn-danger" v-on:click="dec(item)">-</button>
</li>
</transition-group>
<transition name="fade">
<div v-if="cart.length">
<div class="text-center text-warning">Total : {{total}} dh</div>
</div>
</transition>
</div>
<div v-else>
<p class="text-primary">Panier vide</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue"></script>
<script src="script.js"></script>
</body>
</html>
3- الملف style.css
فيه غادي يكونوا les styles ديالنا لي غادي نضيفوا بهم تغييرات على design ديال la page ديالنا الكود ديال الملف هو:
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.btn {
padding-left: 10px;
padding-right: 10px;
}
.container {
margin: 50px;
}
.item-qty {
margin-top: 5px;
margin-bottom: 5px;
}
[v-cloak] {
display: none !important;
}
.fade-enter-active {
transition: opacity 1.5s
}
.fade-enter,
.fade-leave-active {
opacity: 0
}