Mois : mars 2017

[Gulp] Stocker ses options de configuration dans un fichier JSON externe surveillé (gulp watch)

Sources :

Problématique :

Ce message laissé sur Stack Overflow. J’utilise Gulp pour minifier 2 types bien distincts de fichiers JS :

  1. L’ensemble des fichiers JS stockés dans un dossier ./src/js qui sont des plugins custom écrits spécifiquement pour les besoins du projet ou des vendor (ou « third-party ») plugins surchargés et modifiés spécifiquement pour les besoins du projets.
  2. .

  3. Une sélection de fichiers JS stockés dans un dossier ./src/vendor/[...] qui sont des vendor plugins que je souhaite utiliser en l’état, sans les modifier (composant Bootstrap, Modernizr, ou autre…).

J’utilise un fichier de configuration externe gulpconf.json pour (notamment) constituer une liste de chemins vers les third-party plugins que je souhaite ajouter aux sources de mon projet. Ce fichier ressemble à ceci :

Le problème est que lorsque je lance ma tâche gulp watch, des modifications (typiquement, l’ajout d’un chemin vers un nouveau vendor plugin que je souhaite ajouter à mon projet) sont détectées dans mon fichier de config mais elles ne sont pas appliquées. Exemple des logs que j’obtiens :

Solution :

A partir du JSON fourni plus haut, dans le gulpfile.js placer ces différentes parties :

[Hybris] Utiliser les conditions c:if ou sec:authorize pour afficher/masquer des informations

Tester si l’utilisateur est loggué en jstl

ou:

[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.

[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

table

nada …

display: table-cell;

ATTENTION: sous IE10, IE11, dans le cadre d’une mise en page Responsive et si vous utilisez des images, il est possible que le redimensionnement homothétique de celles-ci soit mal géré. Vous pouvez ajouter ce style pour corriger le problème :

[Gulp] Des icônes au format SVG dans vos projets avec gulp-svgstore

Voir une autre approche avec gulp-svg-sprites qui génère un sprite SVG et une feuille SASS avec des mixins prêts à l’emploi.

Des tutos sur la mise en place de sprites SVG avec gulp et le plug-in gulp-svgstore:

Icon System with SVG Sprites sur css-tricks.com.

Obtenir un guide de styles des icônes générées:

Des ressources à propos de SVG:

[jQuery] Activer un bouton radio ou une checkboxe en cliquant sur un autre élément avec la méthode .prop()

Case à cocher (checkbox)

En cliquant sur div#loyaltyCardForm, on active la checkboxe input#offerLoyaltyCard


Bouton radio

Source: Toggling Radio Buttons with jQuery et jsFiddle.

Avec 2 boutons radio seulement

Source: jsFiddle.

Avec plus que 2 boutons radio

Source: jsFiddle.

[Magento 2.x] Les options du slider Fotorama natif

Magento2 : How to disable product image slider on detail page. Dans /theme_folder/etc/view.xml :