Setup guide for Text Designer module (Prestashop)

Product setup

Create a new product
Add a new regular Prestashop product that will host the module.
Activate the module
This is done by setting up 3 product's features :
- Configurateurvisuel : TD
- CustomZones : ON
- CVHTML5 : TD
If one of the feature doesn't existe please create it, with its value, and with exact same spelling (caps matters).
Add Color Combinations
In the combinations tab, use the Product Combination Generator to add the desired colors (that must be from an color attribute group).
Product Images & Text options
Lastly, you need to setup the zone where the text will show : open the image tab from the product.

The first image, that needs to be the product cover image, is an image of your choice that will only be shown in the category pages of your site.
The second image needs to be this image : http://www.configurateurvisuel.fr/cvtools/textdesigner/972x238-textdesigner.png
It is a transparent .png with appropriate dimensions.

Once the second image is uploaded, click the + icon from the Zone column to enter the zone setup.
First draw a zone (its position and size doesn't matter) in the blank rectangle,

Then select 'Input text Multiple' as zone type
Choose the max number of lines to show (input Line count)
Choose the defaut font size (Size)
Choose the max number of characters per line (Max. width). The default is 70.

The other options are irrelevant for Text Designer.

Once done, click update zone, wait for the page to reload and click save.

Your product is now setup !

Add your fonts

The module use standard .ttf fonts files.

You can try to convert non TTF files to TTF using converters (like the ones on https://everythingfonts.com/), but always double check the looks of the font in the module.

To add or remove fonts, simply load or delete them on your FTP in /modules/cvtextdesigner/lib/jquery-configurateurvisuel/css/fonts/

Then call the update font list script at http://yourserver/modules/cvtextdesigner/lib/jquery-configurateurvisuel/css/fonts/fontsLib.php

Be sure to use fonts with a valid licence.

A good source for free fonts is http://www.fontsquirrel.com/

Make sure the fonts you are using include your langage special characters (like accents)

Translations

Translations are made like usual in your Translations tab of the Backoffice.

You need to select Installed modules, either core translations or theme translations.

There is an additionnal translation file for your language located in /modules/cvtextdesigner/lib/jquery-configurateurvisuel/i18n/

Colors

You need to add colors to the Text Designer product. To do so, add Prestashop's color attributes from the Combinations tab of the product edit page.

Price per M²

The price is calculated per square meter, based on the user's dimensions.

The m² price is defined in /modules/cvtextdesigner/lib/jquery-configurateurvisuel/js/static.json as :

priceM2

"priceM2": "150",

You can edit the price value here (150 in the above example), be sure to keep the " " and the ,

Price per color material

If some of your materials (like gold or mirror adhesives) are more expensive than the base materials, you can add an impact on the price per m² using Prestashop's attributes impact.

On the product edit page (in the backoffice), go tto the Combinations tab and enter the Product Combination Generator.

Add price impact on the colors of your choice : the impact will be added to the price m² value.

Minimum Price

You can define a minimum price for products in static.json :

pMin

"pMin": "3.33",

Min and Maximum height

you can defined the minimum height for one line in static.json :

heightMin

"heightMin": "3",

and the maximum height for any number of lines:

heightMax

"heightMax": "250",

Stencil (pochoir) option

You can activate the stencil option by adding the sencil product feature to the product and set its value to ON

Price factor option

You can activate the price option by adding the price_factor product feature to the product and set its value to ON.

The factor is defined in static.json :

pPercentage

 "pPercentage": "1.2",

Browser not supported