Comme vous le savez, nous avons modifié en profondeur l’architecture de nos serveurs afin de donner plus de performances et de stabilité à la plateforme.

Cette transition difficile était nécessaire pour assurer le rapide développement de vos sites et anticiper l’avenir.
Nous en profitons également depuis plusieurs semaines pour optimiser certaines parties de l’administration et l’affichage des boutiques, notamment le système de cache.

Système de cache

Avant de rentrer dans les détails, il nous semble important de vous expliquer à quoi sert le cache.
Le système de cache permet d’améliorer les performances du serveur en enregistrant de façon temporaire les différentes pages de votre site. Ainsi lorsqu’un visiteur consulte votre page d’accueil par exemple, le serveur ne va pas interroger la base de données à chaque consultation mais renvoyer les informations enregistrées temporairement. Ce cache est bien entendu mis à jour lorsque vous allez faire des opérations (changement de prix, de stock, publication ou suppression de produits, etc.).

2 types de cache

Nous déployons deux types de cache sur vos boutiques. Le cache navigateur et le cache FTP.

Le cache navigateur est un cache classique utilisé par tous les navigateurs modernes. Les images, les javascripts et les CSS sont enregistrés dans le navigateur du client lors de sa première consultation. Cela permet une navigation plus fluide. Par exemple une fois le logo de votre boutique chargé sur le navigateur du client, lorsque celui-ci visite les autres pages, le logo n’a pas besoin d’être téléchargé à nouveau, le navigateur lui renvoie instantanément la même image.
Du coup, si vous chargez un logo qui a le même nom ou modifiez le CSS sans le renommer, le navigateur va penser qu’il s’agit du même fichier et ne va pas le charger à nouveau. Vous ne verrez donc pas de changement sur votre site à moins de changer de navigateur ou de vider votre cache (CTRL + F5 la plus part du temps).

Pour éviter ce problème, si vous avez un design personnalisé, nous vous conseillons de mettre un paramètre lors de l’appel du css ou de l’image afin de faire croire à votre navigateur qu’il s’agit d’un autre fichier. Dans cette logique de mise en cache, nous avions proposé une mise à jour en Juin dernier pour vous permettre de rassembler tous vos CSS et vos javascripts afin d’optimiser le temps d’affichage des pages (voir la mise à jour « Combo CSS et JS »).

A chaque modification du CSS ou des javascripts, n’oubliez donc pas la dernière étape. Il faut ajouter un paramètre nouveau (ex : &25, la fois d’après &26, etc.) à la fin de vos appels pour obliger le rechargement des éléments par le navigateur de vos visiteurs afin qu’ils puissent voir vos derniers changements.

Le cache navigateur est utilisé depuis le début dans WiziShop et la méthode pour le rafraichir n’a pas changé.
Par contre, nous avons modifié les règles pour le cache FTP.

Le cache FTP permet de mettre en cache les éléments du template. Une fois vos pages chargées sur le FTP, nous devons les générer en version HTML. Cette opération est donc mise en cache également pour améliorer les performances d’affichage.

A chaque manipulation sur le FTP, afin de contrôler les changements, vous devez à présent régénérer le cache. Pour cela, nous avons mis au point une procédure simple. Il vous suffit de vous connecter à votre compte sur l’administration et de cliquer sur votre boutique.

Le template est alors reconstruit et vous voyez les résultats sur votre site.

Bien entendu, ces informations concernent les WiziShopiens qui personnalisent leur design, les autres ne sont pas concernés, tout est transparent pour eux

Cette nouvelle option est destinée aux e-commerçants qui possèdent un design personnalisé.

Avec les variables libres (que vous trouverez dans les options avancées de la fiche produit et de la personnalisation des catégories), vous aurez désormais beaucoup plus de liberté pour vos créations graphiques.

Vous pouvez créer des variables (autant que vous le souhaitez) et définir une valeur pour chacune d’elle. Ces variables libres sont ensuite renvoyées sur le template de la même manière que les variables habituelles (nom du produit, prix, etc.).

A vous ensuite de les interroger et de les utiliser comme bon vous semble (changement graphique selon la valeur de la variable, ajout de vidéo, création d’onglet, lien vers une page extérieure…).

Prenons un exemple. Vous avez 3 catégories principales et vous souhaitez que le fond de votre page soit différent dans chacune de ces catégories. Dans la personnalisation des catégories, vous allez donc créer une variable intitulée « couleur ». Pour la première catégorie, vous indiquez la valeur « rouge », pour la seconde, « bleu » et pour la dernière « vert ».
Dans vos pages HTML, vous pourrez maintenant interroger la variable « couleur ». Si c’est rouge, vous appliquerez cette couleur en fond de page et ainsi de suite.

Comment interroger une variable ?

Pour appeler une variable personnalisée, il suffit de mettre le prefix VAR_ suivi du nom de votre variable.

Dans notre exemple, cela donnerait donc :

<!– SI VAR_COULEUR egal rouge –>
ici vos changements sur le template
<!– FINSI –>

Nous venons d’apporter 3 améliorations importantes au niveau de la gestion de vos images.

Nouveau format carré

Jusqu’à présent 2 formats carré étaient automatiquement générés lors du chargement de votre image. Un format en 50 x 50 pixels (utilisé notamment dans le panier) et un format 100 x 100 (utilisé dans la liste des produits). Si vous avez personnalisé le design de votre boutique, sachez qu’il existe désormais une nouvelle taille d’image, un peu plus grande (150 x 150 pixels) pour la présentation de vos pages. Vous pouvez utiliser cette taille d’image grâce à la variable IMG_150.

Un zoom beaucoup plus grand

Notre redimensionnement automatique était un peu trop limité en largeur jusqu’à présent. Le Zoom sur l’image ne pouvait pas dépassé les 460 pixels de haut. Il était donc temps de remédier à ce problème et d’augmenter considérablement la taille du zoom.

Cette taille est désormais fixée à 840 x 630 pixels.

Si vous aviez chargé des images plus grandes que 1000 x 1000 pixels, nous avons automatiquement pu mettre à jour la taille de vos images. Allez faire un tour sur votre boutique, vous verrez rapidement la différence !

Possibilité d’utiliser la taille originale

Dernière nouveauté, très importante également, si vous utilisez un design personnalisé, vous pourrez désormais accéder à l’image originale que vous avez chargé. Il s’agit donc d’un très grand format (que nous retaillons tout de même à 1600 x 1600 pixels si il dépasse cette taille) que vous pourrez, par exemple, utiliser avec un système de zoom puissant de style « loupe » en javascript.
Vous pouvez utiliser cette taille d’image grâce à la variable IMG_RAW.

Pour vous aider dans la personnalisation de votre design (ou dans la mise à jour de celui-ci), nous vous donnons désormais accès à un FTP vous permettant de télécharger tous nos templates gratuits.

Vous pourrez ainsi voir comment sont structurés nos pages et vous en inspirer plus facilement.

Accès FTP :

Hôte : ftp.wizishop.com
Type d’identification : Anonyme

Nous proposons à présent une option très pratique pour les webdesigners et les commerçants qui personnalisent la charte graphique de leur boutique.

Vous pouvez afficher les variables utilisées sur les pages de votre site.

Ces variables (vous pouvez retrouver le manuel de référence ici) permettent d’afficher toutes les données sur votre site. Pour activer l’affichage, rendez vous sur votre interface d’administration > Apparence & Personnalisation > Graphisme choisi > Personnalisation.

Les variables sont divisées en plusieurs catégories :

• Variables communes à toutes les pages
• Variables de configuration
• Boucles
• Variables de langue

Pour chaque page de votre site, vous découvrirez toutes les variables qu’il est possible d’utiliser avec la valeur de chaque variable. Ces informations ne seront visibles que par vous.