I'm doing slick slider with ul li, and it doesn't work well.
What i mean is it take 2-5 second to load succesfully the slider (some time it take more than that). In that loading time, it look like this:
https://i.stack.imgur.com/kdte5.png
So here is the normal ul li, with out slick slider.
https://i.stack.imgur.com/ebF9m.png
And here is what after i put slick slider in:
https://i.stack.imgur.com/kdte5.png
Sorry because i cant post the direct image in here. I don't have enough reputaion to do that.
So here is the code:
<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<?php
/**
* Template for displaying products list widget
*
* @var $block \Gssi\ProductsSlider\Block\Product\ProductsList
*/
?>
<?php if ($exist = ($block->getProductCollection() && $block->getProductCollection()->getSize())):?>
<?php
$type = 'widget-product-grid';
$mode = 'grid';
$image = 'new_products_content_widget_grid';
$title = $block->getTitle() ? __($block->getTitle()) : '';
$items = $block->getProductCollection()->getItems();
$showWishlist = true;
$showCompare = true;
$showCart = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::DEFAULT_VIEW;
$description = false;
?>
<div class="block widget block-products-list <?php /* @escapeNotVerified */ echo $mode; ?>">
<?php if ($title):?>
<div class="block-title">
<strong><?php /* @escapeNotVerified */ echo $title; ?></strong>
</div>
<?php endif ?>
<div class="block-content">
<?php /* @escapeNotVerified */ echo '<!-- ' . $image . '-->' ?>
<div class="products-<?php /* @escapeNotVerified */ echo $mode; ?> <?php /* @escapeNotVerified */ echo $mode; ?>">
<ul class="slick-custom product-items <?php /* @escapeNotVerified */ echo $type; ?>">
<?php $iterator = 1; ?>
<?php foreach ($items as $_item): ?>
<?php /* @escapeNotVerified */ echo($iterator++ == 1) ? '<li class="product-item">' : '</li><li class="product-item">' ?>
<div class="product-item-info">
<a href="<?php /* @escapeNotVerified */ echo $block->getProductUrl($_item) ?>" class="product-item-photo">
<?php echo $block->getImage($_item, $image)->toHtml(); ?>
</a>
<div class="product-item-details">
<strong class="product-item-name">
<a title="<?php echo $block->escapeHtml($_item->getName()) ?>"
href="<?php /* @escapeNotVerified */ echo $block->getProductUrl($_item) ?>"
class="product-item-link">
<?php echo $block->escapeHtml($_item->getName()) ?>
</a>
</strong>
<?php
echo $block->getProductPriceHtml($_item, $type);
?>
<?php if ($templateType): ?>
<?php echo $block->getReviewsSummaryHtml($_item, $templateType) ?>
<?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":"<?php /* @escapeNotVerified */ echo $block->getAddToCartUrl($_item) ?>"}}'
type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>">
<span><?php /* @escapeNotVerified */ echo __('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='<?php /* @escapeNotVerified */ echo $postData; ?>'
type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>">
<span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
</button>
<?php endif; ?>
<?php else: ?>
<?php if ($_item->getIsSalable()): ?>
<div class="stock available"><span><?php /* @escapeNotVerified */ echo __('In stock') ?></span></div>
<?php else: ?>
<div class="stock unavailable"><span><?php /* @escapeNotVerified */ echo __('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="#"
data-post='<?php /* @escapeNotVerified */ echo $block->getAddToWishlistParams($_item); ?>'
class="action towishlist" data-action="add-to-wishlist"
title="<?php /* @escapeNotVerified */ echo __('Add to Wish List') ?>">
<span><?php /* @escapeNotVerified */ echo __('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='<?php /* @escapeNotVerified */ echo $compareHelper->getPostDataParams($_item);?>'
title="<?php /* @escapeNotVerified */ echo __('Add to Compare') ?>">
<span><?php /* @escapeNotVerified */ echo __('Add to Compare') ?></span>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
<?php echo($iterator == count($items)+1) ? '</li>' : '' ?>
<?php endforeach ?>
</ul>
</div>
<?php echo $block->getPagerHtml() ?>
</div>
</div>
<script>
require([
'jquery',
'slick'
], function ($) {
$(document).ready(function () {
$('.slick-custom').slick({
slidesToShow: 5,
speed: 300,
autoplay: true
});
});
});
</script>
<?php endif;?>
I've try put this in slick slider option, but doesn't work at all:
slide: 'li',
track: function() { return $(this).children('product-item'); },
EDIT 1:
After 6 hours looking for the answer, i've found the reason (or atleast i thing its the reason :D ).
Okay, so i guest its because Magento wasn't load the javascript in time. I mean it take a while to load this slick slider javascript.
Right now, it take about 1-2 seconds for slick slider called successfully. And in that 1-2 seconds, it will render that problem out (just like in picture 2).
Ok so the problem is still there, if you guys have any suggestion, please tell me. Thanks alot :)
EDIT 2:
I'm follow @HoangHieu solution, but doesn't seem to work
Here is what i've done :
<div class="products-<?php /* @escapeNotVerified */ echo $mode; ?> <?php /* @escapeNotVerified */ echo $mode; ?>" data-mage-init='{ "slick": {} }'>
<ul class="slick-custom product-items <?php /* @escapeNotVerified */ echo $type; ?>">
// some li
<li>...</li>
</ul>
</div>
I've added data-mage-init='{ "slick": {} }'
in the . I called "slick"
because that is what i define slickSlider
in requirejs-config.js
var config = {
map: {
'*': {
slick: 'Gssi_ProductsSlider/js/lib/slick',
}
}
};
EDIT 3:
Okay so here is what i've done til now after @HoangHieu solution:
<ul class="slick-custom product-items <?php /* @escapeNotVerified */ echo $type; ?>" data-mage-init='{ "callSlick": {} }'>
//some li
</ul>
call-slick.js
define(['jquery', 'slick'], function ($) {
"use strict";
return function (config, element) {
let defaultConfig = {
infinite: true,
slidesToShow: 4,
speed: 300,
autoplay: true,
arrows: false,
dots: false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2
}
}
]
};
$(element).slick($.extend({}, defaultConfig, config));
};
});
requirejs-config.js
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
var config = {
map: {
'*': {
slick: 'Gssi_ProductsSlider/js/lib/slick',
callSlick: 'Gssi_ProductsSlider/js/call-slick'
}
}
};