Magento 2 - So wenden Sie den Slick Slider auf das zuletzt angezeigte Widget an

Ich habe einen Code erstellt, aber der Schieberegler wird in kürzlich angesehenen Produkten nicht angezeigt.

Hier ist mein Code -

Ich habe slick js und css von folgendem Link heruntergeladen: http://kenwheeler.github.io/slick/

Dann habe ich folgendes gemacht -

Schritt 1 -

Kopiert slick.min.js und slick.js in

app / design / frontend / _IHR_VENDOR _ / _ IHR_THEMA_ / web / js /

Schritt 2 -

Erstellen Sie die Datei requirejs-config.js in

app / design / frontend / _IHR_VENDOR _ / _ IHR_THEMA_ / web /

mit dem folgenden Code in requirejs-config.js

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

Schritt 3 -

Kopiert slick.less und slick-theme.less in

app / design / frontend / _IHR_VENDOR _ / _ IHR_THEMA_ / web / css / source /

Schritt 4 -

Leeren Sie den Cache und stellen Sie Dateien bereit

Schritt 5 -

Erstellt betrachtete_grid.phtml in

app / design / frontend / _YOUR_VENDOR_ / YOUR_THEME / Magento_Reports / view / frontend / templates / widget / angezeigt / inhalt

mit folgendem Code -

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

Schritt 6 -

Leeren Sie den Cache und stellen Sie die Dateien erneut bereit

Bei kürzlich angesehenen Produkten im Frontend wird der Schieberegler jedoch immer noch nicht angezeigt

Bitte helfen Sie mir bei der Korrektur des Codes oder beim Erstellen eines Moduls, um das kürzlich angesehene Produkt mit dem Slick-Slider anzuzeigen :)

Sie müssen Ihren Schritt 2 wie folgt korrigieren: Behalten Sie die Datei requirejs-config.js im Stammverzeichnis Ihres Themas anstelle des Webordners.

Erstellen Sie die Datei requirejs-config.js in

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/

mit dem folgenden Code in requirejs-config.js

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

Lauf

PHP Bin / Magento Setup: Upgrade

PHP Bin / Magento Setup: Statischer Inhalt: Bereitstellen

Verwenden Sie den folgenden Code:

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

requirejs-config.js sollte wie folgt sein

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

Falls jemand anderes dies tun muss, habe ich Folgendes für Magento 2.3.2 getan. Das kürzlich angezeigte Widget wird über das Knockout hinzugefügt, das nach allen anderen Javascript ausgelöst wird. Um Slick anzuwenden, musste ich die benutzerdefinierte Bindung "afterRender" verwenden .

Als ich herausfand, welche Knockout-Vorlage und welches Ansichtsmodell kürzlich die verwendeten Produkte angesehen hatten, war es ziemlich einfach. Hier ist mein Code:

Kopieren Sie vendor/magento/module-catalog/view/base/web/js/product/list/listing.jszu Ihrem Thema wie app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/js/product/list/listing.js

Stellen Sie sicher, dass jquery / slick wie folgt am Anfang der Skriptdatei hinzugefügt wird (dies setzt voraus, dass Sie sie bereits zu require-config.js hinzugefügt haben):

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

Fügen Sie eine neue Funktion wie folgt hinzu:

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
                    }
                }
            ]
        });
    }

Kopieren Sie nun die Knockout-HTML-Vorlage in Ihr Thema. Kopieren /vendor/magento/module-catalog/view/base/web/template/product/list/listing.htmlnach app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/template/product/list/listing.htmlIch habe eine neue Div hinzugefügt, aber ich bin mir nicht sicher, ob Sie das tun müssen. Ich habe folgendes hinzugefügt:

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

Vor dem letzten Schluss div. Ich hoffe, das hilft.