Header - live

support-shopsettingscategory-amanda.myers

Support FAQ - running-a-non-profit-shop/ - Arsi

Ouvrir une boutique à but non lucratif

Vous pouvez tout à fait gérer une boutique Spreadshop à but non lucratif. Ce type de boutique est particulièrement intéressant pour les associations et organisations à but non lucratif qui ne sont pas autorisées à générer des bénéfices afin de ne pas perdre leur statut. En un clic, vous fixez votre marge à 0 € et êtes sûr de ne générer aucun bénéfice pour votre boutique. Pour ce faire, rendez-vous dans le menu Prix &amp; promos &gt; Prix boutique dans les paramétrages de votre boutique. Le prix de vente correspond ainsi au [prix de base](851a8125-ec5c-4e38-b134-78fd9382ce6a). Vous ne profiterez pas du [bonus sur les ventes](0d319a1f-ebda-4a72-9b92-8ada07e3c60f) et ne participerez pas aux coûts des offres promotionnelles. Plus d’informations sur l’imposition de vos gains dans [cet article](a2086ce8-b14e-4322-ac72-d70b7972ac4f).

Support FAQ - printing-costs-and-print-areas/ - Arsi

Coûts d’impression et zones d’impression

Le coût d’une zone d’impression est déjà compris dans le [prix de base](851a8125-ec5c-4e38-b134-78fd9382ce6a). Cela vaut pour tous les [procédés d'impression](1149715c-5013-4986-85bc-52e114cbecb3) proposés dans votre boutique. Impression numérique, impression plot (flex ou floc) ou thermo-sublimation, la première zone d’impression est toujours incluse dans le prix de vente de l’article.

Si vos clients ou vous ajoutez d’autres zones d’impression, le prix de vente augmentera de 4,50 € / CHF 5,00 (à partir du 1er août 2023 6,00 € / CHF 6,00) par zone d’impression supplémentaire. Ces coûts supplémentaires s’ajoutent simplement au prix de vente et n’ont aucune influence sur le montant de votre [rétribution](69fedaa8-1a53-4cde-8c11-c5434ddae1ec). Votre marge reste inchangée.

### Coûts d’impression justes

Peu importe le nombre de designs et textes que les client·e·s placent sur une zone d’impression. Nous tenons uniquement compte du nombre de zones d’impression et non du nombre total de designs. Exception : si vos clients ajoutent des designs via l’outil de personnalisation de votre boutique et sélectionnent des designs payants, leurs coûts s’ajouteront au prix de vente. Dans ce cas également, votre marge reste inchangée.

Support - website-integration-with-javascript - clbe

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](http://ogp.me/) 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.

Paramétrer la boutique

Ouvrir une boutique à but non lucratif

Coûts d’impression et zones d’impression

Intégration du Spreadshop avec JavaScript