Menu

Intégration de la boutique avec JavaScript

Tu peux intégrer ton Spreadshop à ton site Web existant.

Tu dois pour cela suivre quelques étapes et avoir quelques connaissances en HTML, CSS, JavaScript et avoir accès au code source de ta page.

Où afficher ta boutique ?

Afin de déterminer la position de ta boutique sur ta page, ajoute dans la page HTML une balise div à l’endroit voulu avec un identifiant (à choisir librement). Tout ce que tu indiques dans la balise div s’affichera jusqu’au chargement de la boutique. Ensuite, cela disparaîtra. Pour cette raison, nous te conseillons d’utiliser l’espace entre les balises div pour écrire le message « Spreadshop en cours de chargement ».

<div id="shop">Spreadshop en cours de chargement...</div>

Configurer

Pour que ta boutique se charge, ajoute comme objet de configuration spread_shop_config dans JavaScript, qui doit être disponible dans window scope.

Cela doit ressembler à ça :

var spread_shop_config = {
	shopName: 'goats',
	prefix: 'https://shop.spreadshirt.de',
	baseId: 'shop',
};

Les paramètres nécessaires :

  • shopName string
    Le nom ou l’identifiant de ta boutique. Ils se trouvent dans le menu « Canaux de vente »
  • prefix string/url
    Le domaine complet de ta boutique (tout ce qui se trouve avant la barre oblique, p. ex. https://shop.spreadshirt.fr ou https://shop.spreadshirt.co.uk)
  • baseId string
    L’identifiant que tu as défini au préalable pour la balise div (voir plus haut)

Dernière pièce du puzzle : le script

Tu dois encore ajouter un lien vers le script qui permet de charger votre boutique. Le mieux est de le placer quelque part sous ta configuration.

Pour les boutiques européennes :

<script type="text/javascript" src="https://shop.spreadshirt.net/js/shopclient.nocache.js"></script>

Pour les boutiques nord-américaines :

<script type="text/javascript" src="https://shop.spreadshirt.com/js/shopclient.nocache.js"></script>

Assemblage des éléments

Le tout devrait ressembler à ça :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Integrated Shop Test</title>
    </head>
    <body>
        <div id="shop">Spreadshop en cours de chargement...</div>
        <script>
            var spread_shop_config = {
              prefix: 'https://shop.spreadshirt.de',
              shopName: 'goats',
              baseId: 'shop',
            };
        </script>
        <script type="text/javascript" src="https://shop.spreadshirt.net/js/shopclient.nocache.js"></script>
    </body>
</html>
</code>

Polices de caractères

Afin d’adapter ta boutique à ton site Web, nous ne définissons pas de police de caractères spécifique pour les boutiques intégrées. Cela signifie que tu dois choisir ta police, soit dans la balise body, dans l’une des balises div ou soit dans la classe container du Spreadshop.

Adapter sa boutique pour les pros

Il existe d’autres paramètres que tu peux configurer.

  • locale string
    Si tu as une boutique internationale, tu peux changer la langue et la monnaie des boutiques intégrées avec les paramètres ci-dessous.
    Voici les valeurs disponibles :
    Plateforme Symbole Langue Monnaie
    EU da_DK Danois Couronne danoise (kr)
    EU en_EU Anglais Euro (€)
    EU en_GB Anglais Livre sterling (£)
    EU en_IE Anglais Euro (€)
    EU de_DE Allemand Euro (€)
    EU de_AT Allemand Euro (€)
    EU de_CH Allemand Franc suisse (CHF)
    EU es_ES Espagnol Euro (€)
    EU fi_FI Finnois Euro (€)
    EU fr_BE Français Euro (€)
    EU fr_CH Français Franc suisse (CHF)
    EU fr_FR Français Euro (€)
    EU it_CH Italien Franc suisse (CHF)
    EU it_IT Italien Euro (€)
    EU nl_BE Hollandais Euro (€)
    EU nl_NL Hollandais Euro (€)
    EU no_NO Norvégien Couronne norvégienne (kr)
    EU pl_PL Polonais Euro (€)
    EU sv_SE Suédois Couronne suédoise (kr)
    États-Unis en_US Anglais Dollar ($)
    États-Unis en_CA Anglais Dollar ($)
    États-Unis en_AU Anglais Dollar australien (AUD$)
    États-Unis fr_CA Français Dollar canadien (CAD$)
  • updateMetadata boolean (default: true)
    Si elles ne sont pas définies, la boutique intégrée modifie les métadonnées pertinentes pour le référencement dans l’en-tête de la page (title, description et seoIndex ainsi qu’OpenGraph et Twitter Card tags). Si tu souhaites désactiver cette fonctionnalité, utilise le paramètre false.
  • usePushState boolean (default: false)
    Par défaut pour la navigation des boutiques intégrées, des Hashbang-URL se créent (.../shop/#!/männer+t-shirts?q=P24). Tu peux l’éviter en utilisant le paramètre true. Ces paramètres sont pour les experts car ils nécessitent des modifications dans le fichier .htaccess de ton serveur.
  • startToken string
    Chemin vers la page de ta boutique devant être affichée en page d’accueil.
  • swipeMenu boolean (default: false)
    Si vous utilisez un menu latéral pour votre boutique intégrée, vous pouvez le désactiver avec ce paramètre et utiliser à la place un menu glissant. Pour ce faire, utilisez la variable true.

Exemple

Voici un exemple utilisant tous les paramètres disponibles :

var spread_shop_config = {
    shopName: 'goats',
    prefix: 'https://shop.spreadshirt.de',
    baseId: 'shop',
    locale: 'de_DE',
    startToken: 'men+t-shirts?q=P24',
    usePushState: false,
    updateMetadata: true,
};

Erreurs fréquentes et causes

DOCTYPE manquant

Ton fichier HTML doit commencer par la balise <!DOCTYPE html> car le Spreadshop a été conçu pour le HTML5. Sans cette balise, il peut y avoir des erreurs d’affichage et de mise en page. Dans la boutique intégrée, une bannière bien visible t’avertira que la balise manque.

Boutons et liens défectueux

Le Spreadshop utilise React.js, ce qui peut causer des erreurs avec MooTools en mode de compatibilité. S’il est impossible de cliquer sur quoi que ce soit dans ta boutique, c’est sûrement parce que MooTools est en mode de compatibilité.

Boutique intégrée plusieurs fois

Nous te déconseillons d’intégrer la boutique plusieurs fois sur la même page. Cela va entraver le bon fonctionnement de la page.

Caractères spéciaux inhabituels (« Â » p. ex.)

Merci d’utiliser l’encodage UTF-8. La plupart des systèmes de gestion de contenu permettent de changer l’encodage. Si tu as accès à tes propres fichiers HTML, utilise l’encodage UTF-8 et assure-toi que la balise <meta charset=“UTF-8“> est présente dans l’en-tête.

Tutoriel

Regarde notre vidéo (en anglais) sur l’intégration d’une boutique :

Cet article vous a-t-il été utile ?