Кто-нибудь есть идеи о том, как переместить панель инструментов перед левой и правой боковой панелью в magento2, используя XML?
В настоящее время он отображается в правой боковой панели.
Кто-нибудь есть идеи о том, как переместить панель инструментов перед левой и правой боковой панелью в magento2, используя XML?
В настоящее время он отображается в правой боковой панели.
Ответы:
Попробуй это.
1. Создайте файл catalog_category_view в разделе
продавец / Magento / тема-интерфейс-яркостной / Magento_Catalog / расположение
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="sidebar.additional">
<block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list2" as="product_list" template="Magento_Catalog::product/list2.phtml">
<block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers2" as="details.renderers">
<block class="Magento\Framework\View\Element\Template" as="default"/>
</block>
<block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar2" template="Magento_Catalog::product/list/toolbar.phtml">
<block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
<!-- The following code shows how to set your own pager increments -->
<!--
<action method="setDefaultListPerPage">
<argument name="limit" xsi:type="string">4</argument>
</action>
<action method="setDefaultGridPerPage">
<argument name="limit" xsi:type="string">3</argument>
</action>
<action method="addPagerLimit">
<argument name="mode" xsi:type="string">list</argument>
<argument name="limit" xsi:type="string">2</argument>
</action>
<action method="addPagerLimit">
<argument name="mode" xsi:type="string">list</argument>
<argument name="limit" xsi:type="string">4</argument>
</action>
<action method="addPagerLimit">
<argument name="mode" xsi:type="string">list</argument>
<argument name="limit" xsi:type="string">6</argument>
</action>
<action method="addPagerLimit">
<argument name="mode" xsi:type="string">list</argument>
<argument name="limit" xsi:type="string">8</argument>
</action>
<action method="addPagerLimit" translate="label">
<argument name="mode" xsi:type="string">list</argument>
<argument name="limit" xsi:type="string">all</argument>
<argument name="label" xsi:type="string">All</argument>
</action>
<action method="addPagerLimit">
<argument name="mode" xsi:type="string">grid</argument>
<argument name="limit" xsi:type="string">3</argument>
</action>
<action method="addPagerLimit">
<argument name="mode" xsi:type="string">grid</argument>
<argument name="limit" xsi:type="string">6</argument>
</action>
<action method="addPagerLimit">
<argument name="mode" xsi:type="string">grid</argument>
<argument name="limit" xsi:type="string">9</argument>
</action>
<action method="addPagerLimit" translate="label">
<argument name="mode" xsi:type="string">grid</argument>
<argument name="limit" xsi:type="string">all</argument>
<argument name="label" xsi:type="string">All</argument>
</action>
-->
</block>
<action method="setToolbarBlockName">
<!--<argument name="name" xsi:type="string">product_list_toolbar</argument>-->
</action>
</block>
</referenceContainer>
</body>
2. Создайте файл list2.phtml под
продавец / Magento / тема-интерфейс-яркостный / Magento_Catalog / шаблоны / продукт
<?php
use Magento\Framework\App\Action\Action;
$_productCollection = $block->getLoadedProductCollection();
$_helper = $this->helper('Magento\Catalog\Helper\Output');
?>
<?php if (!$_productCollection->count()): ?>
<!--<div class="message info empty"><div><?php /* @escapeNotVerified */ echo __('We can\'t find products matching the selection.') ?></div></div>-->
<?php else: ?>
<?php echo $block->getToolbarHtml() ?>
<?php echo $block->getAdditionalHtml() ?>
<?php
if ($block->getMode() == 'grid') {
$viewMode = 'grid';
$image = 'category_page_grid';
$showDescription = false;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
} else {
$viewMode = 'list';
$image = 'category_page_list';
$showDescription = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
}
/**
* Position for actions regarding image size changing in vde if needed
*/
$pos = $block->getPositioned();
?>
<!-- <div class="products wrapper <?php /* @escapeNotVerified */ echo $viewMode; ?> products-<?php /* @escapeNotVerified */ echo $viewMode; ?>">
<?php $iterator = 1; ?>
<ol class="products list items product-items">
<?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
<?php foreach ($_productCollection as $_product): ?>
<?php /* @escapeNotVerified */ echo($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>
<div class="product-item-info" data-container="product-grid">
<?php
$productImage = $block->getImage($_product, $image);
if ($pos != null) {
$position = ' style="left:' . $productImage->getWidth() . 'px;'
. 'top:' . $productImage->getHeight() . 'px;"';
}
?>
<?php // Product Image ?>
<a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
<?php echo $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="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>">
<?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_product->getName(), 'name'); ?>
</a>
</strong>
<?php echo $block->getReviewsSummaryHtml($_product, $templateType); ?>
<?php /* @escapeNotVerified */ echo $block->getProductPrice($_product) ?>
<?php echo $block->getProductDetailsHtml($_product); ?>
<div class="product-item-inner">
<div class="product actions product-item-actions"<?php echo strpos($pos, $viewMode . '-actions') ? $position : ''; ?>>
<div class="actions-primary"<?php echo strpos($pos, $viewMode . '-primary') ? $position : ''; ?>>
<?php if ($_product->isSaleable()): ?>
<?php $postParams = $block->getAddToCartPostParams($_product); ?>
<form data-role="tocart-form" action="<?php /* @escapeNotVerified */ echo $postParams['action']; ?>" method="post">
<input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $postParams['data']['product']; ?>">
<input type="hidden" name="<?php /* @escapeNotVerified */ echo Action::PARAM_NAME_URL_ENCODED; ?>" value="<?php /* @escapeNotVerified */ echo $postParams['data'][Action::PARAM_NAME_URL_ENCODED]; ?>">
<?php echo $block->getBlockHtml('formkey') ?>
<button type="submit"
title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>"
class="action tocart primary">
<span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
</button>
</form>
<?php else: ?>
<?php if ($_product->getIsSalable()): ?>
<div class="stock available"><span><?php /* @escapeNotVerified */ echo __('In stock') ?></span></div>
<?php else: ?>
<div class="stock unavailable"><span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span></div>
<?php endif; ?>
<?php endif; ?>
</div>
<div data-role="add-to-links" class="actions-secondary"<?php echo strpos($pos, $viewMode . '-secondary') ? $position : ''; ?>>
<?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow()): ?>
<a href="#"
class="action towishlist"
title="<?php echo $block->escapeHtml(__('Add to Wish List')); ?>"
aria-label="<?php echo $block->escapeHtml(__('Add to Wish List')); ?>"
data-post='<?php /* @escapeNotVerified */ echo $block->getAddToWishlistParams($_product); ?>'
data-action="add-to-wishlist"
role="button">
<span><?php /* @escapeNotVerified */ echo __('Add to Wish List') ?></span>
</a>
<?php endif; ?>
<?php
$compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');
?>
<a href="#"
class="action tocompare"
title="<?php echo $block->escapeHtml(__('Add to Compare')); ?>"
aria-label="<?php echo $block->escapeHtml(__('Add to Compare')); ?>"
data-post='<?php /* @escapeNotVerified */ echo $compareHelper->getPostDataParams($_product); ?>'
role="button">
<span><?php /* @escapeNotVerified */ echo __('Add to Compare') ?></span>
</a>
</div>
</div>
<?php if ($showDescription): ?>
<div class="product description product-item-description">
<?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
<a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>" title="<?php /* @escapeNotVerified */ echo $_productNameStripped ?>"
class="action more"><?php /* @escapeNotVerified */ echo __('Learn More') ?></a>
</div>
<?php endif; ?>
</div>
</div>
</div>
<?php echo($iterator == count($_productCollection) + 1) ? '</li>' : '' ?>
<?php endforeach; ?>
</ol>
</div>-->
Примечание. Здесь я переместил панель инструментов на боковую панель (многоуровневая навигация).
Надеюсь это работает!
Я думаю, что он не перемещается с использованием XML, потому что он комментирует в файле module-catalog / templates / product / list.phtml .
<?php echo $block->getToolbarHtml() ?>
Кроме того, он определен в блоке module-catalog / view / frontend / layout / catalog_category_view.xml category.products.list
<referenceContainer name="content">
<block class="Magento\Catalog\Block\Category\View" name="category.products" template="Magento_Catalog::category/products.phtml">
<block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml">
<container name="category.product.list.additional" as="additional" />
<block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers">
<block class="Magento\Framework\View\Element\Template" name="category.product.type.details.renderers.default" as="default"/>
</block>
<block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="category.product.addto" as="addto">
<block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
name="category.product.addto.compare" as="compare"
template="Magento_Catalog::product/list/addto/compare.phtml"/>
</block>
<block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">
<block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
</block>
<action method="setToolbarBlockName">
<argument name="name" xsi:type="string">product_list_toolbar</argument>
</action>
</block>
</block>
</referenceContainer>
Попробуйте этот код Создайте пользовательский модуль.
Добавьте этот код в catalog_category_view.xml
:
<referenceContainer name="content">
<block class="{{Package Name}}\{{Your Module Name}}\Block\Toolbar" before="-" name="product_list_custom_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">
<block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
</block>
</referenceContainer>
Теперь создайте новый Toolbar.php
файл, {{Package Name}}\{{Your Module Name}}\Block\Toolbar
затем перейдите ниже кода в этом новом файле:
namespace {{Package Name}}\{{Your Module Name}}\Block;
class Toolbar extends \Magento\Catalog\Block\Product\ProductList\Toolbar
{
public function getCollection()
{
$productList = $this->getLayout()->getBlock('category.products.list');
// use sortable parameters
$orders = $productList->getAvailableOrders();
if ($orders) {
$this->setAvailableOrders($orders);
}
$sort = $productList->getSortBy();
if ($sort) {
$this->setDefaultOrder($sort);
}
$dir = $productList->getDefaultDirection();
if ($dir) {
$this->setDefaultDirection($dir);
}
$modes = $productList->getModes();
if ($modes) {
$this->setModes($modes);
}
$coo = $productList->getLoadedProductCollection();
// set collection to productList and apply sort
$this->setCollection($productList->getLoadedProductCollection());
return parent::getCollection();
}
}
Теперь удалите блок по умолчанию из макета просмотра категорий.
toHtml
метода.
$this->setChild()
вызове в configureToolbar
из ProductList
. См github.com/magento/magento2/issues/7253#issuecomment-439630823
Вы можете переместить боковую панель перед основной областью содержимого, используя код макета ниже:
Шаг 1: создайте / скопируйте файл 2columns-left.xml в папку Magento_Theme / page_layout / и замените содержимое ниже:
Также вы можете изменить / добавить ваши классы CSS в контейнере.
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
<update handle="1column"/>
<referenceContainer name="main" htmlClass="column main col-md-10"/>
<referenceContainer name="columns">
<container name="col-sidebar" htmlTag="div" htmlClass="col-md-2" before="main">
<container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional testing-123-festing" before="div.sidebar.main">
<container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
</container>
<container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main">
<container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
</container>
</container>
</referenceContainer>
1. Модульный способ.
Создать новый модуль Vendor_Module
приложение / код / Vendor / модуль / и т.д. / module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_Module" setup_version="2.0.0">
<sequence>
<module name="Magento_Catalog"/>
</sequence>
</module>
</config>
Добавьте плагин, чтобы панель инструментов по умолчанию не отображалась.
Приложение / код / Vendor / модуль / и т.д. / интерфейс / di.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Catalog\Block\Product\ListProduct">
<plugin name="vendor-catalog-productlist" type="Vendor\Module\Plugin\ProductList" />
</type>
</config>
Приложение / код / Vendor / модуль / плагин / ProductList.php
<?php
namespace Vendor\Module\Plugin;
class ProductList
{
/**
* After dispatch
*
* @param \Magento\Catalog\Block\Product\ListProduct $subject
* @param string $result
*/
public function afterGetToolbarHtml(
\Magento\Catalog\Block\Product\ListProduct $subject,
$result
) {
return '';
}
}
Добавить новый блок на страницу категории.
Приложение / код / Vendor / модуль / вид / интерфейс / расположение / catalog_category_view.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="columns.top">
<block class="Vendor\Module\Block\ListProduct\Toolbar" name="vendor.category.products.list">
<arguments>
<argument name="product_list_block_name" xsi:type="string">category.products.list</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>
Приложение / код / Vendor / модуль / блок / ListProduct / Toolbar.php
<?php
namespace Vendor\Module\Block\ListProduct;
class Toolbar extends \Magento\Framework\View\Element\Template
{
/**
* Render block HTML
*
* @return string
*/
protected function _toHtml()
{
$productList = $this->getLayout()->getBlock(
$this->getData('product_list_block_name')
);
if ($productList) {
$productList->toHtml();
return $productList->getChildHtml('toolbar');
}
return '';
}
}
2. Вы можете применить те же изменения к вашей теме
Вам не нужен плагин, потому что вы можете просто прокомментировать строку, где отображается панель инструментов по умолчанию.
$block->getToolbarHtml()
Строки комментариев в
приложение / дизайн / интерфейс / Производитель / Тема / Magento_Catalog / шаблоны / продукта / list.phtml
Создайте тот же класс панели инструментов и поместите его в XML-макет.
Производитель \ Модуль \ Block \ ListProduct \ Toolbar
Основной проблемой является старая кодовая база панели инструментов и список продуктов. Некоторые из них уже исправлены в Magento 2.2.x, но все еще существуют проблемы. Например, независимо от того, где и как вы разместите свою панель инструментов в макете, блок списка продуктов всегда будет перемещать панель инструментов обратно как свой собственный дочерний элемент (см. Этот комментарий на Github ).
Вот еще одно решение, которое представляет собой комбинацию решения Николаса Миллера и Кунджа. Преимущество решения Николаса Миллера и Чирага Пателя в том, что коллекция продуктов не будет загружаться дважды.
Производитель / модуль / блок / продукта / ProductList / Toolbar.php
namespace Vendor\Module\Block\Product\ProductList;
class Toolbar extends \Magento\Catalog\Block\Product\ProductList\Toolbar
{
public const DEFAULT_PRODUCTLIST_BLOCKNAME = 'category.products.list';
protected function getProductListBlock()
{
$blockName = $this->getProductListBlockName();
if ($blockName) {
return $this->getLayout()->getBlock($blockName);
}
return $this->getLayout()->getBlock(self::DEFAULT_PRODUCTLIST_BLOCKNAME) ?: null;
}
public function getCollection()
{
if (!empty(parent::getCollection())) {
return parent::getCollection();
}
$productList = $this->getProductListBlock();
if (empty($productList)) {
return parent::getCollection();
}
$productList->configureToolbarPublic($this, $productList->getLoadedProductCollection());
return parent::getCollection();
}
}
Производитель / модуль / блок / продукта / ListProduct.php
namespace Vendor\Module\Block\Product;
use Vendor\Module\Block\Product\ProductList\Toolbar;
use Magento\Catalog\Model\ResourceModel\Product\Collection;
class ListProduct extends \Magento\Catalog\Block\Product\ListProduct
{
protected function _beforeToHtml()
{
$collection = $this->_getProductCollection();
$toolbar = $this->getToolbarFromLayout();
if (!$toolbar) {
$toolbar = $this->getLayout()->createBlock($this->_defaultToolbarBlock, uniqid(microtime()));
$this->setChild('toolbar', $toolbar);
}
$this->configureToolbarPublic($toolbar, $collection);
$collection->load();
return $this;
}
public function configureToolbarPublic(Toolbar $toolbar, Collection $collection)
{
// use sortable parameters
$orders = $this->getAvailableOrders();
if ($orders) {
$toolbar->setAvailableOrders($orders);
}
$sort = $this->getSortBy();
if ($sort) {
$toolbar->setDefaultOrder($sort);
}
$dir = $this->getDefaultDirection();
if ($dir) {
$toolbar->setDefaultDirection($dir);
}
$modes = $this->getModes();
if ($modes) {
$toolbar->setModes($modes);
}
// set collection to toolbar and apply sort
$toolbar->setCollection($collection);
}
}
и т.д. / интерфейс / di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\Catalog\Block\Product\ListProduct" type="Vendor\Module\Block\Product\ListProduct" />
<preference for="Magento\Catalog\Block\Product\ProductList\Toolbar" type="Vendor\Module\Block\Product\ProductList\Toolbar" />
</config>
Теперь вы сможете product_list_toolbar
свободно перемещаться без проблем. например: catalog_category_view.xml :
<?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>
<move element="product_list_toolbar" destination="content" before="-" />
</body>
</page>
В качестве дополнительного бонуса вы также можете установить имя блока списка товаров, если вам необходимо:
<?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 element="product_list_toolbar">
<action method="setProductListBlockName">
<argument name="name" xsi:type="string">my_product_list_block</argument>
</action>
</referenceBlock>
</body>
</page>
Аналогично, правильное имя блока панели инструментов также должно быть установлено соответственно в блоке списка продуктов (если имя вашей пользовательской панели инструментов отличается от имени по умолчанию).
Чтобы это решение работало, вам нужен хотя бы Magento 2.2.6
.
2.2.6
. Я не уверен, есть ли какие-либо существенные различия между 2.2.5
и 2.2.6
относительно блока списка товаров или блока панели инструментов.
Просто добавьте ниже код в catalog_category_view.xml
файл в вашей пользовательской теме: -
<move element="product_list_toolbar" destination="columns.top" after="-" />