Vuejs 3 Darija Shopping Cart الجزء الأول
فهاد ل projet الجديد ب Vuejs 3 Darija غادي نقادوا Shopping Cart لي هي ل panier أو سلة المنتجات.
فالمستخدم عندو مجموعة من المنتجات ممكن يزيدها فل panier من بعد ممكن يطلع عليهم يدير تعديل على الكمية المطلوبة أو يحذف المنتجات.
نظرة سريعة بالفيديو
1- إضافة ل packages
أول حاجة زيد projet جديد غادي نخدموا ب vite لي هي واحد tool لي كتخليك تزيد les projets ديالك بطريقة سريعة وسهلة.
باش تزيد ل projet دير هاد ل commande :
npm create vite@latest my-vue-app -- --template vue
بدل my-vue-app بالإسم لي بغيتي.
منبعد ممكن ت modifier ل fichier package.json باش تزيد نفس les packages لي عندي ودير :
npm install
الكود ديال الملف هو:
//
{
"name": "vuejs-shopping-cart",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"bootstrap": "^5.2.0-beta1",
"bootstrap-icons": "^1.8.2",
"pinia": "^2.0.14",
"sweetalert2": "^11.4.14",
"vue": "^3.2.25",
"vue-router": "^4.0.15"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.3",
"vite": "^2.9.9"
}
}
2- إضافة Bootstrap 5 & Bootstrap 5 Icons & Vue Router & Pinia
فل fichier main.js غادي نزيد Bootstrap 5 و Bootstrap 5 Icons و Vue Router و Pinia.
الكود ديال الملف بعد التعديل :
//
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap-icons/font/bootstrap-icons.css'
import 'sweetalert2/dist/sweetalert2.min.css';
createApp(App)
.use(createPinia())
.use(router)
.mount('#app')
3- إضافة Store ب Pinia
من بعد ف src زيد dossier stores فيه fichier index.js لي غادي يكون فيه store ديالنا لي قاديناه ب Pinia.
الكود ديال الملف هو :
//
import { defineStore } from 'pinia'
import Swal from 'sweetalert2'
export const useShoppingStore = defineStore('shopping', {
state: () => {
return {
products: [
{
id: 1,
name: 'Iphone 12',
price: 700,
image: 'https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202__480.jpg'
},
{
id: 2,
name: 'Samsung s10',
price: 400,
image: 'https://cdn.pixabay.com/photo/2016/03/27/19/43/samsung-1283938__340.jpg'
},
{
id: 3,
name: 'Samsung Tv',
price: 1200,
image: 'https://cdn.pixabay.com/photo/2019/06/30/18/19/tv-4308538__480.jpg'
},
{
id: 4,
name: 'Huwawei Mate',
price: 900,
image: 'https://cdn.pixabay.com/photo/2017/08/11/14/19/honor-2631271__340.jpg'
}
],
cartItems : []
}
},
getters: {
countCartItems(){
return this.cartItems.length;
},
getCartItems(){
return this.cartItems;
}
},
actions: {
addToCart(item) {
let index = this.cartItems.findIndex(product => product.id === item.id);
if(index !== -1) {
this.products[index].quantity += 1;
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Your item has been updated',
showConfirmButton: false,
timer: 1500
});
}else {
item.quantity = 1;
this.cartItems.push(item);
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Your item has been saved',
showConfirmButton: false,
timer: 1500
});
}
},
incrementQ(item) {
let index = this.cartItems.findIndex(product => product.id === item.id);
if(index !== -1) {
this.cartItems[index].quantity += 1;
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Your item has been updated',
showConfirmButton: false,
timer: 1500
});
}
},
decrementQ(item) {
let index = this.cartItems.findIndex(product => product.id === item.id);
if(index !== -1) {
this.cartItems[index].quantity -= 1;
if(this.cartItems[index].quantity === 0){
this.cartItems = this.cartItems.filter(product => product.id !== item.id);
}
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Your item has been updated',
showConfirmButton: false,
timer: 1500
});
}
},
removeFromCart(item) {
this.cartItems = this.cartItems.filter(product => product.id !== item.id);
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Your item has been removed',
showConfirmButton: false,
timer: 1500
});
}
},
})
4- إضافة Router
دائما ف src زيد dossier router فيه fichier index.js لي غادي يكونوا فيه les routes ديالنا.
الكود ديال الملف هو :
//
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../components/Home.vue'
import Cart from '../components/Cart.vue'
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/cart',
name: 'cart',
component: Cart
},
]
});
export default router
5- إضافة Header Component
دائما ف src زيد dossier components فيه زيد fichier سميه Header.vue ولي فيه هاد الكود :
//
<template>
<nav class="navbar navbar-expand-lg rounded navbar-dark bg-dark">
<div class="container-fluid">
<router-link class="navbar-brand" to="/">Vuejs3 Shopping Cart</router-link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<router-link class="nav-link" aria-current="page" to="/">Home</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/cart"><i class="bi bi-cart-check"></i> ({{data.countCartItems}})</router-link>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script setup>
import { useShoppingStore } from '../stores'
//get store
const data = useShoppingStore();
</script>
<style>
</style>