Magento 2 - Comment appliquer Slick Slider à un widget récemment consulté

11

J'ai créé un code mais le curseur n'apparaît pas dans les produits récemment consultés.

Voici mon code -

J'ai téléchargé slick js et css à partir du lien suivant http://kenwheeler.github.io/slick/

Ensuite, j'ai fait ce qui suit -

Étape 1 -

Slick.min.js et slick.js copiés dans

app / design / frontend / _YOUR_VENDOR _ / _ YOUR_THEME_ / web / js /

Étape 2 -

Créez le fichier requirejs-config.js dans

app / design / frontend / _YOUR_VENDOR _ / _ YOUR_THEME_ / web /

avec le code suivant dans requirejs-config.js

    var config = {
    paths: {
        slick:        'js/slick'
    },
    shim: {
        slick: {
            deps: ['jquery']
        }
    }
};

Étape 3 -

Copié slick.less et slick-theme.less dans

app / design / frontend / _YOUR_VENDOR _ / _ YOUR_THEME_ / web / css / source /

Étape 4 -

Vider le cache et déployer des fichiers

Étape 5 -

Créé view_grid.phtml dans

app / design / frontend / _YOUR_VENDOR_ / YOUR_THEME / Magento_Reports / view / frontend / templates / widget / seen / content

avec le code suivant -

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

// @codingStandardsIgnoreFile

?>
<?php
/**
 * @var $block \Magento\Reports\Block\Product\Viewed
 */
?>
<?php
if ($exist = ($block->getRecentlyViewedProducts() && $block->getRecentlyViewedProducts()->getSize())) {
    $type = 'widget-viewed';
    $mode = 'grid';

    $type = $type . '-' . $mode;

    $image = 'recently_viewed_products_grid_content_widget';
    $title = __('Recently Viewed');
    $items = $block->getRecentlyViewedProducts();

    $showWishlist = true;
    $showCompare = true;
    $showCart = true;
    $rating = 'short';
    $description = ($mode == 'list') ? true : false;
}
?>
<?php if ($exist):?>
    <div class="block widget block-viewed-products-<?= /* @escapeNotVerified */ $mode ?>">
        <div class="block-title">
            <strong role="heading" aria-level="2"><?= /* @escapeNotVerified */ $title ?></strong>
        </div>
        <div class="block-content">
            <?= /* @escapeNotVerified */ '<!-- ' . $image . '-->' ?>
            <div class="products-<?= /* @escapeNotVerified */ $mode ?> <?= /* @escapeNotVerified */ $mode ?>">
                <ol class="product-items <?= /* @escapeNotVerified */ $type ?>">
                    <?php $iterator = 1; ?>
                    <?php foreach ($items as $_item): ?>
                        <?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<li class="product-item">' : '</li><li class="product-item">' ?>
                        <div class="product-item-info">
                            <a href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>" class="product-item-photo">
                                <?= $block->getImage($_item, $image)->toHtml() ?>
                            </a>
                            <div class="product-item-details">
                                <strong class="product-item-name">
                                    <a title="<?= $block->escapeHtml($_item->getName()) ?>"
                                       href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>" class="product-item-link">
                                        <?= $block->escapeHtml($_item->getName()) ?>
                                    </a>
                                </strong>
                                <?php /* @escapeNotVerified */ echo $block->getProductPriceHtml(
                                    $_item,
                                    \Magento\Catalog\Pricing\Price\FinalPrice::PRICE_CODE,
                                    \Magento\Framework\Pricing\Render::ZONE_ITEM_LIST,
                                    [
                                        'price_id_suffix' => '-' . $type
                                    ]
                                ) ?>
                                <?php if ($rating): ?>
                                    <?= $block->getReviewsSummaryHtml($_item, $rating) ?>
                                <?php endif; ?>
                                <?php if ($showWishlist || $showCompare || $showCart): ?>
                                    <div class="product-item-actions">
                                        <?php if ($showCart): ?>
                                            <div class="actions-primary">
                                                <?php if ($_item->isSaleable()): ?>
                                                    <?php if ($_item->getTypeInstance()->hasRequiredOptions($_item)): ?>
                                                        <button class="action tocart primary"
                                                                data-mage-init='{"redirectUrl": {"url": "<?= /* @escapeNotVerified */ $block->getAddToCartUrl($_item) ?>"}}'
                                                                type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
                                                            <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
                                                        </button>
                                                    <?php else: ?>
                                                        <?php
                                                            $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
                                                            $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
                                                        ?>
                                                        <button class="action tocart primary"
                                                                data-post='<?= /* @escapeNotVerified */ $postData ?>'
                                                                type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
                                                            <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
                                                        </button>
                                                    <?php endif; ?>
                                                <?php else: ?>
                                                    <?php if ($_item->getIsSalable()): ?>
                                                        <div class="stock available"><span><?= /* @escapeNotVerified */ __('In stock') ?></span></div>
                                                    <?php else: ?>
                                                        <div class="stock unavailable"><span><?= /* @escapeNotVerified */ __('Out of stock') ?></span></div>
                                                    <?php endif; ?>
                                                <?php endif; ?>
                                            </div>
                                        <?php endif; ?>
                                        <?php if ($showWishlist || $showCompare): ?>
                                            <div class="actions-secondary" data-role="add-to-links">
                                                <?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?>
                                                    <a href="#"
                                                       class="action towishlist" data-action="add-to-wishlist"
                                                       data-post='<?= /* @escapeNotVerified */ $block->getAddToWishlistParams($_item) ?>'
                                                       title="<?= /* @escapeNotVerified */ __('Add to Wish List') ?>">
                                                        <span><?= /* @escapeNotVerified */ __('Add to Wish List') ?></span>
                                                    </a>
                                                <?php endif; ?>
                                                <?php if ($block->getAddToCompareUrl() && $showCompare): ?>
                                                    <?php $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');?>
                                                    <a href="#" class="action tocompare"
                                                       data-post='<?= /* @escapeNotVerified */ $compareHelper->getPostDataParams($_item) ?>'
                                                       title="<?= /* @escapeNotVerified */ __('Add to Compare') ?>">
                                                        <span><?= /* @escapeNotVerified */ __('Add to Compare') ?></span>
                                                    </a>
                                                <?php endif; ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <?= ($iterator == count($items)+1) ? '</li>' : '' ?>
                    <?php endforeach ?>
                </ol>
            </div>
            <?= $block->getPagerHtml() ?>
        </div>
    </div>

<script>
    require([
        'jquery',
        'slick'
    ], function ($) {
        jQuery(document).ready(function () {
            jQuery(".widget-viewed").slick({
                dots: true,
                infinite: true,
                speed: 300,
                slidesToShow: 4,
                slidesToScroll: 4,
                responsive: [
                    {
                        breakpoint: 1280,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
        });
    });
</script>   

<?php endif;?>

Étape 6 -

Vider le cache et déployer à nouveau les fichiers

Mais le curseur n'apparaît toujours pas pour les produits récemment consultés en frontend

S'il vous plaît, aidez-moi à corriger le code ou à créer un module pour afficher le produit récemment consulté avec slick slider :)

Vinay
la source
Avez-vous déjà compris cela? J'essaie actuellement la même chose. D'après ce que je peux dire, je pense que le widget se charge après l'exécution de mon javascript. J'ai essayé d'envelopper mon code dans un écouteur de changement de document mais cela ne semble pas aider non plus.
Jim
J'essaie également d'appliquer un slick slider dans mon magento. J'ai fait référence à de nombreux documents, ils sont tous placés slider slider dans le thème. J'essaie de le placer dans mon module personnalisé. Vous en avez une idée?
Siranjeevi KS

Réponses:

3

Vous devez corriger votre étape 2 comme ci-dessous, Conservez le fichier requirejs-config.js à la racine de votre thème au lieu du dossier Web.

Créez le fichier requirejs-config.js dans

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/

avec le code suivant dans requirejs-config.js

 var config = {
    paths: {
        slick:        'js/slick'
    },
    shim: {
        slick: {
            deps: ['jquery']
        }
    }
};

Courir

configuration de php bin / magento: mise à niveau

configuration de php bin / magento: contenu statique: déployer

Rakesh Jesadiya
la source
Salut Rakesh J'ai essayé de mettre le requirejs-config.js à la racine du thème au lieu du dossier Web, mais le curseur ne s'affiche toujours pas.
Vinay
2

Utilisez le code ci-dessous:

<script>
    require([
        'jquery',
        'slick'
    ], function ($) {
        $(document).ready(function () {
            $(".widget-viewed-grid").slick({
                dots: true,
                infinite: true,
                speed: 300,
                slidesToShow: 4,
                slidesToScroll: 4,
                responsive: [
                    {
                        breakpoint: 1280,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
        });
    });
</script>   
Ronak Chauhan
la source
Salut Ronak, ce code ne fonctionne pas non plus. J'ai impliqué et testé.
Vinay
vous avez donné un nom de classe incorrect, vérifiez-le!
Ronak Chauhan
Salut Ronak, j'ai vérifié avec le code ci-dessus ".widget-views-grid" et ".widget-views" ces deux classes, Still Slider n'est pas à l'affiche. JS est correctement chargé dans requirejs-config.js
Vinay
Salut Ronak Essayé en ajoutant beaucoup d'autres classes et cela a pris tout mon dernier jour mais ça ne fonctionne toujours pas. Pourriez-vous s'il vous plaît suggérer la bonne classe pour faire fonctionner le curseur avec les produits récemment consultés
Vinay
1

requirejs-config.js devrait être comme ci-dessous

var config = {
    paths: {
        slick: 'js/slick.min'
    },
    shim: {
        slick: {
            deps: ['jquery']
        }
    }
};
Goutam
la source
1

Au cas où quelqu'un d'autre aurait besoin de le faire, voici ce que j'ai fait pour Magento 2.3.2. Le widget récemment consulté est ajouté via knockout, qui se déclenche après tous les autres javascript. Donc, pour appliquer le slick, j'ai dû utiliser la liaison personnalisée "afterRender" .

Une fois que j'ai trouvé le modèle de désactivation et le modèle de vue que js avait récemment consultés, les produits étaient assez simples. Voici mon code:

Copiez vendor/magento/module-catalog/view/base/web/js/product/list/listing.jssur votre thème comme app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/js/product/list/listing.js

Assurez-vous que jquery / slick est ajouté en haut du fichier de script, comme ceci (cela suppose que vous les avez déjà ajoutés à require-config.js):

define([
    'ko',
    'underscore',
    'Magento_Ui/js/grid/listing',
    'jquery',
    'slick'
], function (ko, _, Listing, $) {

Ajoutez une nouvelle fonction comme ceci:

pdpRvSlickInit: function(){
        $('.block-viewed-products-grid .product-items').slick({
            dots: false,
            infinite: true,
            speed: 300,
            slidesToShow: 3,
            slidesToScroll: 3,
            responsive: [
                {
                    breakpoint: 960,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                }
            ]
        });
    }

Copiez maintenant le modèle HTML à élimination directe dans votre thème. Copier /vendor/magento/module-catalog/view/base/web/template/product/list/listing.htmldans app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/template/product/list/listing.htmlJ'ai ajouté une nouvelle Div, mais je ne suis pas sûr que vous ayez besoin de le faire. J'ai ajouté ceci:

<div class="clear" data-bind="afterRender: pdpRvSlickInit"></div>

Avant la dernière div de clôture. J'espère que cela pourra aider.

Jim
la source