Magento2ツールバーの移動方法

8

XMLを使用してmagento2でツールバーを左サイドバーと右サイドバーの前に移動する方法について誰かが何か考えを持っていますか？

現在、右側のサイドバーに表示されています。

magento2  layout  xml  toolbar  theme-overriding 
— hweb87
ソース
ルートコンテナーを参照すると、テンプレートを1列、2列-左、2列-右、または3列に切り替えることができるときに、setTemplateアクションを試しましたか？
— Aditya Shah
<move element = "product_list_toolbar" destination = "columns" before = "div.sidebar.main" />を
— 試みました

回答:

8

これを試して。

1. catalog_category_viewファイルを以下に作成します

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.下にlist2.phtmlファイルを作成します

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

注：ここでは、ツールバーをサイドバー（レイヤードナビゲーション）に移動しました。

うまくいくことを願っています！

— チラグ・パテル
ソース
phtmlファイルを編集したくない
— hweb87
コアMagentoファイルを編集しなかったので、テーマフォルダーの.phtmlファイルを上書きします。
— Chirag Patel
vendor / magento / theme-frontend-luma / Magento_Catalog / templates / productコードの上にあるコメントを参照してください。
— Chirag Patel
詳細については、このリンクをご確認くださいcommunity.magento.com/t5/Magento-2-x-Programming/...
— チラグ・パテル
私は自分のプロジェクトでこのコードを書いて、それは私にとってはうまくいきます。上記の解決策を実行し、それがうまくいくことを確認してください。
— Chirag Patel
8

module-catalog / templates / product / list.phtmlファイルでコメントしているので、XMLを使用しても動いていないと思います。

<?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>
— ヴィサル・バリヤ
ソース
返信ありがとうございます。それでは、両方のコンテナの前にツールバーを表示するオプションはありませんか？はい、両方のファイルを既に見ました
— hweb87
私はそれについてこれ以上の考えはありませんが、「移動」方法はこのシナリオでは機能しません。
— Vithal Bariya、2018
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();
    }
}

次に、カテゴリビューのレイアウトからデフォルトブロックを削除します。

— クンジ
ソース
残念ながら、これは機能していません。ツールバーはまだまったくレンダリングされません。そして、私はその理由を理解していません。そのtoHtmlメソッドへの呼び出しさえありません。
— fritzmg 2018年
問題がある$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>

— ネイビードアシム
ソース
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>

プラグインを追加して、デフォルトのツールバーが表示されないようにします。

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 '';
    }
}

カテゴリページに新しいブロックを追加します。

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.テーマに同じ変更を適用できます

デフォルトのツールバーがレンダリングされた行にコメントするだけなので、プラグインは必要ありません。

のコメント$block->getToolbarHtml()行

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

同じツールバークラスを作成し、xmlレイアウトに配置します。

ベンダー\モジュール\ブロック\リスト製品\ツールバー

— ニコラス・ミラー
ソース
2

主な問題は、ツールバーの古いコードベースと製品リストの関係です。一部はMagento 2.2.xで修正済みですが、まだ問題があります。たとえば、ツールバーをレイアウトのどこにどのように配置しても、製品リストブロックは常にツールバーをそれ自体の子として戻します（このGithubのコメントを参照）。

ニコラスミラーのソリューションとクンジのソリューションを組み合わせたさらに別のソリューションを次に示します。Nicholas MillerおよびChirag Patelのソリューションに対する利点は、製品コレクションが2回読み込まれないことです。

ベンダー/モジュール/ブロック/製品/製品リスト/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);
    }
}

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>

これで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です。

— フリッツ
ソース
これは2.2.5では機能しません。どんな助けでも大歓迎です。
— Cypher909 2018年
私のコードはでテストされました2.2.6。製品リストブロックまたはツールバーブロックの間に2.2.5、およびそれら2.2.6に関して大きな違いがあるかどうかはわかりません。
— fritzmg 2018年
これらすべてのファイルとコードは拡張機能を作成するために必要ですか？module.xmlも追加しました。何か足りないものがあるかどうかはわかりません。
— Cypher909
また、ファイルVendor / Module / Block / Product / ProductList.phpについては、ListProduct.phpであると想定されていましたか？
— Cypher909
1
2.2.6で動作します。違いはわかりませんが、更新します。ありがとう！
— Cypher909 2018
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.