Étiquette : liste

[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;

}

[Magento 2] Des images au survol hover dans la liste produit en ajoutant un attribut custom

25/05/2020 / admin

Testé fonctionnel Magento 2.3, 2.4!

Attention: j’ai trouvé plusieurs tutos sur le net qui m’ont mis sur la bonne voie, mais seul celui-ci comporte l’ensemble des éléments qui permettra de mettre en place la fonctionnalité voulue: How to change product image on hover?.

En backoffice:

Créer un attribut custom hover_image

boutiques > attributs > produit

ajouter un attribut

propriétés de l’attribut:

libellé par défaut: « hover_image »

type d’entrée…: « image »

Propriétés avancée des attributs:

code: « hover_image »

ajouter aux option de colonne: « non »

utiliser dans les options de filtrage: « non »

Propriétés du front office: (se référer au paragraphe ATTENTION juste en-dessous)

Visible sur les pages du catalogue de la boutique: oui

Utiliser dans les listes de produits: oui

bouton enregistrer l’attribut

ATTENTION

Là, vous vous dites probablement: « Mais où qu’il est ce menu Propriétés du front office??? ». Il y a un bug dans le BO de Magento 2 qui applique un display: none; sur cette entrée de menu, mais elle est bien présente!!! Supprimer le display: none; avec l’inspecteur d’éléments pour pouvoir accéder à ce menu.

Sinon, vous pouvez également suivre la méthode suivante et appliquer directement la modification en base de données:

Now we have to use this attribute in the listing page. So we have to make used_in_product_listing to 1. We can do that by using MySQL.

You need to take hover_image Attribute_ID from admin. You can go to your hover_image attribute page in admin and get its ID from URL.

Suppose that Attribute_ID is 99 in our case. Now, go to the database and select the catalog_eav_attribute table. Select the attribute with id 99 and change the value of the used_in_product_listing column to 1.

Or use below MySQL query :

UPDATE catalog_eav_attribute SET used_in_product_listing = ‘1’ WHERE attribute_id = 99;

1

UPDATE catalog_eav_attribute SET used_in_product_listing = ‘1’ WHERE attribute_id = 99;

Plaçons notre attribut custom hover_image dans le bon groupe d’attributs (images)

boutiques > attributs > jeu d’attributs

choisir le jeu d’attributs (« default » si il n’y a que celui là)

dans la colonne « groupes » glisser le nouvel attribut hover_image dans le dossier « images » (normalement, vous le trouverez tout en bas de l’arbre)

bouton enregistrer

Affectons une image hover à l’un de nos produits

catalogue > produits

éditer un produit

boutons ajouter un attribut

cocher hover_image

bouton ajouter la sélection

section Images et vidéos

accéder à la configuration de l’image que vous souhaitez voir apparaître au hover en cliquant sur la petite icône en forme de damier située en haut à gauche du visuel

Dans Role, sélectionner hover_image

cliquez sur la croix pour fermer

bouton enregistrer

Dans le code source:

app/design/frontend/VendorName/themename/etc/view.xml

<?xml version="1.0"?>  <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd"> <media> <images module="Magento_Catalog"> <image id="category_page_grid_hover" type="hover_image"> <width>261</width> <height>206</height> </image> <image id="category_page_list_hover" type="hover_image"> <width>261</width> <height>206</height> </image> </images> </media> </view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?xml version="1.0"?>

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="category_page_grid_hover" type="hover_image">
                <width>261</width>
                <height>206</height>
            </image>
            <image id="category_page_list_hover" type="hover_image">
                <width>261</width>
                <height>206</height>
            </image>
        </images>
    </media>
</view>

app/design/frontend/VendorName/themename/Magento_Catalog/templates/product/list.phtml

$_imageHelper = $this->helper('Magento\Catalog\Helper\Image'); $hoverimg = 'category_page_grid_hover'; $hoverimg = 'category_page_list_hover';

1
2
3

$_imageHelper = $this->helper('Magento\Catalog\Helper\Image');
$hoverimg = 'category_page_grid_hover';
$hoverimg = 'category_page_list_hover';

<?php // Product Image ?> <?php // Product Image Hovered $productHoverImage = $_imageHelper->init($_product, $hoverimg); $productHoverImageUrl = $productHoverImage->getUrl(); $placeholder = "placeholder"; ?> <a href="<?= $block->escapeUrl($_product->getProductUrl()) ?>" class="product photo product-item-photo" tabindex="-1" <?php if(strpos($productHoverImageUrl, $placeholder) !== false) : ?> data-has-hovered-state="false" <?php else : ?> data-has-hovered-state="true" <?php endif; ?> > <?= $productImage->toHtml() ?> <?php // Product Image Hovered ?> <?php if(strpos($productHoverImageUrl, $placeholder) !== false) : ?> <?php // "Placeholder" word Found in URL! -> no Image Hovered was set ?> <?php else : ?> <?php // "Placeholder" word Not Found in URL! -> show existing Image Hovered ?> <img class="product-image-photo" src="<?php echo $productHoverImageUrl; ?>" alt="<?php echo $productHoverImage->getLabel(); ?>" max-width="<?php echo $productImage->getWidth(); ?>" /> <?php endif; ?> </a>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php // Product Image ?>
<?php
    // Product Image Hovered
    $productHoverImage = $_imageHelper->init($_product, $hoverimg);
    $productHoverImageUrl = $productHoverImage->getUrl();
    $placeholder = "placeholder";
?>
<a href="<?= $block->escapeUrl($_product->getProductUrl()) ?>"
   class="product photo product-item-photo"
   tabindex="-1"
    <?php if(strpos($productHoverImageUrl, $placeholder) !== false) : ?>
        data-has-hovered-state="false"
    <?php else : ?>
        data-has-hovered-state="true"
    <?php endif; ?>
>
    <?= $productImage->toHtml() ?>

    <?php // Product Image Hovered ?>
    <?php if(strpos($productHoverImageUrl, $placeholder) !== false) : ?>
        <?php // "Placeholder" word Found in URL! -> no Image Hovered was set ?>
    <?php else : ?>
        <?php // "Placeholder" word Not Found in URL! -> show existing Image Hovered ?>
        <img class="product-image-photo" src="<?php echo $productHoverImageUrl; ?>" alt="<?php echo $productHoverImage->getLabel(); ?>" max-width="<?php echo $productImage->getWidth(); ?>" />
    <?php endif; ?>
</a>

app/design/frontend/VendorName/themename/Magento_Catalog/web/css/source/_modules.less

// // Common // _____________________________________________ & when (@media-common = true) { // // Product images general container // --------------------------------------------- .product-image-photo { display: block; height: auto; margin: auto; max-width: 100%; + .product-image-photo { display: none !important; } } .product-item { &:hover { .product-item-photo[data-has-hovered-state="true"] { .product-image-photo { display: none !important; + .product-image-photo { display: block !important; } } } } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

//
//  Common
//  _____________________________________________

& when (@media-common = true) {

    //
    //  Product images general container
    //  ---------------------------------------------

    .product-image-photo {
        display: block;
        height: auto;
        margin: auto;
        max-width: 100%;
        + .product-image-photo {
            display: none !important;
        }
    }

    .product-item {
        &:hover {
            .product-item-photo[data-has-hovered-state="true"] {
                .product-image-photo {
                    display: none !important;
                    + .product-image-photo {
                        display: block !important;
                    }
                }
            }
        }
    }
}

En bash:

$ cache:clean

1

$ cache:clean

Une autre source (incomplète) m’ayant mis sur la voie: How to make a Product Listing with Hover images on Magento 2 et version PDF de l’article, pour la postérité.

[Magento 2] Afficher les descriptions courte et complète des produits dans la page de liste produits

29/01/2020 / admin

Testé fonctionnel Magento 2.3! Source: How to get products description and short description in products list page?

[Magento 2] Afficher la description courte d’un produit dans la liste produits

Dans un template PHTML hérité de vendor/magento/module-catalog/view/frontend/templates/product/list.phtml mettre le paramètre $showDescription à true pour le mode d’affichage désiré (grid ou list – j’ai mis les deux à true dans l’exemple ci-dessous):

<?php if ($block->getMode() == 'grid') { $viewMode = 'grid'; $image = 'category_page_grid'; $showDescription = true; $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW; } else { $viewMode = 'list'; $image = 'category_page_list'; $showDescription = true; $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW; } /** * Position for actions regarding image size changing in vde if needed */ $pos = $block->getPositioned(); ?>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    <?php
if ($block->getMode() == 'grid') {
$viewMode = 'grid';
$image = 'category_page_grid';
$showDescription = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
} else {
$viewMode = 'list';
$image = 'category_page_list';
$showDescription = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
}
/**
* Position for actions regarding image size changing in vde if needed
*/
$pos = $block->getPositioned();
    ?>

[Magento 2] Afficher la description détaillée d’un produit dans la liste produits

Pas testé! Toujours dans un template PHTML hérité de vendor/magento/module-catalog/view/frontend/templates/product/list.phtml, ajouter le code suivant:

<?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_product->getDescription(), 'description'); ?>

1

<?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_product->getDescription(), 'description'); ?>

[jQuery] Alimenter un tableau à partir d’une boucle .each() avec .push() et générer une liste UL LI avec les données stockées dans celui-ci

22/06/2018 / admin

Sources: How to create an array from .each loop with jQuery et How to generate UL Li list from string array using jquery?.

function addHeaderTopRowLinksToMegadropdownXS() { var headerHorizontalNav01 = []; $cdDropdownContent = $('ul.cd-dropdown-content', '#xsMegaDropdown'); $('.yCmsComponent', '#page-header').each(function(){ headerHorizontalNav01.push($(this).html()); }); $.each(headerHorizontalNav01, function(i) { $('<li class="has-children">'+headerHorizontalNav01[i]+'</li>') .appendTo($cdDropdownContent); }); }

1
2
3
4
5
6
7
8
9
10
11
12
13

      function addHeaderTopRowLinksToMegadropdownXS() {
        var headerHorizontalNav01 = [];
        $cdDropdownContent = $('ul.cd-dropdown-content', '#xsMegaDropdown');

        $('.yCmsComponent', '#page-header').each(function(){
            headerHorizontalNav01.push($(this).html());
        });

        $.each(headerHorizontalNav01, function(i) {
            $('<li class="has-children">'+headerHorizontalNav01[i]+'</li>')
                .appendTo($cdDropdownContent);
        });
      }

[CSS] Changer la couleur et l’apparence des puces de l’élément UL

20/09/2016 / admin

ul.normal{ list-style-type: none; li{ &:before{ display: inline-block; vertical-align: middle; margin-top: -4px; margin-left: -(($grid-gutter-width/3) + 4); content: ""; width: 8px; height: 8px; background-color: $corporate-color-one; border-radius: 50%; margin-right: $grid-gutter-width/3; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

ul.normal{
list-style-type: none;
li{
&:before{
display: inline-block;
vertical-align: middle;
margin-top: -4px;
margin-left: -(($grid-gutter-width/3) + 4);
content: "";
width: 8px;
height: 8px;
background-color: $corporate-color-one;
border-radius: 50%;
margin-right: $grid-gutter-width/3;
}
}
}

[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.

[CSS] [jQuery] Afficher une liste d’éléments dont la hauteur peut varier

17/02/2015 / admin

Exemple de solution mise en place : http://www.despetitshauts.com/fr/t-shirtsm-courtes-25.html.

Tentative en exploitant la fonction outerHeight de jQuery

La solution ci-dessous semble fonctionner 🙂

Simulation : http://jsfiddle.net/frontenddeveloper/2s0s1eag/29/.
Même chose mais à partir de Bootstrap : http://jsfiddle.net/frontenddeveloper/51xxem3p/6/.

Tentative avec la propriété columns de CSS3

Simulation : http://jsfiddle.net/frontenddeveloper/5doayaa5/5/.

Pour :

On conserve un markup HTML cohérent (les éléments de la liste sont déclarés dans un ordre logique d’apparition)

On ne surcharge pas le serveur par l’emploi de JavaScript

Contre :

Pas compatible à partir d’IE9 (<a href="http://caniuse.com/#search=columns">columns</a>) (voir pour l’existence d’un polyfill qui gère les contraintes responsive)

Le contenu n’est pas ordonné de gauche à droite (rangée après rangée), mais de haut en bas (colonne après colonne)

Pas de contrôle sur le comportement lorsqu’il n’y a pas le nombre exact d’éléments (2 looks + 16 produits) dans la page, notamment en responsive

Comportement responsive pas terrible…

Tentative avec Bootstrap 3 et Masonry

Inspiré de : http://codepen.io/anon/pen/eIxCp. Simulation : http://jsfiddle.net/frontenddeveloper/rbgsypLm/2/.

Pour :

Le contenu est ordonné de gauche à droite (rangée après rangée)

Contre :

On est obligé de surcharger légèrement Bootstrap (.container { padding-left:0; padding-right:0; }) et le framework CSS peut poser problème lorsqu’il est couplé à Masonry…

On ne conserve pas un markup HTML cohérent (les éléments de la liste ne sont pas déclarés dans un ordre logique puisque le deuxième look est intercalé entre le produit 13 et le produit 14)… Avec tous les ennuis que cela comporte de gérer son imbrication au sein de la liste et de conserver un affichage cohérent (y compris en responsive) lorsque le nombre d’éléments change !

Toujours pas de contrôle sur le comportement lorsqu’il n’y a pas le nombre exact d’éléments (2 looks + 16 produits) dans la page

Comportement responsive catastrophique

Conclusions :

A moins de partir dans un dev JS très lourd qui prend en compte le nombre d’éléments à afficher pour replacer le 2ème look dans le DOM à chaque fois :

qu’on agit soit sur la largeur de la fenêtre (problématique responsive),

ou qu’on agit sur le nombre de produits à afficher (design prévu pour 2 looks et 16 produits – il peut y avoir moins de produits dans le rayon ou suite à un tri effectué par l’utilisateur)

…c’est pas possible d’avoir un affichage cohérent :/

[CSS] Forcer une liste de définitions à se comporter comme un tableau avec la propriété display: inline-table;

12/12/2014 / admin

Fonctionnera également pour des listes ordonnées ou non-ordonnées 😉

Code HTML

<section class="features-filtering"> <h2 class="footer-title">Filtering</h2> <section class="filters"> <dl class="level0"> <dt>What kind of phone?</dt> <dd><a href="#">Smartphone</a></dd> <dd><a href="#">Easy Phone</a></dd> </dl> <dl class="level1"> <dt>What functions are important to you?</dt> <dd><a href="#">Speaker phone</a></dd> <dd><a href="#">Alarm</a></dd> <dd><a href="#">FM-radio</a></dd> <dd><a href="#">Calculator</a></dd> <dd><a href="#">Camera</a></dd> <dd><a href="#">One press alarm dial up</a></dd> <dd><a href="#">SMS</a></dd> <dd><a href="#">Vibrating ringer</a></dd> <dd><a href="#">Flashlight</a></dd> <dd><a href="#">Games</a></dd> <dd><a href="#">Bluetooth</a></dd> <dd><a href="#">Hide unwanted functions</a></dd> </dl> </section> </section>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<section class="features-filtering">
  <h2 class="footer-title">Filtering</h2>
  <section class="filters">
    <dl class="level0">
      <dt>What kind of phone?</dt>
        <dd><a href="#">Smartphone</a></dd>
        <dd><a href="#">Easy Phone</a></dd>
    </dl>
    <dl class="level1">
      <dt>What functions are important to you?</dt>
        <dd><a href="#">Speaker phone</a></dd>
        <dd><a href="#">Alarm</a></dd>
        <dd><a href="#">FM-radio</a></dd>
        <dd><a href="#">Calculator</a></dd>
        <dd><a href="#">Camera</a></dd>
        <dd><a href="#">One press alarm dial up</a></dd>
        <dd><a href="#">SMS</a></dd>
        <dd><a href="#">Vibrating ringer</a></dd>
        <dd><a href="#">Flashlight</a></dd>
        <dd><a href="#">Games</a></dd>
        <dd><a href="#">Bluetooth</a></dd>
        <dd><a href="#">Hide unwanted functions</a></dd>
    </dl>
  </section>
</section>

Code CSS

.features-filtering { text-align: center; } .features-filtering .filters dl { display: table; width: 100%; } .features-filtering .filters dd { display: inline-table; margin-bottom: 5px; } .features-filtering .filters dd a { display: block; text-align: center; min-width: 150px; padding: 5px 10px; } .features-filtering .filters dd a:hover, .features-filtering .filters dd a.active { text-decoration: none; } .features-filtering .filters .level0 dt { display: inline-block; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.features-filtering {
  text-align: center;
}
.features-filtering .filters dl {
  display: table;
  width: 100%;
}
.features-filtering .filters dd {
  display: inline-table;
  margin-bottom: 5px;
}
.features-filtering .filters dd a {
  display: block;
  text-align: center;
  min-width: 150px;
  padding: 5px 10px;
}
.features-filtering .filters dd a:hover,
.features-filtering .filters dd a.active {
  text-decoration: none;
}
.features-filtering .filters .level0 dt {
  display: inline-block;
}

[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 / admin

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 ?> :

<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

1

<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

…et ajouter les classes suivantes :

<ul class="products-grid products-grid--max-1-col products-grid--max-2-col products-grid--max-3-col products-grid--max-<?php echo $_columnCount; ?>-col">

1

<ul class="products-grid products-grid--max-1-col products-grid--max-2-col products-grid--max-3-col products-grid--max-<?php echo $_columnCount; ?>-col">

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 :

@include bp(min-width, 960px) { @include product-grid(4, 960); @include product-grid(5, 960); @include product-grid(6, 960); }

1
2
3
4
5

@include bp(min-width, 960px) {
    @include product-grid(4, 960);
    @include product-grid(5, 960);
    @include product-grid(6, 960);
}

…et ajouter juste en dessous :

@include bp(min-width, 993px) { @include product-grid(3, 993); } @include bp(max-width, 992px) { @include product-grid(2, 992); } @include bp(max-width, 360px) { @include product-grid(1, 360); }

1
2
3
4
5
6
7
8
9
10
11

@include bp(min-width, 993px) {
    @include product-grid(3, 993);
}

@include bp(max-width, 992px) {
    @include product-grid(2, 992);
}

@include bp(max-width, 360px) {
    @include product-grid(1, 360);
}

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 :

 <action method="setColumnCount"><count>3</count></action>

1
2


<action method="setColumnCount"><count>3</count></action>

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à) :

<reference name="root"> <action method="setTemplate"><template>page/1column.phtml</template></action> </reference>

1
2
3

<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>

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 ?> :

<?php $_columnCount = $this->getColumnCount(); ?>

1

<?php $_columnCount = $this->getColumnCount(); ?>

…et la remplacer par :

<?php $_columnCount = 3 ?>

1

<?php $_columnCount = 3  ?>

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

Articles récents

Catégories

Archives

Méta

Étiquette : liste

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

[Magento 2] Des images au survol hover dans la liste produit en ajoutant un attribut custom

En backoffice:

Créer un attribut custom `hover_image`

ATTENTION

Plaçons notre attribut custom `hover_image` dans le bon groupe d’attributs (images)

Affectons une image hover à l’un de nos produits

Dans le code source:

app/design/frontend/VendorName/themename/etc/view.xml

app/design/frontend/VendorName/themename/Magento_Catalog/templates/product/list.phtml

app/design/frontend/VendorName/themename/Magento_Catalog/web/css/source/_modules.less

En bash:

[Magento 2] Afficher les descriptions courte et complète des produits dans la page de liste produits

[Magento 2] Afficher la description courte d’un produit dans la liste produits

[Magento 2] Afficher la description détaillée d’un produit dans la liste produits

[jQuery] Alimenter un tableau à partir d’une boucle .each() avec .push() et générer une liste UL LI avec les données stockées dans celui-ci

[CSS] Changer la couleur et l’apparence des puces de l’élément UL

[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

[CSS] [jQuery] Afficher une liste d’éléments dont la hauteur peut varier

Tentative en exploitant la fonction `outerHeight` de jQuery

Tentative avec la propriété `columns` de CSS3

Pour :

Contre :

Tentative avec Bootstrap 3 et Masonry

Pour :

Contre :

Conclusions :

[CSS] Forcer une liste de définitions à se comporter comme un tableau avec la propriété display: inline-table;

Code HTML

Code CSS

En backoffice:

Créer un attribut custom hover_image

ATTENTION

Plaçons notre attribut custom hover_image dans le bon groupe d’attributs (images)

Affectons une image hover à l’un de nos produits

Dans le code source:

app/design/frontend/VendorName/themename/etc/view.xml

app/design/frontend/VendorName/themename/Magento_Catalog/templates/product/list.phtml

app/design/frontend/VendorName/themename/Magento_Catalog/web/css/source/_modules.less

En bash:

[Magento 2] Afficher la description courte d’un produit dans la liste produits

[Magento 2] Afficher la description détaillée d’un produit dans la liste produits

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

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

Tentative en exploitant la fonction outerHeight de jQuery

Tentative avec la propriété columns de CSS3

Pour :

Contre :

Tentative avec Bootstrap 3 et Masonry

Pour :

Contre :

Conclusions :

Code HTML

Code CSS

Méthode #1 : vous avez une contrainte responsive

list.phtml

_product-list.scss

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

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

catalog.xml :

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

catalog.xml :

list.phtml :

Créer un attribut custom `hover_image`

Plaçons notre attribut custom `hover_image` dans le bon groupe d’attributs (images)

Tentative en exploitant la fonction `outerHeight` de jQuery

Tentative avec la propriété `columns` de CSS3