Alguém tem alguma idéia sobre como mover a barra de ferramentas antes da barra lateral esquerda e direita no magento2 usando XML?
Atualmente, está sendo exibido na barra lateral direita.
Alguém tem alguma idéia sobre como mover a barra de ferramentas antes da barra lateral esquerda e direita no magento2 usando XML?
Atualmente, está sendo exibido na barra lateral direita.
Respostas:
Tente isso.
1. Crie o arquivo catalog_category_view em
fornecedor / magento / theme-frontend-luma / Magento_Catalog / layout
<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. Crie o arquivo list2.phtml em
fornecedor / magento / theme-frontend-luma / Magento_Catalog / templates / product
<?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>-->
Nota: Aqui, mudei a barra de ferramentas para a barra lateral (navegação em camadas).
Eu espero que dê certo!
Eu acho que não está se movendo usando XML, porque está comentando no arquivo module-catalog / templates / product / list.phtml .
<?php echo $block->getToolbarHtml() ?>
Também é definido no bloco 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>
Experimente este código Crie o módulo personalizado.
Adicione este código em 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>
Agora, crie Toolbar.php
um novo arquivo em {{Package Name}}\{{Your Module Name}}\Block\Toolbar
Em seguida, passe abaixo do código nesse novo arquivo:
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();
}
}
Agora remova o bloco padrão do layout da exibição por categoria.
toHtml
método.
$this->setChild()
chamada configureToolbar
do ProductList
. Veja github.com/magento/magento2/issues/7253#issuecomment-439630823
Você pode mover a barra lateral antes da área de conteúdo principal usando o código de layout abaixo:
Etapa 1: crie / copie o arquivo 2columns-left.xml na sua pasta Magento_Theme / page_layout / e substitua o conteúdo abaixo:
Além disso, você pode alterar / adicionar suas classes css no container.
<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. maneira do módulo.
Crie um novo módulo Vendor_Module
app / code / Vendor / Module / etc / 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>
Adicione um plug-in para impedir que a barra de ferramentas padrão seja exibida.
app / código / fornecedor / módulo / etc / frontend / 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>
app / code / Vendor / Module / Plugin / 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 '';
}
}
Adicione um novo bloco à página da categoria.
app / code / Vendor / Module / view / frontend / layout / 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>
app / code / Vendor / Module / Block / 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. Você pode aplicar as mesmas alterações ao seu tema
Você não precisa de plug-in porque pode comentar uma linha onde a barra de ferramentas padrão é renderizada.
$block->getToolbarHtml()
Linhas de comentário em
app / design / frontend / fornecedor / tema / Magento_Catalog / templates / produto / list.phtml
Crie a mesma classe da barra de ferramentas e coloque-a no layout xml.
Fornecedor \ Módulo \ Bloco \ Lista de produtos \ Barra de ferramentas
O principal problema é a antiga base de código da barra de ferramentas e o relacionamento da lista de produtos. Algumas delas já foram corrigidas no Magento 2.2.x, mas ainda existem problemas. Por exemplo, não importa onde ou como você coloca sua barra de ferramentas no layout, o bloco da lista de produtos sempre moverá a barra de ferramentas novamente como seu próprio filho (consulte este comentário no Github ).
Aqui está mais uma solução que é uma combinação da solução de Nicholas Miller e kunj. A vantagem sobre a solução de Nicholas Miller e Chirag Patel é que a coleção de produtos não será carregada duas vezes.
Fornecedor / Módulo / Bloco / Produto / Lista de Produtos / 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();
}
}
Fornecedor / Módulo / Bloco / Produto / 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);
}
}
etc / frontend / 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>
Agora você deve poder mover o product_list_toolbar
livremente sem problemas. por exemplo: 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>
Como bônus adicional, você também pode definir um nome de bloco de lista de produtos personalizado, se precisar:
<?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>
Da mesma forma, o nome correto do bloco da barra de ferramentas também deve ser definido adequadamente no bloco da lista de produtos (se o nome da barra de ferramentas personalizada for algo diferente do padrão).
Para que esta solução funcione, você precisa de pelo menos Magento 2.2.6
.
2.2.6
. Não tenho certeza se existem diferenças significativas entre 2.2.5
e em 2.2.6
relação ao bloco da lista de produtos ou ao bloco da barra de ferramentas.
Basta adicionar o código abaixo no catalog_category_view.xml
arquivo em seu tema personalizado: -
<move element="product_list_toolbar" destination="columns.top" after="-" />