Étiquette : désactiver

[CSS] Désactiver le scroll dans la page lorsqu’un élément en position absolue (de type Modale, Off-Canvas, …) est ouvert en sur-impression

21/01/2021 /

ATTENTION: cette solution testée fonctionnelle est plus simple à mettre en place que les solutions précédemment citées sur ce blog:

Source: Disable Scrolling on Body

[Magento 2] Afficher/masquer des fonctionnalités ou des modules depuis les layouts XML ou le fichier app/etc/config.php

23/12/2019 /

Un grand nombre de fonctionnalités de Magento 2 peuvent s’activer/désactiver depuis un fichier layout XML dans le code source. Depuis le fichier app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml de votre thème, par exemple. En voici une liste non exhaustive:

Désactiver la fonctionnalité de comparaison produit dans Magento 2

Testé fonctionnel Magento 2.3. Source: Magento 2: Safe and easiest way to disable Compare products & Wishlist Module.

Dans le fichier app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml de votre thème, ajouter ceci:

Désactiver le module wishlist (produits favoris) dans Magento 2

Testé fonctionnel Magento 2.3. ATTENTION: erreurs PHP en front après un cache:clean avec un thème enfant du thème Supro. Peut se produire avec d’autres thèmes. Dans ce cas, se rabattre sur cette solution.

ATTENTION: lorsque vous désactivez des modules, veillez à exécuter la commande $ cache:clean de Magento 2 et à rafraîchir votre front pour vérifier que vos modifications passent sans générer d’erreurs.

Dans le fichier app/etc/confing.php repérer les trois modules Magento_Wishlist, Magento_WishlistAnalytics, Magento_WishlistGraphQl et les passer à 0 comme ceci:

Note: il est également possible de désactiver un module Magento 2 via une commande $ module:disable <nom_du_module>. En exécutant cette commande, le fichier config.php sera mis à jour automatiquement.

Supprimer la fonctionnalité wishlist (produits favoris) dans Magento 2

Testé fonctionnel Magento 2.3.

Préférer la solution ci-dessus si elle fonctionne, car elle permet une réactivation plus rapide de la fonctionnalité.

Dans le fichier app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml de votre thème, ajouter ceci:

De la sidebar (dans le compte client par exemple)

Essayer d’abord juste avec le 1er:

Ce n’est pas fini! Il vous faudra ensuite trouver le ou les templates PHTML qui contiennent des résidus de la fonctionnalité Wishlist qui ne peuvent être retirés via un fichier layout XML. Dans le thème Luma, le template contient les classes action towishlist sur un élément a. Dans le thème Supro, le markup HTML <div class="top-wishlist">.

Désactiver les avis et les notes produit (reviews & rating)

Testé fonctionnel Magento 2.3.

Dans le fichier app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml de votre thème, ajouter ceci:

Supprimer la navigation par filtres dans la liste produits

Masquer le titre principal d’une page

Afficher/masquer des entrées du menu en sidebar du compte client

[Magento 2] Ajouter, déplacer, supprimer des entrées dans le menu de navigation du compte client en sidebar.

Afficher/masquer l’encart reorder en sidebar et l’encart dernières commandes du dashboard client

Dans app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account_index.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 :

[Bootstrap 3] Un site ciblant uniquement le support Desktop en désactivant les classes responsive déclarées dans votre code HTML avec les media-queries

15/12/2014 /

Source doc officielle : Disabling responsiveness.

Méthode #3

Pas encore testée : idée au-réveil-ce-matin…

Conserver l’ensemble des classes .col-xs-, .col-sm, .col-md, .col-lg dans la CSS mais supprimer les media-queries. Attention : si le site comporte des composants responsive hors grille, il faudra également vérifier la présence de media-queries au niveau des styles qui servent à les afficher.
Pour résumer : vos CSS doivent être exemptes de toute media-querie.

Méthode #2 :

Achtung! Après un test rapide, n’a pas l’air de fonctionner mais je n’ai peut-être pas tout bien fait comme il fallait … A re-tester éventuellement.

Source : How to remove responsive features in Twitter Bootstrap 3?

Utiliser l’éditeur en ligne Customize and download pour générer une grille non responsive.
Sous Media queries breakpoints entrer les paramètres suivants :

Attention : ne pas inclure les responsive utilities dans vos styles osus peine de voir s’appliquer les classes de type .hidden-xs ou .visible-xs.

Test #1 :

Attention : solution expérimentale encore non-testée, mais sachant que je ne trouvais pas de solution à ma convenance sur le net…
Ne fonctionne pas.

Cette astuce consiste à conserver l’ensemble des classes responsive dans votre code HTML (pas besoin de retirer la succession de classes col-xs-12 col-sm-6 col-md-6 col-lg-4).
Avec quelques lignes de CSS, vous pourriez donc très bien partir systématiquement de vos templates HTML conçues pour un affichage fluide sans les modifier pour obtenir un affichage figé Desktop.

Admettons que le breakpoint ciblé correspond aux classes préfixées par col-md- (Medium devices : Desktops (≥992px) défini par défaut à 970px dans la grille Bootstrap.)