Mini projet : Site e-commerce

Objectif

L'objectif de ces séances est de mettre en place un exemple de site e-commerce en utilisant VueJS et une API REST. Nous allons créer un site e-commerce simple avec des produits, des catégories, un panier et un formulaire de commande.

Mise en place du projet

API REST

Nous allons utiliser une API REST pour récupérer les données des produits et des catégories. Vous pouvez utiliser l'API de démonstration ici : https://dummyjson.com/docs/products

VueJS

Nous allons créer un site e-commerce simple avec les fonctionnalités suivantes :

• Afficher la liste des produits (avec la pagination, l'ensemble des éléments correctements présentés et une image affichée)

• Afficher la liste des catégories (depuis l'API)

• Afficher les détails d'un produit dans une page dédiée. Pouvoir afficher les images dans une modale.

• Ajouter un produit au panier avec une confirmation d'ajout et l'état du panier visible sur toutes les pages

• Afficher le panier

• Le panier doit être visible sur toutes les pages (avec le nombre de produits et le montant total

• Supprimer un produit du panier (avec une modal de confirmation) ou modifier la quantité (supprier si quantité = 0). Le montant du panier est mis à jour en temps réel.

• Sauvegarder le panier dans le localStorage

• Formulaire de commande avec validation des champs

Mise en page

Vous pouvez utiliser un framework CSS comme Bootstrap ou TailwindCSS pour la mise en page. Vous pouvez également regarder du côté de Vuetify pour un framework CSS compatible avec VueJS ou d'autres ici : https://ui-libs.vercel.app/).

Les stores (Pinia)...

Deux références : https://blog.zenika.com/2023/07/13/pinia-%F0%9F%8D%8D-lavenir-du-state-management-vue-js-en-10-minutes/ ou https://runthatline.com/how-to-use-local-storage-pinia/

Et la documentation officielle : https://pinia.vuejs.org/

Le concept

Pinia est un store de gestion d'état pour Vue 3. Il est inspiré de Vuex mais avec une approche plus simple et plus performante. Il est basé sur le concept de stores qui sont des objets JavaScript qui contiennent l'état de l'application et des méthodes pour le modifier. Les stores sont réactifs, ce qui signifie qu'ils mettent à jour automatiquement les composants qui les utilisent lorsqu'ils sont modifiés.

Installation

Pour installer Pinia, vous devez d'abord ajouter le package à votre projet :

npm install pinia

Ensuite, vous devez l'ajouter à votre application Vue :

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
//... et votre code en plus...
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

Création d'un store

Un "Store" est un fichier JavaScript qui contient les données et les méthodes pour les manipuler. Il est possible d'écrire un store en "option API" ou en "composition API".

Comme pour VueJs il est conseillé d'utiliser la composition API (ou setup API dans la documentation de Pinia) pour créer un store avec Pinia.

Pour créer un store avec Pinia, vous devez d'abord importer la fonction defineStore :

import { defineStore } from 'pinia'

// You can name the return value of `defineStore()` anything you want,
// but it's best to use the name of the store and surround it with `use`
// and `Store` (e.g. `useUserStore`, `useCartStore`, `useProductStore`)
// the first argument is a unique id of the store across your application
export const useAlertsStore = defineStore('alerts', {
  // other options...
})

ou useAlertsStore est le nom du store et 'alerts' est l'id du store.

Ci-dessous un exemple de store pour un compteur :

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Eduardo')
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, name, doubleCount, increment }
})

Les lignes suivantes définissent les propriétés du store :

• count : un compteur qui est initialisé à 0

• name : un nom qui est initialisé à 'Eduardo'

• doubleCount : une propriété calculée qui retourne le double de count

• increment : une méthode qui incrémente count de 1

• return : retourne les propriétés et les méthodes que vous souhaitez rendre accessibles aux composants qui utilisent le store

Utilisation d'un store

Pour utiliser un store dans un composant, vous devez d'abord importer la fonction useStore :

<script setup>
import { useCounterStore } from '@/stores/counter'

// access the `store` variable anywhere in the component ✨
const store = useCounterStore()
</script>

Ensuite, vous pouvez accéder aux propriétés et aux méthodes du store en utilisant la variable store :

<template>
  <div>
    <p>Count: {{ store.count }}</p>
    <p>Name: {{ store.name }}</p>
    <p>Double Count: {{ store.doubleCount }}</p>
    <button @click="store.increment">Increment</button>
  </div>
</template>