Construire un site de commerce électronique à partir de zéro

Sep 12, 2025

Comment

[dix] [dix] [dix]

[dix]

L'ecommerce est devenue si populaire ces dernières années, il est maintenant difficile d'imaginer un avenir sans elle. La puissance de l'Internet a fait de la connexion avec les clients une brise pour les entreprises et les marques, ainsi que le commerce électronique, pour la plupart, est le moyen le plus simple de fournir des produits à leur audience.

[dix]

Les blocs de construction de la Fondation Bibliothèque de composants de l'interface utilisateur codée sont conçus pour faciliter l'accès d'un produit final plus rapidement. Contrairement aux modèles, les blocs de construction ne dictent pas la manière dont votre site devrait être structuré ou être structuré. Ils vous fournissent simplement les outils pour accumuler votre propre look personnalisé et ressentir beaucoup plus rapidement.

Dans ce didacticiel, vous apprendrez à construire un site Web de commerce électronique statique à partir de zéro à l'aide du kit ECOMMERCE, une collection organisée de blocs de construction conçus pour vous aider à créer des types de sites Web spécifiques. Bien que cet échafaudage soit un prototype, les blocs de construction que nous utilisons et que nous finissons, nous vous retrouvons peuvent être appliqués à n'importe quel système.

Commencer

Building Blocks don’t dictate how your site should look — Les blocs de construction ne dictent pas comment votre site devrait regarder

La première chose à faire est de créer un environnement pour construire le site. Pour ce tutoriel, vous devrez d'abord télécharger node.js. Une fois que cela est installé, vous souhaitez installer la CLI de fondation à l'aide de la commande. NPM Installer -g fondy-cli .

Maintenant que vous avez des fondations installées sur votre système, démarrons un nouveau projet de base en utilisant le nouveau site de commerce électronique de la Fondation de commandement. Dans la liste qui suit, sélectionnez la première option, «Un site Web (Fondation pour les sites)», tapez notre nom de projet 'Ecommerce-Site', puis sélectionnez 'Modèle de zurb'. Cela démarrera un modèle de fondation et un serveur de développement afin que nous puissions facilement commencer à construire notre site Web. Courir NPM Démarrer dans le terminal pour exécuter le projet.

[dix]

Ensuite, jetons un coup d'œil au code de notre nouveau projet en l'ouvrant dans un éditeur de texte. Ici, vous trouverez une page d'exemple dans 'src / pages / index.html' contenant certains matériaux de modèle par défaut. Nous allons supprimer tout le code ici.

Note de l'éditeur: Vous recherchez une conception de site Web de commerce électronique pour votre entreprise? Si vous recherchez des informations pour vous aider à choisir celui qui vous convient, utilisez le questionnaire ci-dessous pour vous fournir des informations provenant d'une variété de fournisseurs gratuitement:

[dix]

Installation d'un kit

Avant d'écrire un code, nous allons tirer dans le kit de commerce électronique de la Fondation avec la CLI de la Fondation. Dirigez-vous vers votre terminal et utilisez les kits de la base de la Commande Installez ECommerce.

Si cette commande ne fonctionne pas, vérifiez que votre CLI de fondation est mise à jour à 2.2.3. Vérifier quelle version vous allez, courez Fondation -v dans votre terminal. Si vous devez mettre à jour, désinstallez simplement le cli avec NPM UNINSTALL -G Foundation-CLI et réinstaller avec NPM Installer -g fondy-cli .

Cela vient de télécharger tous les blocs de construction à l'intérieur de notre kit Ecommerce! Chaque fois que vous installez un bloc de construction, il apparaîtra dans SRC / partiels / blocs de construction . Vous saurez que votre kit est installé correctement si tous les blocs de construction ont été automatiquement importés dans votre app.scss déposer.

Certains de ces blocs de construction comprennent des icônes de la police géniale. Vous voudrez donc les installer manuellement ou ajouter leur CDN à la & lt; tête & gt; de votre site. Pour ce faire, accédez à src / mises en page / default.html et ajouter & lt; link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet" & gt; entre le & lt; tête & gt; Mots clés.

Échafauder le site

[dix]

Mix and match blocks to achieve your ideal eCommerce layout — Mélangez et associez des blocs pour réaliser votre mise en page idéale de l'ecommerce

Passons à la construction! Avec notre kit installé, ces prochaines étapes se sentiront un peu comme à jouer avec lego: dans vos propres projets, vous pouvez choisir de les utiliser tous, ou vous pouvez utiliser juste une sélection. N'hésitez pas à mélanger et à faire correspondre des blocs de construction pour atteindre la mise en page de votre ecommerce de rêve.

Pour ce didacticiel, les deux premiers blocs que nous allons commencer avec l'en-tête et la promotion héros. Pour ce faire, nous allons utiliser le mécanisme partiel du guidon. Dans notre fichier vide.html, jetons dans les partiels {{& gt; ecommerce-header}} et {{& gt; ecommerce-promo-héros}} . Avec juste ces deux blocs de construction, notre page d'atterrissage de commerce électronique a déjà l'air à mi-chemin.

Ensuite, nous jetterons dans certaines cartes de produit sous notre section héros. Pour utiliser le bloc de construction de la carte de produit, nous utiliserons la grille de bloc de la fondation afin que les cartes s'assoient uniformément dans une grille. Cela facilitera également la modification de la mise en page de ces cartes plus tard.

Commençons avec & lt; div class = "rangée petit-up-2 moyen-up-5" & gt; . À l'intérieur de cette div, jetez dans dix colonnes avec la carte de produit à l'intérieur de chaque colonne. & lt; div class = "colonne" & gt; {{& gt; ecommerce-carte-carte}} & lt; / div et gt; .

Nous voulons donner à nos clients un moyen d'accéder à plus de nos produits. Ajoutons donc un bouton d'application sous nos cartes de produit. D'abord nous devons créer notre & lt; div class = "Colonne de rangée Text-Center" & GT; Pour que notre bouton soit centré sur la page. Ensuite, nous utiliserons le composant de boutons de base pour créer notre callout. Ajouter un & lt; class de bouton = "bouton" & gt; magasin Tous les produits & lt; / BOUTON & GT; à l'intérieur de la .Orow.column .

La page se sent presque complète maintenant, mais ajoutons également un en-tête entre nos cartes héros et des cartes pour donner un peu de contexte. Sous le héros, ajoutez un & lt; div class = "colonne de rangée" & gt; contenir notre en-tête & lt; h1 & gt; les dernières arrivées et lt; / h1 & gt; .

La plupart des pages d'accueil de commerce électronique ont plus de contenu promotionnel sous leurs produits. Utilisons le bloc de construction {{& gt; ecommerce-héros-curseur-petit}} ici. Pour empêcher le curseur de couvrant la largeur de la page, nous allons l'envelopper autour d'un & lt; div class = "colonne de rangée" & gt; .

Étant donné que les sites de commerce électronique consistent généralement en plusieurs pages, la plupart nécessiteront un méga pied de page avec de nombreux liens pour gérer le volume de pages. Notre kit de commerce électronique est livré avec un pied de page pour ce cas d'utilisation exacte. Pour terminer cet échafaud, laissez tomber dans la {{& gt; ecommerce-piedh}} au fond de notre HTML.

Vérifier la réactivité

Ces jours-ci, il est difficile pour un site d'obtenir sans être mobile. Cela est particulièrement vrai pour les sites de commerce électronique. Maintenant que les achats en ligne sont devenus la norme, nous ne voulons pas perdre ce pourcentage d'utilisateurs qui le font via leurs téléphones mobiles.

Suite à notre devise de Mobile-Premier, les blocs de construction de la Fondation sont construits pour être naturellement réactifs. Un chèque rapide sur un écran plus petit montre que notre site est toujours très beau.

Cependant, lorsque nous cliquons sur le menu Hamburger, notre hors-canvas n'a pas été correctement connecté. Cette partie obtient un peu délicat, mais ne vous inquiétez pas! Nous allons abattre ce qui se passe dans ce menu hors toile, puis traverser la manière de le connecter.

Si vous jetez un coup d'œil au fichier ecommerce-header.html, vous remarquerez que cet en-tête est intégré à celui-ci. Alors, pourquoi n'a-t-il pas fonctionné? Lorsque nous avons cliqué sur le menu Hamburger, la seule chose qui a été «poussée» était l'en-tête. Le reste de la page est resté en vue, causant des chevauchements étranges.

En effet, cet en-tête a été construit pour travailler seul, mais en réalité, il doit fonctionner avec toute la page. En d'autres termes, il doit appuyer tout le contenu de la page sur la page lorsque le menu hors canevas est déclenché, pas seulement du menu d'en-tête. Cet en-tête de commerce électronique a été écrit comme ceci car la mise en place d'une toile hors toile nécessite de la plongée dans votre src / mises en page / default.html page, qui dépasse la portée du bloc de construction.

This is what we’re currently seeing because the off-canvas hasn't been hooked up yet — C'est ce que nous constatons actuellement parce que le hors-canvas n'a pas encore été connecté

Pour résoudre ce problème, tout ce que nous avons à faire est de tout prendre à l'intérieur de & lt; div la classe = "Off-Canvas-ecommerce-en-tête-OFF-Off-Off-Off-Off-Off-Toile-Position-Gauche" ID = "ECOMMERCE-HEADER" DONNE-OFF-TANDVAS & GT; et déplacez-le en src / mises en page / default.html . Ensuite, nous allons envelopper le {{& gt; corps}} de notre site à l'intérieur d'un & lt; div class = "Contenu hors canevas" Data-Off-Canvas-Contenu & GT; . Cela poussera le corps de notre site lorsqu'il sera déclenché.

Maintenant, lorsque nous cliquons sur notre hamburger, tout le site se déplace pour le menu hors toile! Le corps de notre Default.html La page devrait ressembler à ceci:

 & lt; corps & gt;
  & lt; div la classe = "Off-Canvas-ecommerce-en-tête-OFF-Off-Off-Off-Off-Off-Toile-Position-Gauche" ID = "ECOMMERCE-HEADER" DONNE-OFF-TANDVAS & GT;
& lt; class de la touche = "bouton" Fermer "aria-label =" Fermer le menu "Type =" Bouton "Données - Fermer et GT;
  & lt; span aria-caché = "vrai" & gt; et amp; fois; & lt; / span & gt;
& lt; / button & gt;
& lt; class ul = "menu vertical" & gt;
  & lt; li class = "Main-Nav-link" & gt; & lt; a href = "catégories.html" & gt; Catégorie 1 & lt; / A & GT; & lt; / Li & GT;
  & lt; li class = "Main-Nav-link" & gt; & lt; un href = "#" & gt; Catégorie 2 & LT; / A & GT; & lt; / li & gt;
  & lt; li class = "Main-Nav-link" & GT; & lt; un href = "why.html" & gt; catégorie 3 & lt; / a & gt; & lt; / li & gt;
  & lt; li cours = "Main-Nav-link" & GT; & lt; un href = "build.html" & gt; Catégorie 4 & LT; / A & GT; & lt; / li & gt;
  & lt; li class = "Main-Nav-link" & GT; & lt; un href = "#" & gt; Catégorie 5 & LT; / A & GT; & lt; / li & gt;
& lt; / ul & gt;
& lt; h & gt;

& lt; class ul = "menu vertical" & gt;
  & lt; li & gt; & lt; un href = "#" & gt; help & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; un href = "#" & gt; état de commande & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; un href = "#" & gt; contact & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; un href = "#" & gt; mon compte & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
  & lt; / div et gt;

  & lt; div class = "Contenu hors canevas" Data-Off-Canvas-Contenu & GT;
{{& gt; corps}}
  & lt; / div et gt;
  & lt; script src = "{{root}} actifs / js / app.js" & gt; & lt; / script & gt;
& lt; / corps & gt;

Conclusion

Nous vous avons montré comment démarrer votre site de commerce électronique avec le kit de commerce électronique de la fondation, mais ne vous arrêtez pas là-bas! Il y a plus de 100 blocs de construction pouvant être utilisés pour aider à améliorer vos pages. En quelques minutes, nous avons échafaudé un site d'ecommerce statique avec des blocs de construction. Cela vous permet d'économiser beaucoup de temps que vous pouvez maintenant utiliser pour calperties dans les visuels et stylé le site pour adapter votre marque.

Même si vous prenez cela plus loin et que vous utilisez un système de back-end, un mécanisme partiel différent ou une autre façon d'obtenir vos données sur le site, le flux de travail donné avec des blocs de construction vous fera vraiment gagner du temps et donc de l'argent. Les blocs de construction de la Fondation sont un excellent moyen de démarrer car ils sont destinés à être étendus, s'intégrer dans vos styles existants et être utilisés dans n'importe quel système d'application.

Cet article est apparu à l'origine dans magazine net numéro 266. Achetez-le ici .

Articles Liés:

Construire une interface utilisateur basée sur une carte avec fondation
10 beaux nouveaux sites de commerce électronique que vous devez voir
Comment améliorer la performance des sites de commerce électronique

[dix] [dix]

[dix]

Construire un site de commerce électronique à partir de zéro

Commencer

Installation d'un kit

Échafauder le site

Vérifier la réactivité

Conclusion

Comment - Most Popular Articles

17 conseils pour dessiner des visages de manga

Commencez avec Adobe Dimension CC

Comment dessiner des chiffres plus réalistes

Comment préparer un fichier pour imprimer

Créer une image multi-exposition avec Adobe CC

Apprenez à exécuter des sprints de conception et de contenu

Utiliser des outils vectoriels: approche d'une concepteur Web

Modélisation d'un vaisseau spatial pour la conception de gameplay

Catégories