Cela se fait en 2 étapes :

• Activer le SSL
• Générer le certificat letsencrypt

Paramétrer votre domaine pour recevoir Letsencrypt

Dans le webcloud ovh, vous devez vous rendre dans votre hébergement et cliquer sur l’onglet « Multisite » (mais si vous ne travaillez pas avec des multisite.

Choisissez les options souhaitez (firewall, cdn …) puis valider. Vous pouvez paramétrer l’ip du pays de votre domaine, Pratique quand on veut faire du référencement naturel.

Générer le certificat letsencrypt

Une fois cette première étape terminée, il faut générer le certificat sur votre nouvelle hébergement. Pour cela revenez sur l’onglet « informations générales », commandez votre certificat.

L’article Letsencrypt sur Ovh est apparu en premier sur Web Easy 42.

En fonction du paramétrage de vos transporteurs et zone géographique, il se peut que ce prix de livraison ne s’affiche pas. C’est exactement ce qui m’est arrivé sur un de mes projets. Je vous renvoie à cet article : Comment livrer avec des frais de port différents par département, qui est la conséquence de ce nouveau tuto.

Comment fonctionne nativement Prestashop pour l’affichage des frais de livraison dans le panier

Si l’internaute n’est pas connecté à son compte (le cas de la prospection), Prestashop se réfère à son adresse IP. Prenons l’exemple d’un personne qui consulte depuis le département de la Loire (42). Prestashop voit un internaute sur la zone France, mais comme il n’est pas connecté, il ne sait pas que c’est dans la Loire.

Dans le Bo, si dans « transporteur », cette zone France n’est pas active (livraison > transporteur, choix du transporteur puis l’onglet « destinations d’expédition et coûts ») lorsque que ce prospect (non connecté encore) fait une simulation de panier, les tarifs de livraison ne s’afficheront pas. C’est normal.

La solution pour afficher le prix de livraison pour un visiteur

Création de la zone géographique

Dans mon cas, je ne livre qu’en France, le reste du monde n’est pas concerné par ce business. J’ai donc créer une zone France Métropolitaine. Il faut aller dans International > Zones géographique, puis sur le CTA « créer une zone » en haut à droite.

Paramétrage de la zone pour la livraison chez les transporteurs

Il faut à présent paramétrer cette nouvelle zone dans les transporteurs concernés. Sélectionnez votre transporteur, puis dans l’onglet « Destinations d’expédition et coûts », valider la check box de la zone et renseignez les différents prix du transport f(x) les tranches de poids.

Faites des tests, mais normalement vous devriez retrouver un affichage du coût de livraison dans le panier avec un prospect qui n’a pas de compte client.

L’article Pourquoi les frais de livraison ne s’affichent pas dans le panier : Prestashop est apparu en premier sur Web Easy 42.

Pour faire simple, avec le même poids de marchandise le tarif de livraison est différent que vous habitiez dans l’Oise ou dans les Bouches-du-Rhône.

Si vous utilisez un transporteur Pro comme Db Schenker ou encore Géodis, ce tuto devrait vous permettre de créer des tarifs de livraison en fonction du poids de votre colis et le département de livraison.

Etape 1 : création de zone par département

Pour cette première étape, nous allons créer autant de zone géographique que de département. Rendez-vous sur l’item international > zones géographiques. A vous de créer une zone par département. oui c’est long

Ne supprimez pas ou ne désactivez pas la zone France et Europe qui sont généralement nativement présentes. Elles permettront d’afficher les frais de transport dans le panier lorsque que le client n’est pas connecté.

Etape 2 : Modification des caractéristiques du pays

Le caractéristiques d’un pays vont devoir être adaptées. Nous ne saisissons pas l’adresse de la manière en France qu’au Royaume Uni. Cela va avoir une incidence directe lorsque qu’un client paramétra son adresse de livraison.

Je vous rappelle que nous voulons adapter le prix de la livraison (frais de port) en fonction d’un département pour le même poids de marchandise.

Dans notre cas, nous allons ajouter au format d’adresse de livraison : le département (état). En cliquant sur Name, vous verrez apparaître sur la zone de gauche : state : name. Voir capture d’écran.

Pensez à activer en bas (non représenté sur la capture) : « contient des état » à oui.

Dans la capture d’écran suivante, voila comment se matérialise votre modification lors de la saisis d’adresse de livraison par le client :

Etape 3 : Création des états (département)

Un état (département) est rattaché à un pays, un continant.

Sur PrestaShop, nativement les pays sont déjà paramétrés. Si le pays France, n’existe pas dans votre installation, créez le. Vous en aurez besoin pour créer les états. Allez dans international > zones géographiques, cliquez sur l’onglet Pays.

Toujours dans international > zones géographiques, cliquez sur l’onglet Etats. Même si Prestashop est français, le mots états en France correspond à département. Vous allez maintenant créer autant d’états que de départements. Oui c’est long, mais se sera fait une bonne pour toute ;-).

Pour cette étape il vous faudra les codes iso du département français que vous pouvez trouver ici : code iso département français.

Lors de la création de votre département vous devrez le rattacher à un pays et à une zone. (voir capture écran). Dans notre cas la zone est le département et le pays et la France.

Etape 4 : Création du transporteurs

On crée le transporteur dans Personnaliser > Transporteur.

C’est une étape longue car vous allez avoir un joli tableau Excel avec des tranches de poids de 0 jusqu’à 250 Kg par exemple et des frais de port qui varient en fonction des départements pour le même poids.

Pour gagner du temps lors de cette création, j’ai utilisé un module payant, mais qui vous évite de faire des saisies manuelles sur le Prestashop. La dépense en vaut la chandelle. Ce module vous permet de convertir votre fichier Excel en Csv et de l’importer directement dans Prestashop. Voici le module que j’ai utilisé : Import/export tarifs transporteur.

L’article Comment livrer avec des frais de port différents par département sous Prestashop 1.7 est apparu en premier sur Web Easy 42.

Après ce paramétrage, je me suis aperçu que les Url générées n’étaient pas Seo friendly. Sur les miniatures et listes produits, je me retrouverais avec des Url de la forme suivante :

https://monsitemarchant.fr/cat-produit/20-mon-produit.html#/attribut_de_mon_produit.

Tout ce qu’il ne faut pas en SEO.

On ne peut plus forcer l’affichage d’url seo avec 1.7

Ce que l’on pouvait faire avec la version 1.6 de PrestaShop, c’est que l’on pouvait lui demander d’afficher les url optimisé Seo même avec l’utilisation de la navigation à facette. Avec la nouvelle version de PrestaShop 1.7, je n’ai pas réussi à trouver ou retrouver les paramètres à régler dans le back office.

Le quid : Comment mettre en place de belles Url ?

Mettre les doigts dans le code de Prestashop !

Je ne pouvais pas garder ces affichages sur le nouveau projet sur lequel je travaillais. Après quelques recherches, je suis tombé sur le blog de M Comme Média. Un article traitait de cette problématique. Voici le lien : https://www.mediacom87.fr/seo-et-url-de-vos-produits-sur-prestashop-17/

Mais après mise en place de ce hack, mes urls n’étaient pas toutes Seo Friendly sur l’ensemble du site. J’ai donc poussé un peu plus loin.
A partir de mon thème parent, j’ai ramené dans le répertoire : montheme-child/templates/catalog/_partials/miniature

4 fichiers .tpl

• pack-product.tpl
• product-sidebar.tpl
• product-sliders.tpl
• product.tpl

Et comme l’a très bien expliqué M Comme Média, j’ai remplacé toutes les Url {$product.url} par {$product.canonical_url}
Après, il faut penser à vider le cache de Prestashop si vous êtes en production.

L’article Problème url Seo et navigation à facette sous Prestashop 1.7 est apparu en premier sur Web Easy 42.

Mon besoin d’incorporer un fichier lié à Illustrator

C’est vrai qu’il y a un gros avantage à lier un fichier à Illustrator surtout si c’est un fichier Bipmap. La conséquence est que vous manipulez un fichier plus léger. L’inconvénient réside dans le fait que si le fichier est renommé, cela ne fonctionne plus.

C’est pour cette deuxième raison que j’ai besoin d’incorporer le fichier. C’est ce terme qui est d’ailleurs utilisé par Illustrator : incorporer et non importer.

La pratique pour importer un vecteur ou une image

Que vous souhaitiez incorporer un bipmap ou une image vectoriel la méthode est toujours la même !

Tout d’abord affichez le panneau lien à l’aide du menu contextuel : Fenêtre > lien

• Sélectionnez dans le panneau le fichier à incorporer
• Cliquez sur le menu du panneau « lien »
• Sélectionnez incorporer

L’article Comment importer, incorporer un fichier lié dans Illustrator ? est apparu en premier sur Web Easy 42.

Dans le monde de l’impression (adhésifs, textile, alu dibon…), il y a des cas où il faut délimiter un contour pour que la machine de façonnage puisse découper exactement à la forme souhaitée. Pour réaliser ces travaux, il faut avec le logiciel Illustrator matérialiser ce contour. On appelle cela un « cut contour » (voir photo – contour de couleur rose).

Ce « Cut contour » est interprété par la machine d’impression ou de façonnage pour en faire le tour.

Création d’un tracé à partir d’un objet

Pour cette première étape nous allons dupliquer l’objet que nous viendrons mettre sur un calque différent. Copiez l’objet (ctrl + C), coller l’objet avec « ctrl + f « puis coupez-le par « ctrl + x ». Sélectionnez votre nouveau calque et collez-le par « Ctrl + f ». 

Pour plus de lisibilité, vous pouvez donner une autre couleur à l’objet.

Maintenant nous allons permuter le « fond » et « contour » puis désactiver l’affichage de notre premier calque. Il se peut que vous ayez à ajouter de la graisse sur le trait pour le matérialiser en allant directement dans le panneau « contour » d’Illustrator.

A cette étape vous avez le contour de l’ensemble de l’objet et des ces forme. Nous, notre besoin est d’avoir que le contour extérieur seul de l’objet pour de l’impression.

Avec outil de « sélection progressive », supprimer tous les contours intérieurs qui ne vont pas nous servir. 

Dans mon exemple, vous voyez à droite du pain, que le contour ne joint pas le pain. Pour répondre à cette problématique, nous allons couper le tracé aux endroits qui nous intéressent pour ensuite les joindre.

Répéter cette action de façon à avoir un contour parfait de votre forme.

L’article Comment créer un tracé à partir d’une sélection ou d’un objet ? est apparu en premier sur Web Easy 42.

Mon besoin était d’avoir une gestion multisite WordPress avec des noms de domaines différents sur un mutualisé OVH.

J’ai réussi à créer des sites avec des noms de domaines différents sans l’utilisation du plugin WordPress multi domaine avec également des modifications de la zone Dns sur mon hébergement OVH. Les noms de domaines que j’ai géré sont tous enregistrés chez OVH.

Dans ce tuto, je ne reviendrai pas sur la création d’un réseau multisite wordpress. Je vous conseille de lire le tutoriel sur Wp formation [accès tuto création d’un réseau multisite wordpress ].

Création du nouveau site WordPress

La création commence par un sous domaine

La première étape est de créer un nouveau site depuis le panel de contrôle des multisites WordPress. Comme vous le constatez dans l’image ci-dessous, on peut créer uniquement un sous domaine. Nous verront plus loin comment le modifier par la suite.

Modification du sous domaine

Dans l’image suivante nous avons bien le sous domaine présent et valide, cependant nous voulons : https://leschaletsdor-les2alpes.com. Pour modifier ces paramètres, éditez le nouveau site créé et changez le sous domaine par le domaine que vous possédez.

Il vous suffit de modifier ce sous domaine par : https://leschaletsdor-les2alpes.com.

• « compte » est la pour ajouter des utilisateurs
• « thèmes » pour insérer de nouveau template
• « réglages » est équivalente aux réglages WordPress classiques.

Voila ce que nous devons avoir, après les modifications.

Attention si vous souhaitez accéder au panneau d’administration de votre nouveau site, cela ne fonctionnera pas encore. Vous allez arriver sur une page d’erreur.

Maintenant, nous allons modifier la zone Dns de votre hébergement OVH

Configuration multisite Ovh et vérification DNS

Comme moi, vous avez un hébergement mutualisé chez OVH. Vous verrez, il est très simple de gérer des multisites WordPress avec OVH.

Pour la première étape il faut créer un multisite depuis votre hébergement OVH qui contient l’installation WordPress paramétrée en multisite.

Sur votre Nic Handle OVH, sélectionnez votre hébergement, puis cliquez sur l’onglet « multisite », puis sur créer un « sous domaine ».

Le répertoire de destination que vous devrez sélectionner doit correspondre au répertoire de l’installation de votre WordPress multisite. Dans mon cas, c’est le répertoire WWW. Une fois, vos sélections terminées, il vous suffit de valider.

La configuration de la zone DNS de votre nom de domaine sera activée automatiquement par OVH. Je vous conseille de vérifier tout de même si tout est correct.

Cliquez sur le menu « domaines », puis sélectionnez votre domaine qui doit venir pointer sur l’installation multisite WordPress. Vous devriez avoir sur l’onglet « zone Dns » un enregistrement de type A avec les domaines qui pointe sur l’Ip de votre hébergement mutualisé Ovh.

Bug de connexion au backoffice d’un nouveau site

Il se peut que lorsque vous créez un site avec un nom de domaine différent, vous rencontriez quelques problèmes de connexion au BO de WordPress. Voici la capture d’écran.

Même en connexion privée, ce bug peut persister. Ce problème est du à l’envoie de la variable $secure_cookie sur un canal crypté pour les connexions administrateur. Ce problème peut-être résolu de la manière suivante :

• Vérifier / activer Ssl
• Ajouter à votre config.php la ligne suivantes
  define(‘COOKIE_DOMAIN’, $_SERVER[‘HTTP_HOST’] );

L’article WordPress multisite et multi domaine sans plugin chez OVH est apparu en premier sur Web Easy 42.

Pre-requis pour traduire votre thème

Vous avez créé un thème wordpress de toute pièce sans générateur de thème et vous souhaitez le traduire dans d’autres langues. Vos templates sont personnalisés, vos pages créées …? Alors commençons ou vérifions vos chaînes de caractères qui composent votre thème.

Ecrire correctement ses chaînes de caractères

Dans votre thème wordpress vous avez écrit « en dur » du texte. Exemple, « lire la suite », bonjour… ». Il faut les mettre en anglais. Pour de bonnes pratiques ce sera votre langue par défaut car wordpress est »par défaut en Anglais ». Il n’est pas trop tard, alors reprenez tout en anglais avant de continuer.

Ne laissez pas en Html ces chaines de caractères. Toujours pour de bonnes pratiques, utilisez cette fonction Php :

<?php _e(‘ma chaîne de caractère‘,’le_domaine‘ ) ?>.
Exemple : <?php _e(‘Read more‘,’theme -webeasy42‘ ) ?>

Cette fonction permettra de traduire votre thème sans créer  de bug de traduction dans toutes les langues que vous souhaitez.

Préparez votre thème wordpress à traduire

1. L’ anglais sera la langue par défaut du thème
2. Créez un dossier « lang » ou « languages » (c’est juste pour ranger votre thème et ne pas en avoir de partout)

Loco Translate un outil tout en un !

Ce plugin est capable de traduire votre thème mais également les plugins installés sur votre WordPress. En effet, il se peut que des plugins ne soient pas traduits complètement et grâce à Loco translate vous pourrez terminer la traduction. Dans ce tuto je m’attarde uniquement sur la traduction du thème.

Une fois installé, rendez-vous sur : loco translate > thème et cliquez sur votre thème. Vous arrivez sur un écran qui affiche tous les thèmes présents dans votre site WordPress.

Création du modèle

Comme dans la capture d’écran, nous allons créer un « modèle ». Ce modèle sera le gabarit de votre langue par défaut, je me répète « l’anglais ».

Une fois que vous avez créé votre modèle, nous allons pouvoir traduire le thème dans n’importe quelle langues. Vous n’avez pas quitté la page Thèmes / Mon thèmes ? Alors maintenant cliquez sur « Nouvelle langue ».

Choisir la langue de traduction

1. Sélection votre langue
2. Choisissez l’emplacement où seront déposés vos fichiers de traduction(dans le répertoire lang ou language)
3. Cliquez sur « commencer la traduction »

Sans rentrer dans la technique, lorsque vous traduisez une langue, vous allez créer avec Loco Translate des métas fichiers qui seront par la suite utilisés de manière native par wordpress en fonction des langues qui seront affichées dans votre site. Mais revenons à notre traduction.

Traduction des chaînes de caractères

Vous arrivez sur la fenêtre suivante. Nous allons traduire ce que l’on appelle des « chaîne de caractères ». Si une chaîne n’est pas traduite dans la langue, c’est la langue par défaut du thème qui s’affichera. Dans notre cas l’anglais.

1. Sélectionner dans la première partie de l’écran (« texte source ») la chaîne que vous voulez traduire
2. Traduisez dans la deuxième partie d’écran
3. Puis « enregistrez » votre traduction
4. et ainsi de suite

Loco Translate a créé un fichier « fr_FR » : langues français en France. La traduction ne se fait pas toute seule. C’est à vous de traduire chaque chaînes de caractères en vous aidant de Google Translate par exemple.

Télécharger le plugin sur wordpress : Loco Translate

L’article Traduire un thème WordPress sans le logiciel PoEdit est apparu en premier sur Web Easy 42.

Pour des raisons qui vous sont propres vous avez besoin de migrer votre boutique prestashop :

• Besoin de faire des tests sur une préprod
• Changement de nom de domaine, d’hébergement …

Après cette migration, vos images produits ou miniatures ne s’affichent plus.

La check list

Avant de rentrer dans la mise en place de solutions voici une check list qui pourra peut-être vous faire gagner du temps. Ces quelques questions m’ont rendu service :

1- Vos miniatures produits sont présentes en back office ? Lorsque vous vous connectez sur une fiche produit, vous constatez que les images que vous avez créées sont bien visibles.

2- Les images CMS s’affichent correctement sur le front ? La gestion des images produits et CMS ne se font pas de la manière sur Prestashop. Pour les image CMS, il n’y a pas de ré écriture d’URL. Elles sont stockés dans /img/cms.

3- Les connexions SSL sont correctement paramétrées ?

Si vos réponses sont « oui » à ces 3 points voila ce que vous pouvez faire.

Solutions pour retrouver ces miniatures

Vous avez fait vos tests et toujours rien ? Voila ce que nous pouvons faire :

Vider le cache de prestashop

C’est la première action à faire. Le cache de Prestashop est puissant et pour être sûr qu’il n’y a pas de résidu, il est conseillé de mettre la boutique en maintenance et de travailler sans le cache.

• Dans le Back office allez dans : Paramètres avancés > Performance
• Mettez à « non » le cache + enregistrer + videz le cache

Rafraîchir la boutique en Front Office. Y’a-t-il du mieux ?

Régénérer les images

En fonction de ce que vous avez fait sur votre boutique, migration, maj template… il se peut que vous deviez générer à nouveau les images. C’est une opération qui va demander de la ressource serveur. Le conseil est bien sûr d’être en mode maintenance.

• Dans le Back office allez dans : Apparence > images
• En bas de page vous pouvez choisir les images
• Suivant la taille de votre boutique, procéder par étapes peut-être une bonne chose.

Régénérer le fichier Htaccess

Les url des miniatures produits sont gérées par le mécanisme de réécriture d’url. Lors de la migration sur un autre domaine ou serveur, cela ne peut plus fonctionner correctement. Pour générer à nouveau votre fichier htaccess, voici ce que l’on peut faire:

• Dans le Back office allez dans : Paramètres de la boutique > Trafic et seo
• Mettez à « non » Url simplifié + enregistrer
• Connectez-vous au serveur Ftp de votre boutique
• Supprimez le fichier htaccess ou renommez-le
• Retournez sur le back office de prestashop
• Allez dans : Paramètres de la boutique > Trafic et seo
• Mettez à « oui » Url simplifié + enregistrer

Vérifiez que le fichier Htaccess soit bien à nouveau présent sur votre serveur.

Erreur 500 re génération image

Si votre boutique contient beaucoup d’images, il se peut que la génération prenne du temps. Cela peut générer une erreur PHP le fameux « timeout ». Si vous n’avez pas accès au serveur voici un article et un module gratuit à télécharger pour pouvoir générer à nouveau vos images sans avoir les erreurs 500.

La société comonsoft a très expliqué le problème sur son blog, le lien est en dessous. A La suite de cet article, vous pourrez télécharger gratuitement l’excellent module.

L’article Les miniatures produits ne s’affichent plus sur votre Prestashop 1.7 est apparu en premier sur Web Easy 42.

Voici un tuto qui synthétise ce que j’ai pu trouver sur le net avec la réécriture d’Url déjà activée sur votre serveur de pre prod. Créer son back up, uploader sur le serveur de production. Formater la base de donnée en n’oubliant pas le Ssl.

Faites une sauvegarde de votre prestashop

Selon votre cas, il faudra faire un backup des fichiers. A vous ensuite de les dater et de les archiver. Avec votre client FTP récupérer l’ensemble des fichiers de votre prestashop. Pour la base de données, connectez vous avec phpmyadmin puis faites un export de celle-ci.

Importer et paramétrer sur le nouveau serveur

Cette étape va nécessiter l’importation de votre base de données et de vos fichiers. En suite, il faudra modifier les paramètres de votre prestashop pour qu’ils puissent fonctionner sur votre nouveau serveur et votre domaine.

Uploader les fichiers et importer la base de données

C’est l’opération inverse de celle que vous avez faite précédemment. Avec votre client Ftp, vous renvoyez les fichiers sur votre nouveau serveur dans le bon dossier. Puis vous téléversez la base de donnée sur votre nouvelle hébergement.

Paramétrage du parameters.php

C’est le nouveau fichier de configuration de prestashop 1.7. Il se situe dans le répertoire “/app/config/”. C’est sur ce fichier qu’il faudra modifier les informations de connexion à la base de données.

• database_host’ => ‘adresse de votre serveur’
• database_name’ => ‘nom de la base de données’
• database_user’ => ‘nom de l’utilisateur’
• database_password’ => ‘le mot de passe de la base de donnée’

Mise à jour de la nouvelle base de donnée

La mise à jour de la base de domaine est inévitable. Vous avez migrer vers un autre domaine et hébergement. Il faut modifier la table ps_shop_url

• domain : mettez votre nouveau domaine prestashop
• domai_ssl : si vous avez activez ssl sur votre nouvel hébergement, il faut le noter à nouveau.
• physical_url : le répertoire dans lequel est installé votre prestashop. Il sera fonction du rootage Dns que vous aurez mis en place dans la zone dns réglée sur votre domaine. Si votre prestashop est dans le répertoire www, alors mettez www.

Éviter les pièges

Si vous avez, dans vos pages CMS, fait des liens, l’Url présente dans les pages sera celle de votre serveur de dev…plus rien donc ne fonctionnera correctement. Pensez bien à les reprendre et à faire vous même la modification.

L’article Comment migrer Prestashop 1.7 sur un autre hébergement et domaine est apparu en premier sur Web Easy 42.