L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Création d'un magasin d'alimentation avec Kendo UI et jQuery
Dans ce didacticiel, nous allons créer un magasin d'alimentation avec HTML, CSS, jQuery et Kendo UI avec des notifications lorsque des articles sont ajoutés au panier.
Un L'application de commerce électronique est une application où les gens peuvent passer des commandes d'articles à partir de leur navigateur, leur évitant ainsi de se rendre physiquement au magasin. De nombreux géants du commerce électronique sont apparus au fil du temps, vendant diverses marchandises. Des sociétés comme Alibaba et Amazon arrivent en tête du classement. Dans ce didacticiel, nous allons créer une version de base d'un magasin d'alimentation en ligne.
Prérequis
Pour suivre ce didacticiel, une compréhension de base de jQuery et JavaScript est requise. La connaissance HTML / CSS est également recommandée mais non obligatoire.
Pour créer l'application requise, voici quelques outils que nous utiliserons:
Initialisation de l'application
Caddies , le commerce électronique et les magasins sont des mots à la mode qui semblent difficiles à développer. Bien que le développement puisse être difficile, les versions de base peuvent être triviales à construire. Nous allons parcourir les étapes nécessaires pour en créer un avec HTML / CSS et jQuery.
Créez un dossier appelé foodstore et définissez cette structure de dossier à l'intérieur:
foodstore /
css /
store.css
js /
store.js
index.html
Affichage des articles de notre magasin
Ouvrez votre index.html et ajoutez-y les lignes de code suivantes:
Magasin d'alimentation
Articles dans votre panier
Dans notre fichier, nous faisons quelques choses. Décomposons-les un par un.
- Importez tous les actifs pertinents via via CDN – les actifs incluent jQuery, KendoUI, Bootstrap et Font Awesome, plus notre feuille de style personnalisée
- Nous définissons ensuite la zone dans laquelle les éléments seront affichés [19659032] L'en-tête contient les articles du panier actuels et un bouton pour vider le graphique
- Après cela, nous définissons le div pour contenir les éléments du graphique chaque fois que nous le visualisons
- Nous affichons ensuite les aliments statiques avec des informations pour simuler les données de notre magasin [19659032] Enfin, nous importons jQuery et notre fichier js personnalisé
Pour donner un sens à cette application, nous devons la visualiser. Mais avant de le faire, ajoutons-y du CSS pour lui donner une certaine structure.
Ouvrez votre fichier store.css et ajoutez-y les styles suivants:
// css / store.css
principale {
rembourrage: 10px 0;
largeur: 1024px;
marge: 0 auto;
}
# cart-container {
Flotter à droite;
largeur: 210px;
position: relative;
}
#nombre d'éléments {
position: absolue;
affichage: aucun;
en haut: -10px;
gauche: -10px;
largeur: 20 px;
hauteur: 20px;
rayon-frontière: 50%;
fond: rouge;
Couleur blanche;
alignement du texte: centre;
}
img {
largeur: 100%;
}
.article {
largeur: 31%;
flotteur: gauche;
marge: 1%;
}
.itemText p {
marge en bas: 20 pixels;
}
.price-container {
margin-top: 20 pixels;
}
i: hover {
curseur: pointeur;
}
#Panier {
en haut: 0;
gauche: 0;
hauteur: 100%;
largeur: 100%;
affichage: aucun;
position: absolue;
indice z: 9999;
fond: rgba (0, 0, 0, 0,6);
}
#cartItemsContainer {
position: relative;
largeur: 600px;
gauche: 50%;
haut: 150 px;
marge gauche: -300px;
rembourrage: 40px;
shadow-box: 0 0 10px noir;
fond: # e9e9e9;
débordement: auto;
}
#cartItemsContainer i {
position: absolue;
haut: 20px;
à droite: 20 pixels;
}
#cartItemsContainer .itemDetails {
débordement: auto;
largeur: 100%;
marge en bas: 40px;
}
#cartItemsContainer .itemImage {
flotteur: gauche;
largeur: 260 px;
rembourrage: 0 40px;
}
#cartItemsContainer .itemText {
Flotter à droite;
largeur: 260 px;
rembourrage: 0 40px;
}
#cartItemsContainer .itemText .price-container {
margin-top: 0;
}
.retirer l'objet {
marge gauche: 40px;
}
Maintenant, lorsque vous ouvrez votre index.html dans le navigateur, vous devriez voir ceci:
Ajout de fonctionnalités avec jQuery et Kendo UI
Maintenant, nous avons notre magasin affichant des produits. Ajoutons-y des fonctionnalités.
Ouvrez votre js et ajoutez les lignes de code suivantes:
// js / store.js
fonction init () {
var itemCount = 0;
var priceTotal = 0;
// Ajouter un article au panier
$ ('. add'). cliquez sur (fonction () {
itemCount ++;
$ ('# itemCount'). text (itemCount) .css ('display', 'block');
$ (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'). cliquez sur (fonction () {
$ ('# shoppingCart'). toggle ();
});
// Panier vide
$ ('# emptyCart'). click (function () {
itemCount = 0;
priceTotal = 0;
$ ('# itemCount'). css ('display', 'none');
$ ('# cartItems'). text ('');
$ ('# cartTotal'). text ("Total: €" + priceTotal);
});
// Supprimer 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 ('display', 'none');
}
});
}
$ (init);
Nous définissons ici 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 sur lequel vous cliquez.
Enfin, nous initialisons notre fichier en utilisant le $ de jQuery pour appeler la fonction init une fois celle-ci terminée. est chargé sur notre page d'index.
Ajout de notifications avec Kendo UI
Avant de terminer notre magasin, utilisons le composant Notification de Kendo UI pour afficher les alertes de nos utilisateurs chaque fois qu'un élément est ajouté au graphique.
Nous avons déjà importé l'interface utilisateur de Kendo dans notre projet. Il ne nous reste plus qu'à ajouter la fonction.
Ouvrez votre fichier index.html et ajoutez-y les lignes de code suivantes (lisez les commentaires pour savoir où insérer les extraits de code): [19659052] // ./index.html
// ajouter l'ID `showPopupNotification` à chaque lien Ajouter au panier
Ajouter au panier
// ajoute cette durée avant la fin de la balise principale pour afficher la notification
Maintenant, initialisons la fonction dans notre fichier js. Ouvrez le fichier store.js et ajoutez-y ce code:
// js / store.js
// ajoute la fonction init à l'intérieur
var popupNotification = $ ("# popupNotification"). kendoNotification (). data ("kendoNotification");
$ ("# showPopupNotification"). click (function () {
popupNotification.show ("élément ajouté");
});
Ici, nous définissons la notification pour afficher "article ajouté" chaque fois que vous ajoutez un article au panier.
Ouvrez maintenant votre fichier index.html dans le navigateur et vous verrez ceci: [19659005] 
Conclusion
Dans ce didacticiel, nous avons appris à utiliser jQuery, HTML et le composant de notification de l'interface utilisateur de Kendo pour créer un magasin d'alimentation de base. Les connaissances d'ici ne sont qu'une introduction à la création d'applications de magasin. Assurez-vous de poster des commentaires pour plus de clarté sur les parties que vous ne comprenez pas. Bon codage.
Source link