I am trying to follow this answer but for me its not working perfectly
I created custom phtml & block which will show the product slick slider, till time is working perfectly, but after the use of ajax, its apending below the slider, not in slider
Here is my identifier.phtml
<div class="wrapper-custom">
<div class="products wrapper <?= /* @noEscape */ $viewMode ?> products-
<?= /* @noEscape */ $viewMode ?>">
<ol class="products list items product-items custom-items">
<?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
<?php foreach ($_productCollection as $_product) :?>
<li class="item product product-item">
<div class="product-item-info" data-container="product-<?= /* @noEscape */ $viewMode ?>">
<?php
$productImage = $block->getImage($_product, $imageDisplayArea);
if ($pos != null) {
$position = ' style="left:' . $productImage->getWidth() . 'px;'
. 'top:' . $productImage->getHeight() . 'px;"';
}
?>
<?php // Product Image ?>
<a href="<?= $block->escapeUrl($_product->getProductUrl()) ?>"
class="product photo product-item-photo"
tabindex="-1">
<?= $productImage->toHtml() ?>
</a>
<div class="product details product-item-details">
<?php
$_productNameStripped = $block->stripTags($_product->getName(), null, true);
?>
<strong class="product name product-item-name">
<a class="product-item-link"
href="<?= $block->escapeUrl($_product->getProductUrl()) ?>">
<?= /* @noEscape */ $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
</a>
</strong>
<?= $block->getReviewsSummaryHtml($_product, $templateType) ?>
<?= /* @noEscape */ $block->getProductPrice($_product) ?>
<?= $block->getProductDetailsHtml($_product) ?>
<div class="product-item-inner">
<div class="product actions product-item-actions"<?= strpos($pos, $viewMode . '-actions') ? $block->escapeHtmlAttr($position) : '' ?>>
<div class="actions-primary"<?= strpos($pos, $viewMode . '-primary') ? $block->escapeHtmlAttr($position) : '' ?>>
<?php if ($_product->isSaleable()) :?>
<?php $postParams = $block->getAddToCartPostParams($_product); ?>
<form data-role="tocart-form"
data-product-sku="<?= $block->escapeHtml($_product->getSku()) ?>"
action="<?= $block->escapeUrl($postParams['action']) ?>"
method="post">
<input type="hidden"
name="product"
value="<?= /* @noEscape */ $postParams['data']['product'] ?>">
<input type="hidden" name="<?= /* @noEscape */ Action::PARAM_NAME_URL_ENCODED ?>"
value="<?= /* @noEscape */ $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>">
<?= $block->getBlockHtml('formkey') ?>
<button type="submit"
title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>"
class="action tocart primary">
<span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
</button>
</form>
<?php else :?>
<?php if ($_product->isAvailable()) :?>
<div class="stock available"><span><?= $block->escapeHtml(__('In stock')) ?></span></div>
<?php else :?>
<div class="stock unavailable"><span><?= $block->escapeHtml(__('Out of stock')) ?></span></div>
<?php endif; ?>
<?php endif; ?>
</div>
<div data-role="add-to-links" class="actions-secondary"<?= strpos($pos, $viewMode . '-secondary') ? $block->escapeHtmlAttr($position) : '' ?>>
<?php if ($addToBlock = $block->getChildBlock('addto')) :?>
<?= $addToBlock->setProduct($_product)->getChildHtml() ?>
<?php endif; ?>
</div>
</div>
<?php if ($showDescription) :?>
<div class="product description product-item-description">
<?= /* @noEscape */ $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
<a href="<?= $block->escapeUrl($_product->getProductUrl()) ?>"
title="<?= /* @noEscape */ $_productNameStripped ?>"
class="action more"><?= $block->escapeHtml(__('Learn More')) ?></a>
</div>
<?php endif; ?>
</div>
</div>
</div>
</li>
<?php endforeach; ?>
</ol>
</div>
<?= $block->getToolbarHtml() ?>
<script type="text/x-magento-init">
{
"#product_addtocart_form_custom": {
"catalogAddToCart": {
"bindSubmit": true
}
}
}
</script>
<?php endif; ?>
<?php if($block->SliderEnable($id) == 0): ?>
<script>
require([
'jquery',
'slickSlider',
'jquery/ui'
], function ($) {
var jq = $.noConflict();
jq(document).ready(function () {
jq(".custom-items").not('.slick-initialized').slick({
dots: false,
infinite: true,
speed: 300,
arrows: true,
slidesToShow: 5,
slidesToScroll: 5,
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; ?>
<?php endif; ?>
</div>
my ajax script:
<script type="text/javascript">
require(['jquery',
], function ($) {
$(document).ready(function () {
var page = 2;
$(document).on('click', '.slick-next', function (event)
{
event.preventDefault();
// $('.custom-next').html("Loading...");
$.ajax({
url: "product/index/slider",
method: "POST",
data: {limit: 2,
page: page},
dataType: "json",
success: function (data)
{
// $('.slick-next').html("LOAD MORE");
if (data != '')
{
$('.wrapper-custom').append(data);
} else
{
$('.slick-next').html("No Data");
}
}
});
});
});
});
</script>
Slider Controller
if ($this->getRequest()->isAjax())
{
$block = $resultPage->getLayout()
->createBlock('Vendor\ProductCarousel\Block\Configuration')
->setTemplate('Vendor_ProductCarousel::identifier.phtml')
->toHtml();
$response->setData($block);
return $response;
}
and Configuration.php Block
public function setSlider($id)
{
$page=($this->customerSession->getMyPage())? $this->customerSession->getMyPage() : 1;
$pageSize=($this->customerSession->getMyLimit())? $this->customerSession->getMyLimit() : 6;
$ProductCollection = $this->productCollectionFactory->create();
$ProductFilterCollection = $ProductCollection->addAttributeToSelect('*')->setOrder($sort, 'asc')->setCurPage($page)->setPageSize($pageSize)->load();
return $ProductFilterCollection;
}
I also created another phtml file to append whenever ajax calls, but its also not working.
Any reference, a suggestion would be appreciated!
