Annexe Fichier JSON Colorize Pro Plus HTML

Vous avez créer votre produit et vos images sont prêtes ?

Parfait ! il ne vous reste plus que le fichier .json à créer.

Basez vous sur le fichier exemple /modules/colorize/swf/model1_example.json.

 

Editez un fichier json

Vous pouvez ouvrir ce fichier avec un editeur de texte, comme NotePad++ (PC) ou Brackets (Mac) (evitez word!). Le format Json ne supporte pas qu'on lui supprime une virgule ou une accolade, pour verifier que votre fichier est valide, copiez-collez son contenu sur cette page http://jsonviewer.stack.hu/.

Si l'onglet 'Viewer'  s'affiche, votre fichier est valide ! Vous pouvez le recopiez dans votre editeur de texte pour le sauvegarder sur le FTP.

 

Le fichier se compose de 3 parties :

colorize_views_data : défini les différentes 'vues' du produit

colorize_zones_data : sont définies ici les zones à coloriser, leur nom, et le groupe de couleurs à leur appliquer.

colorize_colors_data : les différents groupes de couleurs à appliquer à chaque zone

 

1. Défintion des vues

 

Pour un produit avec 2 vues, une de face et une de coté, voici les données nécessaires :

 

colorize_views_data
{
  "colorize_views_data": [
    {
      "name": "vue de face",
      "id": "1"
    },
    {
      "name": "vue de cote",
      "id": "2"
    }
  ],

La valeur "name" n'est pas affiché, mais rend la lecture du fichier plus claire.

La valeur "id" doit correpondre à l'ordre des vues de l'onglet images de Prestashop, et sera utilisée dans la définition des zones.

2. Définition des zones de colorisation

Pour ce même produit, nous avons 3 zones de colorisation, voici comment les composer :

 

colorize_zones_data
"colorize_zones_data": {
    "zone1": {
      "id": "zone1",
      "name": "Nom de la zone 1",
      "colorGroup": "colorGroup1",
      "overlay": [
        {
          "id": "view1",
          "source": "mod1-3quarts-bride2_overlay.png"
        },
        {
          "id": "view2",
          "source": "mod1-profil-bride2.png"
        }
      ]
    },
    "zone2": {
      "id": "zone2",
      "name": "Nom de la zone 2",
      "colorGroup": "colorGroup1",
      "overlay": [
        {
          "id": "view1",
          "source": "mod1-3quarts-bride1_overlay.png"
        },
        {
          "id": "view2",
          "source": "mod1-profil-bride1.png"
        }
      ]
    },
    "zone3": {
      "id": "zone3",
      "name": "ma zone 3",
      "colorGroup": "anotherGroup",
      "overlay": [
        {
          "id": "view1",
          "source": "mod1-3quarts-passant1_overlay.png"
        },
        {
          "id": "view2",
          "source": "mod1-profil-passant1.png"
        }
      ]
    }
  },

Les valeurs "zone1" et "id", permettent de différencier les zones (utilisez un nom unique pour chaque zone)

La valeur "name" est le nom de la zone tel qu'il sera affiché dans le module.

La valeur "colorGroup" est le nom du groupe de couleur défini dans colorize_colors_data

"overlay" :

Les overlay sont les png transparents que vous avez enregistrés à l'étape précédente.

Pour chaque vue définie dans colorize_views_data, vous indiquez le fichier à utiliser dans la valeur du champ "source"

 

3. Groupe de couleurs

Enfin, il vous reste plus qu'à appliquer des couleurs aux zones.

 

colorize_colors_data
 "colorize_colors_data": {
    "colorGroup1": [
      {
        "name": "marron foncé",
        "hex": "#421b1c"
      },
      {
        "name": "jaune moutarde",
        "hex": "#ce9605"
      },
      {
        "name": "blanc",
        "hex": "#f0f1f5"
      }
    ],
    "anotherGroup": [
      {
        "name": "marron foncé",
        "hex": "#421b1c"
      },
      {
        "name": "jaune moutarde",
        "hex": "",
        "source": "940_0013_jaune_moutarde.jpg",
        "thumb": "25_0013_jaune_moutarde.jpg"
      },
      {
        "name": "mauve",
        "hex": "",
        "source": "940_0000_mauve.jpg",
        "thumb": "940_0000_mauve.jpg"
      }
    ]
  }
}

"colorGroup1" doit corresponde au nom que vous avez indiqué dans colorize_zones_data > "colorGroup". C'est le groupe de couleur qui sera affecté à cette zone.

"name" est le nom de la couleur telle qu'il apparaitra dans le module et le panier.

Couleurs "hexa"

"hex" est la valeur hexadécimale de la couleur (pensez à bien conservez le #)

Textures

Vous pouvez également appliquer des textures plutôt que des couleurs.

Dans ce cas, laissez hex vide, comme la couleur jaune moutarde, et inserer le nom de fichiers :

"source" : le nom d'un fichier de texture, de la meme taille que les images du module

"thumb' le nom d'un fichier de vignette pour cette texture (taille 25px x 25px)

Ces 2 fichiers doivent etre placés dans le dossier /modules/colorize/swf/colors/

 

Bravo, la configuration est terminée !