Étiquette : liste produits

[Magento 2] Un plugin jQuery custom pour rendre cliquable une zone complète plutôt que le seul lien qu’elle renferme avec x-magento-init et requireJS

16/06/2020 / admin

Exemple d’utilisation: les cartes (items) catégories ou produits du listing catégories ou produits.

Rendre toute une zone cliquable, plutôt qu’uniquement le lien qu’elle contient. Exemple: une carte produit dans le listing produit. app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/list.phtml.

Utilisation dans un fichier PHTML:

    // <script type="text/x-magento-init">
    //     {
    //         // ID ou classe CSS placée sur l'élément parent (zone qui devient cliquable)
    //         ".product-item": {
    //             // Alias de ce plug-in
    //             "zoneClick": {
    //                 // Paramètre "targetElement": l'élément enfant qui contient l'URL vers laquelle rediriger (valeur d'un attribut "href")
    //                 "targetElement": "a.product-item-link",
    //                 // Paramètre "exclude": la zone cliquable peut renfermer d'autres liens (un bouton d'ajout au panier par exemple) qui doivent rester actifs.
    //                 // Renseigner les IDs ou classes de ces liens ici.
    //                 // Toujours déclarer sous forme de tableau, même si il n'y a qu'un seul élément à exclure. Peut être vide, mais PAS OMIS.
    //                 "exclude": [ ".icon-addtocart.icon", ".toto", ".titi", ".tutu" ]
    //             }
    //         }
    //     }
    // </script>

// <script type="text/x-magento-init">

// {

// // ID ou classe CSS placée sur l'élément parent (zone qui devient cliquable)

// ".product-item": {

// // Alias de ce plug-in

// "zoneClick": {

// // Paramètre "targetElement": l'élément enfant qui contient l'URL vers laquelle rediriger (valeur d'un attribut "href")

// "targetElement": "a.product-item-link",

// // Paramètre "exclude": la zone cliquable peut renfermer d'autres liens (un bouton d'ajout au panier par exemple) qui doivent rester actifs.

// // Renseigner les IDs ou classes de ces liens ici.

// // Toujours déclarer sous forme de tableau, même si il n'y a qu'un seul élément à exclure. Peut être vide, mais PAS OMIS.

// "exclude": [ ".icon-addtocart.icon", ".toto", ".titi", ".tutu" ]

// }

// </script>

Détail des fichiers à mettre en place:

app/web/app/design/frontend/MyVendor/mytheme/web/js/zone-click.js

define([
    "jquery"
], function($) {
    "use strict";

    return function (options, element) {
        $(element).on('click', function (event) {
            let $this = $(this),
                $clickedElement = $(event.target),
                excludeAmount = options.exclude.length,
                testExclude = [];

            // On vérifie que l'élément cliqué ne fait pas partie de la liste des exclusions:
            let i;
            for (i = 0; i < excludeAmount; i++){
                if ($clickedElement.is(options.exclude[i])) {
                    testExclude.push(1);
                } else {
                    // nada ...
                }
            }

            if (testExclude.length > 0) {
                // Si l'élément cliqué fait partie de la liste des exclusions, on ne redirige pas vers la page cible.
                testExclude = [];
            } else {
                // Sinon, on redirige vers la page cible.
                window.location = $this.find(options.targetElement).attr('href');
                return false;
            }
        });
    };
});
// https://www.siphor.com/different-ways-using-javascript-magento-2/
// https://jason.codes/2019/06/magento-2-create-jquery-ui-widget/

define([

"jquery"

], function($) {

"use strict";

return function (options, element) {

$(element).on('click', function (event) {

let $this = $(this),

$clickedElement = $(event.target),

excludeAmount = options.exclude.length,

testExclude = [];

// On vérifie que l'élément cliqué ne fait pas partie de la liste des exclusions:

let i;

for (i = 0; i < excludeAmount; i++){

if ($clickedElement.is(options.exclude[i])) {

testExclude.push(1);

} else {

// nada ...

}

if (testExclude.length > 0) {

// Si l'élément cliqué fait partie de la liste des exclusions, on ne redirige pas vers la page cible.

testExclude = [];

} else {

// Sinon, on redirige vers la page cible.

window.location = $this.find(options.targetElement).attr('href');

return false;

}

});

};

});

// https://www.siphor.com/different-ways-using-javascript-magento-2/

// https://jason.codes/2019/06/magento-2-create-jquery-ui-widget/

Note: pour être sûr de ce que vous allez renseigner en paramètre exclude, vous pouvez ajouter dans le code ci-dessus un console.log($clickedElement.attr('class'));. Puis allez en front et cliquez sur les éléments à exclure. Les classes qui leur sont affectées apparaîtront en console (F12).

Déclaration via requireJS: app/design/frontend/MyVendor/mytheme/requirejs-config.js

var config = {
    map: {
        "*": {
            zoneClick: 'js/zone-click'
        }
    }
};

var config = {

map: {

"*": {

zoneClick: 'js/zone-click'

}

};

app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/list.phtml

        <script type="text/x-magento-init">
            {
                ".product-item": {
                    "zoneClick": {
                        "targetElement": "a.product-item-link",
                        "exclude": [ ".icon-addtocart.icon" ]
                    }
                }
            }
        </script>

{

".product-item": {

"zoneClick": {

"targetElement": "a.product-item-link",

"exclude": [ ".icon-addtocart.icon" ]

}

</script>

[Magento 2] Récupérer la valeur d’un attribut produit dans une page category, product list, product

26/03/2020 / admin

Les codes des attributs sont visibles en backoffice en se rendant dans STORES > Product [Attributes].

Attention: de manière générale votre attribut ne sera pas visible en front si il n’est pas configuré comme tel en admin. STORES > Product [Attributes]. Editez l’attribut de votre choix. Dans la partie Storefront Properties, vous pouvez configurer la visibilité de votre attribut pour les pages du catalogue, son utilisation pour la recherche, la focntionnalité de comparaison, etc…

Pour un attribut de type `text`

// Pour un attribut donc le code name est "test_frank":
// solution 1.
<?php echo $_product->getData('test_frank'); ?>
// solution 2.
<?php echo $_product->getTestFrank(); ?>

// Pour un attribut donc le code name est "test_frank":

// solution 1.

<?php echo $_product->getData('test_frank'); ?>

// solution 2.

<?php echo $_product->getTestFrank(); ?>

// solution 3.
<?php
$customAttribute = $_product->getData('test_frank');
?>
<span><?= $customAttribute ?></span>

// solution 3.

<?php

$customAttribute = $_product->getData('test_frank');

Pour un attribut de type `dropdown`

<?= $_product->getAttributeText('test_frank'); ?>

1	<?= $_product->getAttributeText('test_frank'); ?>

En BO, mettre « Used in Product Listing » à « Yes » dans ATTRIBUTE INFORMATION > Storefront Properties.

[Magento 2] Nombre de produits par rangée via CSS LESS dans les listes de catégories

03/03/2020 / admin

Utiliser les variables mises à disposition par Magento 2

Si votre thème hérite de blank: dans le fichier @product-grid-items-per-row-layout-2-left-screen-s (que vous devrez surcharger dans votre thème), modifiez les valeurs des variables suivantes:

@product-grid-items-per-row-layout-default: 2;

@product-grid-items-per-row-layout-1-screen-s: 3;
@product-grid-items-per-row-layout-1-screen-m: 4;
@product-grid-items-per-row-layout-1-screen-l: 5;

@product-grid-items-per-row-layout-2-left-screen-s: 3;
@product-grid-items-per-row-layout-2-left-screen-m: 4;
@product-grid-items-per-row-layout-2-left-screen-l: '';

@product-grid-items-per-row-layout-2-right-screen-s: 3;
@product-grid-items-per-row-layout-2-right-screen-m: 4;
@product-grid-items-per-row-layout-2-right-screen-l: '';

@product-grid-items-per-row-layout-3-screen-s: 3;
@product-grid-items-per-row-layout-3-screen-m: '';
@product-grid-items-per-row-layout-3-screen-l: '';

@product-grid-items-per-row-layout-default: 2;

@product-grid-items-per-row-layout-1-screen-s: 3;

@product-grid-items-per-row-layout-1-screen-m: 4;

@product-grid-items-per-row-layout-1-screen-l: 5;

@product-grid-items-per-row-layout-2-left-screen-s: 3;

@product-grid-items-per-row-layout-2-left-screen-m: 4;

@product-grid-items-per-row-layout-2-left-screen-l: '';

@product-grid-items-per-row-layout-2-right-screen-s: 3;

@product-grid-items-per-row-layout-2-right-screen-m: 4;

@product-grid-items-per-row-layout-2-right-screen-l: '';

@product-grid-items-per-row-layout-3-screen-s: 3;

@product-grid-items-per-row-layout-3-screen-m: '';

@product-grid-items-per-row-layout-3-screen-l: '';

Utiliser la fonction `calc` de CSS

Pour 4 produits par rangée:

  .products-grid .product-items .product-item {
    -ms-flex: 0 0 calc(100% / 4);
    flex: 0 0 calc(100% / 4);
    max-width: calc(100% / 4);
  }

.products-grid .product-items .product-item {

-ms-flex: 0 0 calc(100% / 4);

flex: 0 0 calc(100% / 4);

max-width: calc(100% / 4);

}

Pour 1 produit par rangée en Mobile, 2 produits par rangée en Tablet, 4 produits par rangée en Desktop:

// Normalement, media-query inutile pour le Mobile (mobile-first)
@media (max-width: 767px) {
  .products-grid .product-items .product-item {
    -ms-flex: 0 0 calc(100% / 1);
    flex: 0 0 calc(100% / 1);
    max-width: calc(100% / 1);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .products-grid .product-items .product-item {
    -ms-flex: 0 0 calc(100% / 2);
    flex: 0 0 calc(100% / 2);
    max-width: calc(100% / 2);
  }
}

@media (min-width: 992px) {
  .products-grid .product-items .product-item {
    -ms-flex: 0 0 calc(100% / 4);
    flex: 0 0 calc(100% / 4);
    max-width: calc(100% / 4);
  }
}

// Normalement, media-query inutile pour le Mobile (mobile-first)

@media (max-width: 767px) {

.products-grid .product-items .product-item {

-ms-flex: 0 0 calc(100% / 1);

flex: 0 0 calc(100% / 1);

max-width: calc(100% / 1);

}

@media (min-width: 768px) and (max-width: 991px) {

.products-grid .product-items .product-item {

-ms-flex: 0 0 calc(100% / 2);

flex: 0 0 calc(100% / 2);

max-width: calc(100% / 2);

}

@media (min-width: 992px) {

.products-grid .product-items .product-item {

-ms-flex: 0 0 calc(100% / 4);

flex: 0 0 calc(100% / 4);

max-width: calc(100% / 4);

}

Petite subtilité pour les thèmes de merde qui n’utilisent pas Flexbox

Vous allez vous retrouver à devoir surcharger des choses de ce style:

  .page-layout-1column {
      .products.wrapper.products-grid .product-items .product-item {
        width: calc((100% - 6%) / 4);
        &:nth-child(3n+1){
          margin-left: 2%;
        }
        &:nth-child(4n+1){
          margin-left: 0;
        }
      }
  }

.page-layout-1column {

.products.wrapper.products-grid .product-items .product-item {

width: calc((100% - 6%) / 4);

&:nth-child(3n+1){

margin-left: 2%;

}

&:nth-child(4n+1){

margin-left: 0;

}

Dans width: calc((100% - 6%) / 4);, la valeur de 6% correspond à la somme des valeurs des marges margin-left apposées pour une rangée donnée et la valeur 4 au nombre de produits attendus pour une rangée.

Dans mon exemple, j’ai par exemple 2% de marge entre mes produits. 4 produits par rangées = 3x la marge de séparation de 2% = 6%.

[Magento 2] Produit configurable – afficher une fourchette de prix plutôt qu’un prix d’appel dans la liste des catégories/produits

10/02/2020 / admin

Pas testé, mais trouvé par hasard et mis de côté pour le jour où j’ai besoin!

Source: Display Configurable Product Price Ranges in Magento 2 et version PDF pour la postérité.

Dans la liste produits (ou catégories) par défaut, Magento 2 affiche le prix d’un produit configurable de cette manière: A parti de <prix_le_plus_bas>. L’auteur du blog ci-dessus propose d’afficher une fourchette de prix plutôt qu’un prix d’appel: <prix_le_plus_bas> – <prix_le_plus_haut>.

[Magento 2] Masquer les décimales pour les prix ronds dans la liste produits

05/02/2020 / admin

Lorsque mon prix affiche 99,00 €, je souhaite que soit affiché uniquement la valeur avant la virgule: 99 €. Pour celà, il faut surcharger le fichier vendor/magento/module-catalog/view/base/templates/product/price/amount/default.phtml dans un thème.

Remarque: on voit dans notre exemple que le fichier natif est « rangé » dans le dossier base ce qui signifie que cette vue PHTML va servir pour afficher des informations autant en front que dans l’interface d’administration de Magento 2. J’ai cependant besoin de n’afficher mon prix sans décimales qu’en front. Pour ce faire, je vais recréer une version modifiée de mon fichier de départ dans app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/price/amount/default.phtml.

La partie qui nous intéresse plus particulièrement se situe dans l’élément <span class="price-wrapper">:

<span <?php if ($block->getPriceId()) :?> id="<?= $block->escapeHtmlAttr($block->getPriceId()) ?>"<?php endif;?>
    <?= ($block->getPriceDisplayLabel()) ? 'data-label="' . $block->escapeHtmlAttr($block->getPriceDisplayLabel() . $block->getPriceDisplayInclExclTaxes()) . '"' : '' ?>
    data-price-amount="<?= $block->escapeHtmlAttr($block->getDisplayValue()) ?>"
    data-price-type="<?= $block->escapeHtmlAttr($block->getPriceType()) ?>"
    class="price-wrapper <?= $block->escapeHtmlAttr($block->getPriceWrapperCss()) ?>"
>

    <?php
    $dot = ".";
    $price = $block->escapeHtmlAttr($block->getDisplayValue());
    ?>
    <?php if(strpos($price, $dot) !== false) :?>
        <?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>
    <?php else :?>
        <span class="price-without-decimal"><?= $block->escapeHtmlAttr($block->getDisplayValue()) ?> <?= $block->escapeHtmlAttr($block->getDisplayCurrencySymbol()) ?></span>
        <?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>
    <?php endif; ?>

</span>

<span <?php if ($block->getPriceId()) :?> id="<?= $block->escapeHtmlAttr($block->getPriceId()) ?>"<?php endif;?>

<?= ($block->getPriceDisplayLabel()) ? 'data-label="' . $block->escapeHtmlAttr($block->getPriceDisplayLabel() . $block->getPriceDisplayInclExclTaxes()) . '"' : '' ?>

data-price-amount="<?= $block->escapeHtmlAttr($block->getDisplayValue()) ?>"

data-price-type="<?= $block->escapeHtmlAttr($block->getPriceType()) ?>"

class="price-wrapper <?= $block->escapeHtmlAttr($block->getPriceWrapperCss()) ?>"

<?php

$dot = ".";

$price = $block->escapeHtmlAttr($block->getDisplayValue());

<?php if(strpos($price, $dot) !== false) :?>

<?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>

<?php else :?>

<span class="price-without-decimal"><?= $block->escapeHtmlAttr($block->getDisplayValue()) ?> <?= $block->escapeHtmlAttr($block->getDisplayCurrencySymbol()) ?></span>

<?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>

<?php endif; ?>

</span>

J’ai remarqué, en parcourant la source de la page avec l’inspecteur d’éléments, qu’il existait dans le bloc <div class="price-box"> un data attribut data-price-amount qui contenait déjà les prix ronds sans décimales (data-price-amount="99" au lieu de data-price-amount="99.00"). L’idée ici est de le ré-exploiter.

    <?php
    $dot = ".";
    $price = $block->escapeHtmlAttr($block->getDisplayValue());
    ?>

<?php

$dot = ".";

$price = $block->escapeHtmlAttr($block->getDisplayValue());

Ci-dessus, je créer une variable $dot qui contient juste le caractère .. Je vais avoir besoin de savoir si la valeur de mon data-price-amount contient la valeur de $dot ou pas.

Je crée également une variable $price qui contient la valeur de mon data-price-amount (le prix).

    <?php if(strpos($price, $dot) !== false) :?>
        <?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>
    <?php else :?>
        ...
    <?php endif; ?>

<?php if(strpos($price, $dot) !== false) :?>

<?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>

<?php else :?>

...

<?php endif; ?>

Dans une condition if/else, j’utilise la fonction strpos de PHP pour vérifier si la valeur de $price contient la valeur de $dot.

Si « oui » (!== false), alors je conserve l’affichage standard du prix dans Magento 2 (un <span class="price"></span> avec des décimales, peu importe si le prix est de 99,00 €).

    <?php if(strpos($price, $dot) !== false) :?>
        ...
    <?php else :?>
        <span class="price-without-decimal"><?= $block->escapeHtmlAttr($block->getDisplayValue()) ?> <?= $block->escapeHtmlAttr($block->getDisplayCurrencySymbol()) ?></span>
        <?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>
    <?php endif; ?>

<?php if(strpos($price, $dot) !== false) :?>

...

<?php else :?>

<span class="price-without-decimal"><?= $block->escapeHtmlAttr($block->getDisplayValue()) ?> <?= $block->escapeHtmlAttr($block->getDisplayCurrencySymbol()) ?></span>

<?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>

<?php endif; ?>

Si « non » (code après le <?php else :?>) j’ajoute un <span class="price-without-decimal"> au-dessus de l’affichage standard du prix dans Magento 2 pour y afficher la valeur de mon attribut data-price-amount (un prix sans décimales, si mon code fonctionne correctement).

Attention: je me retrouve désormais avec 2 prix affichés si je suis dans le cas où la valeur du prix ne contient pas de décimales. J’ai choisi de conserver l’affichage standard du prix dans Magento 2 dans le DOM au cas où il sert (via un javaScript ou autre…) à des calculs.

Pour masquer ce dernier à l’utilisateur, j’utilise CSS:

.price-box .price-without-decimal + .price {
  position: absolute;
  left: -99999em;
}

.price-box .price-without-decimal + .price {

position: absolute;

left: -99999em;

}

Le fichier app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/price/amount/default.phtml complet:

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>

<!--Override from: vendor/magento/module-catalog/view/base/templates/product/price/amount/default.phtml-->

<?php /** @var $block \Magento\Framework\Pricing\Render\Amount */ ?>

<span class="price-container <?= $block->escapeHtmlAttr($block->getAdjustmentCssClasses()) ?>"
        <?= $block->getSchema() ? ' itemprop="offers" itemscope itemtype="http://schema.org/Offer"' : '' ?>>
    <?php if ($block->getDisplayLabel()) :?>
        <span class="price-label"><?= $block->escapeHtml($block->getDisplayLabel()) ?></span>
    <?php endif; ?>
    <span <?php if ($block->getPriceId()) :?> id="<?= $block->escapeHtmlAttr($block->getPriceId()) ?>"<?php endif;?>
        <?= ($block->getPriceDisplayLabel()) ? 'data-label="' . $block->escapeHtmlAttr($block->getPriceDisplayLabel() . $block->getPriceDisplayInclExclTaxes()) . '"' : '' ?>
        data-price-amount="<?= $block->escapeHtmlAttr($block->getDisplayValue()) ?>"
        data-price-type="<?= $block->escapeHtmlAttr($block->getPriceType()) ?>"
        class="price-wrapper <?= $block->escapeHtmlAttr($block->getPriceWrapperCss()) ?>"
    >

        <?php
        $dot = ".";
        $price = $block->escapeHtmlAttr($block->getDisplayValue());
        ?>
        <?php if(strpos($price, $dot) !== false) :?>
            <?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>
        <?php else :?>
            <span class="price-without-decimal"><?= $block->escapeHtmlAttr($block->getDisplayValue()) ?> <?= $block->escapeHtmlAttr($block->getDisplayCurrencySymbol()) ?></span>
            <?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>
        <?php endif; ?>

    </span>
    <?php if ($block->hasAdjustmentsHtml()) :?>
        <?= $block->getAdjustmentsHtml() ?>
    <?php endif; ?>
    <?php if ($block->getSchema()) :?>
        <meta itemprop="price" content="<?= $block->escapeHtmlAttr($block->getDisplayValue()) ?>" />
        <meta itemprop="priceCurrency" content="<?= $block->escapeHtmlAttr($block->getDisplayCurrencyCode()) ?>" />
    <?php endif; ?>
</span>

<?php

/**

* See COPYING.txt for license details.

<?php /** @var $block \Magento\Framework\Pricing\Render\Amount */ ?>

<span class="price-container <?= $block->escapeHtmlAttr($block->getAdjustmentCssClasses()) ?>"

<?= $block->getSchema() ? ' itemprop="offers" itemscope itemtype="http://schema.org/Offer"' : '' ?>>

<?php if ($block->getDisplayLabel()) :?>

<span class="price-label"><?= $block->escapeHtml($block->getDisplayLabel()) ?></span>

<?php endif; ?>

<span <?php if ($block->getPriceId()) :?> id="<?= $block->escapeHtmlAttr($block->getPriceId()) ?>"<?php endif;?>

<?= ($block->getPriceDisplayLabel()) ? 'data-label="' . $block->escapeHtmlAttr($block->getPriceDisplayLabel() . $block->getPriceDisplayInclExclTaxes()) . '"' : '' ?>

data-price-amount="<?= $block->escapeHtmlAttr($block->getDisplayValue()) ?>"

data-price-type="<?= $block->escapeHtmlAttr($block->getPriceType()) ?>"

class="price-wrapper <?= $block->escapeHtmlAttr($block->getPriceWrapperCss()) ?>"

<?php

$dot = ".";

$price = $block->escapeHtmlAttr($block->getDisplayValue());

<?php if(strpos($price, $dot) !== false) :?>

<?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>

<?php else :?>

<span class="price-without-decimal"><?= $block->escapeHtmlAttr($block->getDisplayValue()) ?> <?= $block->escapeHtmlAttr($block->getDisplayCurrencySymbol()) ?></span>

<?= $block->escapeHtml($block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()), ['span']) ?>

<?php endif; ?>

</span>

<?php if ($block->hasAdjustmentsHtml()) :?>

<?= $block->getAdjustmentsHtml() ?>

<?php endif; ?>

<?php if ($block->getSchema()) :?>

<?php endif; ?>

</span>

(partie en work-in-progress) Si vous voulez pouvoir cibler certaines pages spécifiquement, voici ce qu’il faut mettre dans votre layout XML:

<!--		From: vendor/magento/module-catalog/view/base/layout/default.xml-->
<!--		https://magento.stackexchange.com/questions/210585/change-price-template-only-for-product-view-page-->
<block class="Magento\Framework\Pricing\Render" name="product.price.render.default">
    <arguments>
        <argument name="price_render_handle" xsi:type="string">catalog_product_prices</argument>
        <argument name="use_link_for_as_low_as" xsi:type="boolean">true</argument>
<!--        set "override" configuration settings here -->
    </arguments>
</block>

<argument name="price_render_handle" xsi:type="string">catalog_product_prices</argument>

</arguments>

</block>

[Magento 2] Modifier le nombre de produits par rangée dans les listes produits

29/10/2019 / admin

app\design\frontend\<Vendor_name>\<theme_name>\web\css\source\module\_listing_extend.less

//
//  Desktop (style-l.css)
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
  .page-products {
    .products-grid {
      .product-item {
        margin-left: 2%;
        padding: 0;
        width: calc(~'(100% - 4%) / 3');

        &:nth-child(3n + 1) {
          margin-left: 0;
        }
      }
    }
  }
}

// Desktop (style-l.css)

// _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {

.page-products {

.products-grid {

.product-item {

margin-left: 2%;

padding: 0;

width: calc(~'(100% - 4%) / 3');

&:nth-child(3n + 1) {

margin-left: 0;

}

[Magento 1.x] Un slider multi-produits responsive avec le plugin jQuery Cycle (fourni avec le thème Rwd)

03/03/2017 / admin

Source : http://jsfiddle.net/kRs2N/6/ et mon fork avec des marges entre les slides http://jsfiddle.net/frontenddeveloper/L3bpavzc/1/.

HTML

<ul class="slideshow">
    <li><img alt="" src="http://malsup.github.io/images/beach1.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach2.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach3.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach4.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong> </div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach5.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach6.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach7.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach8.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
</ul>
<div class="prevnext"> <a href="#" id="prev4" class="skew-backward">PREV</a> <a href="#" id="next4" class="skew-forward">NEXT</a> </div>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

CSS

/* Slider */

ul.slideshow {
  overflow: hidden;
    margin:0;
    padding:0;
    list-style-type:none;
    margin-bottom:-80px;
    margin-left: -10px;
    margin-right: -10px;
    }
li.cycle-slide
{
     text-align:center;
     position:relative;
     text-align:center;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
}
.cycle-slide div
{
    bottom:100px;
    color:#FFF;
    position:relative;
    left:0; right:0;
    font-size:24px;
    font-weight:300;
    text-transform:uppercase;
}
.cycle-slide div strong
{
    font-weight:700;
}
.cycle-slide img
{
    width: 100%; 
}
.slider {
    position:relative;
}
.prevnext
{
    position:absolute;
    top:50%;
    width:100%;
    margin-top:-90px;
}
#prev4
{ 
    position:absolute;
    left:40px;
    background-image:url(../images/prev.png);
    width:70px;
    height:140px;
}
#next4
{
    position:absolute;
    right:0;
    background-image:url(../images/next.png);
    width:70px;
    height:140px;
}

/* Slider */

ul.slideshow {

overflow: hidden;

margin:0;

padding:0;

list-style-type:none;

margin-bottom:-80px;

margin-left: -10px;

margin-right: -10px;

}

li.cycle-slide

{

text-align:center;

position:relative;

text-align:center;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

}

.cycle-slide div

{

bottom:100px;

color:#FFF;

position:relative;

left:0; right:0;

font-size:24px;

font-weight:300;

text-transform:uppercase;

}

.cycle-slide div strong

{

font-weight:700;

}

.cycle-slide img

{

width: 100%;

}

.slider {

position:relative;

}

.prevnext

{

position:absolute;

top:50%;

width:100%;

margin-top:-90px;

}

#prev4

{

position:absolute;

left:40px;

background-image:url(../images/prev.png);

width:70px;

height:140px;

}

#next4

{

position:absolute;

right:0;

background-image:url(../images/next.png);

width:70px;

height:140px;

}

jQuery

function buildCarousel(visibleSlides) {
    $('.slideshow').cycle({
        fx: 'carousel',
        speed: 600,
        slides: 'li',
        carouselVisible: visibleSlides,
        carouselFluid: true,
        swipe:true,
        swipefx:'scrollHorz',
        next: '#next4',
        prev: '#prev4',
        pager: '#gallery-chooser ul',
    });
    $('.slideshow li img').css('opacity','1');
}


function initCycle() {
    var width = $(document).width();
    var visibleSlides = 4;
    
    if ( width < 400 ) {visibleSlides = 1}
    else if(width < 700) {visibleSlides = 2}
    else if(width < 1024) {visibleSlides = 3}
    else if(width < 1400) {visibleSlides = 4}
    else {visibleSlides = 5};

    buildCarousel(visibleSlides);
}

function reinit_cycle() {
    var width = $(window).width();
    
    
    var destroyCarousel = function() { 
        $('.slideshow').cycle('destroy');
    }

    if (width < 400) {
        destroyCarousel(); // call the function
        reinitCycle(1);
    } else if (width > 400 && width < 700) {
        destroyCarousel();
        reinitCycle(2);
    } else if (width > 700 && width < 1024) {
        destroyCarousel();
        reinitCycle(3);
        } else if (width > 1024 && width < 1400) {
        destroyCarousel();
        reinitCycle(4);
    } else {
        destroyCarousel();
        reinitCycle(5);
    }
}

function reinitCycle(visibleSlides) {
    buildCarousel(visibleSlides);
}
var reinitTimer;
$(window).resize(function() {
    clearTimeout(reinitTimer);
    reinitTimer = setTimeout(reinit_cycle, 100);
});

$(document).ready(function(){
    initCycle();    
});

function buildCarousel(visibleSlides) {

$('.slideshow').cycle({

fx: 'carousel',

speed: 600,

slides: 'li',

carouselVisible: visibleSlides,

carouselFluid: true,

swipe:true,

swipefx:'scrollHorz',

next: '#next4',

prev: '#prev4',

pager: '#gallery-chooser ul',

});

$('.slideshow li img').css('opacity','1');

}

function initCycle() {

var width = $(document).width();

var visibleSlides = 4;

if ( width < 400 ) {visibleSlides = 1}

else if(width < 700) {visibleSlides = 2}

else if(width < 1024) {visibleSlides = 3}

else if(width < 1400) {visibleSlides = 4}

else {visibleSlides = 5};

buildCarousel(visibleSlides);

}

function reinit_cycle() {

var width = $(window).width();

var destroyCarousel = function() {

$('.slideshow').cycle('destroy');

}

if (width < 400) {

destroyCarousel(); // call the function

reinitCycle(1);

} else if (width > 400 && width < 700) {

destroyCarousel();

reinitCycle(2);

} else if (width > 700 && width < 1024) {

destroyCarousel();

reinitCycle(3);

} else if (width > 1024 && width < 1400) {

destroyCarousel();

reinitCycle(4);

} else {

destroyCarousel();

reinitCycle(5);

}

function reinitCycle(visibleSlides) {

buildCarousel(visibleSlides);

}

var reinitTimer;

$(window).resize(function() {

clearTimeout(reinitTimer);

reinitTimer = setTimeout(reinit_cycle, 100);

});

$(document).ready(function(){

initCycle();

});

[Magento] Changer le nombre de produits par rangée dans les listes produits du thème Rwd

26/11/2015 / admin

Source : How to change product column quantity in Magento.

Hi pals!, looking for tips to customize your theme?, here’s one very useful and easy to do: How to change the product column quantity in your product list pages. We’ll modify only 2 files:

app/design/frontend/default/yourtheme/layout/catalog.xml
app/design/frontend/default/yourtheme/template/catalog/product/list.phtml

catalog.xml :

Find “Category layered navigation layout” section or “Category default layout” section (if you don’t use layered-nav in your category pages), then add this lines or modify the exisitng ones if you already have them:

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

<action method=”setTemplate”><template>page/1column.phtml</template></action>

</reference>

Why we do this?: we set 1column layout in category pages since we want to take advantage of the full width of the page, so we can set 4 columns of products (grid mode of course). But it’s not mandatory, you can choose between 1column,2columns-right,etc. to fit your needs.

list.phtml :

Find this line under <?php // Grid Mode ?> section:

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

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

Change it to:

<?php $_columnCount = 4  ?>

1	<?php $_columnCount = 4 ?>

Save all files, clear your Magento cache. That’s it, you’ll get a category list with 4 columns of products.

Articles récents

Catégories

Archives

Méta

Étiquette : liste produits

[Magento 2] Un plugin jQuery custom pour rendre cliquable une zone complète plutôt que le seul lien qu’elle renferme avec x-magento-init et requireJS

Utilisation dans un fichier PHTML:

Détail des fichiers à mettre en place:

[Magento 2] Récupérer la valeur d’un attribut produit dans une page category, product list, product

Pour un attribut de type `text`

Pour un attribut de type `dropdown`

[Magento 2] Nombre de produits par rangée via CSS LESS dans les listes de catégories

Utiliser les variables mises à disposition par Magento 2

Utiliser la fonction `calc` de CSS

Petite subtilité pour les thèmes de merde qui n’utilisent pas Flexbox

[Magento 2] Produit configurable – afficher une fourchette de prix plutôt qu’un prix d’appel dans la liste des catégories/produits

[Magento 2] Masquer les décimales pour les prix ronds dans la liste produits

[Magento 2] Modifier le nombre de produits par rangée dans les listes produits

[Magento 1.x] Un slider multi-produits responsive avec le plugin jQuery Cycle (fourni avec le thème Rwd)

HTML

CSS

jQuery

[Magento] Changer le nombre de produits par rangée dans les listes produits du thème Rwd

catalog.xml :

list.phtml :

Utilisation dans un fichier PHTML:

Détail des fichiers à mettre en place:

Pour un attribut de type text

Pour un attribut de type dropdown

Utiliser les variables mises à disposition par Magento 2

Utiliser la fonction calc de CSS

Petite subtilité pour les thèmes de merde qui n’utilisent pas Flexbox

HTML

CSS

jQuery

catalog.xml :

list.phtml :

Pour un attribut de type `text`

Pour un attribut de type `dropdown`

Utiliser la fonction `calc` de CSS