Magento 2 - Como aplicar o Slick Slider ao widget visualizado recentemente

11

Criei um código, mas o controle deslizante não aparece nos produtos visualizados recentemente.

Aqui está o meu código -

Eu baixei slick js e css no link a seguir http://kenwheeler.github.io/slick/

Então eu fiz o seguinte -

Passo 1 -

Slick.min.js e slick.js copiados em

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

Passo 2 -

Crie o arquivo requirejs-config.js no

aplicativo / design / front-end / _YOUR_VENDOR _ / _ YOUR_THEME_ / web /

com o seguinte código em requirejs-config.js

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

Etapa 3 -

Copiado slick.less e slick-theme.less em

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

Passo 4 -

Limpar cache e implantar arquivos

Etapa 5 -

Criado seen_grid.phtml em

app / design / frontend / _YOUR_VENDOR_ / YOUR_THEME / Magento_Reports / view / frontend / templates / widget / visualizado / conteúdo

com o seguinte 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;?>

Etapa 6 -

Limpar cache e implantar arquivos novamente

Mas o controle deslizante ainda não está aparecendo para os produtos vistos recentemente no frontend

Ajude-me a corrigir o código ou criar um módulo para mostrar o produto visualizado recentemente com o slider slider :)

Vinay
fonte
Você já descobriu isso? Atualmente, estou tentando a mesma coisa. Pelo que sei, acho que o widget é carregado após a execução do meu javascript. Tentei agrupar meu código em um ouvinte de alteração de documento, mas isso também não parece ajudar.
Jim
Também estou tentando aplicar slider slider no meu magento. Mencionei muitos documentos, todos eles são colocados no slider slider no tema. Estou tentando colocá-lo no meu módulo personalizado. Você tem alguma idéia para isso?
Siranjeevi KS

Respostas:

3

Você precisa corrigir o passo 2, como abaixo, manter o arquivo requirejs-config.js na raiz do seu tema, em vez da pasta da web.

Crie o arquivo requirejs-config.js no

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/

com o seguinte código em requirejs-config.js

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

Corre

php bin / magento setup: atualização

configuração do bin php / magento: static-content: deploy

Rakesh Jesadiya
fonte
Oi Rakesh Eu tentei colocar o requirejs-config.js na raiz do tema em vez da pasta da web, mas o controle deslizante ainda não está aparecendo.
Vinay
2

Use o código abaixo:

<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
fonte
Olá Ronak, este código também não está funcionando. Eu impliquei e testei.
Vinay
você deu o nome errado da classe, verifique!
Ronak Chauhan
Oi Ronak, verifiquei com o código acima ".widget-seen-grid" e ".widget-seen" nessas duas classes, o Still Slider não está aparecendo. O JS foi carregado no requirejs-config.js corretamente
Vinay
Oi Ronak Tentei adicionar muitas outras aulas e levou todo o meu último dia, mas ainda não está funcionando. Você poderia sugerir a classe correta para fazer o controle deslizante funcionar com os produtos visualizados recentemente.
Vinay
1

requirejs-config.js deve ser como abaixo

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

Caso alguém precise fazer isso, aqui está o que eu fiz para o Magento 2.3.2. O widget Visualizado Recentemente é adicionado via knockout, que é acionado após todos os outros javascript. Então, para aplicar o slick, tive que usar a ligação personalizada "afterRender" .

Uma vez eu descobri qual modelo de knockout e viewmodel os js visualizaram recentemente os produtos usados, foi bem direto. Aqui está o meu código:

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

Certifique-se de que jquery / slick seja adicionado à parte superior do arquivo de script, assim:

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

Adicione uma nova função da seguinte forma:

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

Agora copie o modelo HTML vazado para o seu tema. Copie /vendor/magento/module-catalog/view/base/web/template/product/list/listing.htmlpara app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/template/product/list/listing.htmleu adicionei uma nova Div, mas não tenho certeza se você precisa fazer isso. Eu adicionei isso:

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

Antes do último fechamento div. Espero que ajude.

Jim
fonte