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


10

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


Hast du das jemals herausgefunden? Ich versuche gerade das Gleiche. Nach allem, was ich sagen kann, wird das Widget nach der Ausführung meines Javascript geladen. Ich habe versucht, meinen Code in einen Listener für Dokumentänderungen zu packen, aber das scheint auch nicht zu helfen.
Jim

Antworten:


3

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


Hallo Rakesh, ich habe versucht, die Datei requirejs-config.js im Stammverzeichnis des Themas anstelle des Webordners abzulegen, aber der Schieberegler wird immer noch nicht angezeigt.
Vinay

2

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>   

Hallo Ronak, dieser Code funktioniert auch nicht. Ich habe impliziert und getestet.
Vinay

Sie haben einen falschen Klassennamen angegeben.
Ronak Chauhan

Hallo Ronak, ich habe diese beiden Klassen mit dem obigen Code ".widget-Viewed-Grid" und ".widget-Viewed" überprüft. Still Slider wird nicht angezeigt. JS wird korrekt in requirejs-config.js geladen
Vinay

Hallo Ronak, habe versucht, viele andere Klassen hinzuzufügen, und es hat meinen ganzen letzten Tag gedauert, aber es läuft immer noch nicht. Könnten Sie bitte die richtige Klasse vorschlagen, damit der Schieberegler mit kürzlich angezeigten Produkten funktioniert?
Vinay

1

requirejs-config.js sollte wie folgt sein

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

1

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.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.