Manuel Sticker Designer HTML5

Introduction

Le module de colorisation automatique StickerDesigner vous permet d'appliquer différentes couleurs à vos produits, sans nécessiter de créer les images correspondantes. Un gain de temps très appréciable si vous gérez de multiples variantes de couleurs ! Sticker Designer permet également à vos clients d’apprécier vos produits en situation, et grâce au images de situations fournies (en option), d’atteindre un photo-réalisme sans précédent !

Enfin, fonction phare, bénéficiez du calcul de prix dynamique, grâce à notre procédé exclusif.

Cliquez ici pour voir la démo Sticker Dersigner (1.6)

Demo 1.7

Il vous suffit d'activer le module sur les produits de votre choix.

Le module applique automatiquement les couleurs sélectionnées, à partir de l’image produit (au format png transparent). Plus besoin de perdre un temps précieux à créer vos images et à les enregistrer dans le backoffice, gérer enfin autant de déclinaisons couleurs que vous le souhaitez !

Fonctions

  • Coloriser vos produits en 1 clic !

  • Prévisualisation Photo-réaliste

  • Calcul automatique du prix en fonction de la dimension choisie

  • Prévisualisation de l'inversion

  • Prévisualisation de la couleur de fond (configurable)

  • Support de la transparence des fichiers PNG 

Installation

Dans le panneau d’administration de PrestaShop, sélectionnez l’onglet Modules, puis cliquez sur « Ajouter un nouveau module » :

Cliquez sur « Parcourir » et cherchez l’archive du module. Chargez le module.

L’installation effectue automatiquement pour vous les tâches suivantes :

  • Création de l’onglet Modules > Sticker Designer

  • Création des nouvelles caractérisitiques qui servent à indiquer quel produit utilise le module Sticker Designer

  • Création du nouveau groupe d’attribut « Orientation » qui permet de choisir entre Normal et Inverse

Désinstallation

La désinstallation du module supprime l’onglet Modules > Sticker Designer mais ne supprime pas la caractéristique et le groupe « Orientation » créés.

Ajouter un produit colorizable

Dans le backoffice (BO), allez dans le catalogue, puis cliquer sur ajouter un nouveau produit.

1. Onglet Infos – Définir un produit comme colorisable

Pour différencier vos produits classiques des produits à coloriser, on utilise les caractéristiques :

  • Stickerdesigner qui doit être à SD

  • sdVersion qui doit être à HTML

D'autres caractéristiques sont nécessaires au fonctionnement du module :

  • wallWidth : définit la largeur de la pièce en cm. L'image du produit sera affiché en proportion. (valeur exemple : 231)

  • sdwidth : définit la largeur par défaut de l'image du produit, et par conséquent le prix affiché. (valeur exemple : 193)

Caractéristiques optionnelles :

  • maxWidth et minWidth : tailles maximales et minimales en cm pour l'image produit

  • sdStickerX et sdStickerY : décalage en pixel de l'image par rapport à sa position d’origine.

2. Onglet Images - Ajouter l’image à coloriser

2.1 Format d’images

Pour être colorisable, votre image doit être au format PNG transparent.

Voici une exemple correct :

Le fond bleu n’est pas dans l’image, il apparait par transparence.

Et un exemple incorrect :

Le fond de l’image n’est pas transparent : l'éléphant ne peut pas être colorisé indépendamment du fond blanc.

 

2.2 Images de situation et image produit

L’ordre dans lequel vous ajoutez les images de situation et le produit est important.

Veuillez vous référez à l’exemple suivant :

  1. image de couverture : affichée dans le catalogue, non affichée par le module.

  2. image de situation -> le mur qui sera colorisé

  3. image de situation -> les éléments de décoration (non colorisé)

  4. le produit (colorisé par les couleurs choisies dans les déclinaisons)

Cochez la case : Utiliser comme image par défaut ? pour l'image non colorisable à afficher sur les pages catégories.

L’image produit transparente est toujours la dernière dans l’ordre d’affichage des images.

3. Onglet Déclinaisons

3.1 Ajoutez les attributs spéciaux

Pour fonctionner, Sticker Designer fait appel à des attributes spéciaux, qui sont automatiquement créés lors de l’installation du module.

Si les attributs ne sont pas présents, vous pouvez les créer comme suit :

Créer le groupe d’attributs pour les matériaux (supports) que vous proposez à l’impression. Exemple :

Créer le groupe d’attribut spécial ‘surface’.


Celui-ci ne sera pas affiché sur la page produit, il permet au système de calcul de prix dynamique de fonctionner.

Ajouter une seule déclinaison, que vous pouvez nommez ‘DEFAUT’ par exemple :


3.2 Définir les tranches de prix

Ouvrez votre fichier colorize.conf dans un éditeur de texte, ou avec un éditeur JSON :

/modules/stickerdesigner/swf/colorize.conf

Vous allez éditer les valeurs (en gras) du groupe « dynValues », pour chaque attribut Matière :

  "attribute_287": {  > le nom doit être formaté ainsi, avec le numéro de l'attribut + son id

  "id": "287",   > ID attribut

  "basem2": "7",

"minWidth": 15, > largeur minimale

"maxWidth": -1, > largeur maximale (-1 pour infini)

"minHeight": 15, > idem

"maxHeight": -1, > idem

"priceRanges":[
{
"step":0, > la surface de départ, doit être 0
"price":1000 > le prix au m2 HT de cette tranche de prix
},
{
"step":0.5,  > la surface de cette plage
"price":450  > le prix au m2 HT de cette tranche de prix
},
{
"step":10000000000, > la surface maximale de cette plage (toujours choisir un nombre "infini"
"price":100
}
]

3.3 Ajoutez vos couleurs !

Utilisez le générateur de déclinaisons. Prenez soins de supprimer les déclinaisons existantes si nécessaire.

Et cliquer sur “Generate”.

  

4. That’s all Folks !

Félicitations, vous venez de créer un produit colorisable !

 

5. Configuration (optionnelle)

5.1 Orientation

L’orientation est gérée en tant que déclinaison du produit. Les deux choix Inverse et Normal sont créés lors de l’installation.

contact@configuraeurvisuel.fr



© 2012-2023 Mikarama SARL - Tous droits réservés, reproduction et redistribution interdite