Fermer

novembre 26, 2020

Création d'un marché de commerce électronique à l'aide de l'interface utilisateur Kendo et de jQuery


Dans ce didacticiel, nous allons créer un marché de commerce électronique avec HTML, CSS, jQuery et certains composants fournis par Kendo UI.

Une application de commerce électronique est une application où les gens peuvent passer des commandes d'articles à partir de leur navigateur, leur évitant ainsi le stress de aller physiquement au magasin. De nombreux géants du commerce électronique sont apparus au fil du temps en vendant diverses marchandises. Des entreprises comme Aliexpress et Amazon sont en tête des classements. Dans ce didacticiel, nous allons créer une version de base d'une application de commerce électronique.

Construire des composants à partir de zéro peut parfois être intimidant et prendre du temps. Pour gérer un aspect de notre application, nous utiliserons des composants Kendo UI, ce qui nous fera gagner beaucoup de temps.

Kendo UI est une bibliothèque JavaScript développée par l'équipe Telerik à Progress. Il vous permet de créer rapidement l'interface utilisateur d'une application Web. La bibliothèque principale de Kendo UI fournit un large ensemble de composants d'interface utilisateur faciles à utiliser tels que des grilles, des zones de texte, des zones de texte numériques, des graphiques, etc. Kendo UI fournit des composants pour les bibliothèques JavaScript populaires telles que jQuery, Angular, React et Vue. [19659005] Prérequis

Pour suivre ce didacticiel, une compréhension de base de jQuery et de JavaScript est requise. Des connaissances HTML / CSS sont également recommandées mais pas obligatoires.

Pour créer cette application, voici quelques outils que nous allons utiliser:

 Capture d'écran finale de l'application

Initialisation de l'application

Paniers, le commerce électronique et les magasins sont des mots à la mode qui font qu'une telle plate-forme semble difficile à développer. Bien que le développement d'une application de commerce électronique entièrement fonctionnelle / évolutive puisse être une tâche ardue, la mise en œuvre de versions de base peut être simple à créer. Nous allons passer par les étapes nécessaires pour en créer un avec HTML / CSS, jQuery et Kendo UI.

Créez un dossier appelé marketplace et définissez cette structure de dossier à l'intérieur:

 marketplace /
      css /
       styles.css
      js /
       items.js
       functions.js
      index.html

Pour notre application, nous utiliserons une approche très minimale. Nous:

  • Définissons un dossier css pour contenir notre feuille de style.
  • Définissons un js pour contenir nos fonctions jQuery et un fichier items.js contenant
  • Enfin, nous créons un fichier index.html à la base de notre dossier pour servir de point d'entrée dans notre application.

Avant toute chose, préparons notre ] index.html pour recevoir et afficher le contenu. Dans votre fichier d'index, entrez les lignes de code suivantes:


 < html > 
  < head > 
       < title >  Awesome Market  </  title > 
          < link   rel  =  " stylesheet "   href  =  " css / styles. css  " > 
          < link   rel  =  " styleheet "   href  =  " https: // stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css[19459026[/ ,19459004,.
          < link   rel  =  " styleheet "   href  =  " https: // use.fontawesome.com/releases/v5.7.2/css/all.css[19459026[/19659024]  intégrité  =  " sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKwhv7pOpQb] crossorigin  =  " anonyme "  > 
   </  tête > 
   < carrosserie > 
      < main > 
        < en-tête > 
           < nav   class  =  " navbar navbar-light bg-light justify-content-between "  > 
                 < a   class  =  " navbar-brand "  >  MarketPlace  </  a > 
                       < div   id  =  " chariot-conteneur "  > 
                           < div   id  =  " cart "  > 
                             < i   class  =  " fa fa-shopping-cart openCloseCart "    style  = "[19659094] marge droite :   10  px ;   "  aria-hidden  = "  true  " >  chariot  </  i > 
                
                             < i   class  =  " fas fa-trash-alt "   id  =  " emptyCart  " >  Vide cart  </  i >   </  div > 
                         < span   id  =  " itemCount "  >   </  span  > 
                 </  div > 
               </  nav > 
            </  en-tête > 
                < div   id  =  " shoppingCart "  > 
                      < div   id  =  " cartItemsContainer "  > 
                         < h2 >  Articles dans votre panier  </  h2 > 
                         < i   class  =  " fa fa-times-circle-o fa-3x openCloseCart "   aria-hidden [19659029] =  " true "  >   </  i > 
                         < div   id  =  " cartItems "  >   </  div  > 
                         < span   id  =  " cartTotal "  >   </  span  > 
                      </  div > 
                   </  div > 
              < div   id  =  " produits "   class  =  " row  " >   </  div > 
       </  main > 
          < script   src  =  " https://code.jquery.com/jquery-3.3.1.js " 
           intégrité  =  " sha256-2Kok7MbOyxpgUVvAk / HJ2jigOSYS2auK4Pfzbm7uH60 = " 
           crossorigin  =  " anonyme "  >  
            </  script > 
           < script   src  =  " js / functions.js "  >    </  script > 
   </  corps > 
 </  html > 

Dans notre fichier, nous faisons deux ou trois choses, découpons-les une par une.

  • Importez tous les éléments pertinents via CDN. Les actifs incluent jQuery, Bootstrap et fontawesome, ainsi que notre feuille de style personnalisée
  • Nous définissons ensuite la zone où les éléments seront affichés:
    • L'en-tête contient les éléments actuels du panier et un bouton pour vider le graphique
    • Après cela, nous définir le div pour contenir les éléments du graphique chaque fois que nous le visualisons
    • Le div est vide et sera automatiquement injecté avec les produits dynamiquement à partir de nos fonctions jQuery que nous écrirons dans la section suivante
  • Enfin, nous importons jQuery et notre fichier js personnalisé

Jusqu'à présent, nous avons défini une feuille de style et un fichier de fonctions avec un contenu vide. Allons-y et remplissons-les.

Ouvrez votre fichier CSS, ajoutez-y le fichier et ajoutez-y le code suivant:

 // css / styles  .css 
main  {
   padding :   10  px  0 ; 
   width :   1024  px ; [19659221] marge :   0  auto ; 
} 
 # cart-container   {
   float :  right ; 
   largeur :   210  px ; 
   position :  relative ; 
} 
 #itemCount   {
   position :  absolu ; 
   affichage :  aucun ; 
   top :  -  10  px ; 
   gauche :  -  10  px ; 
   width :   20  px ; 
   hauteur :   20  px ; 
   border-radius :   50% ; 
   background [19659019]:  rouge ; [19659221] couleur :  blanc ; 
   text-align :  center ; 
} 
 nav  {
   margin- bas: 30px;

nav ul  {
   list-style :  none ; 
   overflow :  auto ; 
   width : [19659096] 100% ; 
   background :   # 444444 ; 
} 
 nav ul li  {
   float :  left ; 
   padding :   5  px  20  px ; 
} 
 nav ul li a  {
   color :   #fff ; 
   text-decoration :  none ; 
} 
 nav ul li : hover   {
   couleur :   # 444444 ; 
   background :   #cccccc ; 
} 
 nav ul li : hover  a  {
   color :   # 444444 ; 
} 
 img  {
   width : [19659096] 100% ; 
} 
  .item   {
   width :   31% ; 
   float :  left ; 
   margin  :   1% ; 
} 
  .itemText  p  {
   margin-bottom :   20  px ; 
} 
  .price-container   {
   margin-top :   20  px ; 
} [19659269] i : survol   {
   curseur :  pointeur ; 
} 
 #shoppingCart   {
   haut :   0 ; 
   gauche :   0 ; 
   hauteur :   100% ; 
   largeur :   100% ; 
   affichage :  aucun ; 
   position :  absolu ; 
   z- index :   9999 ; 
   backgrou nd :   rgba  ( 0  0  0  0.6 ) ; [19659231]} 
 #cartItemsContainer   {
   position :  relative ; 
   width :   600  px  ; 
   gauche :   50% ; 
   haut :   150  px ; 
   marge gauche :  -  300  px ; 
   padding :   40  px ; 
   box-shadow :   0 [19659096] 0   10  px noir ; 
   fond :   # e9e9e9 ; 
   débordement :  auto ; [19659231]} 
 #cartItemsContainer  i  {
   position :  absolu ; 
   top :   20  px  ; 
   droite : [19659096] 20  px ; 
} 
 #cartItemsContainer   .itemDetails   {
   overflow :  auto ; [19659221] largeur :   100% ; 
   margin-bottom :   40  px ; 
} 
 #emptyCart  [19659019] {
   affichage :  aucun ; 
} 
 #cartItemsContainer   .itemImage   {
   float :  gauche ; 
   largeur :   260  px ; 
   rembourrage :   0   40  px ; 
} 
 #cartItemsContainer   .itemText   {
   float :  right ; 
   width :   260  px ; 
   padding :   0   40  px ; 
} 
 #cartItemsContainer   .itemText [19659435] .price-container   {
  margin-top :   0 ; 
} 
  .removeItem   { 
   marge gauche :   40  px ; 
} 
  .col-sm-4   {
   marge- bas :   15  px ; 
} 

Remplissons maintenant notre fichier items.js avec les produits. Ajoutez-y le code suivant:

 // js / items.js
[
  {
    "name": "Berries",
    "price": 23.54,
    "image": "https://images.unsplash.com/photo-1488900128323-21503983a07e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
    "description": "Sweet popsicles to help with the heat"
  },
  {
    "name": "Orange",
    "price": 10.33,
    "image": "https://images.unsplash.com/photo-1504185945330-7a3ca1380535?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=340&w=340&q=80",
    "description": "Mouth watering burger. Who cares if it's healthy"
  },
  {
    "name": "Lemons",
    "price": 12.13,
    "image": "https://images.unsplash.com/photo-1504382262782-5b4ece78642b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
    "description": "Sumptuous egg sandwich"
  },
  {
    "name": "Bananas",
    "price": 10.33,
    "image": "https://images.unsplash.com/photo-1478369402113-1fd53f17e8b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
    "description": "A great tower of pancakes. Dig in!"
  },
  {
    "name": "Apples",
    "price": 10.33,
    "image": "https://images.unsplash.com/photo-1505253304499-671c55fb57fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
    "description": "Great looking Waffle to start the day"
  },
  {
    "name": "Sharifa",
    "price": 10.33,
    "image": "https://images.unsplash.com/photo-1470119693884-47d3a1d1f180?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80",
    "description": "What's greater than 5 minutes with grilled corn"
  }
]

N / B: Toutes les images proviennent de unsplash .

Ouvrez maintenant votre fichier functions.js et ajoutez-y le code suivant:

 // js /functions.js

function init () {

 // lire notre gamme de produits et l'afficher
  $ .getJSON ("js / items.js", fonction (json) {
     
       json.forEach (fonction (élément) {
           $ ("# produits"). append ('
' + «» + «
» + '
' + nom.élément + '
' + '

' + "Prix: $" + prix.article + '

' + '

' + item.description + '

' + ' Ajouter au panier ' + «
» + «
»); }); }); } $ (init);

En utilisant jQuery, nous:

  • Lisez le contenu de notre fichier items.js
  • Construisez notre élément DOM de produit
  • Ajoutez et affichez-le sur notre index.html .

Maintenant, lorsque vous essayez de charger votre index.html vous verrez un écran vide. C'est parce que votre navigateur ne peut pas lire le fichier JSON en raison de quelque chose appelé Origine du contrôle d'accès . Pour résoudre ce problème, nous devons utiliser un serveur http pour charger nos fichiers.

Première installation http-server en tapant ce qui suit dans votre terminal:

 npm [19659386] installer  -g serveur http

En installant cela, vous rendez le serveur http disponible pour être utilisé n'importe où dans votre système. Maintenant, dans votre terminal, tapez ce qui suit pour servir votre fichier:

 http-server -c-1

Maintenant, lorsque vous visitez http: // localhost: 8080 dans votre navigateur, vous verrez ceci:

 http://www.telerik.com/ [19659003] Cela signifie que nous avons pu lire et afficher nos produits à côté de leurs informations. Ensuite, nous devons écrire des fonctions pour gérer l'ajout et la suppression d'éléments du panier.

Ouvrez votre functions.js et ajoutez-y le code suivant:

 // js / functions.js

function init () {
  var itemCount = 0;
  var priceTotal = 0;
     // l'autre code reste le même

    // Ajouter un article au panier
  $ ('. add'). click (function () {
    itemCount ++;

    $ ('# itemCount'). text (itemCount) .css ('afficher', 'bloquer');
    $ (this) .siblings (). clone (). appendTo ('# cartItems'). append ('');

    // Calculer le prix total
    var price = parseInt ($ (this) .siblings (). find ('. price'). text ());
    priceTotal + = prix;
    $ ('# cartTotal'). text ("Total: $" + priceTotal);
  });

  // Masquer et afficher les articles du panier
  $ ('. openCloseCart'). click (function () {
    $ ('# shoppingCart'). toggle ();
  });

  // Panier vide
  $ ('# emptyCart'). click (function () {
    itemCount = 0;
    priceTotal = 0;
    $ ('# itemCount'). css ('affichage', 'aucun');
    $ ('# cartItems'). text ("http://www.telerik.com/");
    $ ('# cartTotal'). text ("Total: $" + priceTotal);
  });

  // Retirer l'article du panier
  $ ('# shoppingCart'). on ('click', '.removeItem', function () {
    $ (this) .parent (). remove ();
    nombre d'éléments --;
    $ ('# itemCount'). text (itemCount);

    // Supprimer le coût de l'article supprimé du prix total
    var price = parseInt ($ (this) .siblings (). find ('. price'). text ());
    priceTotal - = prix;
    $ ('# cartTotal'). text ("Total: €" + priceTotal);

    if (itemCount == 0) {
      $ ('# itemCount'). css ('affichage', 'aucun');
    }
  });
}
$ (init);

Ici, nous définissons les fonctions dont nous aurons besoin dans notre application.

  • En utilisant la méthode Click nous ciblons des éléments spécifiques et mettons à jour leur état en fonction du bouton cliqué
  • L'état est modifié lorsque le l'utilisateur ajoute, supprime, vide ou affiche le panier actuel
  • Enfin, nous initialisons notre fichier en utilisant jQuery $ pour invoquer la fonction init une fois qu'elle est chargée sur notre page d'index

À ce stade, nous avons une version fonctionnelle d'une application de commerce électronique. Ajoutons une autre fonctionnalité avec l'interface utilisateur de Kendo.

Ajout d'un bouton de panier vide avec l'interface utilisateur Kendo

Vous avez peut-être remarqué que le panier vide ne s'affiche pas lorsque nous chargeons notre page. C'est parce que nous l'avons initialement configuré pour ne pas s'afficher du tout à partir de notre CSS. Dans cette section, nous allons:

  • Utiliser le composant bouton de Kendo UI pour afficher et styliser le bouton
  • Afficher le bouton seulement après qu'au moins un élément se trouve dans le panier (impossible de vider ce qui est déjà vide, n'est-ce pas?)

Nous devons importer l'interface utilisateur de Kendo dans notre projet avant de pouvoir accéder au composant bouton.

Ouvrez votre fichier index.html et ajoutez-y les lignes de code suivantes (lisez les commentaires pour savoir où insérer les extraits):

 // ./index.html

  
        // importer kendoui via le cdn dans votre en-tête
          
          
          
            

Dans ce fichier, nous importons simplement l'interface utilisateur de Kendo via le CDN.

Initialisons maintenant la fonction dans notre fichier js. Ouvrez le fichier functions.js et ajoutez-y ce code:

 // js / functions.js

// ajouter à l'intérieur de la fonction init
 $ ("# emptyCart"). kendoButton ();

 // insérer le code en gras dans cette fonction
 $ (document) .on ("click", ".add", function () {
    // nouveau code
   $ ('# emptyCart'). css ('display', 'inline');
 // l'autre code reste le même

Ici, nous faisons deux choses:

  • Initialisez le bouton
  • Utilisez jQuery pour afficher le bouton

Redémarrez maintenant votre serveur et visitez http: // localhost: 8080 dans le navigateur . Une fois que vous avez ajouté un article au panier, vous verrez l'affichage du bouton.

 Capture d'écran finale de l'application

Conclusion

Dans ce didacticiel, nous avons appris à utiliser le composant bouton de jQuery, HTML et Kendo UI pour créer un marché de commerce électronique de base. Les connaissances d'ici ne sont qu'une introduction à la création d'applications de magasin. Assurez-vous de publier des commentaires pour plus de clarté sur les parties que vous ne comprenez pas. Bon codage.





Source link