alpine html bootstrap
Initial Release
Pour la boutique en ligne axée sur la mode, Alpine est un modèle de commerce électronique réactif Bootstrap 5 avec un effet "Ken Burns" sur le diaporama de page d'accueil, des bannières inclinées et une bannière de hotspot d'image personnalisée avec des cartes de produits popout. Les grandes images de produits sur les pages de catégorie vous donnent amplement de place pour présenter des produits tout en fournissant simultanément une navigation facile à travers le site Web. C'est le point de départ idéal pour tout site Web de vente au détail de mode, et la conception propre et minimale du modèle signifie qu'il est facile à modifier et indolore à intégrer avec votre application de commerce électronique personnalisée. Et surtout, c'est gratuit.
Afficher la démo | Télécharger Zip
Si vous n'avez pas l'intention de travailler avec le code source du modèle (et cela signifie que vous ne le compilez pas ou ne exécuterez pas le serveur de développement WebPack), vous n'avez pas besoin d'installer quoi que ce soit. Vous pouvez simplement naviguer dans le dossier DIST et commencer à modifier les fichiers.
La plupart des développeurs modifieront le code source et exécuteront également WebPack pour recompiler les fichiers de modèle. Si tel est le cas, assurez-vous que Node.js est installé. Vous pouvez le télécharger à partir d'ici
git clone https://github.com/PixelRocket-Shop/alpine-html-bootstrap.gitnpm install dans votre ligne de commande.npm start pour démarrer WebPack Devserver.npm run build Le modèle se compose de 5 pages:
Pour maintenir au minimum la répétition du code, nous avons utilisé des howbars.js comme moteur de modèles et partiels pour ajouter rapidement le même code à différentes pages. Nous utilisons également un plugin de guidon pour les données JSON - cela nous permet d'utiliser des boucles et de sortir un seul bloc de code HTML au lieu de répéter le même HTML.
URL de démonstration
Veuillez noter qu'il s'agit d'un modèle HTML uniquement. Il ne se connecte pas à une base de données et ne fonctionnera pas automatiquement dans un système de gestion de contenu (WordPress, etc.). Vous devrez intégrer notre code dans votre application.
? Dist - version générée du modèle. Allez ici si vous ne voulez pas travailler avec le code source du modèle. Mais soyez averti: si vous personnalisez quelque chose dans ce dossier directement, puis recompilez plus tard le modèle à l'aide de WebPack, sauf si vous déplacez le dossier DIST hors du modèle, vos modifications seront remplacées.
? Node_modules - Répertoire où NPM installe les dépendances. Vous ne verrez pas ce dossier avant de terminer l'installation du modèle. Vous n'avez pas besoin de créer ce dossier.
? SRC - Code source du modèle. Allez ici pour personnaliser votre modèle.
? SRC / Assets - des actifs de modèle tels que CSS, JS, Images, etc.
? SRC / DATA - Template Fichiers de données JSON. Nous utilisons ces fichiers JSON pour faciliter votre travail pour insérer du contenu dans le modèle.
? SRC / HTML - Pages de modèle. Allez ici pour modifier les pages existantes ou ajouter de nouvelles pages.
? SRC / partiels - Modèles partiels du guidon.
Le guidon est un moteur de modèle qui nous permet de garder notre code source de modèle comme organisé et aussi propre que possible. Il réduit la duplication de code et grâce à l'utilisation des fonctions d'assistance, permet aux développeurs de modèles d'épuiser très rapidement de grandes quantités de données avec un code minimal. Vous pouvez en savoir plus ici.
Nous utilisons le guidon pour deux raisons principales: tout d'abord, l'utilisation de partiels de guidon nous permet de référencer le même fichier dans plusieurs fichiers HTML et signifie que vous n'avez qu'à modifier le code à partir d'une seule source. Si vous avez l'habitude de travailler avec React ou Vue, ce serait la même chose que la référence d'un composant. Deuxièmement, l'utilisation des données JSON pour nos données de catalogue factice permet de garder notre code de modèle propre. Nous pouvons facilement produire 10 produits factice sur notre page d'inscription en publiant une boucle de guidon de base.
Ouvrez le fichier suivant dans notre modèle: src / html / index.html.
Autour de la ligne 46 Vous verrez le code suivant:
{{> swiper/swiper-hero-slideshow }}
C'est un guidon partiel. Ce code dit au guidon de regarder à l'intérieur d'un dossier appelé Swiper (situé dans le dossier partiel), puis de trouver un fichier appelé Swiper-Hero-Slideshow et l'insérer dans le fichier index.html lorsqu'il est compilé.
Il y a quelques notes importantes sur notre utilisation des partiels du guidon:
Voyons comment nous utilisons le guidon pour garder notre base de code propre. Ouvrez la page de catégorie: src / html / catégorie.html.
Autour de la ligne 56, vous trouverez ce code:
{{#if (config category-products)}}
{{#each (limit category-products.entries 4)}}
<div class="col-12 col-sm-6 col-md-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
Et c'est notre boucle pour une page de catégorie. Nous transmettons des données JSON à notre boucle de guidon, puis à l'intérieur de la boucle, nous faisons référence à un guidon partiel et en les faisant passer les données pour chaque élément de boucle:
{{> listing-cards/listing-card this }}
Le plugin de guidon WebPack que nous utilisons est livré avec un utilitaire très pratique qui nous permet de transmettre des fichiers JSON comme données de modèle.
Veuillez accéder à: SRC / DATA. Voici où résident notre modèle de données JSON. Vous pouvez modifier, supprimer ou ajouter le vôtre à ce dossier.
Encore une fois, si nous faisons référence à notre boucle de page de catégorie:
{{#if (config category-products)}}
{{#each (limit category-products.entries 4)}}
<div class="col-12 col-sm-6 col-md-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
La partie importante ici en ce qui concerne les données des modèles est les produits de catégorie. Cela signifie que dans notre dossier de données, vous trouverez un fichier JSON appelé "Catégorie Produits". Ce fichier de catégorie-products.json a une "clé" appelée "entrées".
Tous les fichiers CSS / SASS source du modèle sont conservés dans le dossier Assets du modèle. Accédez à SRC / Assets / SCSS. Ouvrez le thème.SCSS avec votre éditeur.
Il s'agit du principal point d'entrée pour tous les autres fichiers SASS / CSS.
Pour créer une nouvelle page, naviguez dans votre éditeur de code vers: SRC / HTML. Pour faciliter la mise en place du HTML correct, clonez une page existante. Renommez le fichier nouvellement créé sur toute l'URL dont vous avez besoin. Et c'est tout. Vous êtes désormais libre d'ouvrir la nouvelle page avec votre éditeur de code, apportez vos modifications, puis enregistrez le fichier. Quittez WebPack Devserver et redémarrez-le pour que la page s'affiche.
Bootstrap possède déjà un site de documentation complet qui vous guidera dans la configuration et l'utilisation de toutes les fonctionnalités de bootstrap par défaut. Bootstrap 5 est entièrement intégré au code source de notre modèle. Veuillez vous référer d'abord au site DOC de Bootstrap pour toutes les fonctionnalités de bootstrap par défaut: Visitez le site DOC de Bootstrap
Amorce
AOS.JS
Désactiver
Pexels
Pixabay
Mediumzoom.js
Nouislider.js
Simplebar.js
Swiper.js
Vous pouvez trouver notre site Web ici ou vous pouvez nous envoyer un e-mail à [email protected]
