7

I have created a code but slider is not showing up in recently viewed products.

Here is my code -

I have downloaded slick js and css from the following link http://kenwheeler.github.io/slick/

Then i have done the following -

Step 1 -

Copied slick.min.js and slick.js in

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/js/

Step 2 -

Create requirejs-config.js file in

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/

with the following code in requirejs-config.js

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

Step 3 -

Copied slick.less and slick-theme.less in

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/web/css/source/

Step 4 -

Clear cache and deploy files

Step 5 -

Created viewed_grid.phtml in

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

with the following code -

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

Step 6 -

Clear cache and deploy files again

But the slider is still not showing up for recently viewed products in frontend

Please help me in correcting the code or creating a module to show recently viewed product with slick slider :)

3

You need to correct your step 2 make as below, Keep requirejs-config.js file in root of your theme instead of web folder.

Create requirejs-config.js file in

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/

with the following code in requirejs-config.js

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

Run

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

  • Hi Rakesh I have tried to put the requirejs-config.js in root of theme instead of web folder, but still slider is not showing up. – Vinay Dec 19 '17 at 5:18
2

Use below code:

<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>   
  • Hi Ronak, this code is also not working. I have implied and tested. – Vinay Dec 19 '17 at 7:35
  • you have given wrong class name check it! – Ronak Chauhan Dec 19 '17 at 7:38
  • Hi Ronak, I have checked with the above code ".widget-viewed-grid" and ".widget-viewed" these two classes, Still Slider is not showing. JS is loaded in requirejs-config.js correctly – Vinay Dec 19 '17 at 7:41
  • Hi Ronak Tried by adding lot of other classes and it has taken my whole last day but still it is not running. Could you please suggest the correct class to make slider work with Recently Viewed Products. – Vinay Dec 20 '17 at 6:24
1

requirejs-config.js should be as below

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.