Catégorie : Magento

[Magento 1.x] modifier proprement la meta viewport

Mettre en place les bons attributs de la meta Viewport permet, notamment dans le cadre d’un site Responsive, d’éviter un scroll horizontal en vue Mobile/Smartphone.

Lorsque ce type de bugs se produit, on pense d’abord à vérifier les styles ou à placer une propriété overflow-x: hidden; sur les éléments html, body.

Bien souvent, cet effet de bord se corrige plutôt en mettant en place la balise meta Viewport adéquate au mode d’affichage de son site. Dans Magento 1.x et pour un site Responsive, la meta Viewport se modifie comme suit:

Fichier {mon_projet}\app\design\frontend\{mon_package}\{mon_thème}\layout\page.xml:

[Magento 1.x] Créer et afficher un bloc statique en front

Source : Magento – Creating and Showing a static block in Frontend.

The content of the blocks are created and modified from Magento Admin panel which can be placed on one or multiple pages. To create a static block you can follow some simple steps which are given bellow.

Creating a Static Block:


A. Go to the Magento Admin panel and then select the  CMS -> Static Blocks.
B. Then Click on the “Add New Block” button from the right top .
C. Now fillup the following fields:

  1. Block Title: Give the Name of the static block here. This will not show on the frontend.
  2. Identifier: Give the id of this block. It used as reference of this block, when adding to a template file or CMS page.
  3. Status: Its define visibility of this static block on the frontend.
  4. Content: Content of static block can be plain text, HTML code and Javascript. PHP code can’t use in this area.

D. After fillup all fields then click on “Save Block” button from the right top .

Showing a Static Block in Frontend:


A static block can be added to display on the frontend by some different ways which are discribed bellow:

1. Adding a static block to a CMS page From the Magento admin:
Go to CMS > Pages and click on a pre-existing page or create a new page where you want to show your static block.
Now use the following code in the Content field of the CMS page:

{{block type=”cms/block” block_id=”your_block_identifier” template=”cms/content.phtml”}}

2. Adding a static block by using template phtml file:
Open your phtml file where you want to add the static block.
For Example: /app/design/frontend/your-instance-name/your_theme/template/callouts/right_col.phtml
Then you can use the following code in your phtml file to show the content of your ststic block:

<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘your_block_identifier’)->toHtml() ?>

3. Adding a static block by using XML layout file:
Use the following code to show the content of static block by using Layout XML file:

<reference name=”content/left/right”>
<block type=”cms/block” name=”your_block_name” before=”-”>
<action ethod=”setBlockId”><block_id>your_block_identifier</block_id></action>
</block>
</reference>

Note: You can use the above code to show the block content in specific page by using “ Layout Update XML ” field of CMS page.
To do this go: CMS -> pages from your magento backend. Then click on on that page where you want to show the static block.
Then click on Design tab from left panel like:

Now Past the above code in Layout Update XML field.
here i wrote <reference name=”content/left/right”> in code. You must use only one like- content / left or right as your reference name.

[Magento 1.x] Un slider multi-produits responsive avec le plugin jQuery Cycle (fourni avec le thème Rwd)

Source : http://jsfiddle.net/kRs2N/6/ et mon fork avec des marges entre les slides http://jsfiddle.net/frontenddeveloper/L3bpavzc/1/.

HTML

CSS

jQuery

[Magento 1.x] Affichage conditionnel de bloc avec customer_logged_in customer_logged_out

L’objectif est d’afficher un bloc Newsletter selon deux règles :

  • visible uniquement sur la Homepage
  • visible uniquement lorsque le client est connecté

Dans le fichier local.xml du thème :

Dans le fichier \app\design\frontend\<package>\<theme>\template\newsletter\subscribe.phtml :

[Magento 1.x] Starter themes

Nom Modules couverts Technos Activité sur Github
Webcomm – magento-boilerplate Modules couverts …
  • Bootstrap 3.1
  • Less
  • jQuery
  • Composer
  • Bower
  • Gulp/Grunt
  • Latest commit 02e09af on 29 Feb 2016
  • Watch: 77
  • Star: 545
  • Fork: 211
  • Commits: 285
  • Branches: 2
  • Releases: 21
  • Contributors: 25
Maven E-Commerce – mbootstrap Modules couverts …
  • Bootstrap 3.?
  • Sass
  • jQuery
  • Composer
  • Gulp
  • Latest commit 3c967c2 on 15 Jul 2015
  • Watch: 21
  • Star: 101
  • Fork: 43
  • Commits: 248
  • Branches: 2
  • Releases: 0
  • Contributors: 5
zeljkoprsa/waterlee-boilerplate
  • Foundation 5.5.2 by ZURB
  • Sass
  • jQuery
  • Gulp
  • Bower
  • Latest commit 0f71788 on 22 Sep 2016
  • Watch: 64
  • Star: 306
  • Fork: 121
  • Commits: 411
  • Branches: 3
  • Releases: 0
  • Contributors: 18

[Magento 1.9] Remplacer les sprites d’affichage Grid et List dans la page catalog-category-view par des icônes issus d’une police

Grosse gruge, mais bon …

[Magento 1.9] Ajouter une zone dans un gabarit de page et y affecter un bloc PHTML

Dans mon exemple, je souhaite ajouter sur la page d’accueil de mon site une zone entre le Header et le Main pour y glisser un slider donc le code se trouve dans app/design/frontend/package/theme/template/page/html/home_slider.phtml.

Etape #1: ajouter un slot (emplacement) dans page.xml

Dans le fichier app/design/frontend/package/theme/template/layout/page.xml repérer le gabarit de page dans lequel vous souhaitez ajouter une zone:

…et ajoutez-y ceci pour créer l’emplacement home_slider_area:

Note pour moi-même: ici, je crée une zone (soit-disant) dans le gabarit 2columns-left.phtml, mais j’édite plus tard le gabarit 1column.phtml et ça fonctionne quand-même…

Etape #2: ajouter le bloc PHTML du slider en page d’accueil, dans le slot que j’ai créé précédemment

Dans le fichier app\design\frontend\package\theme\layout\local.xml, ajouter ceci:

Etape #3:

Dans app\design\frontend\package\theme\template\page\1column.phtml ajouter la ligne suivante:

[Magento 1.9] Customizer les templates d’emails

Via le BO

Source : Customizing Magento email templates par Srikanth AD.

A creuser : via le BO et de le mettre dans un setup update pour en conserver une trace dans Git.

Via le code source

Avec l’extension Yreo Email Override.

  • Override email templates per theme
  • Also override CSV language files
  • Must-have tool for Magento devs

The EmailOverride extension allows Magento developers to create overrides of the email templates stored in app/locale/en_US/template/email in your own Magento custom theme.

[Magento 1.9] Un héritage propre des fichiers SASS dans un thème Custom

Source officielle : Magento 1.9 Responsive Web Design Developer’s Guide > Advanced topics > SASS fallback structure.

Un des soucis majeurs de l’utilisation de SASS est qu’on ne peut pas utiliser de variable dans les chemins d’imports des fichiers *.scss. Ceci reviendrait à devoir, lorsqu’on crée un thème custom, copier l’intégralité des fichiers *.scss du thème parent (y-compris donc ceux qui ne feront l’objet d’aucune surcharge ou ré-écriture). Résultat : énormément de doublons dans les styles chargés en front, puisqu’on récupère l’intégralité des styles du thème parent et ceux du thème enfant.

La solution est d’ajouter la ligne suivante dans le fichier config.rb du thème enfant (ATTENTION: la doc officielle est fausse puisqu’elle recommande de faire la modification dans le fichier config.rb du thème parent !

Si on choisit le thème Rwd et le package Default en tant que fallback :

Les chemins sont relatifs, donc attention à modifier cet exemple en fonction de l’emplacement de votre fichier config.rb (et de votre arbo en général si elle est custom).

Pour plus d’infos, cf la doc officielle donnée en lien plus haut.