当前位置： 技术文章>> magento2中的ListingToolbar 组件以及代码示例

文章标题：magento2中的ListingToolbar 组件以及代码示例
  • 文章分类: Magento
  • 10850 阅读
文章标签: magento magento教程 magento二次开发 magento中文教程 php
系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》

Magento中文全栈二次开发

本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。

ListingToolbar组件是Magento 2中用于在产品列表页面（如类别页面和搜索结果页面）中添加工具栏的组件。它提供了许多有用的功能，如产品排序、分页和过滤器等。

下面是一个简单的Magento 2 ListingToolbar组件示例：

首先，创建一个新的Magento 2模块（如果你还没有创建）。

在你的模块目录中创建一个新的PHP类，例如：My_Module_Block_Product_ListingToolbar

在这个PHP类中，添加以下代码：

<?php
namespace My\Module\Block\Product;
use Magento\Catalog\Block\Product\ProductList\Toolbar as ToolbarParent;
class ListingToolbar extends ToolbarParent
{
    /**
     * Retrieve available page sizes
     *
     * @return array
     */
    public function getAvailableLimit()
    {
        return [10 => 10, 20 => 20, 50 => 50];
    }
}

这个PHP类继承了Magento 2中的Magento\Catalog\Block\Product\ProductList\Toolbar类，并覆盖了其中的getAvailableLimit()方法。在这个方法中，我们返回了可用的产品数量限制。

在你的模块目录中创建一个新的布局XML文件，例如：my_module_product_listing_toolbar.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="content">
            <block class="My\Module\Block\Product\ListingToolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml" />
        </referenceContainer>
    </body>
</page>

这个布局文件将我们刚刚创建的ListingToolbar块添加到产品列表页面的content容器中，并使用Magento 2的默认product/list/toolbar.phtml模板来呈现工具栏。

最后，创建一个新的PHTML文件，例如：my_module_product_listing.phtml，并将以下代码添加到该文件中：

<?php
/**
 * @var $block \My\Module\Block\Product\ListingToolbar
 */
?>
<div class="products-toolbar">
    <div class="products-toolbar-title">
        <strong><?= $block->getPagerHtml() ?></strong>
    </div>
    <div class="products-toolbar-actions">
        <select name="limit" class="products-toolbar-limit" onchange="setLocation(this.value)">
            <?php foreach ($block->getAvailableLimit() as $key => $value) : ?>
                <option value="<?= $block->getPagerUrl(['limit' => $key]) ?>" <?= ($block->getLimit() == $key) ? 'selected="selected"' : '' ?>><?= $value ?></option>
            <?php endforeach; ?>
        </select>
    </div>
</div>

这个PHTML文件呈现了一个简单的工具栏，其中包含产品数量限制下拉列表和分页导航。

现在，当你打开Magento 2产品列表页面时，你应该会看到我们刚刚创建的工具栏。你可以在getAvailableLimit()方法中添加更


推荐文章