Format d’adresse dans Magento

Bonjour à tous,

Aujourd’hui nous allons discuter des formats d’adresses dans le moteur E-commerce Magento.

Magento étant un produit américain, les informations clients et plus précisément l’adresse sont formatées au format postal américain. Ainsi on retrouve l’état, le code postal et la ville mais cela ne correspond pas au format Français.

Une de mes clientes m’a, à juste titre, fait remarquer que les adresses postales française sont normées et que si l’on veut éviter au maximum les NPAI (n’habite pas a l’adresse indiquée), il vaut mieux formater les adresses de livraisons correctement.

Magento depuis la version 1.5, permet de formater les adresses directement dans le back office.

Cela se passe dans le menu : SYSTEME -> CONFIGURATION -> Configuration Clients -> Gabarit d’adresse.

Sur cette page d’administration :

 

 

 

On remarque 5 champs de saisie avec du code un peu barbare à l’intérieur.

Les  champs représentent les 5 rendus qui sont utilisé sur le site :  Texte, Texte sur 1 seule ligne, HTML, PDF et javascript

Chaque champs de saisie permet donc de customiser le rendu de l’adresse par rapport à un format donné.

Si l’on modifie la partie HTML par exemple, le rendu de l’adresse dans l’affichage en back office sera modifié sur l’ensemble des écrans (Commande, Factures…) mais uniquement à l’affichage sur le navigateur. Les factures PDF sont impactées par le rendu PDF.

Le code utilisé est un code de description qui fonctionne avec des balises entourées de double accolades.

{{depend prefix}}{{var prefix}} {{/depend}}{{var firstname}} {{depend middlename}}{{var middlename}} {{/depend}}{{var lastname}}{{depend suffix}} {{var suffix}}{{/depend}}, {{var street}}, {{var postcode}} {{var city}}, {{var country}}

Des mots clés permettent de repérer les éléments de la base de donnée stockés dans Magento. Ainsi “postcode” correspond au code postal, “city” correspond à la ville…

Ce qui va nous intéresser ici c’est de changer l’ordre des champs

Par défaut le format d’adresse s’affiche ainsi :

INFINITIC, 4 chemin de Ponterle, CRAPONNE, Rhone Alpes, 69290, FRANCE

Cette adresse ne correspond pas aux normes postales. On veut obtenir :

INFINITIC, 4 chemin de Ponterle, 69290 CRAPONNE, FRANCE

Voyons comment cela se passe au niveau du code dans Magento, le rendu HTML par défaut est le suivant :

 

{{depend prefix}}{{var prefix}} {{/depend}}{{var firstname}} {{depend middlename}}{{var middlename}} {{/depend}}{{var lastname}}{{depend suffix}} {{var suffix}}{{/depend}}<br/>
{{depend company}}{{var company}}<br />{{/depend}}
{{if street1}}{{var street1}}<br />{{/if}}
{{depend street2}}{{var street2}}<br />{{/depend}}
{{depend street3}}{{var street3}}<br />{{/depend}}
{{depend street4}}{{var street4}}<br />{{/depend}}
{{if city}}{{var city}}, {{/if}}{{if region}}{{var region}}, {{/if}}{{if postcode}}{{var postcode}}{{/if}}<br/>
{{var country}}<br/>
{{depend telephone}}T: {{var telephone}}{{/depend}}
{{depend fax}}<br/>F: {{var fax}}{{/depend}}

Pour le début du code, nous ne modifierons rien, les informations NOM, PRENOM et adresse étant déjà au bon format.

Nous allons nous intéresser à la ligne suivante :

{{if city}}{{var city}}, {{/if}}{{if region}}{{var region}}, {{/if}}{{if postcode}}{{var postcode}}{{/if}}<br/>
{{var country}}<br/>

Sur cette ligne on voit que les éléments ne sont pas dans le bon ordre, il va falloir modifier la ligne pour faire passer le “postcode” avant la “city” et supprimer la “region” qui correspond à l’état.

Les informations sont conditionnées par des balises IF qui permettent de ne pas les afficher si elles sont vides. Nous n’avons pas modifié ce conditionnement même si il n’y a aucune chance par exemple que la ville soit vide car elle est obligatoire.

La nouvelle ligne devient donc :

{{if postcode}}{{var postcode}}{{/if}} {{if city}}{{var city}} {{/if}}<br/>
{{var country}}<br/>

Nous avons délibérément supprimé l’état (département) qui n’a aucune utilité en France.

Maintenant vous pouvez faire la même manipulation pour l’ensemble des rendus. Le plus important étant le rendu PDF qui sert pour toutes les sorties PDF de l’application.

N’hésitez pas a poser des questions si vous avez des problèmes de configuration.

 

La bonne information…au bon endroit…au bon moment…

Bonjour à tous,

Aujourd’hui un petit article suite a quelques mails échangés avec un service client d’une société que je ne citerai pas de peur de les froisser…
Je vais parler ici d’information et pas n’importe laquelle, celle que tout le monde cherche sur un site, l’information de contact. Le fameux email sur lequel on va pouvoir se lacher et dire ce que l’on a a dire.

Figurez vous que la société que je nommerai X présente un site internet des plus élégant, avec une belle page contact avec les informations relatives a ses nombreuses filiales régionnale. Ni une ni deux, je choisis la filiale la plus proche de chez moi et je copie colle l’email de contact afin d’écrire un petit message au service client.

Quelques minutes plus tard, je reçois un premier mail me disant que je n’ai pas utilisé la bonne adresse et que mon message va quand meme etre transmis a l’entité concernée. Jusqu’ici tout va bien. Quelques minutes plus tard, la fameuse entité me contacte en me faisant comprendre que ce n’était pas tres poli d’envoyer un mail de contact a la structure hierarchique superieure afin de faire des réclamations.

Je réponds gentillement que j’ai écris a l’adresse présente sur le site internet de la société en question.

En cherchant un peu plus loin sur le site, j’arrive a trouver les coordonnées postale et une jolie carte GOOGLE MAPS me montrant l’emplacement de la dite succursale régionnale…

Pour vous faire rire un bon coup, je vous mets la capture d’écran

coordonnees_google_mdr

Je vais avoir du mal a aller jusqu’à SAN JOSE en Californie pour dire ce que j’ai à dire. Pour être proche de chez moi, il est proche de chez moi c’est sur…
Tout cela pour expliquer que les informations qui sont publiées sur vos sites internet sont capitales pour l’internaute qui souhaite vous joindre ou vous rendre visite si vous avez des bureaux commerciaux.
Et surtout si vous recevez un mail sur une adresse erronée, il vaut mieux vérifier avant qu’elle ne soit pas sur votre site…avant d’insulter le fameux internaute qui malheureusement a suivi scrupuleusement les informations que vous lui avez donné.

Optimiser la lecture du code – Application aux feuilles de styles CSS…

Avec l’arrivée du CSS 3, la feuille de style va devenir l’élément clé d’un site Web. En effet le code du site en lui même sera tres simple avec les nouvelles normes HTML 5. Il n’y aura plus besoin de se soucier d’affecter des pseudos classes ou autres Id aux elements puisqu’ils seront déjà préformatés pour jouer un vrai rôle. Ainsi les nouvelles balises du HTML 5 (<header>, <article>, <nav>…) permettent de savoir dans quelle section du code on se trouve. Dans la feuille de style c’est une autre histoire. Le code peut vite devenir illisible et la modification devient très complexe. J’ai récemment parcouru une feuille de style CSS 3 d’un autre genre, propre, et surtout tres facile a lire. Je vais vous expliquer pourquoi. Il est facile de comprendre que CSS est un langage de description en cascade (comme son nom l’indique ;-)), il est donc important de mettre en avant cette hiérarchie dans le code lui même. Ainsi voici ce que cela donne

article {
 border: 10px solid #ebebe3; background-color: ...
 -webkit-box-shadow: 0 3px 5px #333; -moz-box-...
 }
 article header,
 article section,
 article footer {
  margin: 0 20px;
  }
  article header p,
  article footer p {
   margin: 3px 0 0 0; font-variant: small-caps;...
   text-shadow: 1px 1px 1px #fff;
   }

Quand on parcours rapidement ce code, on voit bien la structure hierarchique entre l’élément de base “article” et les sous elements “article header”, “article section”…

Le code est bien plus comprehensible et cela facilite ca maintenance.

La feuille de style n’étant pas un programme ou un script a proprement parlé, on oubli souvent les regles de mise en page que l’on peut utiliser dans les programmes ou les scripts…

Avec CSS 3, il devient indispensable de traiter la feuille de style comme un élément à part entière du site.