10 March, 2022

How to show collection on frontend with pagination in Magento 2

           ,      No comments   

 

How to show collection on frontend with pagination in Magento 2


Create routes.xml

Rsgitech\News\etc\frontend\routes.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="news" frontName="news">
            <module name="Rsgitech_News" />
        </route>
    </router>
</config>
Copy

Create Index.php Controller Action

Rsgitech\News\Controller\Index\Index.php


<?php
namespace Rsgitech\News\Controller\Index;

class Index extends \Magento\Framework\App\Action\Action
{
	protected $pageFactory;
	
	public function __construct(
		\Magento\Framework\App\Action\Context $context,
		\Magento\Framework\View\Result\PageFactory $pageFactory)
	{
		$this->pageFactory = $pageFactory;
		return parent::__construct($context);
	}

	public function execute()
	{
		return $this->pageFactory->create();
	}
}
?>
Copy

Create LinkNews.php Block

Rsgitech\News\Block\LinkNews.php

Get news link from system configuration


<?php
namespace Rsgitech\News\Block;

Class LinkNews extends \Magento\Framework\View\Element\Template
{
	protected $dataHelper;
	
	public function __construct(
		\Magento\Framework\View\Element\Template\Context $context,
		\Rsgitech\News\Helper\Data $dataHelper
	){
		parent::__construct($context);
		$this->dataHelper = $dataHelper;
	}
	
	public function getNewsLink()
	{
		$newsLink = $this->dataHelper->getStorefrontConfig('news_link');
		
		return $newsLink;
	}
	
	public function getBaseUrl()
	{
		return $this->_storeManager->getStore()->getBaseUrl();
	}
}
?>
Copy

Create link.phtml Template File

Rsgitech\News\view\frontend\templates\link.phtml




<li class="nav item">
	<a href="<?php echo $block->getBaseUrl() ?>news/index/index"><?php echo $block->getNewsLink(); ?></a>
</li>
Copy

Create default.xml Layout

Rsgitech\News\view\frontend\layout\default.xml

News link show in footer


<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="footer_links">
			<block class="Rsgitech\News\Block\LinkNews" name="news_link" template="Rsgitech_News::link.phtml" />
        </referenceBlock>
    </body>
</page>
Copy

Create ListNews.php Block

Rsgitech\News\Block\ListNews.php


<?php
namespace Rsgitech\News\Block;

Class ListNews extends \Magento\Framework\View\Element\Template
{
	protected $allNewsFactory;
	
	public function __construct(
		\Magento\Framework\View\Element\Template\Context $context,
		\Rsgitech\News\Model\AllnewsFactory $allNewsFactory
	){
		parent::__construct($context);
		$this->allNewsFactory = $allNewsFactory;
	}
	
	public function getBaseUrl()
	{
		return $this->_storeManager->getStore()->getBaseUrl();
	}
	
	public function getListNews()
	{
		$page = ($this->getRequest()->getParam('p'))? $this->getRequest()->getParam('p') : 1;
		$limit = ($this->getRequest()->getParam('limit'))? $this->getRequest()->getParam('limit') : 2;
		
		$collection = $this->allNewsFactory->create()->getCollection();
		$collection->addFieldToFilter('status',1);
		$collection->setPageSize($limit);
		$collection->setCurPage($page);
	
		return $collection;
	}
	
	protected function _prepareLayout(){
		parent::_prepareLayout();
		$this->pageConfig->getTitle()->set(__('Latest News'));
		
		if ($this->getListNews()){
			$pager = $this->getLayout()->createBlock('Magento\Theme\Block\Html\Pager', 'rsgitech.news.pager')
									->setAvailableLimit(array(2=>2,10=>10,15=>15,20=>20))
									->setShowPerPage(true)
									->setCollection($this->getListNews());

			$this->setChild('pager', $pager);

			$this->getListNews()->load();
		}
        return $this;
	}
	
	public function getPagerHtml()
	{
		return $this->getChildHtml('pager');
	}
}
?>
Copy

Create listnews.phtml Template

Rsgitech\News\view\frontend\templates\listnews.phtml


<div class="rsgitech-news">
	<?php $allnews = $this->getListNews() ?>
	<?php if($allnews && count($allnews)): ?>
		<?php foreach($allnews as $news): ?>
			<div class="rsg-news-list">
				<div class="rsg-news-title">
					<a href="#">
						<?php echo $news->getTitle() ?>
					</a>
					</div>
				<div class="rsg-news-time"><?php echo $news->getCreatedAt() ?></div>
				<div class="rsg-news-desc"><?php echo $news->getDescription() ?></div>
			</div>
		<?php endforeach; ?>
		
		<?php if($this->getPagerHtml()): ?>
			<?php echo $this->getPagerHtml(); ?>
		<?php endif; ?>
	<?php else: ?>
		<div class="rsgitech-no-records">
			<?php echo __('News not available'); ?>
		</div>
	<?php endif; ?>
</div>
Copy

Create news_index_index.xml Layout

Rsgitech\News\view\frontend\layout\news_index_index.xml

Create news_index_index.xml for display news listing



<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
		<css src="Rsgitech_News::css/rsgitech.news.css" />
	</head>
	<body>
        <referenceContainer name="content">
            <block class="Rsgitech\News\Block\ListNews" name="list_news" template="Rsgitech_News::listnews.phtml" />
        </referenceContainer>
    </body>
</page>
Copy

Create rsgitech.news.css CSS file

Rsgitech\News\view\frontend\web\css\rsgitech.news.css

Create css file for design


.rsgitech-news .rsg-news-list {
	padding: 15px;
	border: 1px solid #ccc;
	display: block;
	margin-top: -1px;
}
.rsgitech-news .rsg-news-list:nth-child(even){
	background-color:#f1f1f1;
}
.rsgitech-news .rsg-news-list:nth-child(odd){
	background-color:#FAFAFA;
}
.rsgitech-news .rsg-news-title {
	font-weight:bold;
	font-size:16px;
	margin-bottom:5px;
}
.rsgitech-news .rsg-news-time {
	font-size:14px;
	color:#666;
	font-style:italic;
}
.rsgitech-news .pager {
	margin-top:20px;
	display:flex;
}
.rsgitech-news .toolbar-amount {
	margin-right:20px;
}
.rsgitech-news .rsg-news-desc {
	margin-top:15px;
}
.rsgitech-news a:hover {
	text-decoration:none;
}
Copy

Then run below commands


php bin/magento setup:upgrade
php bin/magetno setup:static-content:deploy
php bin/magento cache:flush
Copy


Meta

Popular Posts

Categories

Social Media Links

Blog Archive

Data Publish News

Al Jazeera – Breaking News, World News and Video from Al Jazeera

Loading...

Laravel News

Loading...