Magento2如何移动工具栏

8

有人对如何使用XML在magento2中的左侧和右侧边栏之前移动工具栏有任何想法吗？

当前它显示在右侧栏中。

magento2  layout  xml  toolbar  theme-overriding 
— hweb87
source
在引用根容器时是否尝试过setTemplate操作，该操作将允许您将模板切换为1列，左2列，右2列或3列？
— 阿迪亚莎（Aditya Shah）
我试图在<div.sidebar.main”之前<move element =“ product_list_toolbar” destination =“ columns”
— hweb87

Answers:

8

尝试这个。

1.在下面创建catalog_category_view文件

供应商/ magento /主题前端luma / 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 /主题前端luma / 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>-->

注意：在这里，我将工具栏移到了侧边栏（分层导航）。

我希望它能起作用！

— 奇拉格·帕特尔（Chirag Patel）
source
我不想编辑任何phtml文件
— hweb87，18年
我没有编辑核心的Magento文件，而是覆盖了主题文件夹中的.phtml文件。
— Chirag Patel
供应商/ magento / theme-frontend-luma / Magento_Catalog / templates / product参见代码上方的注释。
— Chirag Patel
请检查该链接以获取更多信息community.magento.com/t5/Magento-2-x-Programming/...
— 奇拉格帕特尔
我在我的项目中编写了此代码，它对我来说是有效的，只需执行上述解决方案，然后检查我确定它可以工作。
— Chirag Patel
8

我认为使用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>
— 维塔尔·巴里亚（Vithal Bariya）
source
感谢您的答复，那么是否没有选择在两个容器之前显示工具栏？是的，我已经看过两个文件
— hweb87，18年
我对此一无所知，但是“移动”方法在这种情况下不起作用。
— Vithal Bariya
4

尝试使用此代码创建自定义模块。

将此代码添加到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();
    }
}

现在，从类别视图的布局中删除默认块。

— 坤吉
source
不幸的是，这不起作用。工具栏仍然根本不会渲染。而且我不明白为什么。甚至没有调用它的toHtml方法。
— fritzmg
问题是$this->setChild()在通话configureToolbar的ProductList。见github.com/magento/magento2/issues/7253#issuecomment-439630823
— fritzmg
2

您可以使用以下布局代码将侧边栏移动到主要内容区域之前：

步骤1：在您的Magento_Theme / page_layout /文件夹中创建/复制2columns-left.xml文件，并替换以下内容：

您也可以在容器中更改/添加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>

— Naveed Asim
source
2

1.模块方式。

创建一个新的模块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>

添加插件以防止显示默认工具栏。

应用程序/代码/供应商/模块/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>

应用/代码/供应商/模块/插件/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 '';
    }
}

将一个新块添加到类别页面。

应用/代码/供应商/模块/视图/前端/布局/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>

应用/代码/供应商/模块/块/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()行

app / design / frontend / vendor / theme / Magento_Catalog / templates / product / list.phtml

创建相同的工具栏类，并将其放在xml布局中。

供应商\模块\块\列表产品\工具栏

— 尼古拉斯·米勒
source
2

主要问题是工具栏和产品列表关系的旧代码库。Magento 2.2.x中的某些问题已得到纠正，但是仍然存在问题。例如，无论您将工具栏放置在布局中的何处或如何放置，产品列表块都会始终将工具栏作为其自己的子代向后移动（请参见Github上的注释）。

这是尼古拉斯·米勒（Nicholas Miller）和昆尼（kunj）解决方案的结合。与Nicholas Miller和Chirag Patel的解决方案相比，优点是产品集合不会被加载两次。

供应商/模块/块/产品/产品列表/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);
    }
}

等/ 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>

现在，您应该可以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。

— 摩擦
source
在2.2.5中不起作用。任何帮助将不胜感激。
— Cypher909 '18
我的代码已通过测试2.2.6。我不知道是否有任何之间的差异显著2.2.5及2.2.6有关产品列表块或工具栏块。
— fritzmg
是否所有这些文件和代码都需要进行扩展？我还添加了一个module.xml。我不确定是否缺少任何东西。
— Cypher909 '18
同样对于文件Vendor / Module / Block / Product / ProductList.php，它是否应该是ListProduct.php？
— Cypher909 '18
1
没错，它在2.2.6中有效。不知道有什么区别，但是我会更新。谢谢！
— Cypher909
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.