Magento 2 - Cara menerapkan Slick Slider ke Widget Baru Dilihat


11

Saya telah membuat kode tetapi slider tidak muncul di produk yang baru dilihat.

Ini kode saya -

Saya telah mengunduh sls js dan css dari tautan berikut http://kenwheeler.github.io/slick/

Maka saya telah melakukan yang berikut -

Langkah 1 -

Salinan slick.min.js dan slick.js di

aplikasi / desain / antarmuka / _YOUR_VENDOR _ / _ YOUR_THEME_ / web / js /

Langkah 2 -

Buat file requirejs-config.js di

aplikasi / desain / antarmuka / _YOUR_VENDOR _ / _ YOUR_THEME_ / web /

dengan kode berikut di requireejs-config.js

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

Langkah 3 -

Salinan slick.less dan slick-theme.less in

aplikasi / desain / antarmuka / _YOUR_VENDOR _ / _ YOUR_THEME_ / web / css / sumber /

Langkah 4 -

Bersihkan cache dan gunakan file

Langkah 5 -

Dibuat viewed_grid.phtml di

aplikasi / desain / antarmuka / _YOUR_VENDOR_ / YOUR_THEME / Magento_Reports / view / frontend / template / widget / dilihat / konten

dengan kode berikut -

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

Langkah 6 -

Bersihkan cache dan gunakan kembali file

Tetapi slider masih tidak muncul untuk produk yang baru dilihat di frontend

Tolong bantu saya memperbaiki kode atau membuat modul untuk menampilkan produk yang baru saja dilihat dengan bilah geser :)


Apakah Anda pernah memikirkan hal ini? Saat ini saya sedang mencoba hal yang sama. Dari apa yang saya tahu saya pikir widget memuat setelah javascript saya dieksekusi. Saya mencoba untuk membungkus kode saya ke dalam pendengar perubahan dokumen tapi itu tampaknya tidak membantu juga.
Jim

Saya juga mencoba menerapkan slick slider di magento saya. Saya merujuk banyak dokumen mereka semua ditempatkan slider yang licin dalam tema. Saya mencoba menempatkannya di modul khusus saya. Apakah Anda punya ide untuk itu?
Siranjeevi KS

Jawaban:


3

Anda perlu memperbaiki langkah 2 Anda seperti di bawah ini, Simpan file yang diperlukan-config.js di root tema Anda alih-alih folder web.

Buat file requirejs-config.js di

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/

dengan kode berikut di requireejs-config.js

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

Lari

setup php bin / magento: tingkatkan

setup php bin / magento: static-content: deploy


Hai Rakesh Saya telah mencoba untuk menempatkan requireejs-config.js di root tema alih-alih folder web, tetapi slider masih tidak muncul.
Vinay

2

Gunakan kode di bawah ini:

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

Hai Ronak, kode ini juga tidak berfungsi. Saya telah tersirat dan diuji.
Vinay

Anda telah memberikan nama kelas yang salah, periksa!
Ronak Chauhan

Halo Ronak, saya telah memeriksa dengan kode di atas ".widget-viewed-grid" dan ".widget-viewed" dua kelas ini, Still Slider tidak muncul. JS dimuat dalam requireejs-config.js dengan benar
Vinay

Hai Ronak Mencoba dengan menambahkan banyak kelas lain dan telah menghabiskan seluruh hari terakhir saya tetapi masih tidak berjalan. Bisakah Anda menyarankan kelas yang benar untuk membuat penggeser bekerja dengan Produk yang Baru Dilihat.
Vinay

1

requirejs-config.js harus seperti di bawah ini

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

1

Memetikan orang lain perlu melakukan ini, inilah yang saya lakukan untuk Magento 2.3.2. Widget yang Baru Dilihat akan ditambahkan melalui sistem gugur, yang muncul setelah semua javascript lainnya. Jadi untuk menerapkan slick saya harus menggunakan "afterRender" custom binding .

Setelah saya menemukan yang knockout template dan viewmodel js baru-baru ini dilihat produk yang digunakan itu cukup mudah. Ini kode saya:

Salin vendor/magento/module-catalog/view/base/web/js/product/list/listing.jske tema Anda seperti app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/js/product/list/listing.js

Pastikan jquery / slick ditambahkan ke bagian atas file skrip, seperti itu (ini dengan asumsi Anda sudah menambahkannya ke memerlukan-config.js):

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

Tambahkan fungsi baru seperti:

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

Sekarang salin templat HTML KO ke tema Anda. Salin /vendor/magento/module-catalog/view/base/web/template/product/list/listing.htmlke app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/template/product/list/listing.htmlsaya menambahkan Div baru, tapi saya tidak yakin Anda perlu melakukan itu. Saya menambahkan ini:

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

Sebelum div penutupan terakhir. Semoga itu bisa membantu.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.