Tagfor

[Magento 2] Etirer de manière homothétique le visuel principal de la fiche produit affiché via Fotorama

Testé fonctionnel Magento 2.4. La markup HTML de la fiche produit a cependant été surchargé par rapport au standard. On retrouve la première rangée d’informations sur deux colonnes (gauche: visuel principal et carousel Fotorama; droite: libellé produit, prix, formulaire d’ajout au panier).

Surcharger la largeur et la hauteur max du visuel principal dans le fichier etc/view.xml de votre thème:

Le code LESS (qui fait appel à un mixin spécifique permettant d’écrire des boucles FOR qui exploitent des données consignées dans un ARRAY. Il ne faudra donc pas oublier de l’inclure dans votre projet! (Documentation).
Lisez les commentaires dans mon code pour plus de documentation:

Version non factorisée (ça fait la même chose en moins bien conceptualisé et en beaucoup plus chiant à maintenir):

[javaScript] Mettre en cache un sous-niveau de navigation pour éviter un crash du navigateur sous iOS (iPhone)

Inspiration pour ce code:


Je pars d’un menu dont la structure HTML est la suivante (une liste imbriquée simple) : https://jsfiddle.net/xpvt214o/513005/.

Sous iPhone, le menu a visiblement trop d’entrées. En tout cas lorsqu’on l’affiche, le navigateur Safari crashe et recharge la page. J’ai remarqué au cours de mes tests qu’en supprimant le dernier sous-niveau d’arborescence (.level2 dans mon exemple), le navigateur ne crashait plus. J’ai donc mis en place un système de cache du dernier sous-niveau d’arborescence de mon menu.

Ce système consiste à mettre en cache dans un tableau javaScript array et à l’aide des méthodes .push() et .detach() (jQuery) tous les derniers sous-niveaux d’arborescence. Ils ne sont, de cette manière, plus présents dans le DOM lorsqu’on ouvre le menu qui se trouve ainsi beaucoup plus léger à manipuler.

A l’activation d’un sous-menu mis en cache, on le fait ré-apparaître dans le DOM en le sortant du tableau. On fait le lien entre la rubrique activée et la sous-rubrique correspondante via un système d’IDs:

On invoque la fonction searchStringInArray pour rechercher dans l’intégralité des entrées du tableau cachedMenuEntries l’information [*].context.id qui va matcher avec l’ID de la rubrique que nous venons d’activer:

Axes d’amélioration

  • Utiliser un tableau clé/valeur (key/value)

D’autres pistes si vous avez des crashes iOS

[Javascript] Créer un tableau de sommes cumulées avec For

Source: Creating an array of cumulative sum in javascript et demo.

[LESS] Un mixin pour boucler dans un tableau contenant des valeurs allant par pairs

Attention: le plugin for.less utilisé dans l’exemple ci-dessous est déprécié selon un commenatire laissé dans le code source de l’auteur. Il faut désormais utiliser List/Array manipulation for Less.

Source: Loop over an array of name value pairs in LESS et mixin sous Git.

CSS color codes & names (tableaux de correspondances Nom de couleur > Code hexadécimal).

Mixin LESS (ne pas oublier d’inclure le mixin for.less) :

Rendu CSS :

[PHP] Les fondamentaux pour développeurs front-end

Data structures

Variables

  • Prefixed by $
  • Alphanumeric characters and _

Arrays

  • Lists that map values to keys
  • Vector array: simple list of values
    array('stingray', 'telescope');
    array(0, 1);
  • Hashtable array: associative list
    array('red' => 'cherries, 'green' => 'apple');

Si nous voulons afficher le 1er élément de notre tableau :

…nous affichera « stingray ».

…nous affichera « apple ».

ou:

ou:

…nous afficheront tous « Bonjour le monde! ».

Fonction print_r() pour afficher l’ensemble des valeurs contenues dans un tableau Array

…nous affichera Array ( [0] => tab1 [1] => tab2 )

Objects

  • Properties
  • Methods

Object properties

drupal7-object_properties

…nous affichera « blog/1 ».

Les constantes

Les constantes sont des valeurs qui, une fois qu’elles ont été définies dans le code, ne peuvent plus être modifiées. C’est intéressant pour définir des accès à une BDD ou les infos sont les mêmes sur toutes les pages.

…nous affichera « I like PHP. ».

Si on essaye de redéfinir la valeur de la constante:

…on obtient une erreur ( ! ) Parse error: syntax error, unexpected ‘=’ in C:\wamp64\www\test\index.php on line 10
car une constante ne peut pas être redéfinie.

Les opérateurs

L’opérateur de concaténation

L’opérateur point ..

ou:

On obtient : hello world<br />Bonjour le monde. A noter: l’utilisation de guillemets "" par rapport aux simples quotes '' permet une interprétation des variables sans concaténation.

On obtient : « 12 ».

On ne peut pas afficher un echo d’un tableau. Pour cela, il faut utiliser print_r.

…nous affiche : « Array ( [0] => 1 [1] => 2 ) Array ( [0] => 3 [1] => 4 ) ».

Les opérateurs arithmétiques

Vont permettre d’effectuer des calculs sur les valeurs de différentes variables. Ils sont au nombre de 5 :

  • +
  • *
  • /
  • %

On obtient : « 1 ». La représentation de toto en valeur numérique est « 0 ».

On obtient : « 1 ».

On obtient : « 7 ».

On obtient : « 7 ».

var_dump()

Renvoie une type de variable et son contenu.

On obtient :

C:\wamp64\www\test\index.php:6:
array (size=3)
0 => int 1
1 => int 2
2 => int 5

On a conservé les valeurs de rang définies dans le premier tableau et on a ajouté la nouvelle valeur de rang définie dans le second tableau.

C:\wamp64\www\test\index.php:6:
array (size=3)
0 => int 3
1 => int 4
2 => int 5

On obtient le tableau d’origine puisqu’il n’y a aucune valeur à compléter dans le deuxième tableau.

Les opérateurs d’affectation

vont permettre d’affecter une valeu à une variable ou de redéfinir la valeur d’une variable.

ou:

va afficher : « 1 / 2 ».

va afficher : « 1 / 11 ».

va afficher : « 1 / 1toto ».

Post-incrémentation et pré-incrémentation

Incrémentation/décrémentation d’une unité est très utilisé en PHP, en particulier pour la gestion des boucles.

Post-incrémentation

va afficher : « 1 / 2 ».

Pré-incrémentation)

va générer : « 2
2″.

Les opérateurs de comparaison et les conditions

On obtient : « a est égal à b ».

On obtient aussi : « a est égal à b ». PHP va essayer de rendre les types compatibles et de faire la comparaison sur des types compatibles.

On obtient aussi : « a est égal à b » car pour PHP, ‘toto’ est égal à 0.

Comparer non seulement la valeur des variables mais aussi leurs types

Rajouter un troisième signe = :

On obtient : « a est différent de b ».

On obtient : « a est différent de b ».

on obtient : « a est inférieur à b ».

On obtient: « a est supérieur ou égal à b ».

on obtient: « a est différent de b ».

La non égalité avec !=

Tester la non égalité sans prendre en compte le type :

nous donne: « a est égal à b »

Tester la non égalité en prenant en compte le type. On rajoute un caractère = :

nous donne: « a est différent de b »

Comparer des nombres décimaux avec la fonction bccomp()

nous donne: « a est égal b ».

nous donne: « a et b sont différents ».

nous donne: « a est égal b ».

Les opérateurs logiques ou booléens

Un booléen est un type particulier en informatique, dont la valeur ne peut être que vrai ou faux.

nous affiche: « Je pense que Dieu existe ».

nous affiche: « Je pense que Dieu n’existe pas ».

L’opérateur de comparaison et (&& et and)

nous affiche: « Condition non vérifiée ».

nous affiche: « Condition vérifiée ».

nous affiche: « Condition non vérifiée ». Pour que une expression et une autre soient vérifiées, il faut que les deux expressions aient un équivalent booléen égal à vrai.

nous affiche: « Condition vérifiée », puisque l’équivalent d’une chaîne de caractères non vide est vrai et que l’équivalent booléen d’un nombre non nul est vrai.

nous affiche: « Condition non vérifiée », puisque l’équivalent booléen d’un nombre nul est false.

nous affiche: « Condition vérifiée ».

Attention: && et and ne donnent pas toujours les mêmes résultats:

on obtient: « Condition non vérifiée ».

on obtient: « Condition vérifiée ».

Le and correspondrait à une notation ($c = $a) and $b.

Le &&& correspondrait à une notation $c = ($a && $b).

L’opérateur de comparaison ou (|| et or)

Attention au cas particulier xor qui est une expression exclusive : il faut uniquement que l’un des booléens soit vrai.

On obtient: « Condition vérifiée ».

L’opérateur de négation (!)

Va renvoyer l’inverse de la valeur donné (not false va donner true).

Va donner: « Condition vérifiée ».

Conditionals

if/else

on obtient: « a est égal à b ».

Variations on a theme: « colon » notation

drupal7-colon_notation

Si la valeur de $a est égale à la valeur de $b, afficher la mention « It’s equal »; autrement, ne rien imprimer.

L’intérêt de cette syntaxe réside dans le fait qu’on peut y insérer du markup HTML.

Switch statement

Multiple statements could match. That’s why we use break;.

Loops

While

Commence à 0. Va looper jusqu’à atteindre 10, puis s’arrêtera. « She loves you » sera affiché 10 fois de suite.

for

Pareil que while. Commence à 0. Va looper jusqu’à atteindre 10, puis s’arrêtera. « She loves you » sera affiché 10 fois de suite.

foreach

…nous affichera :

stingraytelescope

…nous affichera :

stingray
telescope

Functions

  • Encapsulate frequently repeated tasks
  • Accept parameters as input ($a et $b dans notre exemple)
  • Give a return value as output ($c)

…nous affiche « 10 ».

…nous affiche « 4 ».

Pass parameters by reference

Un « & » avant le paramètre « $a »:

…nous affiche toujours « 10 ».

…nous affiche « 5 ».

Précisions sur l’affichage des chaînes de caractères

Utiliser des anti-slashes \ pour que les double-quotes (guillemets) " soient interprêtées correctement côté client:

ou:

…nous afficheront « La langue affichée est stockée dans la variable $affiche ».

…nous afficheront « La langue affichée est stockée dans la variable fr » (ou fr est la valeur stockée dans la variable $affiche.

Syntaxe rdoc

A noter:

  • on utilise EOT dans notre exemple, mais on peut mettre n’importe quoi d’autre pourvu que la chaîne de caractères ouvrante et fermante correspondent
  • j’ai l’impression que cette méthode ne fonctionne pas si le contenu rdocké se trouve imbriqué dans le même bout de code PHP (<?php ... ?>).

© 2021 devfrontend.info

Theme by Anders NorénUp ↑