Comment Click Here Labs a débloqué le commerce composable avec Atlas

WP Engine facilite actuellement la plus grande communauté collaborative d'agences WordPress via notre programme de partenariat d'agence.

Dans cette session à la demande de DE{CODE} 2023, vous apprendrez comment Click Here Labs, partenaire de l'agence WP Engine, a utilisé le nouveau Atlas BigCommerce Blueprint pour réinventer la boutique en ligne de Combat Corner. Vous obtiendrez également une démo du BigCommerce Blueprint afin que vous puissiez créer votre propre site de commerce électronique Atlas en seulement 10 minutes !

Haut-parleurs:

• Jonathan Jeter, directeur de la production technique chez Click Here Labs
• Bryan Smith, chef de produit principal chez WP Engine

Diapositives de la session :

Transcription:

BRYAN SMITH : Bonjour, tout le monde. Je m'appelle Bryan Smith, chef de produit principal chez WP Engine. Aujourd'hui, nous allons parler de la façon dont Click Here Labs a débloqué le commerce composable avec Atlas.

Je suis accompagné aujourd'hui de Jonathan Jeter, directeur de la production technique chez Click Here Labs. Il dirige l'équipe là-bas. C'est une agence partenaire de WP Engine, et avec laquelle nous avons travaillé en étroite collaboration au cours des derniers mois pour amener notre premier client de commerce sans tête ou composable à Atlas.

Nous aborderons plus en détail cette étude de cas dans une minute, mais avant cela, j'aimerais parler un peu de l'état du marché avec le développement composable. Si composable et sans tête - nous les utilisons de manière interchangeable ici. Sans tête implique souvent composable.

Et ce n'est pas seulement parce que ces sites sont si performants que la demande pour eux augmente. Ils sont hautement personnalisables et peuvent s'adapter rapidement à un paysage technologique en constante évolution, ainsi qu'à un environnement commercial en constante évolution, où vos résultats commerciaux peuvent changer fréquemment. Ils offrent des expériences dynamiques à la vitesse de la statique, que nous aborderons plus tard dans la journée.

Et vous pouvez également les mettre à l'échelle sans avoir à changer de plate-forme. Dans l'étude de cas que nous présenterons aujourd'hui, le client de Click Here Labs a en fait pu rester sur BigCommerce, leur backend de commerce électronique, intégrer WordPress comme CMS et apporter tout cela à une vitrine sans tête. Mais toutes ces nouvelles technologies peuvent souvent être d'un coût prohibitif, c'est pourquoi nous avons passé les dernières années à résoudre les problèmes de développement les plus graves avec Atlas des chantiers de cette manière.

Et Atlas, bien sûr, est plus qu'un simple hôte. C'est plus qu'un framework frontal. Il a la couche API, le plugin de champs personnalisés, l'application de développement local, toutes ces choses dont vous avez besoin pour commencer. Mais peut-être plus important encore, il a une communauté d'apprentissage et un soutien.

Avec tous ces outils à portée de main, cependant, nous ne vous reprocherions pas d'avoir un peu de fatigue décisionnelle. Il peut même être difficile de démarrer lorsque vous avez autant d'options à portée de main et c'est là que les plans entrent en jeu.

Nous avons donc développé des plans et ils vous permettent de mettre en place un site de démarrage avec tous les plugins de code, modèles de contenu, structure payante dont vous avez besoin. Vous pouvez les faire fonctionner en moins de 10 minutes. Vous pouvez vraiment rationaliser ce processus de démarrage d'un nouveau projet.

Et en plus de cela, cela vous aide également à apprendre la plate-forme et nos meilleures pratiques. Donc, cela vous prépare pour ce prochain projet, mais jusqu'à présent, les plans que nous avions étaient limités à des cas d'utilisation de sites de type plus statique, tels que des sites de portefeuille ou de type blog - rien d'aussi dynamique n'est une vitrine sans tête.

Et c'est pourquoi nous avons créé le modèle BigCommerce. Donc, ce plan que nous allons vous présenter ici dans une minute - il est préconfiguré avec WPGraphQL, l'Atlas Content Modeler, le framework Faust JS et quelques nouveautés également - un plugin de blocs de commerce Atlas, qui vous permet pour apporter des données produit dans l'éditeur WordPress, puis également un connecteur de commerce, qui vous connecte à l'API BigCommerce, vous permettant de synchroniser les données de BigCommerce vers WordPress, de les garder synchronisées.

Vous pouvez créer un modèle de contenu à partir d'eux et vous pouvez également alimenter le plug-in de ce bloc. Alors avec ça, pourquoi ne pas vous montrer comment cela fonctionne et nous passerons à une démo…

Très bien, nous voici donc dans le portail WP Engine sur la page Atlas. Ainsi, lorsque vous créez une nouvelle application Atlas, vous pouvez commencer à partir d'un plan et vous aurez ici quelques options. Ce que nous allons faire ici, c'est choisir le plan BigCommerce là-bas à droite.

Et à partir de là, vous pouvez également prévisualiser cette vitrine ou afficher le code dans GitHub. Nous allons sélectionner ce plan et appuyer sur Continuer. La prochaine étape consiste donc à vous connecter à votre compte GitHub.

Et ensuite, nous allons cloner notre référentiel dans le vôtre. Vous sélectionnez donc votre compte GitHub, le nom du référentiel, puis nous cliquerons sur Créer une application.

Ainsi, certaines choses se produisent au cours de ce processus. Tout d'abord, nous provisionnons le site WordPress. Nous construisons le code Atlas pour l'application Atlas. Et puis il se déploie. Et ce processus prend généralement environ cinq minutes, mais nous l'avons accéléré ici.

Une fois le site WordPress construit, nous pouvons sauter dans le connecteur BigCommerce, que vous verrez sur l'écran ici. Écran de configuration - nous entrerons les informations d'identification, puis nous pourrons démarrer la synchronisation de ce produit.

Et je l'ai connecté à un compte sandbox Atlas ainsi qu'à un compte sandbox BigCommerce. Et je peux importer les produits que j'ai dans ce compte BigCommerce. Je viens de recevoir environ 13 produits de démonstration.

Je voulais noter ici qu'après cette synchronisation initiale, vous n'avez plus besoin de l'exécuter à nouveau pour récupérer les mises à jour. Le plugin prend en charge les webhooks ainsi qu'un travail cron nocturne. Et puis une fois que ces produits sont importés, les images seront également synchronisées.

Et puis nous irons voir les produits. Très bien, nous avons donc nos produits chargés. Vous pouvez les voir ici sur la page Produits. Ce sont les produits de démonstration du site BigCommerce.

Nous allons entrer dans la page Détails de l'un d'entre eux et tout ce que je montre ici est juste tous les champs de données que nous avons introduits - titre, images, descriptions. Tout est là.

Alors maintenant, c'est là dans WordPress. Il est synchronisé pour vous. Vous effectuez une modification sur le site BigCommerce, il se met à jour immédiatement.

Maintenant, je veux vous montrer les modèles de contenu que nous avons créés avec Atlas Content Modeler. C'est juste un exemple. Et je suppose que gardez cela à l'esprit avec ceux-ci. C'est vraiment un point de départ pour vous juste pour vous montrer comment nous l'avons fait.

Ces modèles de contenu alimentent notre page de détails du produit sur la vitrine sans tête, que nous examinerons ici dans une minute. Juste un exemple de la flexibilité de la modélisation de contenu avec Atlas Content Modeler. OK, ensuite, je vais vous montrer le plugin Commerce blocks dont nous avons parlé plus tôt.

Nous allons entrer dans la page d'accueil de l'éditeur de blocs de WordPress. Et ici, vous voyez cette section Achetez nos derniers produits. Ce sont les blocs de commerce.

Vous pouvez donc choisir le type de bloc, les derniers produits, les produits populaires, le nombre d'affichages que vous souhaitez afficher. Nous en montrons quatre ici. Tout cela vient du côté de BigCommerce. Voici un autre exemple plus bas dans la page - les articles en vente, juste comme une alternative à la façon dont vous pouvez les utiliser.

Jusqu'à présent, nous avons vu les modèles de contenu et le plugin de blocs. Voici tout ce qui est installé sur le site WordPress. Ce sont tous ces plugins que nous avons mentionnés plus tôt.

D'ACCORD. Nous voici devant la boutique. Ceci est notre vitrine sans tête, que vous pouvez voir dans l'URL. Vous pouvez voir nos blocs de produits sur la page.

Et ceci est une simple vitrine. C'est vraiment censé être un point de départ. Et donc pour cette raison, nous avons essayé de le garder aussi simple que possible. Ensuite, je vais sur la page Boutique.

Ici vous pouvez voir tous nos produits. Cette page est donc en fait un modèle de contenu, la page Détails du produit. Vous pouvez voir que nous avons une place en bas pour les critiques. Notre prochaine étape sera de l'ajouter au panier.

Et vous verrez que le chariot est également sans tête. Donc, tout cela se trouve sur le front-end d'Atlas. Maintenant, pour le paiement, nous redirigeons vers BigCommerce. Pour les besoins de ce plan, nous avons estimé que c'était le plus logique, mais tout le reste se trouve sur l'avant de l'Atlas sans tête.

Nous voici de retour à la vitrine. Voici la page À propos - juste un exemple de ce que vous pouvez faire avec la mise en page de ces différentes sections de page. Vous pouvez donc le prendre, l'utiliser, en tirer des leçons. C'est vraiment l'intention ici est de vous permettre de démarrer rapidement.

Très bien, c'est tout et avec cela, je vais passer la parole à Jonathan pour approfondir la façon dont Click Here Labs a pris ce plan et l'a étendu à un cas d'utilisation client réel. À toi, Jonathan.

JONATHAN JETER : Merci, Bryan. Avant de parler de l'extension du plan directeur, je voulais d'abord discuter un peu de la planification de la solution. Avant de commencer une solution de commerce composable très flexible, nous voulons nous assurer que nous l'avons planifiée correctement pour nous assurer que nous utilisons les éléments appropriés.

Et nous commençons toujours par la documentation de l'API et les exigences fonctionnelles. Donc, dans ce cas, pour BigCommerce, nous avons parcouru la documentation de leur API pour nous assurer que toutes les fonctionnalités dont le client avait besoin dans son magasin étaient disponibles via l'API. Et ceux qui ne l'étaient pas, nous devions planifier comment nous allions répondre à ces besoins, répondre à ces exigences.

Donc, dans le cadre de ce plan, vous devez déterminer où chaque exigence sera satisfaite, n'est-ce pas ? Est-ce via le BigCommerce natif ? Est-ce via WordPress ? Est-ce via l'application frontale que vous créez ou des applications tierces ?

Dans ce cas, nous avons dû prendre des décisions et parce que la plate-forme est si flexible, l'objectif principal ici était d'accélérer le site, d'obtenir, comme nous l'avions déjà dit, la vitesse de statique dans l'application frontale. Nous voulions donc nous assurer que tous les éléments du site, tous les composants du site que Google allait voir se trouvaient dans l'application frontale sans tête.

Et puis nous avons dû jeter un œil à, par exemple– Bryan a parlé du panier, a parlé de la section compte. Il a parlé de ces différentes choses. Laquelle de ces pièces allions-nous faire dans les différents systèmes ? Ainsi par exemple, nous avons décidé dans ce cas pour le panier, pour le paiement, pour le compte client de faire cela au sein de l'application native.

Ensuite, le contenu du site - nous voulions nous assurer qu'il pouvait être catégorisé correctement, que le client pouvait se sentir à l'aise d'ajouter ce contenu via une interface WordPress standard. Nous avons également agrégé certaines données à l'intérieur de WordPress afin de pouvoir les présenter dans le front-end d'une manière différente. Ce seraient des choses qui n'étaient peut-être pas disponibles dans BigCommerce lui-même et nous devions ensuite prendre en compte les applications tierces.

Où les données venaient-elles ou allaient-elles pour leur CRM, pour le suivi, pour ce genre de choses et enfin, vous devez planifier - quels sont les composants que vous allez construire dans ce front-end et où vont-ils tirer les données de?

Donc, la flexibilité ultime signifie que vous avez beaucoup de décisions à prendre et que vous vous souvenez que vous créez essentiellement une application de commerce électronique avec tous les outils disponibles dans Atlas, et dans ce cas, BigCommerce, pour pouvoir créer ce magasin. Donc, je voulais juste souligner qu'il est très important de faire ce plan, de comprendre dans quoi vous vous embarquez.

Et ayez également ces discussions avec le client et dites, c'est ce que nous construisons. C'est ce qui va rester dans l'application native. C'est ce qui va être dans le front-end.

Les éléments protégés par un mot de passe – par exemple, Mon compte, l'historique de facturation, ce genre de choses – encore une fois, ce sont des choses qui ne seront pas indexées. C'est donc moins important que ceux-ci soient dans l'application frontale. Donc, une fois que vous avez compris cela et que nous avons mis en place le plan, vous êtes maintenant prêt à partir.

Maintenant, nous parlons d'étendre le plan, n'est-ce pas ? Alors, qu'est-ce que cela implique? Nous allons voir ici que l'application frontale est démarrée. Et maintenant, vous devez créer toutes ces pièces supplémentaires qui rendront le magasin unique, qui lui permettront de faire ce que votre client doit faire.

Ainsi, par exemple, dans BigCommerce, certaines fonctionnalités natives sont disponibles dans l'API, telles que des produits compagnons, des groupes de clients, ce genre de choses. Et donc le client utilise toujours BigCommerce natif pour gérer ces produits compagnons, pour gérer les différents groupes de clients, pour gérer quand les choses vont être mises en vente, et les codes de réduction, et ce genre de choses.

Nous prenons ces données et nous les présentons au début. Nous avions également des applications tierces qui étaient – ​​des plugins sont installés dans BigCommerce, n'est-ce pas ? Il y a un personnalisateur de produit.

Et puis les données provenant de différents endroits - celles-ci devaient être prises en compte. Et ces composants peuvent ensuite être créés, par exemple, sur une page Détails du produit, n'est-ce pas ? S'il y a un produit qui a une personnalisation, vous pouvez donc changer les couleurs.

Vous pouvez ajouter des logos. Vous pouvez faire ce genre de choses, non ? Ce personnalisateur vous permet de le faire. Ce sont donc différentes pièces qui ont été construites sur des fonctionnalités tierces.

Et puis enfin, il y a des fonctionnalités qui ont été intégrées directement dans le frontal. Par exemple, la matrice de comparaison de produits - nous avons donc tous vu cela à différents endroits. Comparez trois produits différents, voyez quels sont les différents attributs, comment ils se comparent, la possibilité de regrouper des produits dans une vente, une remise pour un lot. Et puis il y a des choses qui, par exemple, sont disponibles dans BigCommerce natif, mais pour une raison quelconque, l'API ne fait pas la fonctionnalité.

Et donc le téléchargeur de fichiers est un exemple de quelque chose que nous avons dû créer essentiellement dans le front-end en utilisant différentes fonctionnalités dans le back-end. Ce sont donc toutes des choses que vous construisez pour étendre ce plan et certaines d'entre elles seront incluses dans le plan étendu, ou le plan premium dont je pense que Bryan va parler ici très bientôt.

BRYAN SMITH : Merci, Jonathan. Maintenant, je vais couvrir très rapidement la feuille de route d'Atlas. Nous avons divisé cela en colonnes Maintenant, Suivant et Plus tard.

Sous la colonne Maintenant, vous verrez en gras nos initiatives Atlas spécifiques au commerce électronique. En dessous, sur le côté gauche, le plan BigCommerce – qui est en direct, disponible pour tout le monde pour essayer dès maintenant. Nous travaillons également sur une API vitrine.

Il s'agit d'une couche de données qui rassemblera le contenu de WordPress, BigCommerce ou de toute autre source tierce qui vous intéresse. Voici donc un moyen de tous les intégrer. Nous travaillons actuellement sur la version bêta, alors restez à l'écoute pour plus de détails au fur et à mesure que cela avance.

Ensuite, nous travaillerons sur un plan Shopify. Il s'agit d'une intégration similaire à ce que nous avons fait avec BigCommerce, mais dans ce cas, ce sera avec Shopify. Et puis, au fur et à mesure que nous passerons à autre chose, nous nous concentrerons sur la personnalisation et la localisation sans tête. Nous savons que ces choses sont vraiment importantes pour les vitrines dynamiques. Et c'est quelque chose dont nous voulons nous assurer qu'il est étroitement intégré à la plateforme de commerce Atlas.

Donc, si vous êtes prêt à démarrer avec le plan BigCommerce, vous pouvez ouvrir un compte sandbox Atlas gratuit dès aujourd'hui pour l'essayer. Si vous avez déjà un compte Atlas, le plan est bien sûr également à votre disposition. Allez l'essayer aujourd'hui.

Essayez-le sur votre prochain projet. Dites-nous ce que vous en pensez. Merci tout le monde. Nous apprécions vraiment votre temps aujourd'hui. Passe une bonne journée.