Front-ends modulaires Shopware

La boîte à outils pour développer rapidement et efficacement des vitrines en ligne

Découvrez notre SDK de pointe pour créer des interfaces personnalisées. Faites évoluer votre façon de travailler et offrez à vos clients des expériences d’achat inégalées grâce à la suite d’outils la plus intelligente.

Discutez avec nos experts

Headless

Déliez votre front-end de votre back-end. Itérez et innovez plus rapidement. Définissez une pile front-end entièrement personnalisée pour répondre aux besoins spécifiques de votre entreprise.

Composable

Réinventez l’expérience d’achat sans réinventer la roue. Servez-vous de fonctionnalités éprouvées pour composer les éléments de votre boutique en ligne là où vous en avez besoin.

Prêt pour le cloud

Simplifiez-vous la vie. Laissez Shopware s'occuper de l'hébergement de votre site, des mises à jour logicielles et de la maintenance, pendant que vous vous concentrez sur le développement de votre activité.

L'application est prise en charge

Toutes les applications basées sur le système de plugins/d'applications offrant des fonctionnalités via l'API sont prises en charge. Ces fonctionnalités API sont accessibles via le client API ainsi que via les composants Vue.js.

Simplicité, évolutivité et flexibilité pour stimuler votre créativité

Concrétisez vos idées plus rapidement. Shopware Composable Frontends met à votre disposition un ensemble simple d'API JavaScript et de composants Vue.js. Créez vos interfaces utilisateur à partir de zéro et maîtrisez entièrement votre pile technologique, sans aucune contrainte liée aux mises à jour.

Collage with a working team, a developer at the computer, code and symbols for time and documentation. Symbolizes collaboration and software development.

Ce guide pratique vous expliquera comment intégrer les fonctionnalités de Shopware à votre boutique en ligne, comme une liste de souhaits ou un blog. Grâce à l'API client et aux composables, vous n'avez pas besoin de comprendre comment tout cela fonctionne : ça marche, tout simplement.

Image shows a product page for ground pepper with an 'Add to cart' button. A code example is overlaid showing the function to add the product to the shopping cart. A notification confirms that the item has been successfully added. A small image of a developer is also visible.

Cette bibliothèque TypeScript indépendante n’est même pas liée à Vue.js. Utilisez-la dans n’importe quel projet JavaScript/Node.js. Utilisez-la avec React, Svelte ou du JavaScript « pur ». Commencez avec une page blanche et intégrez simplement les fonctionnalités de commerce électronique là où vous le souhaitez.

Website with summer trends, shows pictures of a girl outdoors and a group of people by the pool. Caption reads 'Fresh ideas for hot summer days'.

Vous souhaitez réutiliser notre implémentation des expériences d’achat dans votre interface personnalisée ? N’hésitez pas : le CMS de Shopware est « headless ». Ou préférez-vous utiliser votre propre CMS « headless » ? Pas de problème : les fonctionnalités de Composable Frontends sont conçues pour vous permettre d'intégrer facilement votre propre CMS.

A team of developers working on computers. Logos of React, Svelte and Astro are arranged around the central image, symbolizing different web development frameworks.

Des interfaces utilisateur de A à Z

La manière dont vous configurez votre projet détermine le processus de déploiement. Choisissez par où vous souhaitez commencer : partir de zéro ou utiliser un projet existant. Avec les front-ends modulaires de Shopware, trois options s'offrent à vous :

Image montage shows a developer, code on a screen and a 'Hello World! message. A large, central symbol with the number 1 overlays the elements.

Vous pouvez commencer avec un modèle vierge, c'est-à-dire une application Nuxt.js vide sur laquelle les dépendances Shopware Composable Frontends sont installées. Nuxt.js est un « méta-framework » basé sur Vue.js qui ajoute des fonctionnalités de routage et de gestion de fichiers.

Image montage shows a website, code on a screen and colored UI elements. A large, central symbol with the number 2 overlays the elements.

Vous pouvez également utiliser le modèle de boutique de démonstration, qui constitue une implémentation de référence. Il intègre la plupart des fonctionnalités de Shopware et vous permet de prévisualiser l'interface utilisateur. Utilisez-le comme base pour votre projet ou comme source d'inspiration et point de référence.

Image montage shows a user interface, logos of Astro, React and Svelte, as well as code for installing packages. A large, central symbol with the number 3 overlays the elements.

La troisième option consiste à partir d'un projet JavaScript Node.js existant, à intégrer Composable Frontends en tant que dépendance JavaScript, puis à l'installer dans le projet. Le modèle de démarrage Astro, par exemple, utilise Composable Frontends dans un projet qui ne repose pas sur Vue.js, ce qui illustre la polyvalence du framework.

Mise en route rapide et facile.

Si vous maîtrisez Vue.js et savez développer des applications JavaScript, vous pourrez comprendre notre documentation détaillée et commencer immédiatement à utiliser les Composable Frontends. Aucune connaissance spécifique de Shopware n'est nécessaire, et il n'y a que très peu de choses à apprendre sur le SDK lui-même. Vous devez bien sûr comprendre quels composables utiliser pour créer votre frontend, mais nos guides de démarrage sont là pour vous aider. Il n'y a ni framework ni syntaxe complexe à maîtriser.

Three smiling people at a table, one holding a smartphone, laptop on the table. Scene shows joy and cooperation.

Quand faut-il approfondir ses connaissances ?

Si vous souhaitez créer une boutique en ligne complète avec Shopware Composable Frontends, vous devez maîtriser les subtilités de Nuxt.js ou du framework de votre choix. Vous devez savoir résoudre des problèmes tels que le routage, la gestion des données et de l’état, la mise en cache, etc.

Close-up of hands typing on a laptop keyboard.

Plongez au cœur de la technologie

Pourquoi avons-nous créé Composable Frontends ? En quoi diffère-t-il exactement de la PWA Shopware ? Et dans quels projets devriez-vous l'utiliser ? Découvrez-le dans cette interview avec Niklas Dzösch, évangéliste développeur chez Shopware, et Dominic Klein, responsable de l'expérience développeur.

Composable Frontends permet aux développeurs d’utiliser les fonctionnalités de Shopware dans des piles technologiques modulaires. Nous savons que l’écosystème des développeurs front-end évolue rapidement et qu’il est animé par une amélioration et une innovation constantes. C’est la raison pour laquelle nous ne vous imposons aucune technologie, mais vous laissons le choix. Parallèlement, nous vous proposerons des exemples concrets pour vous permettre de démarrer immédiatement. Composable Frontends est le framework évolutif par excellence pour créer des interfaces personnalisées avec Shopware. »

banner-avatar-dominic-k
Dominic Klein
Responsable Expérience Développeur, shopware AG

Two Shopware employees sit at a table and shake hands while smiling at the camera. The Shopware logo can be seen in the background. A play symbol indicates a video.
Copié dans le presse-papiers