¿Alguien tiene alguna idea sobre cómo mover la barra de herramientas antes de la barra lateral izquierda y derecha en magento2 usando XML?
Actualmente se muestra en la barra lateral derecha.
¿Alguien tiene alguna idea sobre cómo mover la barra de herramientas antes de la barra lateral izquierda y derecha en magento2 usando XML?
Actualmente se muestra en la barra lateral derecha.
Respuestas:
Prueba esto.
1. Cree el archivo catalog_category_view en
vendor / 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. Cree el archivo list2.phtml en
vendor / 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: Aquí, moví la barra de herramientas a la barra lateral (navegación en capas).
¡Espero que funcione!
Creo que no se mueve usando XML, porque está comentando en el archivo module-catalog / templates / product / list.phtml .
<?php echo $block->getToolbarHtml() ?>
También se define en module-catalog / view / frontend / layout / catalog_category_view.xml category.products.list block
<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>
Pruebe este código Cree el módulo personalizado.
Agregue este código en 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>
Ahora cree Toolbar.php
un nuevo archivo en {{Package Name}}\{{Your Module Name}}\Block\Toolbar
Luego, pase el siguiente código en ese nuevo archivo:
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();
}
}
Ahora elimine el bloque predeterminado del diseño de la vista de categoría.
toHtml
método.
$this->setChild()
llamada configureToolbar
de ProductList
. Ver github.com/magento/magento2/issues/7253#issuecomment-439630823
Puede mover la barra lateral antes del área de contenido principal utilizando el código de diseño a continuación:
Paso 1: cree / copie el archivo 2columns-left.xml en su carpeta Magento_Theme / page_layout / y reemplace los siguientes contenidos:
También puede cambiar / agregar sus clases de CSS en el contenedor.
<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. Módulo de forma.
Crear un nuevo 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>
Agregue un complemento para evitar que se muestre la barra de herramientas predeterminada.
app / code / Vendor / Module / 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 '';
}
}
Agregue un nuevo bloque a la página de categoría.
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. Puedes aplicar los mismos cambios a tu tema
No necesita un complemento porque solo puede comentar una línea donde se representa la barra de herramientas predeterminada.
$block->getToolbarHtml()
Líneas de comentario en
app / design / frontend / Vendor / theme / Magento_Catalog / templates / product / list.phtml
Cree la misma clase de barra de herramientas y póngala en diseño xml.
Proveedor \ Módulo \ Bloque \ Lista de productos \ Barra de herramientas
El principal problema es la antigua base de código de la barra de herramientas y la relación de la lista de productos. Algunos de ellos ya se han rectificado en Magento 2.2.x, pero todavía hay problemas. Por ejemplo, no importa dónde o cómo coloque su barra de herramientas en el diseño, el bloque de la lista de productos siempre moverá la barra de herramientas como su propio elemento secundario (vea este comentario en Github ).
Aquí hay otra solución que es una combinación de la solución de Nicholas Miller y kunj. La ventaja sobre la solución de Nicholas Miller y Chirag Patel es que la colección de productos no se cargará dos veces.
Proveedor / Módulo / Bloque / Producto / Lista de productos / 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();
}
}
Proveedor / Módulo / Bloque / Producto / 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>
Ahora debería poder moverlo product_list_toolbar
libremente sin ningún problema. por ejemplo: 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 una ventaja adicional, también puede establecer un nombre de bloque de lista de productos personalizado, si necesita:
<?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>
Del mismo modo, el nombre correcto del bloque de la barra de herramientas también debe establecerse en consecuencia en el bloque de la lista de productos (si el nombre de la barra de herramientas personalizada no es el predeterminado).
Para que esta solución funcione, necesita al menos Magento 2.2.6
.
2.2.6
. No estoy seguro de si hay diferencias significativas entre 2.2.5
y con 2.2.6
respecto al bloque de la lista de productos o al bloque de la barra de herramientas.
Simplemente agregue el siguiente código en el catalog_category_view.xml
archivo en su tema personalizado: -
<move element="product_list_toolbar" destination="columns.top" after="-" />