Magento 2 - Cómo aplicar Slick Slider a un widget visto recientemente

He creado un código pero el control deslizante no aparece en los productos vistos recientemente.

Aquí está mi código

He descargado slick js y css del siguiente enlace http://kenwheeler.github.io/slick/

Entonces he hecho lo siguiente:

Paso 1 -

Copiado slick.min.js y slick.js en

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

Paso 2 -

Cree el archivo requirejs-config.js en

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

con el siguiente código en requirejs-config.js

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

Paso 3 -

Copiado slick.less y slick-theme.less en

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

Paso 4 -

Borrar caché e implementar archivos

Paso 5 -

Creado seen_grid.phtml en

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

con el siguiente código

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

Paso 6 -

Borrar caché e implementar archivos nuevamente

Pero el control deslizante todavía no aparece para los productos vistos recientemente en la interfaz

Ayúdame a corregir el código o crear un módulo para mostrar el producto visto recientemente con el control deslizante slick :)

Debe corregir su paso 2 como se muestra a continuación, mantenga el archivo requirejs-config.js en la raíz de su tema en lugar de la carpeta web.

Cree el archivo requirejs-config.js en

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/

con el siguiente código en requirejs-config.js

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

correr

Configuración de php bin / magento: actualización

php bin / magento setup: static-content: deploy

Use el siguiente código:

<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 debe ser como a continuación

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

En caso de que alguien más necesite hacer esto, esto es lo que hice para Magento 2.3.2. El widget Visto recientemente se agrega a través de knockout, que se activa después de todos los demás javascript. Así que para aplicar slick tuve que usar el enlace personalizado "afterRender" .

Una vez que encontré qué plantilla de knockout y viewmodel js que vieron recientemente los productos utilizados, fue bastante sencillo. Aquí está mi código:

Copie vendor/magento/module-catalog/view/base/web/js/product/list/listing.jsa su tema como app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/js/product/list/listing.js

Asegúrese de que jquery / slick se agrega a la parte superior del archivo de secuencia de comandos, de esta manera (esto es asumiendo que ya los agregó a require-config.js):

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

Agregue una nueva función así:

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

Ahora copie la plantilla HTML eliminada a su tema. Copiar /vendor/magento/module-catalog/view/base/web/template/product/list/listing.htmla app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/template/product/list/listing.htmlAgregué un nuevo Div, pero no estoy seguro de que necesites hacer eso. Agregué esto:

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

Antes del último cierre div. Espero que ayude.