Magento 2-如何将Slick Slider应用于最近查看的小部件


11

我已经创建了代码,但滑块在最近查看的产品中没有显示。

这是我的代码-

我已经从以下链接http://kenwheeler.github.io/slick/下载了slick js和css

然后我做了以下-

步骤1 -

在以下位置复制了slick.min.js和slick.js

应用/设计/前端/ _YOUR_VENDOR _ / _ YOUR_THEME_ / web / js /

第2步 -

在中创建requirejs-config.js文件

应用/设计/前端/ _YOUR_VENDOR _ / _ YOUR_THEME_ /网络/

在requirejs-config.js中使用以下代码

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

步骤3-

复制的slick.less和slick-theme.less in

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

第四步 -

清除缓存并部署文件

步骤5-

在以下位置创建了viewed_grid.phtml

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

使用以下代码-

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

步骤6-

清除缓存并再次部署文件

但是对于前端中最近查看过的产品,滑块仍然没有显示

请帮助我纠正代码或创建一个模块以使用滑动条显示最近查看的产品:)


你有没有解决这个问题?我目前正在尝试相同的操作。据我所知,我认为我的JavaScript执行后会加载小部件。我试图将代码包装到文档更改侦听器中,但这似乎也无济于事。
吉姆(Jim)

我也在尝试在我的magento中应用光滑的滑块。我提到了许多文档,它们都以主题形式放置了光滑的滑块。我试图将其放在我的自定义模块中。你有什么想法吗?
西兰吉耶维(KS)

Answers:


3

您需要按以下步骤更正步骤2的内容,将requirejs-config.js文件保留在主题的根目录中,而不要保留在Web文件夹中。

在中创建requirejs-config.js文件

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/

在requirejs-config.js中使用以下代码

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

php bin / magento设置:升级

php bin / magento设置:静态内容:部署


嗨,Rakesh,我尝试将requirejs-config.js放在主题的根目录中,而不是放在Web文件夹中,但仍未显示滑块。
Vinay

2

使用以下代码:

<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,您好,此代码也不起作用。我已经暗示并测试了。
Vinay

您给错了班级名称!
罗纳克·乔汉

嗨,Ronak,我已经用上面的代码“ .widget-viewed-grid”和“ .widget-viewed”这两个类进行了检查,Still Slider没有显示。JS在正确加载requirejs-config.js
维奈

嗨,Ronak,尝试了许多其他课程,并花了我整整一天的时间,但仍然没有运行。您能否建议正确的类别,以使滑块能够与“最近查看的产品”一起使用。
Vinay

1

requirejs-config.js 应该如下

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

1

万一其他人需要这样做,这就是我对Magento 2.3.2所做的工作。通过击倒添加了最近查看的小部件,该击倒在所有其他javascript之后触发。因此,要应用平滑功能,我必须使用“ afterRender”自定义绑定

一旦我发现最近使用过哪些淘汰表模板和viewmodel js产品,它就非常简单。这是我的代码:

复制vendor/magento/module-catalog/view/base/web/js/product/list/listing.js到您的主题,例如 app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/js/product/list/listing.js

确保将jquery / slick添加到脚本文件的顶部,如下所示(这是假设您已经将它们添加到require-config.js中):

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

像这样添加一个新功能:

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

现在,将删除的HTML模板复制到您的主题。复制/vendor/magento/module-catalog/view/base/web/template/product/list/listing.htmlapp/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/template/product/list/listing.html我添加了一个新的Div,但是我不确定您是否需要这样做。我添加了这个:

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

在最后一个关闭div之前。希望能有所帮助。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.