Paramétrer la boutique

Intégration du Spreadshop avec JavaScript

Nous vous montrons ici comment intégrer votre Spreadshop à votre site Internet. Vous devez avoir des connaissances en HTML, CSS, JavaScript et accès au code source de votre site Internet.

Où afficher votre boutique ?

Choisissez où dans votre site vous souhaitez afficher votre Spreadshop. Ajoutez dans le fichier HTML un conteneur générique div à l’endroit correspondant. L’intégration de votre Spreadshop s’effectuera dans ce conteneur. Choisissez librement un identifiant.

Tout ce que vous indiquez dans le conteneur div s’affichera jusqu’au chargement de la boutique. Pour cette raison, nous vous conseillons d’utiliser l’espace entre les balises div pour écrire un message du genre « Spreadshop en cours de chargement ».

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

Configurer

Pour que votre boutique se charge, ajoutez spread_shop_config dans la variable JavaScript correspondante. Vous devez placer spread_shop_config dans « window scope».

Cela doit ressembler à ça :

var spread_shop_config = {
    shopName: 'goats',
    prefix: 'https://SHOPNAME.myspreadshop.fr',
    baseId: 'shop',
};

Afin que la configuration puisse se charger, vous devez ajouter le paramètre suivant :

shopName string
Le nom ou l’identifiant de ta boutique. Celui-ci est disponible dans l’espace partenaire.
prefix string/url
Le domaine complet de votre boutique. C’est-à-dire, avec tout ce qui se trouve avant la barre oblique, p. ex. https://SHOPNAME.myspreadshop.fr ou https://SHOPNAME.myspreadshop.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

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. En fonction de la plateforme sur laquelle votre boutique est hébergée, ajoutez les codes correspondants :

Pour les boutiques européennes :

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

Pour les boutiques nord-américaines :

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

Assemblage des éléments

Voici un exemple complet :

<!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://SHOPNAME.myspreadshop.de',
              shopName: 'goats',
              baseId: 'shop',
            };
        </script>
        <script type="text/javascript" src="https://SHOPNAME.myspreadshop.net/js/shopclient.nocache.js"></script>
    </body>
</html>

Polices de caractères

Afin d’adapter votre boutique à votre site Internet, 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 d’une des balises div ou soit dans le conteneur du Spreadshop.

Adaptations possibles pour les experts

Vous pouvez configurer d’autres paramètres.

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 head 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 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). 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.
pushStateBaseUrl
Pertinent seulement si vous utilisez déjà « usePushState » (= true), un « redirect » vers votre Spreadshop ou souhaitez intégrer votre boutique à différents endroits. Pour ce faire, définissez le point d'entrée du site web intégré à partir duquel votre boutique doit être raccordée.
startToken string
Avec ce chemin, déterminez quelle page de votre boutique sera affichée en page d'accueil.
swipeMenu boolean (default: false)
Si votre page intégrée a déjà un menu hamburger, désactivez celui de votre Spreadshop. Modifiez ces paramètres et utilisez à la place un menu coulissant. Pour ce faire, utilisez la variable true.

Exemple pour les plus avancés

Voici un exemple utilisant tous les paramètres disponibles :

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

Erreurs fréquentes et leurs causes

DOCTYPE manquant

Votre fichier HTML doit commencer par la balise <!DOCTYPE html> car 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

S’il est impossible de cliquer sur quoi que ce soit dans votre boutique, c’est sûrement à cause du mode de compatibilité de MooTools. Le Spreadshop utilise React.js, ce qui peut interférer avec MooTools en mode de compatibilité.

Boutique intégrée plusieurs fois

Nous vous déconseillons fortement d’intégrer plusieurs fois la boutique sur le même site.

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 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 head.

Message « DOCTYPE missing » pour les sites créés avec Weebly

En règle générale, ce message d’erreur n’apparaît que dans l’éditeur Weebly et peut être ignoré. L’intégration de votre Spreadshop est quand même opérationnelle lorsque vous appliquez les modifications.

L’intégration ne fonctionne pas avec un site GoDaddy

Pour le moment, il n’est pas possible d’intégrer la boutique à un site créé avec GoDaddy.

Twitter

Facebook