Introduction (désormais Wix Corvid !)
Voilà maintenant un peu plus d'une année que Wix Code a été lancé et accessible à tous depuis décembre 2017. La promesse principale de cette nouvelle fonctionnalité : "Creation without limits" (création sans limites) et de telles paroles ne sont pas sans signification venant de la part de Wix car la plupart des professionnels du web ont délaissé ce CMS du fait de son manque de liberté, de ses pages statiques ainsi que l'impossibilité de pouvoir écrire une seule de ligne de code. Est-il donc désormais possible de développer n'importe quel site sans aucune limite avec Wix ?
Notre agence a été présente depuis le lancement de Wix Code d'une part avec la volonté de travailler sur les projets les plus ambitieux et complexes avec cette plateforme.
D'autre part avec le souhait d'être les pionniers de la nouvelle ère de Wix et nous l'avons fait car nous sommes désormais officiellement les premiers professionnels francophones reconnus en tant que Wix Code Experts !
Il faut avouer que peu de personnes connaissent encore l'existence de ce nouvel outil de développement car il n'y a pas eu de vraie campagne de publicité comme celle que vous avez l'habitude de voir de la part de cet éditeur de site internet. Beaucoup de monde nous prennent encore pour des extraterrestres lorsqu'on parle de Wix Code que ce soit à d'autres agences web ou en réponse à des CV que nous recevons.
Notre développeur, Guillaume Brut, a pu travailler pour des projets clients réels et pas des moindres au prix de quelques tasses à café cassées et de "c'est pas possible de faire ça avec Wix" pour finalement revenir au bout d'une heure avec un "c'est bon j'ai réussi !".
Nous avons donc décidé de vous faire découvrir Wix Code à travers nos yeux et vous présenter les principales fonctionnalités qu'offre ce nouvel outil de développement.
Sommaire
Qu'est-ce que Wix Code ?
Bases de données
Pages dynamiques
Repeaters
Backoffices personnalisés
Différents éléments de Wix Code
Modules exposés : Wix Code for Store, Booking et Events
Wix Code au service du webmarketing
Est-il possible de développer n'importe quel site web avec Wix Code ?
Liens utiles
Auteur de l'article
1. Qu'est-ce que Wix Code ?
Wix Code un outil de développement Javascript intégré à l'éditeur permettant de prendre le contrôle des divers éléments internes et de coder des fonctions des plus simples aux plus avancées en s'appuyant sur une bibliothèque d'API propre à Wix.
En clair, l'éditeur allie désormais de manière harmonieuse "drag and drop" et "outils développeurs" nous laissant la possibilité de créer nos propres modules web entièrement personnalisés.
Enfin, de nombreuses fonctionnalités viennent compléter le tableau : bases de données, pages dynamiques, listes répétées (repeaters), backoffices personnalisés, ...
Nous les détaillerons tout au long de cet article.
2. Bases de données
L'élément principal qu'il manquait à la plateforme pour créer des sites internet dynamiques avant l'arrivée de Wix Code. Celles-ci peuvent être crées en 2 clics après avoir activé les outils développeurs à l'intérieur de l'éditeur.
Elles sont très intuitives à gérer et peuvent comporter les types de champ suivants :
Texte
Texte riche
Image
Galerie d'images
Vidéo
Document
URL
Numéro
Référence
Boolean
Vous pourrez donc choisir lesquels de ces champs vous seront les plus pertinents en fonction de votre projet.

(Source : site officiel Wix Code)
3. Pages dynamiques
Une page dynamique permet de créer une structure de page et de connecter ses différents éléments (textes, images, vidéos, ...) à la base de données de votre choix. Une fois ceci fait, une nouvelle page de structure identique va se générer à chaque nouvelle entrée en fonction des éléments que vous aurez ajouter.
On distingue 2 types de page dynamique :
Page de type objet
Très utiles pour la description plus avancée d'un produit, service, événement, ...
Page de type catégorie
Utilise un champ d'une base de données que vous définissez comme "Catégorie" pour générer des pages contenant toutes les entrées d'une même catégorie.
Bien entendu, vous pourrez connecter également les éléments textes et images de votre base de données pour les moteurs de recherches / partage sur les réseaux sociaux.

4. Repeaters
Ce sont des vignettes de présentation permettant de présenter de manière rapide les différentes entrées d'une base de données sous forme de liste.
Les repeaters peuvent être utilisés pour un grand nombre de situations et ils permettent à l'utilisateur d'accéder à la page dynamique pour en savoir plus sur un produit/service, de filtrer les entrées de la base de données, etc.
Présentation rapide des repeaters :
Exemple de filtrage :
5. Différents éléments de Wix Code
Il existe un grand nombre d'éléments entièrement personnalisables à utiliser selon votre projet disponibles dans la rubrique "données utilisateurs". Ils vous permettront par exemple de créer un formulaire de calcul de devis ou un système de filtrage avancé.
Voici la liste telle que présentée dans l'éditeur :
6. Backoffices personnalisés
Cette fonctionnalité est l'une de nos préférées car elle nous permet de créer facilement un backoffice entièrement personnalisé pour nos clients qui pourront gérer leur base de données de manière intuitive et interactive depuis le dashboard de Wix.
Pour ce faire, il suffit de créer une Page tableau de bord, de connecter les différents champs à votre base de données selon ce que vous souhaitez faire et de designer la totalité des éléments comme bon vous semble.

Voici un exemple de backoffice que nous avons réalisé pour un client :
Ajout d'un nouvel élément

Consulter les éléments

Modifier / supprimer un élément

7. Modules exposés : Wix Code with Stores, Bookings et Events
Certains modules développés par Wix sont exposés à Wix Code.
Ceci est le cas pour :
Wix Stores (page officielle de Wix Code with Stores)
Wix Bookings (page officielle de Wix Code with Bookings)
Wix Events
Les bases de données sont générées automatiquement selon ce qu'un utilisateur a ajouté à l'intérieur de ces différents modules.
Vous pourrez par la suite influer sur ces différents modules comme bon vous semble et vous n'aurez pas besoin de créer de pages dynamiques étant donnés que celles-ci seront générées automatiquement par les modules.
Bien entendu, selon les projets, il est recommandé de développer ses propres applications web avec Wix Code pour être sûr de ne pas être limité par la suite et de pouvoir avoir un contrôle total sur celles-ci.
8. Wix Code au service du webmarketing
Cette fonctionnalité de la bibliothèque API permet de créer des trackEvent() calculant le nombre de visiteurs ayant cliqué sur un élément spécifique d'un site internet et d'envoyer les données directement à Google Analytics, Google Tag Manager et Facebook Pixels.
Il n'y a donc pas plus heureux que notre spécialiste webmarketing, Fabrice Nana, qui grâce à ces quelques lignes de code peut enrichir au maximum les statistiques des sites de nos clients !
9. Est-il possible de développer n'importe quel site web avec Wix Code ?
Il est très difficile de pouvoir donner une réponse tranchée sur le sujet sans avoir pu étudier un ensemble de cas concrets (Wix Code étant encore nouveau) et nous allons répondre en fonction de nos clients jusqu'à présent après un peu plus d'une année d'activité réelle.
Nous dirions qu'il est désormais possible à l'heure actuelle de réaliser 90% des projets web avec Wix Code. En effet, si l'idée d'avoir tous nos outils de travail au même endroit nous fait gagner un temps considérable sur nos mandats, Wix est encore très fermé sur certains points comme par exemple à l'intégration de CRM externes liés aux bases de données du CMS et de terminaux POS. Mais nous faisons confiance à leurs équipes car de grandes choses se préparent dans un futur proche.
De notre côté, nous avons eu des projets simples aux plus complexes mais nous ne nous sommes jamais heurté à un mur car nous avons toujours trouvé des solutions en contournant un problème ou en utilisant tous les éléments à notre disposition grâce à notre connaissance dans les moindre recoins de l'éditeur.
En conclusion, pour la plupart des mandats que vous devriez être amené à réaliser avec Wix Code, la seule limite que vous rencontrerez est votre imagination et votre créativité. Cependant, il ne suffit pas d'être un bon développeur mais il faudra également apprendre les spécificité du langage propre à Wix et bien connaître les différents éléments que propose l'éditeur (même savoir les détourner parfois ...).
Nous lancerons bientôt des cours Wix Code en Suisse à Genève et toute personne s'intéressant à ce nouvel outil est la bienvenue dans notre agence pour une découverte.
10. Liens utiles
Officiels :
Non-officiels :
11. Auteur de l'article
Kevin Dang, fondateur de Reverseweb et spécialiste Wix.