produits – devfrontend.info

[Magento 2] Déplacer l’affichage du nombre de produits au panier de minicart.phtml vers un autre template

29/01/2021 / admin

Testé fonctionnel Magento 2.4 CE. Voici le code à déplacer (bloc de code minicart-counter):

<div class="minicart-trigger">
    <button type="button" class="clear" data-toggle="offCanvasRightMiniCart">
        <span class="button-icon-wrapper">
            <svg viewbox="0 0 100 100" class="icon icon-shopping-basket">
                <use xlink:href="#icon-shopping-basket"></use>
            </svg>
            <span class="minicart-counter data-block="minicart">
                <span data-bind="scope: 'minicart_content'">
                    <span class="counter qty empty">
                        <span class="counter-number"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
                    </span>
                </span>
            </span>
        </span>
        <span class="button-label"><?= __('Panier') ?></span>
    </button>
</div>

</svg>

</span>

</button>

</div>

Suggestion de styles:

button {
    display: inline-flex;
    align-items: center;
    .button-icon-wrapper {
        position: relative;
    }
}

button {

display: inline-flex;

align-items: center;

.button-icon-wrapper {

position: relative;

}

//
//  Common (styles-m.css)
//  _____________________________________________

& when (@media-common = true) {
    .minicart-trigger {
        .minicart-counter {
            position: absolute;
            top: -12px;
            right: -12px;
            display: inline-flex;
            align-items: center;
            min-width: 2.8rem;
            height: 2rem;
            padding: 0 7px;
            font-weight: 700;
            font-size: 1.2rem;
            line-height: 1.68rem;
            color: #ffffff;
            background-color: @theme__color__accent;
            border-radius: 50%;
        }
    }
}

// Common (styles-m.css)

// _____________________________________________

& when (@media-common = true) {

.minicart-trigger {

.minicart-counter {

position: absolute;

top: -12px;

right: -12px;

display: inline-flex;

align-items: center;

min-width: 2.8rem;

height: 2rem;

padding: 0 7px;

font-weight: 700;

font-size: 1.2rem;

line-height: 1.68rem;

color: #ffffff;

background-color: @theme__color__accent;

border-radius: 50%;

}

[Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits

12/01/2021 / admin

Testé fonctionnel Magento 2.4!

Dans mon exemple, l’ID « narrow-by-list » est présent deux fois dans le DOM (ce qui n’est pas du tout une bonne pratique) car la liste des filtres s’affiche dans deux zones bien distinctes de la page: 1. en mode horizontal au-dessus de la liste des catégories/produits et dans un volet glissant qui ne s’affiche qu’au clic sur un bouton de type « Voir plus de filtres ».

Il faudra donc adapter un peu mon code à votre propre utilisation.

Chemin: app/design/frontend/MyVendor/MyTheme/Magento_LayeredNavigation/templates/layer/view.phtml.

Je désactive la condition PHP <?php if ($block->getLayer()->getState()->getFilters()) : ?> qui sette la visibilité du bouton « Effacer tout », mais uniquement au rechargement de la page.
J’ajoute un ID <div id="filterActions" class="block-actions filter-actions">.

            <?php //if ($block->getLayer()->getState()->getFilters()) : ?>
                <div id="filterActions" class="block-actions filter-actions">
                    <a href="<?= $block->escapeUrl($block->getClearUrl()) ?>" class="action secondary icon clear small filter-clear">
                        <span><?= $block->escapeHtml(__('Clear All')) ?></span>
                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20"><g><g><g><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="20" d="M1 6.99v0l3 4.5v0l3.5-4v0"/></g><g><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="20" d="M13.5 19.5A9.5 9.5 0 1 0 4 10v1.494"/></g></g></g></svg>
                        </span>
                    </a>
                </div>
            <?php //endif; ?>

<?php //if ($block->getLayer()->getState()->getFilters()) : ?>

<a href="<?= $block->escapeUrl($block->getClearUrl()) ?>" class="action secondary icon clear small filter-clear">

<span><?= $block->escapeHtml(__('Clear All')) ?></span>

</span>

</a>

</div>

<?php //endif; ?>

Dans le même fichier view.phtml, j’ajoute ce bout de code javaScript (il vous faudra probablement adapter le ciblage du selecteur suivant qui n’existera pas chez vous: let FILTER = $('#narrow-by-list.is-view-top').find('.active');):

<script>
    require([
        'jquery'
    ], function($){
        'use strict';

        // On vérifie dans le noeud '#narrow-by-list.is-view-top' (view-top.phtml)
        // qu'il y a au moins 1 filtre d'actif.
        function checkForActiveFilter() {
            let FILTER = $('#narrow-by-list.is-view-top').find('.active');

            if (FILTER.length >= 1) {
                return true;
            } else {
                return false;
            }
        }

        // On sette la visibilité du bouton "Effacer tout" en fonction du résultat
        // retourné par la fonction checkForActiveFilter().
        function setFilterActionsVisibility() {
            const $FILTER_ACTIONS = $('#filterActions');

            if ( checkForActiveFilter() == true ){
                $FILTER_ACTIONS.removeClass('no-active-filter');
            } else {
                $FILTER_ACTIONS.addClass('no-active-filter');
            }
        }

        // console.log("is any filter active? " + checkForActiveFilter());
        
        setFilterActionsVisibility();
    });
</script>

require([

'jquery'

], function($){

'use strict';

// On vérifie dans le noeud '#narrow-by-list.is-view-top' (view-top.phtml)

// qu'il y a au moins 1 filtre d'actif.

function checkForActiveFilter() {

let FILTER = $('#narrow-by-list.is-view-top').find('.active');

if (FILTER.length >= 1) {

return true;

} else {

return false;

}

// On sette la visibilité du bouton "Effacer tout" en fonction du résultat

// retourné par la fonction checkForActiveFilter().

function setFilterActionsVisibility() {

const $FILTER_ACTIONS = $('#filterActions');

if ( checkForActiveFilter() == true ){

$FILTER_ACTIONS.removeClass('no-active-filter');

} else {

$FILTER_ACTIONS.addClass('no-active-filter');

}

// console.log("is any filter active? " + checkForActiveFilter());

setFilterActionsVisibility();

});

</script>

On n’oublie pas le petit CSS qui va bien:

#filterActions.no-active-filter {
    display: none !important;
}

#filterActions.no-active-filter {

display: none !important;

}

[Change cross commerce] Backoffice : configuration du bloc de facettes pour affichage sur Liste de produits

26/03/2015 / admin

1. Associer des facettes par défaut à une liste de produits

E-commerce > Catalogue > (sidebar, section Merchandising) Liste de produits > éditer une liste de produits.

Dans la section Facettes Associées, sélectionner les facettes de tri à affecter par défaut à la liste de produits sélectionnée.

2. Afficher les facettes dans la page fonctionnelle Liste de Produits

Gestion de contenus > Sites et pages > (onglet) Pages Fonctionnelles > (page) Liste de Produits.

(sidebar) Contenu de la page > sélectionner le bloc Rbs_Elasticsearch_StoreFacets et configurer les propriétés de bloc comme suit :

Remarque : si vous cochez « non » pour Utiliser la liste de la section, vous pouvez redéfinir des facettes spécifiques pour la page que vous êtes en-train d’éditer.

Articles récents

Catégories

Archives

Méta

Étiquette : produits

[Magento 2] Déplacer l’affichage du nombre de produits au panier de minicart.phtml vers un autre template

[Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits

[Change cross commerce] Backoffice : configuration du bloc de facettes pour affichage sur Liste de produits

1. Associer des facettes par défaut à une liste de produits

2. Afficher les facettes dans la page fonctionnelle Liste de Produits