Fermer

mai 5, 2022

Construire une page de produit avec Kendo UI pour Vue

Construire une page de produit avec Kendo UI pour Vue


Les pages de produits sont des composants essentiels de toute plateforme de commerce électronique, quel que soit le type de produit. Dans cet article, nous allons créer une page de produit de commerce électronique en utilisant Vue.js et Kendo UI.

Vous avez probablement visité plusieurs sites de commerce électronique au fil des ans, vous savez donc à quel point les pages de produits sont importantes.

Une page de produit est une partie d’un site Web de commerce électronique qui contient des informations sur un produit particulier. Ces données peuvent inclure, entre autres, des descriptions, des images, des prix, des informations de paiement et des avis. S’assurer que la page produit est bien conçue est la clé d’un bon site de commerce électronique. Heureusement, il existe aujourd’hui de nombreux outils utiles pour créer une belle interface utilisateur de commerce électronique.

Choisir une bibliothèque d’interface utilisateur

Choisir une bibliothèque pour un projet peut être difficile ; cependant, la bibliothèque que vous utilisez sera déterminée par le type de projet que vous construisez.

L’interface utilisateur de Kendo semble être l’option idéale ici car elle est livrée avec des composants prédéfinis qui seront utiles dans le projet.

Aperçu rapide de l’interface utilisateur de Kendo

Kendo UI est un cadre d’interface utilisateur HTML5 permettant de créer des sites Web et des applications dynamiques et performants. Il est livré avec une pléthore de widgets d’interface utilisateur, ce qui facilite la création.

Kendo UI est autonome et peut être utilisé avec de nombreux frameworks : React, Vue, jQuery et Angular. Visiter le Documentation pour que l’interface utilisateur de Kendo commence.

Grâce à ses composants d’interface utilisateur prêts à l’emploi, il améliore l’évolutivité et la flexibilité. En ajoutant seulement quelques lignes de code à des composants avancés tels que des graphiques, des horaires et des calendriers, l’interface utilisateur de Kendo a été simplifiée au strict minimum, ce qui augmente l’envie de l’utiliser comme une bibliothèque incontournable. Dans cet article, nous allons créer une page de produit de commerce électronique en utilisant Interface utilisateur de Kendo pour Vue. Sans plus tarder, plongeons dedans.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin de :

  • Une compréhension de base de CSS
  • Connaissance de base de Vue.js
  • Connaissance de base de Node.js
  • Un éditeur de texte

Commencer

Commençons par installer Vue CLI avec la commande ci-dessous.

yarn global add @vue/cli

Ensuite, nous devons utiliser la commande Vue CLI suivante pour créer un projet. Entrez la commande ci-dessous dans votre terminal.

vue create product-page

La commande ci-dessus construira un modèle de démarrage et créera un dossier appelé product-page.

Kendo UI pour Vue doit être installé après avoir créé un modèle de départ car nous l’utiliserons dans le projet. Ouvrez votre terminal et entrez la commande suivante pour installer Kendo UI pour Vue.

yarn add @progress/kendo-theme-default @progress/kendo-vue-buttons @progress/kendo-vue-layout

Après l’installation, nous devons effectuer une chose cruciale pour que notre programme fonctionne correctement. Vous devez accéder à la base de votre application, qui est le fichier main.js de votre répertoire de projet, et ajouter le code suivant :

import Vue from 'vue'
import App from './App.vue'
import "@progress/kendo-theme-default/dist/all.css"

Vue.config.productionTip = false

new Vue({
 render: h => h(App),
}).$mount('#app')

Nous allons créer une page de produit simple qui sera informative pour tous les nouveaux utilisateurs qui visitent la page. L’image ci-dessous montre le design que nous allons créer dans ce projet.

Voir la page produit

Lorsque vous écrivez du code, il y a une chose que vous devez toujours garder à l’esprit : la façon dont vous structurez votre code. L’évolutivité d’un programme est facilitée par la structure du code.

Pour cet article, nous diviserons le développement de l’interface utilisateur en trois sections : la section d’en-tête, la section du corps et la section du panier, en commençant par la section d’en-tête.

Créez un dossier appelé mises en page à l’intérieur du dossier srcun sous-dossier appelé Entête, et un fichier appelé Header.vue dans ce sous-dossier. Dans le fichier, collez le code ci-dessous.

<template>
 <div>
  <header class="header">
   <div class="header__navbar">
    <div class="header__navbar--logo">
     <h3 class="header__navbar--logo-text-one">
      S<span class="header__navbar--logo-text-two">hop.</span>
     </h3>
    </div>
    <div class="header__navbar--nav-links">
     <a href="#">Electronics</a>
     <a href="#">Fashion</a>
     <a href="#">Tools</a>
     <a href="#">Books</a>
     <a href="#">Books</a>
    </div>


    <div class="header__navbar--search">
     <input type="search" placeholder="Search" />
    </div>
   </div>
  </header>
 </div>
</template>

<script>
export default {
 name: "Header",
};
</script>

<style scoped>
.header__navbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 2rem;
}

.header__navbar--logo h3 {
 font-weight: 700;
}

.header__navbar--logo-text-one {
 color: #673ab7;
}

.header__navbar--logo-text-two {
 color: #000;
}

.header__navbar--nav-links a {
 color: #939191;
 font-size: 1.2rem;
 font-weight: 400;
 text-decoration: none;
 margin: 0 2rem;
 width: 100%;
}

.header__navbar--search input {
 border-radius: 5px;
 border: 1px solid #939191;
 padding: 0.5rem 1rem;
 outline: none;
}

input::placeholder {
 font-family: "Montserrat", sans-serif;
 color: #939191;
 font-size: 1rem;
 font-weight: 400;
}
</style>

Tous les liens de navigation requis de l’application sont disposés à l’intérieur de ce composant d’en-tête. La balise d’en-tête HTML était destinée à servir de conteneur pour toutes les autres balises HTML incluses. Le logo, les liens de navigation et un champ de recherche sont tous inclus. Le style interne est utilisé dans ce cas, et il n’est appliqué qu’à ce composant.

Si vous avez observé que votre sortie n’apparaît pas, c’est parce que vous n’avez pas lié le composant enfant au composant parent. Créez un dossier appelé pages dans le dossier src, puis un fichier appelé Product.vue dans le dossier. Ce composant de produit accepte tous les autres composants qui lui seront fournis ultérieurement. Dans le fichier, collez le code ci-dessous.

<template>
 <div class="container">
  <Header />
 </div>
</template>

<script>
import Header from "../../components/layouts/header/Header.vue";

export default {
 name: "Product",
 components: {
  Header,
 },
};
</script>

<style scoped>
</style>

Le composant Header a été importé dans le composant Product à rendre, comme vous pouvez le voir. Connectez le composant Product au composant principal App.vue, la base de tous les autres composants. Collez le code ci-dessous dans le fichier App.vue.

<template>
 <div id="app">
  <Product />
 </div>
</template>

<script>
import Product from "./components/pages/Product.vue";

export default {
 name: "App",
 components: {
  Product,
 },
};
</script>

<style>
#app {
 background-color: #fafafa;
}
</style>

Le composant Product a été importé et enregistré pour être utilisé dans cette instance. Vous n’êtes plus obligé de faire quoi que ce soit ; tous les autres composants seront liés à Product.vue, le composant de base.

En utilisant la commande ci-dessous, vous pouvez maintenant exécuter votre application.

yarn serve

L’image ci-dessous montre nos progrès actuels.

Section d'en-tête Vue

La section du corps

La mise en page est divisée en deux parties en fonction de la conception (gauche et droite). Les images de gauche changent continuellement. Dans le fichier Product.vue, collez le code suivant.

<template>
 <div class="container">
  <Header />
  <main>
   <div class="main-container">
     <div v-for="(image, index) in singleImage" :key="index" class="main-container__box-one">
     <avatar :type="'image'" class="main-container__box-one-top">
      <img :src="image.avatar" :eager="true"/>
     </avatar>
     <div class="main-container__box-one-bottom">
      <div v-for="(subImage, index) in imageList" :key="index" class="main-container__box-one-bottom--innerbox">
       <avatar :type="'image'" class="main-container__box-one-top">
        <img :src="subImage.avatar" :eager="true"/>
       </avatar>
      </div>
     </div>
    </div>
   </div>
  </main>
 </div>
</template>

<script>
import Header from "../../components/layouts/header/Header.vue"
import { Avatar } from "@progress/kendo-vue-layout";
import ImageOne from "https://www.telerik.com/blogs/assets/chair1.jpg"
import ImageTwo from "../../assets/chair2.jpg"
import ImageThree from "https://www.telerik.com/blogs/assets/chair1.jpg"
import ImageFour from "../../assets/knife3.jpg"
const imageOne = ImageOne;
const imageTwo = ImageTwo;
const imageThree = ImageThree;
const imageFour = ImageFour;
 const singleImage = [
   {
   avatar: imageOne,
  },
 ]
 const imageList = [
 {
  avatar: imageTwo,
 },
 {
  avatar: imageThree,
 },
 {
  avatar: imageFour,
 },
];
export default {
 name: "Product",
 components: {
  Header,
   avatar: Avatar,
 },
 data: function(){
  return {
   singleImage: singleImage,
   imageList: imageList,
  }
 }
};
</script>

<style scoped>
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

.container {
 background: #fff;
 font-family: "Montserrat", sans-serif;
 max-width: 1200px;
 margin: 0 auto;
}

.main-container {
 display: flex;
 justify-content: space-between;
 width: 100%;
 padding: 0 2rem;
}

.main-container__box-one {
 width: 100%;
}

.main-container__box-one-top {
 background: #f1f0f0;
 border-radius: 10px;
 overflow: hidden;
 padding: 0.5rem;
}

.main-container__box-one-top img {
 width: 100%;
 height: 100%;
}

.main-container__box-one-bottom {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.main-container__box-one-bottom--innerbox img {
 width: 100%;
 height: 100%;
}

.main-container__box-one-bottom--innerbox:nth-of-type(2) {
 border: 2px solid #673ab7;
}

.main-container__box-one-bottom div {
 background: #f1f0f0;
 height: 130px;
 width: 150px;
 border-radius: 10px;
 margin: 2rem 0;
 cursor: pointer;
 overflow: hidden;
}
</style>

Les images sont extraites du dossier assets. Vous pouvez utiliser n’importe quel ensemble d’images, assurez-vous simplement qu’elles sont référencées à partir du dossier des actifs.

Le sélecteur nth-of-type(n) correspond à chaque élément de son parent, le nième enfant d’un type spécifique. Un nombre, un mot clé ou une formule peuvent tous être utilisés comme n. L’image ci-dessous montre nos progrès actuels.

L’avatar est un composant de mise en page importé directement de @progress/kendo-vue-layout. Il a des super pouvoirs pour afficher des images, des icônes ou des initiales représentant des personnes ou d’autres entités. L’image ci-dessous montre nos progrès actuels.

Vue header-plus-body-section-progress

La partie droite de la page fournit le nom du produit, sa description et des informations utiles pour l’utilisateur final. Dans le fichier Product.vue, mettez à jour le code avec ce qui suit :

<template>
 <div class="container">
  <Header />
  <main>
   <div class="main-container">
    <div v-for="(image, index) in singleImage" :key="index" class="main-container__box-one">
     <avatar :type="'image'" class="main-container__box-one-top">
      <img :src="image.avatar" :eager="true"/>
     </avatar>
     <div class="main-container__box-one-bottom">
      <div v-for="(subImage, index) in imageList" :key="index" class="main-container__box-one-bottom--innerbox">
       <avatar :type="'image'" class="main-container__box-one-top">
        <img :src="subImage.avatar" :eager="true"/>
       </avatar>
      </div>
     </div>
    </div>
    <div class="main-container__box-two">
     <div class="main-container__box-two--title">
      <h1>
       Swiss Made Vegetable <br />
       Cutting Knife
      </h1>
      <p class="author"><span class="author-span">BY</span> KC COMPANY</p>
     </div>
     <div class="sub-container__box-two">
      <div class="sub-container__box-two--price">
       <div class="dollars"><sup class="superscript">$</sup>25</div>
       <div class="percent">
        <h3>Save 12%</h3>
        <p>Inclusive of all Taxes</p>
       </div>
      </div>
      <p class="desc">
       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem sint
       fugit quis animi, neque quaerat eaque iure praesentium eum
       temporibus. Corrupti quod eos vitae voluptatem corporis
       repellendus natus commodi inventore.
      </p>
      <div>
       <k-button class="filled">Add to Cart</k-button>
      </div>
     </div>
     <Cart />
      
    </div>
   </div>
  </main>
 </div>
</template>
<script>
import { Button } from "@progress/kendo-vue-buttons";
import Header from "../../components/layouts/header/Header.vue"
import Cart from "../../components/cart/Cart.vue"
import { Avatar } from "@progress/kendo-vue-layout";
import ImageOne from "https://www.telerik.com/blogs/assets/chair1.jpg"
import ImageTwo from "../../assets/chair2.jpg"
import ImageThree from "https://www.telerik.com/blogs/assets/chair1.jpg"
import ImageFour from "../../assets/knife3.jpg"
const imageOne = ImageOne;
const imageTwo = ImageTwo;
const imageThree = ImageThree;
const imageFour = ImageFour;
 const singleImage = [
   {
   avatar: imageOne,
  },
 ]
 const imageList = [
 {
  avatar: imageTwo,
 },
 {
  avatar: imageThree,
 },
 {
  avatar: imageFour,
 },
];
export default {
 name: "Product",
 components: {
  Header,
  Cart,
  "k-button": Button,
   avatar: Avatar,
 },
 data: function(){
  return {
   singleImage: singleImage,
   imageList: imageList,
  }
 }
};
</script>
<style scoped>
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}
.container {
 background: #fff;
 font-family: "Montserrat", sans-serif;
 max-width: 1200px;
 margin: 0 auto;
}
.main-container {
 display: flex;
 justify-content: space-between;
 width: 100%;
 padding: 0 2rem;
}
.main-container__box-one {
 width: 100%;
 height: 100%;
}
.main-container__box-one-top {
 background: #f1f0f0;
 border-radius: 10px;
 overflow: hidden;
 padding: 0.5rem;
}
.main-container__box-one-top img {
 width: 100%;
 height: 100%;
}
.k-avatar-solid.k-avatar-primary {
 border-color: transparent;
 background-color: #f1f0f0;
 height: 100%;
 width: 100%;
}
.main-container__box-one-bottom {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin: 2rem 0;
}
.main-container__box-one-bottom--innerbox img {
 width: 100%;
 height: 100%;
}
.main-container__box-one-bottom--innerbox:nth-of-type(2) {
 border: 2px solid #673ab7;
}
.main-container__box-one-bottom div {
 background: #f1f0f0;
 height: 130px;
 width: 150px;
 border-radius: 10px;
 cursor: pointer;
 overflow: hidden;
}
.main-container__box-two {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 height: 100%;
 width: 100%;
 margin-left: 2rem;
}
.main-container__box-two--title h1 {
 font-size: 1.9rem;
}
.author {
 margin: 1rem 0;
 color: #673ab7;
 font-weight: 700;
 font-size: 0.8rem;
 letter-spacing: 2px;
}
.author-span {
 opacity: 0.7;
 color: rgb(184, 183, 183);
}
.sub-container__box-two--price {
 display: flex;
 justify-content: space-between;
 width: 45%;
 margin: 1rem 0;
}
.dollars {
 background-color: #e5e0ed;
 color: #673ab7;
 font-weight: 700;
 font-size: 1.5rem;
 padding: 0.5rem 0.8rem;
 border-radius: 7px;
 height: 100%;
}
.percent h3 {
 font-size: 1.1rem;
 color: #39d939;
 font-weight: 700;
}
.percent p {
 font-size: 0.9rem;
 color: #939191;
 font-weight: 400;
 margin: 0.5rem 0;
}
.desc {
 color: #939191;
 padding: 1rem 0;
 font-weight: 400;
 line-height: 2;
}
.filled {
 background-color: #673ab7;
 border-radius: 10px;
 color: #fff;
 font-weight: 600;
 padding: 0.9rem 1rem;
 cursor: pointer;
 outline: none;
 border: 1px solid #673ab7;
}
.filled:hover {
 background-color: #6430be;
}
</style>

Un parent div a été créé dans le code ci-dessus pour enfermer les parties recto-verso et les rendre côte à côte. Il utilise des règles de grille et de flex, mais dans ce cas, le modèle flex semble plus simple dans cette section.

Le bouton k est un composant de bouton importé directement de @progress/kendo-vue-buttons. C’est magique pour créer des boutons rapidement. L’image ci-dessous montre nos progrès actuels.

Vue body-section-description

La section panier

L’application de la page produit se termine avec cette section. Créez un dossier appelé Cart à l’intérieur du Composants dossier, puis un fichier appelé Cart.vue dans le dossier créé. Le composant Cart sera passé dans le composant Product pour faciliter le rendu. Collez le code ci-dessous dans le fichier créé.

<template>
  <div class="sub-container__box-two--bottom">
    <div>
      <h3 class="cart-count">
        Your Cart <span class="cart-count-span">1</span>
      </h3>
      <div class="sub-container__box-two--flex">
        <div v-for="(cardImage, index) in singleImage" :key="index" class="image-box">
          <avatar :type="'image'" class="main-container__box-one-top">
            <img :src="cardImage.avatar" :eager="true"/>
          </avatar>
          
        </div>
        <div>
          <h3>
            Swiss Made Vegetable <br />
            Cutting Knife
          </h3>
          <div class="quantity">
            <p>QTY : 1</p>
            |
            <div class="cart-dollars"><sup class="superscript">$</sup>25</div>
          </div>
        </div>
      </div>
      <div class="cart-group-buttons">
        <k-button class="ghost">View cart</k-button>
        <k-button class="filled">Checkout</k-button>
      </div>
    </div>
  </div>
</template>
<script>
import { Button } from "@progress/kendo-vue-buttons";
import { Avatar } from "@progress/kendo-vue-layout";
import ImageFive from "https://www.telerik.com/blogs/assets/chair1.jpg"
const imageFive = ImageFive;
  const singleImage = [
     {
      avatar: imageFive,
    },
  ]
export default {
   name: "Cart",
   components: {
    "k-button": Button,
     avatar: Avatar,
  },
    data: function(){
    return {
      singleImage: singleImage,
    }
  }
};
</script>
<style scoped>
.sub-container__box-two--bottom {
  background: #fff;
  box-shadow: -1px 1px 4px -2px rgb(0 0 0 / 65%);
  border-radius: 10px;
  padding: 1.5rem 2rem;
  margin: 2rem auto;
  min-width: 400px;
}
.sub-container__box-two--flex {
  display: flex;
  justify-content: space-between;
}
.cart-count {
  padding-bottom: 2rem;
}
.cart-count-span {
  background-color: #e5e0ed;
  color: #673ab7;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 7px;
  height: 100%;
  padding: 0.2rem 0.9rem;
  margin-left: 0.5rem;
}
.image-box {
  background-color: #f1f0f0;
  height: 80px;
  width: 80px;
  border-radius: 10px;
  overflow: hidden;
  padding: 0.5rem;
}
.image-box img {
  width: 100%;
  height: 100%;
}
.quantity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
}
.quantity p {
  font-size: 0.8rem;
  font-weight: 700;
  color: #939191;
}
.cart-dollars {
  font-size: 1.2rem;
  color: #673ab7;
  font-weight: 700;
}
.superscript {
  color: #939191;
  font-size: 0.9rem;
}
.cart-group-buttons {
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
}
.ghost {
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 10px;
  color: #939191;
  font-weight: 600;
  padding: 0.9rem 1rem;
  cursor: pointer;
}
.ghost:hover {
  background-color: rgb(209, 209, 209);
}
.filled {
  background-color: #673ab7;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  padding: 0.9rem 1rem;
  cursor: pointer;
  outline: none;
  border: 1px solid #673ab7;
}
.filled:hover {
  background-color: #6430be;
}

</style>

Le composant Cart agit comme un compteur pour tous les produits que l’utilisateur a ajoutés. Il assure le suivi des produits des utilisateurs et de leurs quantités.

Conclusion

À la fin de cette session, nous avons compris ce que sont les pages de produits, pourquoi elles sont essentielles dans les applications Web et comment ajouter une section de page de produits à une application Web. J’espère que vous avez trouvé ce guide aussi bénéfique que moi en l’écrivant.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link