Fermer

mars 10, 2020

Création d'un site de commerce électronique avec CMS et accro du shopping d'octobre


À propos de l'auteur

Leonardo Losoviz est un développeur et écrivain indépendant, avec une quête continue pour intégrer des paradigmes innovants (PHP sans serveur, composants côté serveur, GraphQL)…
En savoir plus sur
Leonardo

Le CMS Octobre alimenté par Laravel permet d'étendre les fonctionnalités de l'application grâce à l'utilisation de plugins. Dans cet article, nous apprendrons comment créer un site de commerce électronique via l'un des plugins les plus populaires d'octobre, Shopaholic.

Octobre CMS est en plein essor: avec plus de 9000 étoiles dans son repo GitHub 2000 forks et 300 contributeurs, il devient une force majeure dans l'espace CMS. Il a remporté le vote populaire en tant que Meilleur CMS de fichiers plats de 2018 de nouveaux plugins sont publiés sur sa place de marché presque quotidiennement (couvrant la plupart des besoins des développeurs) et son réseau de partenaires se développe dans le monde entier. Voyons de quoi il s'agit.

Construit en PHP et propulsé par Laravel (l'un des frameworks PHP les plus puissants et les plus conviviaux pour les développeurs), October CMS est un système de gestion de contenu open-source gratuit ( CMS). Il bénéficie du code propre et de l'architecture sonore de Laravel pour offrir une excellente expérience de développeur, sur laquelle il ajoute des fonctionnalités CMS simples et flexibles pour offrir une excellente expérience utilisateur. Cette combinaison permet de lancer de nouveaux projets en quelques minutes, sans avoir à construire le projet à partir de zéro. En raison de toutes ces fonctionnalités, octobre peut minimiser les coûts de développement et de maintenance des sites Web, ce qui le rend particulièrement précieux pour les entreprises et les agences numériques.

Pourtant, malgré sa puissance, octobre CMS est très facile à utiliser. Depuis sa création, octobre s'est efforcé d'être « aussi simple que possible, mais pas plus simple ». Pour cette raison, il est basé sur l'une des piles les plus simples pour le Web: PHP pour le rendu HTML, plus les actifs CSS et JS. Selon les mots de ses créateurs, la mission d'octobre est de prouver que "le développement web n'est pas sorcier".

Dans cet article, nous ferons une tournée autour du CMS d'octobre: ​​Nous verrons d'abord comment l'installer, puis vérifier quelques de ses fonctionnalités de codage et de convivialité un peu plus en détail, et enfin nous mettre la main à la pâte en mettant en œuvre un site Web de commerce électronique via l'un de ses plugins les plus populaires, Shopaholic .

Chaîne YouTube recommandée

Are vous souhaitez en savoir plus sur le développement du e-commerce? Vous pouvez le faire à l'aide de flux en direct qui expliquent les principaux aspects du processus de développement basé sur la plate-forme Shopaholic pour octobre CMS. Regarder →

Installation d'octobre CMS

Depuis octobre CMS s'exécute sur PHP, il nécessite d'avoir un serveur Web en cours d'exécution sur l'ordinateur (si nous n'en avons pas encore un, MAMP peut en fournir un gratuitement, permettant de choisir entre Apache et Nginx, et cela fonctionne à la fois pour Windows et macOS) et un serveur MySQL pour stocker la base de données (qui peut également être fournie par MAMP).

L'installation jusqu'à octobre l'assistant ne prend pas plus de quelques minutes: nous créons une nouvelle base de données MySQL, télécharge et décompressons les fichiers d'installation dans notre répertoire cible pour le site Web (qui doit être autorisé à écrire, et qui doit être défini en tant que racine du document sur le serveur Web pour le domaine choisi, tel que localhost), puis appelez le fichier de script à partir du navigateur Web. À partir de ce moment, l'assistant prend le relais, nous guidant à travers le processus d'installation. L'assistant va:

  1. valider si le serveur Web satisfait à toutes les exigences (au moins PHP 7.0 et autres):
     Installation du CMS d'octobre 1ère étape: vérification du système
    vérification du système ( Grand aperçu )
  2. Demander les valeurs de configuration de la base de données et du site, et les informations d'identification de l'utilisateur:
     Installation du CMS d'octobre 2ème étape: Configuration
    Configuration ( Grand aperçu )
  3. Demander comment installer le site: à partir de zéro, en installant déjà un thème spécifique, ou en utilisant notre propre projet existant (à partir duquel notre thème et nos plugins choisis peuvent être installés automatiquement):
     octobre CMS installation 3ème étape: configuration initiale- up
    Configuration initiale ( Grand aperçu )
  4. Ensuite, nous cliquons sur "Installer!", et en quelques secondes (en fonction de la vitesse de notre connexion Internet) le site Web sera installé et prêt à utilisation:
     Octobre installation du CMS est installée
    Site installé ( Larg e preview )

    Dans ce cas, j'ai choisi de l'installer à partir de zéro, sous http: // localhost . En naviguant vers cette URL sur le navigateur, nous pouvons rencontrer le thème de démonstration de démarrage d'octobre: ​​

     Thème de démonstration de démarrage
    Parcourir le thème de démonstration de démarrage ( Grand aperçu )
  5. Navigation vers http : // localhost / backend (sauf si nous avons modifié cette URL pendant le processus d'installation), nous pouvons nous connecter au panneau d'administration:
     Panneau d'administration
    Navigation dans le panneau d'administration ( Grand aperçu )
  6. Enfin, nous supprimons les fichiers d'installation du dossier. Et voilà, en quelques minutes, nous avons un site entièrement fonctionnel (enfin, nous devons encore l'améliorer avec des plugins … nous le ferons dans un certain temps).

    Alternativement, nous pouvons également installer octobre à partir de l'interface de ligne de commande en exécutant:

     $ curl -s https://octobercms.com/api/installer | php
    

    Cette méthode est plus rapide (l'installation peut prendre aussi peu que 10 secondes) car elle ne nécessite pas de saisir la configuration de la base de données. Par conséquent, il est particulièrement utile pour configurer le CMS d'octobre en tant que système de fichiers plats, c'est-à-dire un CMS entièrement configuré via des fichiers stockés sur le disque local et sans base de données.

 Installation via l'interface de ligne de commande [19659015] L'installation d'Octobre CMS via la CLI ne prend pas de temps. (<a href= Grand aperçu )

Système de modèles

Octobre CMS dispose d'un système de modèles robuste pour implémenter des dispositions, réutiliser des morceaux de code et activer la fonctionnalité dynamique. Ses éléments les plus importants sont les suivants:

Les pages sont la structure la plus élémentaire de stockage de contenu. Ceux-ci sont facilement disponibles, car ils sont livrés dans le cadre du noyau (les articles de blog, d'autre part, doivent être installés via un plugin ). Les pages sont basées sur Twig qui est un moteur de modèle moderne pour PHP (conçu par les créateurs de Symfony ), et compilé en code PHP optimisé simple, afin qu'elles s'exécutent très rapidement. [19659005] Les partiels contiennent des morceaux de code réutilisables qui peuvent être utilisés tout au long du site Web, afin d'éviter la duplication de code sur les différentes pages ou mises en page. Ils sont particulièrement utiles pour les menus de navigation, les témoignages, les appels à l'action et d'autres éléments communs.

Les dispositions définissent l'échafaudage ou la structure de la page. Ils définissent les éléments HTML et et sont utiles pour créer le cadre du site, y compris l'en-tête, le pied de page et les barres latérales. Le contenu réel dans le corps est injecté par la page.

Les composants sont le mécanisme pour étendre les fonctionnalités du CMS d'octobre. Toute page, partielle ou mise en page peut avoir attaché un certain nombre de composants, qui sont le plus souvent fournis via des plugins, et qui sont entièrement configurables. Outre le rendu du code HTML sur la page, les composants peuvent également fournir des services, tels que la validation de formulaire, le contrôle de sécurité, le contrôle des autorisations utilisateur, etc.

 Configuration du composant
Configuration d'un composant attaché à une page. ( Grand aperçu )

Ces éléments sont tous implémentés via des fichiers vivant dans le dossier du site Web sur le disque dur local. En tant que tel, il est possible de les éditer non seulement via l'éditeur intégré d'Octobre CMS, mais également depuis l'éditeur de texte préféré du développeur (Sublime, VS Code, PHPStorm, etc.).

 Éditer un élément via Octobre CMS construit -dans l'éditeur et dans un éditeur de texte externe
Nous pouvons éditer des éléments soit via l'éditeur intégré du CMS d'octobre, soit dans un éditeur de texte externe. ( Grand aperçu )

De même, le projet CMS d'octobre peut être parfaitement géré via n'importe quel système de contrôle de version, et il peut être facilement adapté à tous les flux de travail existants. Par exemple, un projet peut être mis en place via une intégration continue, en le déployant automatiquement sur le serveur après que le nouveau code a été envoyé au référentiel Git.

 Flux de travail Git
Octobre peut être facilement géré avec Git. ( Grand aperçu )

Octobre CMS Marketplace

Octobre CMS a un marché pour les thèmes (qui permettent de changer l'apparence du site) et les plugins ] (qui permet d'étendre les fonctionnalités du site), proposant des offres gratuites et payantes. En fournissant des thèmes qui peuvent être utilisés pour établir et configurer rapidement la conception du site, et des plugins qui implémentent chacun certaines fonctionnalités requises pour le site, le marché conduit finalement à des coûts plus bas pour la création de nos projets et à un temps de lancement plus court.

Le marché s'agrandit! Suite à la popularité croissante d'octobre, sa place de marché a reçu un flux constant de nouvelles offres: il compte actuellement 915 plugins, comprenant la plupart des fonctionnalités requises pour nos sites Web (blogs, référencement, commerce électronique, analyses, e-mail, galeries, cartes, sécurité, social, gestion des utilisateurs et autres) et plus de 150 thèmes. Les thèmes et les plugins peuvent être soumis au marché par n'importe quel développeur tiers indépendant, entreprise ou agence, et ils doivent se conformer aux directives de qualité qui garantissent qu'ils sont performants et sécurisés.

Création d'un E -Commerce Site Through Shopaholic

Mettons la main à la pâte et mettons en œuvre un cas d'utilisation réel: un site Web de commerce électronique! Pour cela, nous allons installer Shopaholic le plugin le plus populaire pour ajouter des fonctionnalités de commerce électronique au CMS d'octobre, et le thème gratuit Thème Bootstrap pour Shopaholic pour démarrer rapidement le site (qui être fait pour ressembler à ce site de démonstration ). Shopaholic est idéal pour nos besoins car il fournit une solution de commerce électronique complète, qui comprend un écosystème d'extensions (gratuites et payantes) pour l'améliorer davantage. De plus, nous pouvons installer l'expérience de base gratuitement et effectuer un paiement unique pour les extensions dont nous avons besoin, ce qui sera moins cher que d'utiliser des solutions cloud qui ont des frais récurrents à utiliser. Et enfin, parce que nous sommes propriétaires à part entière de notre propre site Web de commerce électronique sur site, nous pouvons le personnaliser autant que nous le devons et nous possédons toutes les données, ce qui n'est pas possible avec les solutions cloud.

En raison de le système de gestion des dépendances du marché d'octobre, nous avons seulement besoin d'installer le thème (le plugin Shopaholic est ajouté en tant que dépendance). Passons ensuite à l'installation du thème: à l'intérieur de l'administrateur du CMS d'octobre, nous cliquons dans la section "Thème frontal" dans les paramètres, puis cliquez sur "Trouver plus de thèmes":

 Gestionnaire de thème frontal
Gestionnaire de thème frontal. ( Grand aperçu )

Ensuite, nous recherchons le thème "Bootstrap theme for Shopaholic" et, en cliquant sur le résultat dans la liste déroulante, il installera le thème et toutes ses dépendances. Une fois installé, nous revenons à la page du gestionnaire de thème frontal et cliquez sur le bouton Activer du nouveau thème:

 Activation du nouveau thème
Activation du nouveau thème. ( Grand aperçu )

Après avoir installé le thème et les plugins, nous remarquerons un nouvel élément "Catalogue" dans la barre de menu supérieure. En cliquant dessus, nous pouvons gérer les articles de notre catalogue de commerce électronique, à savoir les produits, les catégories et les marques (ce sont les éléments de base; d'autres éléments, tels que les coupons, peuvent être ajoutés via des extensions). Initialement, notre catalogue sera vide:

 Catalogue
Catalogue comprenant des produits, des catégories et des marques. ( Grand aperçu )

Remplissons-le avec quelques données. Nous pouvons soit créer les éléments un par un, soit, très commodément, importer des données via des fichiers CSV et XML (ce qui nous permet de gérer un grand ensemble d'enregistrements avec Excel ou d'autres outils). Dans notre cas, puisque nous créons un site de démonstration à des fins de test, installons le plugin Fake Data for Shopaholic qui fournit de grands ensembles de données factices et un moyen facile d'importer ces enregistrements dans le système. Pour ce faire, procédez comme suit:

  1. Dirigez-vous vers Paramètres => Mises à jour et plugins dans le backend CMS Octobre, et installez le plugin "Fake Data for Shopaholic". .
  2. Sélectionnez le widget "Fake data for Shopaholic" et cliquez sur Ajouter.
  3. Dans le widget nouvellement ajouté, en cliquant sur Générer dans la section "Générer des fausses données", le processus d'importation des fausses données sera exécuté.

La dernière étape demandera combien de fois l'insertion devrait être répétée (pour créer du volume et pouvoir tester les performances du site lors du chargement de nombreux enregistrements) et quel ensemble de données (vêtements ou baskets):

 Génération de fausses données via Commande artisanale de Laravel
Génération de fausses données via la commande artisanale de Laravel. ( Grand aperçu )

Après avoir exécuté ce processus, notre catalogue sera mieux approvisionné:

 Catalogue avec quelques données fictives
Catalogue avec quelques données fictives. ( Grand aperçu )

L'étape suivante consiste à créer des promotions. Pour ce faire, nous cliquons sur Promotions dans le menu supérieur, puis sur le bouton Créer, et remplissons les informations requises. Une fois chaque promotion créée, nous devons la modifier à nouveau pour y ajouter des produits. Après en avoir créé quelques-uns, notre liste de promotions ressemblera à ceci:

 Liste de promotions
Création de promotions. ( Grand aperçu )

Maintenant que nous avons des données, nous pouvons terminer de personnaliser l'apparence de notre page d'accueil. Pour cela, nous allons dans la section Paramètres => Thème frontal => Personnaliser et nous complétons les informations pour tous les onglets (En-tête, Pied de page, Social, Curseur principal, Page d'index). Une fois que cela est prêt, notre site de commerce électronique sera désormais prêt:

 Site de démonstration de commerce électronique
Notre site de commerce électronique est prêt! ( Grand aperçu )

En cliquant sur un produit, nous pouvons voir à quoi ressemble sa page:

 Page produit
Page produit. ( Grand aperçu )

Audit de la vitesse et de la fiabilité de la solution de commerce électronique

Parce que nous voulons vendre nos produits, la vitesse et un bon référencement sont obligatoires, alors faisons un audit avec Google Chrome's Lighthouse sur la page du produit pour s'assurer qu'il fonctionne rapidement et qu'il obtiendra un score élevé avec les moteurs de recherche. En exécutant l'audit sur le site de démonstration en direct il renvoie le rapport suivant :

 Rapport phare de la page produit
Rapport phare de la page produit. ( Grand aperçu )

Tout aussi important est que le site peut supporter une charge élevée, de sorte que si notre produit réussit et attire beaucoup de trafic, le serveur ne tombe pas en panne. Pour cela, nous pouvons utiliser l'outil Impact de charge pour exécuter un test de charge. L'exécution du test en utilisant 50 utilisateurs virtuels pendant 12 minutes sur le site de démonstration en direct (qui est hébergé sur DigitalOcean avec une configuration de gouttelettes de 2CPU standard / 4 Go de RAM) a produit les résultats suivants:

 Rapport LoadImpact
Rapport LoadImpact d'un testez la charge en utilisant 50 utilisateurs virtuels pendant 12 minutes. ( Grand aperçu )

Comme on peut le voir, le site Web a pu maintenir un temps de réponse acceptable tout au long du test de charge, ce qui nous donne la confiance que nous pouvons faire confiance au plug-in de commerce électronique lorsque nous en avons besoin le plus: quand il est temps de vendre le produit.

Enfin, nous pouvons également avoir confiance en la fiabilité du logiciel, car il est couvert par des tests unitaires .

Ajout d'extensions à Shopaholic [19659002] Jusqu'ici tout va bien. Cependant, comme cela peut être vu sur les captures d'écran de notre site Web, il n'y a toujours aucun moyen pour le visiteur d'acheter un produit. Ajoutons cette fonctionnalité en installant les extensions gratuites suivantes pour Shopaholic: Commandes pour permettre d'ajouter des produits à un panier et passer des commandes, et Omnipay pour traiter le paiement. (Pour les autres extensions Shopaholic si elles ne sont pas gratuites et créées par LOVATA, vous pouvez utiliser le coupon "BIENVENUE" pour obtenir une remise de 50% la première fois que vous les achetez.) Pour installer ces extensions, nous dirigez-vous vers Paramètres => Mises à jour et plug-ins, recherchez les noms des plug-ins et cliquez sur les résultats pour les installer.

 Installation des plug-ins
La recherche de «Shopaholic» affiche ses plug-ins. ( Grand aperçu )

Une fois installé, nous verrons un nouvel article Commandes dans la navigation supérieure, où toutes les commandes seront stockées, et les articles Modes de paiement et Types d'expédition dans la page Paramètres, pour configurer la passerelles de paiement (carte, espèces, etc.) et comment livrer le produit (par la poste, etc.). Nous les configurons et chargeons à nouveau la page produit. Maintenant, il affiche un bouton "Ajouter au panier", permettant à l'utilisateur de passer une commande:

 Page produit avec panier activé
Page produit avec panier activé. ( Grand aperçu )

Après avoir ajouté plusieurs articles au panier, nous pouvons passer à la caisse et terminer la commande:

 Panier
Fin de la commande. ( Grand aperçu )

Une fois que l'utilisateur soumet la commande, l'inventaire sera automatiquement pris en charge, mettant à jour le nombre d'articles pour chaque produit en stock, et nous recevrons un e-mail nous informant de la nouvelle commande (si configurée pour le faire). Dans la section Commandes du panneau d'administration, nous pouvons trouver toutes les informations relatives à la commande (produits vendus, informations sur l'acheteur, mode de paiement et total, etc.), et nous pouvons terminer la transaction.

 Page Commandes
Tous les informations de la commande sont ici. ( Grand aperçu )

Le travail de base est terminé: en à peine quelques heures, nous avons réussi à avoir un Sith de commerce électronique entièrement fonctionnel avec octobre CMS et Shopaholic.

Création de notre propre extension [19659002] Si aucune des extensions de Shopaholic sur le marché d'octobre ne fournit les fonctionnalités nécessaires, nous pouvons également créer nos propres extensions.

Pour ce faire, si vous êtes à l'aise avec la programmation orientée objet et PHP et, plus précisément, avec Laravel, alors vous êtes prêt à le faire. La documentation explique comment ajouter une extension, étape par étape. Par exemple, en suivant ce didacticiel avec à peine quelques lignes de code, nous pouvons ajouter un champ personnalisé "note" à nos produits:

 Modifier un produit
Ajouter un champ personnalisé au produit. ( Grand aperçu )

Nous pouvons ensuite récupérer le nouveau champ "note" du produit et l'afficher dans le modèle de produit:

 Page produit
Afficher un champ personnalisé dans la page produit . ( Grand aperçu )

L'extension de l'accro du shopping n'est pas difficile et nous permet de mettre pleinement en œuvre nos propres exigences en matière de commerce électronique et de personnaliser le site en fonction de notre marque.

Conclusion

Octobre CMS est un excellent candidat pour construire des sites puissants de manière très simple (montrant que «le développement web n'est pas sorcier»). Il offre la grande expérience de développeur accordée par Laravel, et sa place de marché (qui grandit quotidiennement) fournit un grand nombre de thèmes et de plugins prêts à l'emploi, ce qui nous permet de créer des sites Web très rapidement. Un de ces plugins est Shopaholic, qui convertit le site en une plate-forme de commerce électronique à part entière.

Pour ces raisons, la construction d'un site avec octobre peut être très rentable. En conséquence, il a acquis une certaine réputation (en remportant le vote populaire comme meilleur CMS à fichier plat de 2018) et est devenu de plus en plus un outil de choix pour les entreprises et les agences numériques qui créent des sites pour leurs clients.

Pour en savoir plus de la communauté d'octobre, soyez le bienvenu à rejoindre octobre CMS Slack workspace qui est l'endroit où les créateurs de thèmes et de plugins publiés sur la place de marché se retrouvent, afin que vous puissiez facilement discuter avec eux pour obtenir leur aide et leurs conseils .

Essayez Octobre ( c'est gratuit! ), et dites-nous comment ça se passe.