🏭Stage BUT2 : Algorun - Création carte produit

J’avais pour principale mission de faire une carte produit afin d’exposer les différents articles que pourrait potentiellement avoir un commerçant. Pour cette mission, je n’avais pas vraiment de cahier des charges, ni même de design exacte, j’ai seulement un brief.

Carte produit avec:

• une image

• un titre

• un prix

• une référence

• une description

carte d'exemple

Ces cartes sont des composant Nuxt (Vuejs) simple, dans lesquels on passe des options, par exemple pour la couleur ou pour la forme du texte, titre, etc...

<template> 
    <a-layout-content v-if="data">
        <div>
            <div class="card_wrapper">
                <div class="card" v-for="card in cardData">
                    <div>
                        <div class="img_wrapper">
                            <img src="/vin-rouge-de-france.jpg" alt="">
                        </div>

                        <h4>{{ card.title }}</h4>
                        
                        <div v-if="!card.isPromo">
                            <p>Prix: {{ card.price }}€</p>
                        </div>
                        <div v-else>
                            <p>Prix: <s>{{ card.price }}€</s> - {{ parseInt(card.price) * ((100 - parseInt(card.percent)) / 100) }}€</p>
                        </div>

                        <p>Quantité: {{ card.quantity }}</p>
                        
                        <p>Détails: {{ card.details }}</p>
                    </div>
                    <div class="btn">
                        <button @click="addToCard(card.reference)">Ajouter au panier</button>
                    </div>
                </div>
            </div>
        </div>
    </a-layout-content>
</template>

Le plus difficile à été de branché l'ancien projet avec mon nouveau composant, surtout car c'était ma première mission et donc j'étais encore dans la découverte de ce projet.