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>
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();
}
}
?>
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();
}
}
?>
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>
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>
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');
}
}
?>
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>
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>
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;
}
Then run below commands
php bin/magento setup:upgrade
php bin/magetno setup:static-content:deploy
php bin/magento cache:flush
0 comments:
Post a Comment
Thanks