Catégorie : Block template system

[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] 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.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] Déplacer la fonctionnalité d’inscription à la newsletter sur la page d’accueil du compte client (dashboard)

Nativement dans Magento, l’inscription à la newsletter se fait depuis une page Abonnements à la newsletter accessible depuis la navigation contextuelle du compte client.

standard-magento_newsletter_subscription
Capture #1

Le but de ce tuto est de déplacer la fonctionnalité directement dans la page Espace de travail du compte.

standard-magento_dashboard
Capture #2

Surcharger le template info.phtml du module Customer:

Le template app/design/frontend/base/default/template/customer/account/dashboard/info.phtml qui affiche la section informations du compte (cf. capture #2) est à copier en l’état et à coller sous app/design/frontend/rwd/[votre_theme]/template/customer/account/dashboard/info.phtml.

Créer un nouveau template form.phtml sur la base du template newsletter.phtml du module Customer :

Le template app/design/frontend/base/default/template/customer/form/newsletter.phtml qui affiche nativement la checkbox d’inscription à la newsletter dans la page Abonnements à la newsletter (cf. capture #1) est à copier en l’état et à coller sous app/design/frontend/rwd/[votre_theme]/template/customer/account/dashboard/newsletter/form.phtml.

Attention : dans ce cas, on change le chemin et le nom du fichier par rapport à l’original car ce dernier demeure exploité dans le site (page Abonnements à la newsletter) et ne doit pas faire l’objet de modifications de manière à continuer de s’afficher et de fonctionner correctement.
Le template form.phtml constitue ainsi un nouveau bloc qu’il conviendra de déclarer dans un fichier Layout.

Déclarer le template form.phtml nouvellement créé dans un fichier Layout :

Si il n’existe pas déjà, créer un fichier app/design/frontend/rwd/[votre_theme]/layout/local.xml et ajoutez-y le code suivant pour déclarer votre nouveau template /customer/account/dashboard/newsletter/form.phtml :

Modification des templates :

Dans info.phtml repérer la ligne <?php /* Extensions placeholder */ ?> (ligne 60 si vous partez bien du fichier sus-nommé) et, juste en dessous, placez le code suivant :

La valeur de getChildHtml() doit être la même que celle de l’attribut <block name="" /> correspondant au bloc déclaré dans le fichier layout (local.xml dans notre exemple) comme celui qui embarque le code du formulaire.

Dans form.phtml repérer la ligne <form action="<?php echo $this->getAction() ?>" method="post" id="form-validate"> (ligne 32 si vous partez bien du fichier susnommé) et la remplacer par :

standard-magento_dashboard-w_newsletter
Capture #3 – le résultat escompté 🙂