Étiquette : viewport

[Magento 1.x] modifier proprement la meta viewport

25/04/2017 /

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:

Les différentes astuces pour défaire un plug-in jQuery après son initialisation

23/07/2015 /

Existe-t’il un moyen d’annuler (à l’image de la méthode unbind) les effets sur des éléments du DOM d’un plug-in jQuery après son initialisation ?

Il n’existe malheureusement pas de méthode jQuery permettant d’annuler les effets d’un plug-in déjà initialisé, car ce dernier doit exécuter du code spécifique pour nettoyer les manipulations de DOM qu’il a entrainé. Nativement, jQuery ne peut anticiper ce que chaque plug-in va faire.

La méthode destroy

Avant de vous lancer dans des développements compliqués, vérifiez que le plug-in jQuery que vous souhaitez activer/désactiver ne bénéficie pas d’une méthode destroy. C’est par exemple le cas pour Superfish ou jQuery UI.

Tirer parti des namespaced events

Ajouter et retirer des évènements sur les listeners

(pas testé) addEventListener et nettoyage avec removeEventListener

Encapsuler le plug-in dans une fonction

Encapsuler le plug-in dans une fonction et l’initialiser uniquement lorsque la largeur du viewport correspond à un certain breakpoint. Lorsqu’on sort du breakpoint prédéfini, on recharge la page à l’aide de document.location = document.location; et le plug-in n’est plus initialisé.

Avantages et inconvénients

  • + Nous n’avons ni à ré-écrire des parties du code natif du plug-in, ni à maintenir du code que nous aurions écrit spécifiquement pour pallier aux manipulations de DOM générées par l’initialisation du plug-in.
  • + Gain de temps énorme en terme de développement.
  • – On recharge la page lorsqu’on change de breakpoint. Si l’utilisateur était en-train de remplir un formulaire à ce moment là, les informations sont perdues.

Nullifier le plug-in

(pas testé) destroy a function in javascript (jquery) – nullify the function

Mettre en cache le DOM sur lequel le plug-in agit avant l’exécution de celui-ci

(pas testé – suggéré dans un fil de discussion stack overflow sans donner d’exemple de code…) One solution may be to cache a pre-plugin .clone() of the element(s) that you could revert back to if/when needed (assuming the plugin doesn’t have « undo » capability).

Activer/Désactiver les handlers d’événements de jQuery (plutôt que d’utiliser les méthodes bind et unbind)

Enable And Disable jQuery Event Handlers (Rather Than Bind And Unbind) .

Reinitializing NivoSlider after simulating destroy

Ok the best way is to forget about all the destroying thing and replace the silder with it’s initial state. suppose the initial state of silder is:

Then the best way to do the destroying and initializing at one step is to do something like:

Quelques ressources d’intérêt sur le sujet :

[Magento 1.9] Afficher un nombre de produits par rangée différent en fonction du viewport dans la liste de catégories/produits du thème RWD

11/12/2014 /

Méthode #1 : vous avez une contrainte responsive

Une solution full CSS qui gère le nombre de produits par rangée en fonction du viewport.
Cette solution repose sur l’exploitation du mixin SASS product-grid natif au thème Rwd et sur la modification de 2 fichiers :

  • app/design/frontend/rwd/yourpackage/template/catalog/product/list.phtml pour l’ajout de classes supplémentaires nécessaires à l’activation des media-queries
  • skin/frontend/rwd/yourpackage/scss/module/_product-list.scss pour l’ajout des mediaqueries

list.phtml

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

…et ajouter les classes suivantes :

Remarque : la logique est la même que celle du système de grid responsive proposé par Bootstrap pour ceux qui connaissent.

_product-list.scss

Pour info : les variables prédéfinies à exploiter

  • $product-column-spacing : espace entre les colonnes (valeur en px).
  • $productsGridActionHeight : hauteur d’un item produit (valeur en px – si la hauteur de l’élément .product-info change, cette valeur devrait être ajustée).

Repérer le mixin suivant :

…et ajouter juste en dessous :

Méthode #2 : vous n’avez pas de contrainte responsive

Prendre la main sur le nombre de produits par rangée en modifiant un paramètre de layout.

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et localiser la ligne suivante :

Modifier la valeur de <count /> selon le nombre de colonnes souhaité.

Méthode #3 (bidouille – ne pas utiliser)

Source : How to change product column quantity in Magento

Il faut modifier 2 fichiers :

  • app/design/frontend/default/yourtheme/layout/catalog.xml
  • app/design/frontend/default/yourtheme/template/catalog/product/list.phtml

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et ajouter les lignes suivantes (ou modifiez les si elles existent déjà) :

Remarque : vous pouvez cibler le template de votre choix en modifiant la valeur entre la balise <template />.

list.phtml :

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

…et la remplacer par :

Remarque : vous pouvez choisir le nombre de colonnes par rangée à affocher en modifiant la valeur de $_columnCount.

[HTML] Viewport : utiliser la balise meta Viewport adéquate suivant le type de site (optimisé mobile ou non).

21/03/2013 /

Viewport pour un site optimisé mobile/smartphone :
(Ressource : Using the viewport meta tag to control layout on mobile browsers)

Viewport pour un site non-optimisé mobile/smartphone :
(Ressource : Viewport meta tag for non-responsive design)

Utiliser le second Viewport si l’affichage de votre site se comporte de manière bizarre sur mobile (votre site n’a pas été prévu pour s’afficher sur mobile, la page est zoomée au chargement).