Étiquette : mobile

[Magento 2] Un menu de navigation drilldown en mobile avec Foundation 6 à partir du Topmenu.php natif

Côté app/code, création d’un module Topmenu spécifique

En ligne de commande pour créer et activer un module qui s’appelle Topmenu:

…puis:

Créer un module et étendre le Block Topmenu.php

Référence: [Magento 2] Surcharger un Block ou un Model natif.

Les seuls fichiers à conserver après la création du module sont (depuis app/code/<MyNamespace>/Topmenu/):

  • /Block/Html/Topmenu.php (qu’on va créer juste après)
  • /etc/di.xml
  • /etc/module.xml
  • /registration.php

Modifier app/code/<MyNamespace>/Topmenu/etc/di.xml:

Modifier app/code/<MyNamespace>/Topmenu/etc/module.xml:

On déclare hériter de <module name="Magento_Theme" />:

Créer app/code/<MyVendor>/Topmenu/Block/Html/Topmenu.php:

Dans notre exemple, il s’agit du fichier vendor/magento/module-theme/Block/Html/Topmenu.php que nous allons surcharger comme suit dans app/code/<MyNamespace>/Topmenu/Block/Html/Topmenu.php. Nous y ajoutons les classes CSS nécessaires au fonctionnement du composant Drilldown de Foundation 6:

Côté app/design/frontend/<MyVendor>/<MyTheme> (theme)

Créer app/design/frontend/<MyVendor>/<MyTheme>/Sm_Venuse/templates/html/mobile/nav-mobile.phtml:

Référence: [Magento 2] Ajouter le framework Foundation 6 for sites dans un thème et rendre ses widgets javascript disponibles avec RequireJS.

Dans notre exemple, il s’agit du fichier app/design/frontend/Sm/venuse/Sm_Venuse/templates/html/mobile/nav-mobile.phtml que nous allons surcharger comme suit dans app/design/frontend/<MyVendor>/<MyModule>/Sm_Venuse/templates/html/mobile/nav-mobile.phtml:

Gestion des styles

On peut éclater les styles de Foundation en deux fichiers distincts qu’on va consigner dans un dossier components:

app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_menu.less

app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_drilldown.less

On ajoute les deux composants dans _extend.less

…ou ailleurs dans une feuille de style de votre thème. Il faut juste que les deux fichiers soient importés. Veiller également à ce que les variables concernant les couleurs soient accessibles pour la compilation. Dans mon exemple, @store_base-color.

Gestion des JS

Dans mon exemple, je n’ai pas eu besoin de modifier le JS natif de Foundation. Je l’importe donc via le dossier vendor: app/design/frontend/<MyVendor>/<mytheme>/web/js/vendor/ (si vous avez bien suivi les directives données dans cet autre billet).

Ne pas oublier de créer app/design/frontend/<MyVendor>/<mytheme>/requirejs-config.js

[Ergonomie] Galerie de menus de navigation de sites e-commerce

Target

Lowe’s

Nordstrom

Nordstrom’s Mobile E-Commerce UX : Navigation & Product Browsing · 4 Guidelines · Score: 97.2. “State of the Art” Performance.

Curry’s UK

Saint Maclou

[CSS] Activer un champ Select en cliquant à travers un élément sous-jacent avec la propriété CSS pointer-events

Source : Click through a DIV to underlying elements

Astuce utile lorsqu’on veut exploiter, sur périphériques mobiles et tactiles (smartphones, tablettes), le widget de l’élément de formulaire <select /> proposé nativement par les navigateurs.
Ci-dessous affichage dans un navigateur desktop vs. smartphone.

Attention : la partie javascript visant à changer le visuel du drapeau en fonction du choix de l’utilisateur ne fonctionne en l’état que si la page est entièrement rechargée.
On ne peut pas simuler le clic sur un élement <select /> en jQuery.

widget_select

[Bootstrap] Un breakpoint à 480px pour une prise en charge du rendu en orientation paysage sur périphériques mobiles (smartphones).

Source : Introduces a new break point ‘xs1’ at 480px.

Utilisation :

Vous obtenez une batterie de nouvelles classes nommées d’après le modèle Bootstrap col-xs1-1, col-xs1-2, col-xs1-3, etc.. qui vous permettront de cibler les périphériques mobiles type smartphones en orientation paysage.

Ces boîtes s’organiseront en mode 1×4 on 0 > 479px, 2×2 on 480 > 767px, 4×1 on 767 > *px.

Mise en place :

Dans la CSS Bootstrap, intercaler entre les styles définis pour les classes .col-xs- et .col-sm- :

Intercaler entre .hidden-xs et .hidden-sm :

[CSS] Scroller dans une page contenant une iframe sur périphériques mobiles.

Sources : Momentum Scrolling on iOS Overflow Elements et Scroll IFRAMEs on iOS.

La présence d’une iframe peut venir bloquer le scroll dans le corps de la page qui accueille celle-ci. Les articles cités en source remontent un souci sous iOS, mais j’ai pu le constater également sous Android (Nexus 5 + Navigateur Chrome).

Afin de contourner le problème, appliquer les styles suivants sur l’élément qui englobe votre iframe :