Vuejs 3 Darija Shopping Cart الجزء الثاني

منذ 4 أشهر imadbelasri Vuejs
VS

فهاد الجزء الثاني من Vuejs 3 Darija Shopping Cart غادي نكملوا ل projet ديالنا ونزيدو ل panier وغادي نشوفوا كيفاش نزيد المنتجات فيها نعدل الكمية لي بغيت أو نحذف منتج معين.


نظرة سريعة بالفيديو


1- إضافة ProductList Component

دائما ف dossier components زيد fichier سميه ProductList.vue ولي فيه هاد الكود :

                                                    
                                                        //
<template>
    <div className='row my-4'>
        <ProductListItem v-for="product in data.products" 
            :key="product.id" :product="product" />
    </div>
</template>

<script setup>
import ProductListItem from './ProductListItem.vue'
import { useShoppingStore } from '../stores'

//get products from store
const data = useShoppingStore();
</script>

<style>
</style>
                                                    
                                                

2- إضافة ProductListItem Component

دائما ف dossier components زيد fichier سميه ProductListItem.vue ولي فيه هاد الكود :

                                                        
                                                            //
<template>
    <div class="col-md-4 mb-2">
        <div class="card" style="width: '18rem'">
            <img :src="product.image" class="card-img-top" alt="..." />
            <div class="card-body">
                <h5 class="card-title">{{product.name}}</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <button 
                    @click="data.addToCart(product)"
                    class="btn btn-primary">
                    <i class="bi bi-cart-check"></i> add to cart
                </button>
            </div>
        </div>
    </div>  
</template>

<script setup>
    import { useShoppingStore } from '../stores'
    //get props
    const props = defineProps({
        product: {
            type: Object,
            required: true
        }
    });
    //get store
    const data = useShoppingStore();
</script>

<style>
</style>
                                                        
                                                    

3- إضافة Home Component

دائما ف dossier components زيد fichier سميه Home.vue ولي فيه هاد الكود :

                                                        
                                                            //
<template>
  <ProductList />  
</template>

<script setup>
import ProductList from "./ProductList.vue"; 
</script>

<style>
</style>
                                                        
                                                    

4- إضافة Cart Component

دائما ف dossier components زيد fichier سميه Cart.vue ولي فيه هاد الكود :

                                                        
                                                            //
<template>
    <div class="row my-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Image</th>
                                <th>Name</th>
                                <th>Quantity</th>
                                <th>Price</th>
                                <th>Subtotal</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in data.getCartItems" :key="item.id">
                                <td>{{item.id}}</td>
                                <td>
                                    <img :src="item.image" 
                                    class="fluid rounded"
                                    width="60"
                                    height="60"    
                                    :alt="item.name" />
                                </td>
                                <td>
                                    {{item.name}}
                                </td>
                                <td>
                                    <i 
                                        @click="data.incrementQ(item)"
                                        class="bi bi-caret-up"></i>
                                    <span class="mx-2">
                                        {{item.quantity}}
                                    </span>
                                    <i 
                                        @click="data.decrementQ(item)"
                                        class="bi bi-caret-down"></i>
                                </td>
                                <td>
                                    ${{item.price}}
                                </td>
                                <td>
                                    ${{item.price * item.quantity}} 
                                </td>
                                <td>
                                    <i 
                                        @click="data.removeFromCart(item)"
                                        class="bi bi-cart-x text-danger"></i>
                                </td>
                            </tr>
                            <tr>
                                <th colSpan="3" class="text-center">
                                    Total
                                </th>
                                <td colSpan="3" class="text-center">
                                    <span class="badge bg-danger rounded-pill">
                                        ${{ data.cartItems.reduce((acc,item) => acc += item.price * item.quantity,0) }}
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { useShoppingStore } from "../stores"
    //get store
    const data = useShoppingStore();
</script>

<style>
    i{
        cursor: pointer;
    }
</style>
                                                        
                                                    

5- تعديل ل App Component

منبعد غادي نديرو تعديل على ل App component ودير npm run dev باش ت démarrer serveur.

الكود ديال الملف هو :

                                                        
                                                            //
<template>
  <div class="container">
    <Header />
    <router-view></router-view>
  </div>
</template>

<script setup>
  import Header from './components/Header.vue'
</script>


<style>
</style>
                                                        
                                                    

دروس ذات صلة

VS

آلة حاسبة بإ ستعمال Vuejs

فهاد الدرس الأول من سلسلة vuejs غادي نشوفو كيفاش نقادو آلة حاسبة بإستعمال vuejs فالناس لي مكتعرفش شن...


VS

كيفاش نصاوب Note App ب Vuejs

فهاد الدرس الثاني من سلسلة vuejs غادي نشوفو كيفاش نقادو Note App بإستعمال vuejs فحنا فهاد الدرس ال...


VS

Application de gestion de dépenses باستعمال Vuejs

فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو une simple application كتدير la gestion de d...


VS

Ecommerce App باستعمال Vuejs

فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو Ecommerce App المستخدم كيزيد des produits فل...


VS

login système ب laravel & vue js الجزء الأول

فهاد الدرس الجديد غادي نشوفوا كيفاش نقادو login système ب laravel & vue js فل projet بسيط غادي يكون...


VS

LOGIN SYSTÈME ب LARAVEL & VUE JS الجزء الثاني

فهاد الجزء الثاني من LOGIN SYSTÈME ب LARAVEL & VUE JS غادي نشوفوا كيفاش نزيدو les components vue js...


VS

login système + Vote systéme ب laravel & vue js الجزء الثالت

فهاد الجزء الثالت من login système + vote systéme ب laravel & vue js كيف قلنا فل ل video...


VS

LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS الجزء الرابع

فهاد الجزء الرابع من LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS غادي نعرضوا les posts ديال...


VS

CRUD application ب php & vuejs الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادوا CRUD application ب php و vue js ولي سبق ودرناها...


VS

CRUD application ب php & vuejs الجزء الثاني

فهاد الجزء الثاني من CRUD application ب php و vue js غادي نكملوا ل projet ديالنا وندوزو للجزء الخاص...