Vous venez d’acquérir le module Configurateur visuel ou vous souhaitez découvrir ses fonctionnalités, bienvenue dans ce guide qui vous guidera pas à pas dans l’utilisation de votre logiciel.
Notez qu'une démo est accessible en ligne si vous souhaitez tester le module au préalable : Démo Module Configurateur Visuel
Créer le type d’image “thickbox_default”, appliqué au produit, avec une taille de 800x800 px
Veillez à activer le SSL sur tout le site
Ajouter les fichiers suivants :
/js/admin/scenes.js
/controllers/admin/AdminScenesController.php
/classes/Scene.php
/override/classes/Product.php
/override/controllers/admin/AdminScenesController.php
/override/controllers/admin/AdminTabsController.php
/adminxxx/themes/default/template/controllers/scenes/helpers/form/form.tpl
Définissez le paramètre de séparateur des attributs dans les liens des produits à “ , “ (Paramètres > Produits)
Installez les modules configurateurvisuel et cvjqueryext.
Les tailles d'images définies dans Prestashop (onglet Préférences, Images) doivent être définies comme suit :
thickbox-default : 800 x 800 px
Si il est nécéssaire de définir ce paramètre lorsque vous uploader des images de produits configurables, il vous est possible d'utiliser un paramètre différent lorsque vous uploader des images pour les produits non-configurables.
La déclinaison thickbox des images produits doit être présente pour la création des scènes. Si vous souhaitez créer des scènes sur des images produits insérées avant l'installation du module, pensez à générer les images thickbox_default :
Vous pouvez choisir d’afficher le module sur la page produit (remplacement) ou après celle-ci. Par défaut, le module est affiché sur la page produit. Si vous souhaitez conserver la page produit et que le module soit accessible grâce à un bouton 'Personnaliser', Il vous faudra modifier le fichier /modules/configurateurvisuel/swf/colorize.conf en définissant la valeur useProductPage à "native". Exemple :
(...)
"module": {
"useProductPage": "native"
(...)
Définissez la valeur sur false pour revenir à l’affichage sur la page produit.
Vous pouvez ajoutervous-mêmes vos polices (au format .ttf uniquement) en les uplodant dans le dossier /modules/cvjqueryext/lib/jquery-configurateurvisuel/css/fonts/
L'adresse du script de génération de la liste des polices est : www.votre site.com//modules/cvjqueryext/lib/jquery-configurateurvisuel/css/fonts/fontsLib.php?rebuild=true
Appelez le à chaque fois que vous modifiez la liste des polices, qui est générée automatiquement en fonction du contenu du dossier /fonts.
Vous pouvez modifier, et traduire les textes affichés dans le module (comme le panneau Personnalisation, les titres des onglets Images, Textes, Logos ...) via l'outil de traduction du BackOffice Prestashop :
Onglet Outils > Traductions > puis choisir Traductions de modules installés dans la liste déroulante "Modifier les traductions"
Vous pouvez modifiez le css du module en agissant sur ce fichier : /modules/cvjqueryext/css/cvjqueryext.css
Pour procéder à la désinstallation de votre module Configurateur Visuel :
Connectez-vous sur le Back Office de votre plateforme et cliquez sur l'onglet Module
Localisez l'encart "Autres Modules" dans la liste et cliquez dessus
Cliquez ensuite sur le bouton "Désinstaller"
Dans le backoffice (BO), allez dans le catalogue, puis cliquer sur "ajouter un nouveau produit".
Créer votre produit comme à votre habitude, en prenant soin de ne pas activer la personnalisation (native)
Tous les champs non cités dans cette documentation sont utilisables de la même façon que pour le reste de votre catalogue. Si vous êtes débutant en Prestashop, référez-vous à la documentation : https://doc.prestashop.com/
Utilisez l’onglet Caractéristiques du produit pour définir si le module doit s’afficher.
Définir la caractéristique CVHTML5 sur ON
Note : Supprimer la caractéristique du produit pour désactiver le module
Avant de passer au point suivant, veillez à bien enregistrer votre produit.
Le module Configurateur Visuel se base sur les images de vos produits pour afficher le support de personnalisation à vos internautes. La personnalisation en elle-même (ie. l'intégration d'un logo ou d'un texte) se base sur des zones.
A titre d'exemple, imaginons un t-shirt personnalisable sur sa face avant et sa face arrière : Ces 2 faces seront des images produits. Imaginons que la face arrière soit personnalisable entre les 2 épaules, cela voudra dire que l'image produit de la face arrière du t-shirt aura 1 seule zone personnalisable.
Vous pouvez gérer images & zones au travers de l'onglet Images de votre produit.
En gardant l'exemple du t-shirt présenté ci-dessus, ajoutons les 2 images : face avant et face arrière
Rendez-vous dans l'onglet image du votre produit
Ajoutez l'image de la face avant du t-shirt
Ré-itérez l'opération pour ajouter la face arrière du t-shirt
Rechargez la page (F5)
Pour ajouter une zone de personnalisation à la face arrière du t-shirt :
Cliquez sur le bouton "+" de la ligne correspondante à la face arrière du t-shirt
Après rechargement de la page, cliquer sur le bouton d'édition de la zone (crayon)
Dans la nouvelle fenetre : ,
utilisez la méthode du cliquer-déplacer sur l'image (face arrière) pour définir la zone de personnalisation
laissez les options type of zone & type of impact par defaut
veillez à cliquer sur le bouton "Add Zones"
si vous souhaitez ajoutez d'autres zones de personnalisation, réitérez les points a à c (en veillant à cliquer sur le bouton Add Zones pour chaque zone de personnalisation que vous souhaitez définir)
cliquez sur le bouton Save image Map(s)
Notes :
Il est possible d'ajouter autant de zone que vous souhaitez sur une image, il suffit pour cela de ré-itérer les opérations à partir du point 2.
Il n'est pas possible de modifier une zone, comme par exemple agrandir ou réduire sa taille : il vous faudra supprimer la zone puis en recréer une.
Pour supprimer toutes les zones de personnalisation d'une image produit, il vous suffit de cliquer sur le bouton "corbeille" de la ligne correspondante dans l'onlet Image.
Utilisez le générateur de déclinaisons (cf. 4.1). Prenez soins de supprimer les déclinaisons existantes si applicable.
Tous vos groupes d’attributs sont compatibles avec le module Configurateur Visuel, dans la limite des possibilités de Prestashop sur ce point !
Vous devez impérativement ajouter le groupe d’attributs designer-ref avec sa valeur DEFAULT à chaque produit personnalisable.
Pour gérer un impact de prix en fonction du nombre de faces marquées sur le produit (par exemple pour un t-shirt : face avant, face arrière, manche(s), ...etc) il vous faudra utiliser le groupe d’attributs spécial : nbespaces.
Cliquez sur le sous-onglet Attributs & Groupes (onglet Catalogue)
Ajoutez un groupe d'attributs 'nbespaces' (vous êtes libre de choisir le Nom Public, mais le Nom, doit impérativement être "nbespaces")
Ajoutez jusqu'à 4 déclinaisons liées au groupe 'nbespaces'
Prenez bien soin de toujours ajouter une déclinaison '0 espace' : le compte des zones seraient incorrect sans.
Ajoutez la caractéristique item_impact : scene au produit pour activer la fonctionnalité.
Il vous suffit ensuite d'utiliser le générateur de déclinaisons (cf. 4.1), en prenant soin de définir l’impact de prix en fonction du nombre de zone utilisées : le module Configurateur Visuel sélectionnera automatiquement le bon nombre de zone en fonction de la composition de l'internaute.
Le module Configurateur Visuel peut aussi vous permettre de gérer des augmentation de tarif en fonction du type de personnalisation proposé. Spécifiquement, cette option a été mise en place en imaginant qu'un logo pourrait être brodé ou simplement floqué sur une zone de personnalisation produit, procédé de personnalisation qui pourrait impliquer un coût supplémentaire.
Alliant les notion natives Prestashop™ d'attributs couplés à des personnalisation de type texte et/ou logo, cette option (payante) du module Configurateur Visuel vous permet de pouvoir gérer ce type d'impact sur le prix final produit. Pour avoir plus d'informations concernant la configuration de cette option, rendez-vous sur la documentation Module Broderie - Gestion des Impacts de prix.
Lien d'achat : http://www.configurateurvisuel.fr/fr/plug-ins/388-plug-in-impact-prix-broderie-.html
Le module Configurateur Visuel peut aussi vous permettre de pré-saisir des contenus (texte ou logo) dans vos zones de personnalisation. Spécifiquement, cette option a été mise en place en imaginant qu'un imprimeur pourrait proposer la réalisation de carte de visites au travers de gabarits pré-remplis avec du texte type "Ici votre nom", "Ici votre logo"...etc.
Pour avoir plus d'informations concernant la configuration de cette option (payante), rendez-vous sur la document Module CustomZones.
Lien d'achat : http://www.configurateurvisuel.fr/fr/plug-ins/389-plug-in-zones-predefinies.html
Avec votre client ftp, uploadez vos images au format jpg ou png dans le dossier /modules/cvjqueryext/lib/jquery-configurateurvisuel/img/userlib/
Vous pouvez utiliser des dossiers pour classer et organiser vos images (mais pas de sous-sous dossiers)
Par défaut le module effectue une colorisation automatique des produits, en utilisant les hexa de couleurs définis via les attributs.
Une image PNG transparent en noir et blanc doit donc etre utilisée.
Dans l’administration, rendez-vous dans l’onglet Commandes. Si la commande contient des produits personnalisés, les textes et images utilisés par le client sont affichés.
Pour récupérer les fichiers uploadés, cliquer dessus, ou retrouver les directement dans le ftp : /modules/configurateurvisuel/upload/users/
Vous avez également une version PNG HD à disposition.