Afficher uniquement le menu mobile

[Richard42]

Bonjour,

je suis sur prestashop 8 avec le theme Classic, et je voudrai utiliser le menu mobile quel que soit la taille d'écran.

Pour le moment j'arrive a afficher l'icone du menu mobile en retirant la class visible--mobile dans le header.tpl

<button class="visible--mobile btn" id="menu-icon" data-toggle="modal" data-target="#mobile_top_menu_wrapper">

Le bouton fonctionne, cependant le menu ne s'affiche pas, la fenêtre reste vide jusqu'à ce que l'écran soit inférieur à 992px.

Je ne trouve pas la solution dans le css, j'ai l'impression que la solution est plus du côté du fichier layout-both-column.tpl

{* offcanvas menu *}
        <div class="modal fade" id="mobile_top_menu_wrapper" tabindex="-1" role="dialog" data-modal-hide-mobile>
            <div class="modal-dialog modal-dialog__offcanvas" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="js-top-menu top-menu-mobile" id="_mobile_top_menu"></div>
                        <div class="js-top-menu-bottom">
                            <div id="_mobile_currency_selector"></div>
                            <div id="_mobile_language_selector"></div>
                            <div id="_mobile_contact_link"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {* end offcanvas menu *}

Est-ce que quelqu'un a déjà rencontré ce cas de configuration et pourrait m'aiguiller ?

Merci

[Richard42]

Up !

Personne n'a une idée de comment est géré le menu desktop / mobile ?

Merci

[Richard42]

J'ai fini par comprendre un peu mieux comment fonctionne la gestion de la navigation desktop / mobile du theme.

dans le fichier theme.js le responsive est géré ici :

 function Fe() {
            Me.a.responsive.mobile
                ? (o()("*[id^='_desktop_']").each(function (t, e) {
                      var n = o()("#" + e.id.replace("_desktop_", "_mobile_"));
                      n.length && ze(o()(e), n);
                  }),
                  o()("[data-collapse-hide-mobile]").collapse("hide"))
                : (o()("*[id^='_mobile_']").each(function (t, e) {
                      var n = o()("#" + e.id.replace("_mobile_", "_desktop_"));
                      n.length && ze(o()(e), n);
                  }),
                  o()("[data-collapse-hide-mobile]").not(".show").collapse("show"),
                  o()("[data-modal-hide-mobile].show").modal("hide")),
                Me.a.emit("responsive update", { mobile: Me.a.responsive.mobile });
        }
        (Me.a.responsive = Me.a.responsive || {}),
            (Me.a.responsive.current_width = window.innerWidth),
            (Me.a.responsive.min_width = 992),
            (Me.a.responsive.mobile = Me.a.responsive.current_width < Me.a.responsive.min_width),
            o()(window).on("resize", function () {
                var t = Me.a.responsive.current_width,
                    e = Me.a.responsive.min_width,
                    n = window.innerWidth,
                    i = (t >= e && n < e) || (t < e && n >= e);
                (Me.a.responsive.current_width = n), (Me.a.responsive.mobile = Me.a.responsive.current_width < Me.a.responsive.min_width), i && Fe();
            }),
            o()(document).ready(function () {
                Me.a.responsive.mobile && Fe();
            });

après quelques échanges avec notre copain Chat GPT il me propose ceci à la place :

function Fe() {
				o()("*[id^='_desktop_']").each(function (t, e) {
					var n = o()("#" + e.id.replace("_desktop_", "_mobile_"));
					n.length && ze(o()(e), n);
				});
				o()("[data-collapse-hide-mobile]").collapse("hide");
				o()("[data-modal-hide-mobile].show").modal("hide");
			}

			o()(document).ready(function () {
				Fe();
			});

ça fonctionne ainsi, cependant n'étant pas du tout à l'aise avec js je voudrai avoir quelques avis sur ce code (très) simplifié.

En tout cas ça fonctionne très bien pour avoir uniquement le menu mobile sur toute les tailles d'écran avec quelques modifs css et tpl

Bonne soirée

[Soheib]

Salut c'est exactement ce que je recherche a reproduire cependant je suis sur presta 1.7.8  tu pense que cela peux fonctionner ? 

[solsol69]

Bonjour a tous

peut être une réponse ici