Menu

Intégration via JavaScript

Vous pouvez intégrer votre Spreadshop à votre site Web existant.

Vous devez pour cela suivre quelques étapes et avoir quelques connaissances en HTML, CSS, JavaScript et avoir accès au code source de votre page.

Où afficher votre boutique ?

Afin de déterminer la position de votre boutique sur votre page, ajoutez dans la page HTML une balise div à l’endroit voulu avec un identifiant (à choisir librement). Tout ce que vous indiquez dans la balise div s’affichera jusqu’au chargement de la boutique. Ensuite, cela disparaîtra. Pour cette raison, nous vous 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 votre boutique se charge, ajoutez 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 votre boutique. Ils se trouvent dans le menu « Canaux de vente »
  • prefix string/url
    Le domaine complet de votre 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 vous avez défini au préalable pour la balise div (voir plus haut)

Dernière pièce du puzzle : le script

Vous devez encore ajouter un lien vers le script qui permet de charger votre boutique. Le mieux est de le placer quelque part sous votre 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 votre boutique à votre site Web, nous ne définissons pas de police de caractères spécifique pour les boutiques intégrées. Cela signifie que vous devez choisir votre 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 vous pouvez configurer.

  • locale string
    Si vous avez une boutique internationale, vous pouvez 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 vous souhaitez désactiver cette fonctionnalité, utilisez le paramètre false.
  • usePushState booelan (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). Vous pouvez 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 votre serveur.
  • startToken string
    Chemin vers la page de votre boutique devant être affichée en page d’accueil.

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

Votre 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 vous 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 votre boutique, c’est sûrement parce que MooTools est en mode de compatibilité.

Boutique intégrée plusieurs fois

Nous vous 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.)

Veuillez utiliser l’encodage UTF-8. La plupart des systèmes de gestion de contenu permettent de changer l’encodage. Si vous avez accès à vos propres fichiers HTML, utilisez l’encodage UTF-8 et assurez-vous que la balise <meta charset=“UTF-8“> est présente dans l’en-tête.

Tutoriel

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

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