Magento2 Cómo mover la barra de herramientas

8

¿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.

magento2 layout xml toolbar theme-overriding hweb87
fuente
¿Has probado la acción setTemplate al hacer referencia al contenedor raíz que te permitirá cambiar las plantillas a 1 columna, 2 columnas a la izquierda, 2 columnas a la derecha o 3 columnas?
Aditya Shah
He intentado <move element = "product_list_toolbar" destination = "columnas" before = "div.sidebar.main" />
hweb87

Respuestas:

8

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!

Chirag Patel
fuente
No quiero editar ningún archivo
phtml
No edité el archivo principal de Magento, anulo el archivo .phtml en la carpeta del tema.
Chirag Patel
vendor / magento / theme-frontend-luma / Magento_Catalog / templates / product Vea los comentarios arriba del código.
Chirag Patel
Consulte este enlace para obtener más información community.magento.com/t5/Magento-2-x-Programming/…
Chirag Patel
Escribo este código en mi proyecto y funciona para mí, solo haga la solución anterior y luego verifique que esté seguro de que funciona.
Chirag Patel
8

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>
Vithal Bariya
fuente
Gracias por responder, ¿Entonces no hay opción para mostrar la barra de herramientas antes de ambos contenedores? Sí, ya he visto ambos archivos
hweb87
No tengo más idea sobre eso, pero el método "mover" no funciona en este escenario.
Vithal Bariya
4

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.phpun nuevo archivo en {{Package Name}}\{{Your Module Name}}\Block\ToolbarLuego, 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.

kunj
fuente
Lamentablemente esto no está funcionando. La barra de herramientas aún no se renderizará en absoluto. Y no entiendo por qué. Ni siquiera hay una llamada a su toHtmlmétodo.
fritzmg
El problema es la $this->setChild()llamada configureToolbarde ProductList. Ver github.com/magento/magento2/issues/7253#issuecomment-439630823
fritzmg el
2

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>

Naveed Asim
fuente
2

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

Nicholas Miller
fuente
2

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_toolbarlibremente 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).

Actualizar

Para que esta solución funcione, necesita al menos Magento 2.2.6.

fritzmg
fuente
Esto no funciona en 2.2.5. Cualquier ayuda sería muy apreciada.
Cypher909
Mi código fue probado con 2.2.6. No estoy seguro de si hay diferencias significativas entre 2.2.5y con 2.2.6respecto al bloque de la lista de productos o al bloque de la barra de herramientas.
fritzmg
¿Son todos estos archivos y códigos necesarios para hacer la extensión? También agregué un module.xml. No estoy seguro de si hay algo que me falta.
Cypher909
También para el archivo Vendor / Module / Block / Product / ProductList.php ¿se suponía que era ListProduct.php?
Cypher909
1
Tienes razón, funciona en 2.2.6. No estoy seguro de cuál es la diferencia, pero lo actualizaré. ¡Gracias!
Cypher909