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

11

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

Vinay
fuente
¿Alguna vez resolviste esto? Actualmente estoy intentando lo mismo. Por lo que puedo decir, creo que el widget se carga después de que se haya ejecutado mi javascript. Traté de envolver mi código en un escucha de cambio de documentos pero eso tampoco parece ayudar.
Jim
También estoy tratando de aplicar slider slider en mi magento. Me referí a muchos documentos, todos se colocan en un control deslizante resbaladizo en el tema. Estoy tratando de colocarlo en mi módulo personalizado. ¿Tienes alguna idea para ello?
Siranjeevi KS

Respuestas:

3

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

Rakesh Jesadiya
fuente
Hola Rakesh, he intentado poner requirejs-config.js en la raíz del tema en lugar de la carpeta web, pero aún no se muestra el control deslizante.
Vinay
2

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>   
Ronak Chauhan
fuente
Hola Ronak, este código tampoco funciona. Lo he implicado y probado.
Vinay
has dado un nombre de clase incorrecto ¡compruébalo!
Ronak Chauhan
Hola Ronak, he comprobado con el código anterior ".widget-visto-cuadrícula" y ".widget-visto" estas dos clases, Still Slider no se muestra. JS se carga en requirejs-config.js correctamente
Vinay
Hola Ronak Intenté agregando muchas otras clases y me llevó todo el último día, pero aún no se está ejecutando. ¿Podría sugerir la clase correcta para que el control deslizante funcione con los productos vistos recientemente?
Vinay
1

requirejs-config.js debe ser como a continuación

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

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.

Jim
fuente