Dossier de ressources DEV pour le projet Zazzo

0_Zazzo.md

Installation of Pillow Generator module

Complete install guides can also be found on Youtube:

• for a custom module: https://www.youtube.com/watch?v=CslAqRRutMg
• for a custom theme: https://www.youtube.com/watch?v=-4VRTB0qOZY

Create database on the admin panel

Parameters :

• dbhost: zazzopag.mysql.db.internal
• dbname: zazzopag_eshop
• dbuser: zazzopag_presta
• dbpass: [..]

Test connection to database from server:

$ mysql -h zazzopag.mysql.db.internal -u zazzopag_presta -p
mysql> show databases;
  +--------------------+
  | Database           |
  +--------------------+
  | information_schema |
  | zazzopag_eshop     |
  +--------------------+

Install Prestashop CMS

Get the code:

$ wget https://download.prestashop.com/download/releases/prestashop_1.6.1.7.zip
$ unzip prestashop_1.6.1.7.zip -d www/zazzo.ch/

Launch the autoinstallation from http://zazzo.ch/ with database parameters:

• dbhost: zazzopag.mysql.db.internal
• dbname: zazzopag_eshop
• dbuser: zazzopag_presta
• dbpass: [..]
• prefix: ps_

Secure installation by removing install foler and renaming admin:

$ rm -rf install/
$ mv admin/ adminltr74be

The backoffice is now accessible from http://zazzo.ch/adminltr74be/.

Configure Prestashop

The default installation comes with dummy products and modules that have to be disactivated :

Desactivate the demo mode.

Desactivate following modules :

• Banner block
• Categories block
• Contact information block
• CMS block
• Facebook Like Box block
• Featured products on the homepage
• Image slider for your homepage
• New products block
• Newsletter block
• Product payment logos block
• Social networking block
• Social sharing
• Top-sellers block

Install Custom module

Get the source code

Generate public key on server if doesn't exist yet :

$  ssh-keygen -t rsa -b 4096 -C "zazzo@prod"

and allow the key on repository.

Clone the code:

$ git clone git@bitbucket.org:Plup/zazzo-prestashop.git /tmp/zazzo
$ mv /tmp/zazzo/* /tmp/zazzo/.* ~/www/zazzo.ch/

Activate the module

In Modules / Front office features:

• activate Pillow Generator module

In Preferences / Themes:

• add new theme
• create a new theme :

..- Name: Zazzo ..- Default colums: no ..- Theme directory: zazzo ..- Copy missing files from: default-bootstrap ..- Responsive: yes

• activate Zazzo theme

In Module / Theme Configurator:

• disable everything

You have to install "zazzo" theme wich contains:

Files paths

Homepage

• /themes/zazzo/header.tpl
• /themes/zazzo/index.tpl
• /themes/zazzo/sass/modules/pillowgenerator/zazzo.scss
• /modules/pillowgenerator/views/front/homepage.tpl
• /themes/zazzo/js/modules/pillowgenerator/homepage.js

Application

SASS & CSS

• /themes/zazzo/product.tpl
• /themes/zazzo/sass/vendor/bourbon/
• /themes/zazzo/sass/vendor/susy/
• /themes/zazzo/sass/modules/pillowgenerator/main.scss

JS

• /themes/zazzo/js/modules/pillowgenerator/main.js
• /themes/zazzo/js/modules/pillowgenerator/models.js
• /themes/zazzo/js/modules/pillowgenerator/vendor

Shop configuration

Define Sizes

The Pillow Generator module rely on Size attributes which have to be define by administrator.

• Size The "Size" attribute takes multiple values as the size names ("30x30", "L",...)

Create Fabrics

A specific menu in Catalog let the administrator defines all the fabrics available in the Shop.

### Create Products

The module Pillow Generator is an extension of the Prestashop products. It allows administrator to define products as it is in the prestashop core but few addionnal options needs to be specified in order to make the generator work correctly.

The menu Pillow Generator needs to be filled with :

• a SVG model of the pillow
• the maximum of fabrics allowed for this product
• add all the associations of Sizes, Fabrics and Prices for this product.

General constraints

Images

• The fabrics image should be generated in .jpg extension
• The fabrics image must be seamless
• The product models should be generated in .svg

Svg creation

The various svg elements must be named as follow:

• The FRONT layer: id="g-front"
• The BACK layer: id="g-back"
• The FRONT CENTRAL path: id="pillow-front"
• The FRONT SIDES path: id="pillow-sides-front"
• The BACK SIDES path: id="pillow-sides-back"
• The BACK CENTRAL path: id="pillow-back"

1_variables_smarty.php

## Liste des variables Smarty pour Prestashop


### $category
---
 - $category->name
 - $category->description
 - $category->id_image
 - $category->link_rewrite
 - $category->id
 - $category->id_parent
 - $category->active
 - $category->position
 - $category->level_depth
 - $category->nleft
 - $category->nright
 - $category->link_rewrite
 - $category->meta_title
 - $category->meta_keywords
 - $category->meta_description
 - $category->date_add
 - $category->date_upd
 - $subcategory

 - $subcategory.name
 - $subcategory.description
 - $subcategory.link_rewrite
 - $subcategory.id_category
 
 
### $product
---
 - $product->category
 - $product->reduction_to
 - $product->reduction_from
 - $product.category
 - $product.name
 - $product.description
 - $product.description_short
 - $product.link_rewrite
 - $product.id_product_attribute
 - $product.id_product
 
### product.available_for_order
---
 - $product.price
 - $product.price_tax_exc
 - $product.reduction_percent
 - $product.price_without_reduction

### $conf
---
 - $conf.PS_SHOP_ADDR1
 - $conf.PS_SHOP_ADDR2
 - $conf.PS_SHOP_CITY
 - $conf.PS_SHOP_CODE
 - $conf.PS_SHOP_COUNTRY
 - $conf.PS_SHOP_DETAILS
 - $conf.PS_SHOP_NAME

### Globals
---

 - base_dir (root folder of your shop)
 - $base_dir_ssl (root folder of your shop using HTTPS protocol)
 - $content_dir (root folder of your shop depending on the SSL settings)
 - $img_ps_dir (root folder containing images “/img/”)
 - $img_dir (images folder in your current theme directory)
 - $css_dir (css folder inside the current theme folder)
 - $js_dir (JavaScript inside the theme folder)
 - $tpl_dir (theme root folder)
 - $modules_dir (modules root folder)
 - $mail_dir (mail templates root folder)
 - $lang_iso (current language ISO code)
 - $come_from (previous page address [absolute])
 - $shop_name (your specified shop name)
 - $cart_qties (total number of products in the cart)
 - $cart (shopping cart contents)
 - $currencies (pulls available currencies)
 - $id_currency_cookie (selected currency id [cookie dependent])
 - $currency (active currency)
 - $cookie (active cookie)
 - $languages (grabs available languages)
 - $logged (checks whether users is logged in)
 - $page_name (current page’s name)
 - $customerName (customer name [session dependent])
 - $priceDisplay (current price display settings [currency dependent])


### Ci dessous les variables Smarty (trouvées sur Variables Smarty)


 - {$base_dir}

Url de votre site web, racine du site. Utile et indispensable lorsque vous insérez des liens, je déconseille fortement de mettre des liens en dur directement dans votre code mais plutôt d’utilisez cette variable et toute les autres qui suivent, car le jour où vous migrez d’hébergement ou de nom de domaine, cela pourrait vous causer beaucoup de problèmes.

 - {$base_dir_ssl}

Idem via le protocol https.

 - {$content_dir}

Url vers votre dossier racine du site, peut changer en fonction des paramètres SSL. A ne pas confondre avec {$basedir}, cette variable vous donne l’Url complète jusqu’au dossier racine.

 - {$img_ps_dir}

Url vers le dossier img situé à la racine de votre boutique.

 - {$img_dir}

Url vers le dossier img de votre thème.

 - {$css_dir}

Url vers le dossier css de votre thème.

 - {$js_dir}

Url vers le dossier js situé à la racine de votre boutique.

 - {$tpl_dir}

Url vers votre dossier thème.

 - {$modules_dir}

Url vers le dossier modules. Utilisée principalement dans le code des modules.

 - {$mail_dir}

Url vers le dossier mail.

 - {$lang_iso}

Code ISO du language courant.

 - {$come_from}

Url absolue de la page précédente.

 - {$shop_name}

Nom de votre boutique.

 - {$cart_qties}

Nombre total de produits dans votre panier.

 - {$cart}

Contenu de votre panier sous forme de tableau.

 - {$currencies}

Liste des devises disponibles sous forme de tableau, retrouvez la liste via ce code {foreach from=$currencies item=c}{$c.name}{/foreach}

 - {$id_currency_cookie}

Identifiant de la devise actuelle.

 - {$languages}

Liste des langages disponibles dans la boutique sous forme de tableau, retrouvez la liste via ce code : {foreach from=$languages item=c}{$c.name}{/foreach}

 - {$logged}

Permet de vérifier si le client est connecté, utile pour afficher des éléments uniquement aux visiteurs enregistrés. (ex : {if $logged}Vous êtes connecté{/if}

 - {$page_name}

Nom de la page actuelle (ex: index)

 - {$customerName}

Nom et prénom du client actuellement connecté.

 - {$priceDisplay}

Paramètre actuel de l’affichage des prix (identifiant)

2_gestion_sass.md

Lancer un watch pour convertir les fichiers scss en css

Il faut se placer dans le dossier /themes/zazzo/ et lancer la commande:

sass --watch sass:css

Cela transformera le contenu du dossier sass, en css, dans le dossier css, selon les différences rencontrées dans chaque CSS par rapport à sa source SCSS. Le watch reste effectif tant que l'invit de commande n'est pas fermée.