Optimiser votre boutique Wix avec Velo : Maîtriser le panier, les datasets et le paiement

Dans l'univers du commerce en ligne, l'expérience utilisateur est primordiale. Un parcours d'achat fluide et intuitif peut faire toute la différence entre un visiteur qui abandonne son panier et un client satisfait qui finalise sa commande. Si vous utilisez Wix pour votre boutique en ligne, vous avez probablement découvert Velo, l'outil de développement intégré qui permet de personnaliser et d'optimiser votre site bien au-delà des fonctionnalités standard.

Dans cet article, nous allons explorer comment tirer pleinement parti de Velo pour améliorer votre boutique Wix, en nous concentrant particulièrement sur trois aspects cruciaux : la gestion du panier d'achat, l'utilisation efficace des datasets, et l'optimisation du processus de paiement.

Comprendre Velo : le pouvoir caché de Wix

Avant de plonger dans les aspects techniques, rappelons ce qu'est Velo. Anciennement connu sous le nom de Corvid, Velo est l'environnement de développement intégré à Wix qui permet aux développeurs d'ajouter des fonctionnalités personnalisées à leurs sites grâce au JavaScript. Il offre un accès aux API Wix, à la gestion de base de données via les collections, et à de nombreuses autres fonctionnalités avancées.

Pour les boutiques en ligne, Velo représente une opportunité d'aller au-delà des limites des templates standards et de créer une expérience d'achat véritablement sur mesure.

Optimiser le bouton "Ajouter au panier" avec Velo

L'un des éléments les plus critiques d'une boutique en ligne est le bouton "Ajouter au panier". Ce simple élément d'interface est en réalité le point de départ de tout le processus d'achat. Voici comment l'optimiser avec Velo :

1. Connecter le bouton aux actions d'achat

import wixStores from 'wix-stores';
import wixWindow from 'wix-window';

$w.onReady(function () {
    $w('#addToCartButton').onClick(() => {
        const productId = $w('#productPage').productId;
        const quantity = $w('#quantityInput').value;
        
        wixStores.cart.addProduct(productId, quantity)
            .then(() => {
                // Afficher une confirmation
                $w('#addedToCartMessage').show();
                // Mettre à jour l'affichage du panier
                updateCartDisplay();
            })
            .catch((error) => {
                console.error(error);
            });
    });
});

2. Mise à jour automatique du total du panier

Pour offrir une expérience utilisateur optimale, il est essentiel que le total du panier se mette à jour instantanément après l'ajout d'un produit :

function updateCartDisplay() {
    wixStores.cart.getCurrentCart()
        .then((cart) => {
            // Mettre à jour le nombre d'articles
            $w('#cartItemCount').text = cart.totals.quantity.toString();
            // Mettre à jour le montant total
            $w('#cartTotal').text = cart.totals.total.toFixed(2) + ' €';
        })
        .catch((error) => {
            console.error(error);
        });
}

Exploiter la puissance des datasets dans votre boutique Wix

Les datasets sont l'un des atouts majeurs de Velo. Ils permettent de stocker et de manipuler des données de manière structurée, ce qui est particulièrement utile pour une boutique en ligne.

1. Récupérer les informations produit depuis un dataset

import wixData from 'wix-data';

export function getProductDetails(productId) {
    return wixData.query('Products')
        .eq('_id', productId)
        .include('category')
        .find()
        .then((results) => {
            if (results.items.length > 0) {
                return results.items[0];
            } else {
                throw new Error('Produit non trouvé');
            }
        });
}

2. Stocker les informations client pour un checkout plus rapide

import wixData from 'wix-data';
import wixUsers from 'wix-users';

export function saveCustomerInfo(customerData) {
    const currentUser = wixUsers.currentUser;
    
    if (currentUser.loggedIn) {
        return wixData.query('CustomerProfiles')
            .eq('userId', currentUser.id)
            .find()
            .then((results) => {
                if (results.items.length > 0) {
                    // Mettre à jour le profil existant
                    return wixData.update('CustomerProfiles', {
                        ...results.items[0],
                        ...customerData,
                        lastUpdated: new Date()
                    });
                } else {
                    // Créer un nouveau profil
                    return wixData.insert('CustomerProfiles', {
                        userId: currentUser.id,
                        ...customerData,
                        created: new Date(),
                        lastUpdated: new Date()
                    });
                }
            });
    } else {
        // Gérer les utilisateurs non connectés
        // Par exemple, stocker temporairement dans le localStorage
        return Promise.resolve();
    }
}

Optimiser le processus de paiement

Le processus de paiement est l'étape finale et la plus critique du parcours d'achat. Une redirection fluide vers la page de paiement après l'ajout au panier peut considérablement améliorer les taux de conversion.

1. Redirection vers la page de paiement

import wixLocation from 'wix-location';
import wixStores from 'wix-stores';

export function redirectToCheckout() {
    wixStores.cart.getCurrentCart()
        .then((cart) => {
            if (cart.totals.quantity > 0) {
                // Rediriger vers la page de paiement
                wixLocation.to('/checkout');
            } else {
                // Afficher un message si le panier est vide
                $w('#emptyCartMessage').show();
            }
        });
}

2. Personnaliser l'expérience de paiement

Velo permet également de personnaliser l'expérience de paiement en fonction des informations client ou du contenu du panier :

import wixStores from 'wix-stores';
import wixData from 'wix-data';

$w.onReady(function () {
    // Vérifier si nous sommes sur la page de paiement
    if (wixLocation.path.includes('checkout')) {
        wixStores.cart.getCurrentCart()
            .then((cart) => {
                // Vérifier si le panier contient des produits éligibles à une promotion
                const hasPromoProducts = cart.lineItems.some(item => 
                    item.productName.includes('Promotion'));
                
                if (hasPromoProducts) {
                    // Afficher une bannière de promotion
                    $w('#promoCodeBanner').show();
                    $w('#promoCodeInput').show();
                }
                
                // Personnaliser en fonction du montant total
                if (cart.totals.total > 100) {
                    // Offrir la livraison gratuite
                    $w('#freeShippingMessage').show();
                }
            });
    }
});

Cas pratique : Retour d'expérience sur un projet e-commerce

Chez Platane, nous avons récemment accompagné le Festival Ouaille Note dans le développement de leur boutique en ligne. Le défi était de créer une expérience d'achat fluide et rapide, tout en maintenant des performances optimales pour le SEO.

En utilisant une approche headless avec Shopify et des technologies modernes comme Gatsby, TypeScript et TailwindCSS, nous avons pu créer une boutique ultra-optimisée qui a significativement amélioré les conversions. Les principes que nous avons appliqués sont similaires à ceux que nous venons de détailler pour Wix et Velo : une gestion efficace du panier, une utilisation intelligente des données, et un processus de paiement simplifié.

De même, pour Epictory, une plateforme de génération de posters basés sur des parcours Strava, nous avons développé un système de panier et de paiement intuitif qui a contribué au succès de cette startup innovante.

Bonnes pratiques pour votre boutique Wix avec Velo

Pour conclure, voici quelques bonnes pratiques à garder à l'esprit lorsque vous travaillez avec Wix et Velo pour votre boutique en ligne :

1. Testez régulièrement votre parcours d'achat : Assurez-vous que chaque étape fonctionne correctement, de l'ajout au panier jusqu'à la confirmation de commande.

2. Optimisez les performances : Velo peut être puissant, mais un code mal optimisé peut ralentir votre site. Utilisez les outils de débogage et surveillez les performances.

3. Sécurisez vos données : Lorsque vous manipulez des informations client et des paiements, la sécurité doit être une priorité absolue.

4. Documentez votre code : Si vous travaillez en équipe ou prévoyez de faire évoluer votre site, une bonne documentation vous fera gagner un temps précieux.

5. Restez à jour : Wix et Velo évoluent constamment. Suivez les mises à jour et les nouvelles fonctionnalités pour tirer le meilleur parti de la plateforme.

Besoin d'aide pour votre projet Wix/Velo ?

Que vous soyez bloqué sur la configuration de votre bouton "Ajouter au panier", la gestion de vos datasets, ou l'optimisation de votre processus de paiement, notre équipe d'experts peut vous aider à transformer votre boutique Wix en une véritable machine à convertir.

Chez Platane, nous combinons expertise technique et créativité pour développer des solutions sur mesure qui répondent précisément à vos besoins. Notre approche intègre les technologies de pointe, y compris l'intelligence artificielle générative, pour créer des expériences utilisateur exceptionnelles.

N'hésitez pas à prendre rendez-vous via notre formulaire de contact pour échanger sur votre projet. Nous serons ravis de mettre notre expertise au service de votre réussite en ligne et de vous aider à exploiter tout le potentiel de Wix et Velo pour votre commerce électronique.