I want to display modal collection data using load more Ajax functionality, currently i am display load more data using jquery & CSS.
Because for now i have a limited collection data but in future collection data size will be bigger and bigger then it will be take more time to load.
so i want to display data using Ajax, first it will display 3 row and when i click on load more then it will load more 3 row, how can i achieve this thing.
Namespace\ModuleName\Block\Producer\MeetOurProducer.php
/**
* @var \RB\producer\Model\producerWebsiteFactory
*/
private $producerWebsiteFactory;
public function _prepareLayout()
{
parent::_prepareLayout();
}
public function __construct(
\Magento\Framework\View\Element\Template\Context $context, \RB\producer\Model\producerWebsiteFactory $producerWebsiteFactory, array $data = array()
)
{
$this->_storeManagerInterface = $context->getStoreManager();
parent::__construct($context, $data);
$this->producerWebsiteFactory = $producerWebsiteFactory;
}
public function getproducerCollection()
{
$lastId = $this->getRequest()->getParam('last_producer_id');
//echo $lastId;die('CP');
$store = $this->_storeManagerInterface->getStore();
$collections = $this->producerWebsiteFactory->create()
->getCollection()
->addFieldToFilter('status', array(['eq' => producerStatus::producer_STATUS_ACTIVE], ['eq' => producerStatus::producer_STATUS_VACATION_MODE]))
->addFieldToFilter('website_id', ['eq' => $store->getWebsiteId()]);
$collections->getSelect()->joinLeft(['rb_producer_microsites' => $collections->getTable('rb_producer_microsites')],
'main_table.producer_id = rb_producer_microsites.producer_id AND rb_producer_microsites.store_id =' . $store->getStoreId());
return $collections;
}
Namespace\ModuleName\Block\Producer\MeetOurProducer.phtml
<div class="producer-list">
<ul id="our_producers">
<?php foreach($vendors as $vendor) { ?>
<li>
<div class="vendor-image">
<?php if (!empty($vendor->getLogo()) && $helper->isImageExist($block->getMediaUrlSellerDirectory() . 'vendor/logo' . $vendor->getLogo())) : ?>
<img src="<?php echo $helper->resize($vendor->getLogo(), 'vendor/logo', null, 200); ?>" />
<?php else: ?>
<img src="<?php echo $this->getViewFileUrl('Namespace_Modulename::images/small_image.png'); ?>" />
<?php endif; ?>
</div>
<div class="vendor-content">
<h3><?php echo $vendor->getBusinessName(); ?></h3>
<p><?php
$in = $vendor->getShortDescription();
$out = strlen($in) > 360 ? substr($in,0,360)."..." : $in;
echo $out;
?></p>
<?php if(!empty($vendor->getUrlKey()) && $vendor->getGoLive() != 0) { ?>
<div class="actions">
<a class="action btn" href="<?php echo $block->getStoreUrl(); echo $vendor->getUrlKey();?>"><?php echo __('VIEW PRODUCTS'); ?></a>
</div>
<?php } ?>
</div>
</li>
<?php } ?>
</ul>
<div class="actions" id="remove_row">
<button id="our_producers_show_more" id="btn_more" class="our-producers-show-more"><?php echo __('LOAD MORE'); ?></button>
</div>
And i call this block to admin block
{{block class="Namespace\Modulename\Block\Producer\MeetOurProducer" template="Namespace_Modulename::producer/meetourproducer.phtml"}}
Any help would be appreciated. Thanks.
Best Answer
I found the solution.
Step 1. Create block file
Step 2. Create phtml to render layout.
Step 3. Create ajax phtml to load html on click load more.
Step 4. Create controller to define block & ajax phtml.
And i call this block to admin block