how to create a custom template for catalog product list
https://magento.stackexchange.com/questions/302618
-
06-04-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I am trying to override module-catalog-widget. I want a new template in the template field. I copied module-catalog-widget.while editing in the extended module in widget.xml no change is happening. thank you
Solution
There are two ways.
First Way...
Create a New Theme
=>mandotroy file create
1.theme.xml
2.registration.php
3.composer.json and rest files below.
=>create Folder/file
app/design/frontend/vendorname/themename/Magento_Catalog_Widget/templates/product/widget/content/ make files 1.grid.phtml
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
use Magento\Framework\App\Action\Action;
// @codingStandardsIgnoreFile
/** @var \Magento\CatalogWidget\Block\Product\ProductsList $block */
?>
Old
<?php if ($exist = ($block->getProductCollection() && $block->getProductCollection()->getSize())): ?>
<?php
$type = 'widget-product-new-grid';
$mode = 'grid';
$image = 'new_products_content_widget_grid';
$items = $block->getProductCollection()->getItems();
$showWishlist = true;
$showCompare = true;
$showCart = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
$description = false;
?>
<div class="block widget block-products-list <?= /* @noEscape */ $mode ?>">
<?php if ($block->getTitle()): ?>
<div class="block-title">
<strong><?= $block->escapeHtml(__($block->getTitle())) ?></strong>
</div>
<?php endif ?>
<div class="block-content">
<?= /* @noEscape */ '<!-- ' . $image . '-->' ?>
<div class="products-<?= /* @noEscape */ $mode ?> <?= /* @noEscape */ $mode ?>">
<ol class="product-items <?= /* @noEscape */ $type ?>">
<?php $iterator = 1; ?>
<?php foreach ($items as $_item): ?>
<?= /* @noEscape */ ($iterator++ == 1) ? '<li class="product-item">' : '</li><li class="product-item">' ?>
<div class="product-item-info">
<a href="<?= $block->escapeUrl($block->getProductUrl($_item)) ?>" class="product-item-photo">
<?= $block->getImage($_item, $image)->toHtml() ?>
</a>
<div class="product-item-details">
<strong class="product-item-name">
<a title="<?= $block->escapeHtml($_item->getName()) ?>"
href="<?= $block->escapeUrl($block->getProductUrl($_item)) ?>"
class="product-item-link">
<?= $block->escapeHtml($_item->getName()) ?>
</a>
</strong>
<?php if ($templateType): ?>
<?= $block->getReviewsSummaryHtml($_item, $templateType) ?>
<?php endif; ?>
<?= $block->getProductPriceHtml($_item, $type) ?>
<?= $block->getProductDetailsHtml($_item) ?>
<?php if ($showWishlist || $showCompare || $showCart): ?>
<div class="product-item-inner">
<div class="product-item-actions">
<?php if ($showCart): ?>
<div class="actions-primary">
<?php if ($_item->isSaleable()): ?>
<?php $postParams = $block->getAddToCartPostParams($_item); ?>
<form data-role="tocart-form" data-product-sku="<?= $block->escapeHtml($_item->getSku()) ?>" action="<?= /* @NoEscape */ $postParams['action'] ?>" method="post">
<input type="hidden" name="product" value="<?= /* @escapeNotVerified */ $postParams['data']['product'] ?>">
<input type="hidden" name="<?= /* @escapeNotVerified */ Action::PARAM_NAME_URL_ENCODED ?>" value="<?= /* @escapeNotVerified */ $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>">
<?= $block->getBlockHtml('formkey') ?>
<button type="submit"
title="<?= $block->escapeHtml(__('Add to Cart')) ?>"
class="action tocart primary">
<span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
</button>
</form>
<?php else: ?>
<?php if ($_item->getIsSalable()): ?>
<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>
<?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='<?= /* @noEscape */ $block->getAddToWishlistParams($_item) ?>' class="action towishlist" data-action="add-to-wishlist" title="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>">
<span><?= $block->escapeHtml(__('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='<?= /* @noEscape */ $compareHelper->getPostDataParams($_item) ?>' title="<?= $block->escapeHtmlAttr(__('Add to Compare')) ?>">
<span><?= $block->escapeHtml(__('Add to Compare')) ?></span>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?= ($iterator == count($items) + 1) ? '</li>' : '' ?>
<?php endforeach ?>
</ol>
</div>
<?= $block->getPagerHtml() ?>
</div>
</div>
<?php endif;?>
2.new_grid.phtml
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
use Magento\Framework\App\Action\Action;
// @codingStandardsIgnoreFile
/** @var \Magento\CatalogWidget\Block\Product\ProductsList $block */
?>
Sarvesh
<?php if ($exist = ($block->getProductCollection() && $block->getProductCollection()->getSize())): ?>
<?php
$type = 'widget-product-new-grid';
$mode = 'grid';
$image = 'new_products_content_widget_grid';
$items = $block->getProductCollection()->getItems();
$showWishlist = true;
$showCompare = true;
$showCart = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
$description = false;
?>
<div class="block widget block-products-list <?= /* @noEscape */ $mode ?>">
<?php if ($block->getTitle()): ?>
<div class="block-title">
<strong><?= $block->escapeHtml(__($block->getTitle())) ?></strong>
</div>
<?php endif ?>
<div class="block-content">
<?= /* @noEscape */ '<!-- ' . $image . '-->' ?>
<div class="products-<?= /* @noEscape */ $mode ?> <?= /* @noEscape */ $mode ?>">
<ol class="product-items <?= /* @noEscape */ $type ?>">
<?php $iterator = 1; ?>
<?php foreach ($items as $_item): ?>
<?= /* @noEscape */ ($iterator++ == 1) ? '<li class="product-item">' : '</li><li class="product-item">' ?>
<div class="product-item-info">
<a href="<?= $block->escapeUrl($block->getProductUrl($_item)) ?>" class="product-item-photo">
<?= $block->getImage($_item, $image)->toHtml() ?>
</a>
<div class="product-item-details">
<strong class="product-item-name">
<a title="<?= $block->escapeHtml($_item->getName()) ?>"
href="<?= $block->escapeUrl($block->getProductUrl($_item)) ?>"
class="product-item-link">
<?= $block->escapeHtml($_item->getName()) ?>
</a>
</strong>
<?php if ($templateType): ?>
<?= $block->getReviewsSummaryHtml($_item, $templateType) ?>
<?php endif; ?>
<?= $block->getProductPriceHtml($_item, $type) ?>
<?= $block->getProductDetailsHtml($_item) ?>
<?php if ($showWishlist || $showCompare || $showCart): ?>
<div class="product-item-inner">
<div class="product-item-actions">
<?php if ($showCart): ?>
<div class="actions-primary">
<?php if ($_item->isSaleable()): ?>
<?php $postParams = $block->getAddToCartPostParams($_item); ?>
<form data-role="tocart-form" data-product-sku="<?= $block->escapeHtml($_item->getSku()) ?>" action="<?= /* @NoEscape */ $postParams['action'] ?>" method="post">
<input type="hidden" name="product" value="<?= /* @escapeNotVerified */ $postParams['data']['product'] ?>">
<input type="hidden" name="<?= /* @escapeNotVerified */ Action::PARAM_NAME_URL_ENCODED ?>" value="<?= /* @escapeNotVerified */ $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>">
<?= $block->getBlockHtml('formkey') ?>
<button type="submit"
title="<?= $block->escapeHtml(__('Add to Cart')) ?>"
class="action tocart primary">
<span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
</button>
</form>
<?php else: ?>
<?php if ($_item->getIsSalable()): ?>
<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>
<?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='<?= /* @noEscape */ $block->getAddToWishlistParams($_item) ?>' class="action towishlist" data-action="add-to-wishlist" title="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>">
<span><?= $block->escapeHtml(__('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='<?= /* @noEscape */ $compareHelper->getPostDataParams($_item) ?>' title="<?= $block->escapeHtmlAttr(__('Add to Compare')) ?>">
<span><?= $block->escapeHtml(__('Add to Compare')) ?></span>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?= ($iterator == count($items) + 1) ? '</li>' : '' ?>
<?php endforeach ?>
</ol>
</div>
<?= $block->getPagerHtml() ?>
</div>
</div>
<?php endif;?>
Also, make a new folder app/design/frontend/vendorname/themename/etc/widget.xml
and put the below code.
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget id="products_list" class="Magento\CatalogWidget\Block\Product\ProductsList" is_email_compatible="true"
placeholder_image="Magento_CatalogWidget::images/products_list.png" ttl="86400">
<label translate="true">Catalog Products List</label>
<description translate="true">List of Products</description>
<parameters>
<parameter name="title" xsi:type="text" required="false" visible="true">
<label translate="true">Title</label>
</parameter>
<parameter name="show_pager" xsi:type="select" visible="true"
source_model="Magento\Config\Model\Config\Source\Yesno">
<label translate="true">Display Page Control</label>
</parameter>
<parameter name="products_per_page" xsi:type="text" required="true" visible="true">
<label translate="true">Number of Products per Page</label>
<depends>
<parameter name="show_pager" value="1" />
</depends>
<value>5</value>
</parameter>
<parameter name="products_count" xsi:type="text" required="true" visible="true">
<label translate="true">Number of Products to Display</label>
<value>10</value>
</parameter>
<parameter name="template" xsi:type="select" required="true" visible="true">
<label translate="true">Template</label>
<options>
<option name="default" value="Magento_Catalog_Widget::product/widget/content/grid.phtml" selected="true">
<label translate="true">Products Grid Template</label>
</option>
<option name="new" value="Magento_Catalog_Widget::product/widget/content/grid.phtml" selected="false">
<label translate="true">Products New Grid Template</label>
</option>
</options>
</parameter>
<parameter name="cache_lifetime" xsi:type="text" visible="true">
<label translate="true">Cache Lifetime (Seconds)</label>
<description translate="true">
<![CDATA[Time in seconds between the widget updates.
<br/>If not set, equals to 86400 seconds (24 hours). To update widget instantly, go to Cache Management and clear Blocks HTML Output cache.
<br/>Widget will not show products that begin to match the specified conditions until cache is refreshed.]]>
</description>
</parameter>
<parameter name="condition" xsi:type="conditions" visible="true" required="true" sort_order="10"
class="Magento\CatalogWidget\Block\Product\Widget\Conditions">
<label translate="true">Conditions</label>
</parameter>
</parameters>
<containers>
<container name="content">
<template name="grid" value="default" />
</container>
<container name="content.top">
<template name="grid" value="default" />
</container>
<container name="content.bottom">
<template name="grid" value="default" />
</container>
</containers>
</widget>
</widgets>
Second Way
and put your
please follow the below steps.
- please add the new file in vendor/magento/module-catalog-widget/view/frontend/templates/product/widget/content/new_grid.phtml and put code as per you want.
Make sure $type = 'widget-product-new-grid'; you need to change every new template (must unique) code is
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
use Magento\Framework\App\Action\Action;
// @codingStandardsIgnoreFile
/** @var \Magento\CatalogWidget\Block\Product\ProductsList $block */
?>
<?php if ($exist = ($block->getProductCollection() && $block->getProductCollection()->getSize())): ?>
<?php
$type = 'widget-product-new-grid';
$mode = 'grid';
$image = 'new_products_content_widget_grid';
$items = $block->getProductCollection()->getItems();
$showWishlist = true;
$showCompare = true;
$showCart = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
$description = false;
?>
<div class="block widget block-products-list <?= /* @noEscape */ $mode ?>">
<?php if ($block->getTitle()): ?>
<div class="block-title">
<strong><?= $block->escapeHtml(__($block->getTitle())) ?></strong>
</div>
<?php endif ?>
<div class="block-content">
<?= /* @noEscape */ '<!-- ' . $image . '-->' ?>
<div class="products-<?= /* @noEscape */ $mode ?> <?= /* @noEscape */ $mode ?>">
<ol class="product-items <?= /* @noEscape */ $type ?>">
<?php $iterator = 1; ?>
<?php foreach ($items as $_item): ?>
<?= /* @noEscape */ ($iterator++ == 1) ? '<li class="product-item">' : '</li><li class="product-item">' ?>
<div class="product-item-info">
<a href="<?= $block->escapeUrl($block->getProductUrl($_item)) ?>" class="product-item-photo">
<?= $block->getImage($_item, $image)->toHtml() ?>
</a>
<div class="product-item-details">
<strong class="product-item-name">
<a title="<?= $block->escapeHtml($_item->getName()) ?>"
href="<?= $block->escapeUrl($block->getProductUrl($_item)) ?>"
class="product-item-link">
<?= $block->escapeHtml($_item->getName()) ?>
</a>
</strong>
<?php if ($templateType): ?>
<?= $block->getReviewsSummaryHtml($_item, $templateType) ?>
<?php endif; ?>
<?= $block->getProductPriceHtml($_item, $type) ?>
<?= $block->getProductDetailsHtml($_item) ?>
<?php if ($showWishlist || $showCompare || $showCart): ?>
<div class="product-item-inner">
<div class="product-item-actions">
<?php if ($showCart): ?>
<div class="actions-primary">
<?php if ($_item->isSaleable()): ?>
<?php $postParams = $block->getAddToCartPostParams($_item); ?>
<form data-role="tocart-form" data-product-sku="<?= $block->escapeHtml($_item->getSku()) ?>" action="<?= /* @NoEscape */ $postParams['action'] ?>" method="post">
<input type="hidden" name="product" value="<?= /* @escapeNotVerified */ $postParams['data']['product'] ?>">
<input type="hidden" name="<?= /* @escapeNotVerified */ Action::PARAM_NAME_URL_ENCODED ?>" value="<?= /* @escapeNotVerified */ $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>">
<?= $block->getBlockHtml('formkey') ?>
<button type="submit"
title="<?= $block->escapeHtml(__('Add to Cart')) ?>"
class="action tocart primary">
<span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
</button>
</form>
<?php else: ?>
<?php if ($_item->getIsSalable()): ?>
<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>
<?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='<?= /* @noEscape */ $block->getAddToWishlistParams($_item) ?>' class="action towishlist" data-action="add-to-wishlist" title="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>">
<span><?= $block->escapeHtml(__('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='<?= /* @noEscape */ $compareHelper->getPostDataParams($_item) ?>' title="<?= $block->escapeHtmlAttr(__('Add to Compare')) ?>">
<span><?= $block->escapeHtml(__('Add to Compare')) ?></span>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?= ($iterator == count($items) + 1) ? '</li>' : '' ?>
<?php endforeach ?>
</ol>
</div>
<?= $block->getPagerHtml() ?>
</div>
</div>
<?php endif;?>
you can change as per your need.
- override this file vendor/magento/module-catalog-widget/etc/widget.xml in widget.xml replace below code.
<parameter name="template" xsi:type="select" required="true" visible="true">
<label translate="true">Template</label>
<options>
<option name="default" value="Magento_CatalogWidget::product/widget/content/grid.phtml" selected="true">
<label translate="true">Products Grid Template</label>
</option>
<option name="new_grid" value="Magento_CatalogWidget::product/widget/content/new_grid.phtml" selected="false">
<label translate="true">Products New Grid Template</label>
</option>
</options>
</parameter>
here I added only one option you can add multiple as your requirements. Make sure path and filename etc proper way otherwise you will get the error.
Hope it works for you.
There is another way you can do by own module. Thanks.
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
