Faire apparaître un menu dédié boutique

Fabriquons et faisons apparaître un menu "Spécial boutique" qui s'affichera dans notre magasin et pas ailleurs.

Nous savons que nos produits apparaissent grâce à une page statique pour laquelle nous définissons un modèle avec la liste déroutante "Template" lors de sa création.

Le truc consiste à préparer ce template avec le code ci-dessous qui est le nôtre.

ATTENTION :

Nous avons modifié l'appel à la feuille de style par l'ajout d'une nouvelle class nommée ici "navboutik" afin de donner une autre couleur que le menu d'origine.

Trouvez cette classe en dessous du code du template.

Pensez aussi à modifier les liens faisant référence à ce site


<?php include(dirname(__FILE__).'/header.php'); ?>

    <main class="main grid" role="main">

        <section class="col sml-12 med-8">

            <article class="article static" role="article" id="static-page-<?php echo $plxShow->staticId(); ?>">

                <header>
                    <h1>
                        <?php $plxShow->staticTitle(); ?>
                    </h1>
                </header>
<!--<section class="col sml-12">-->
<nav class="navboutik" role="navigation">
            <ul class="menu expanded">
        <?php
                
                $plxMyShop = $plxShow->plxMotor->plxPlugins->aPlugins['plxMyShop'];
                $plxMyShop->donneesModeles["plxPlugin"] = $plxMyShop;
                
                if (isset($plxMyShop->aProds) && is_array($plxMyShop->aProds)) {
                    
                    echo "<ul>";
                    
                    foreach ($plxMyShop->aProds as $kRubrique => $vRubrique) {
                        
                        if (    $vRubrique['menu'] === 'non'
                            ||    $vRubrique['menu'] === ''
                            ||    (1 !== $vRubrique["active"])
                        ) {
                            continue;
                        }
                        
                        $lien = $plxShow->plxMotor->urlRewrite("index.php?product$kRubrique/{$vRubrique["url"]}");
                        
                        ?>
                            <li>
                                <a href="http://plxmyshop.reseauk.info/<?php echo htmlspecialchars($lien);?>">
                                    <?php echo htmlspecialchars($vRubrique['name']);?></a>
                            </li>
                        <?php
                    }
                    
                    echo "</ul>";
                    
                }
                
                
            ?>    </ul></nav>
        
        <!--</section>-->

                <section>
                    <?php $plxShow->staticContent(); ?>
                </section>

            </article>

        </section>

        <?php include(dirname(__FILE__).'/sidebar.php'); ?>

    </main>

<?php include(dirname(__FILE__).'/footer.php'); ?>
 


Nouvelle class dans la feuille de style defaut/CSS/theme.css


/* ----- Menu boutique----- */

.navboutik {
    background-color: #ffffff;
    height: 2.25rem;
}
.nav .menu.expanded li:hover {
    background-color: #222;
}
.nav a {
    color: #eee;
}
@media (max-width: 767px) {
    .nav {
        background-color: #fff;
        border-bottom: 1px solid #bbb;
        height: auto;
        left: 0;
        max-height: 200px;
        overflow-y: auto;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9999;
    }
    .nav .menu.expanded li:hover {
        background-color: #ddd;
    }
    .nav a {
        color: #258fd6;
    }
    .nav a:hover {
        color: #444;
    }
    .responsive-menu label {
        background-color: #222;
    }
    .header {
        margin-top: 2rem;
    }
}

Classé dans : Tutoriels - Mots clés : aucun

Les commentaires sont fermés.