Adakah yang tahu tentang cara memindahkan bilah alat sebelum sidebar kiri dan kanan di magento2 menggunakan XML?
Saat ini ditampilkan di bilah sisi kanan.
Adakah yang tahu tentang cara memindahkan bilah alat sebelum sidebar kiri dan kanan di magento2 menggunakan XML?
Saat ini ditampilkan di bilah sisi kanan.
Jawaban:
Coba ini.
1. Buat file catalog_category_view di bawah
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. Buat file list2.phtml di bawah
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>-->
Catatan: Di sini, saya memindahkan bilah alat ke bilah sisi (navigasi berlapis).
Saya harap ini berhasil!
Saya pikir itu tidak bergerak dengan menggunakan XML, Karena itu mengomentari dalam modul-katalog / templat / produk / list.phtml file.
<?php echo $block->getToolbarHtml() ?>
Juga didefinisikan dalam modul-katalog / view / frontend / tata letak / catalog_category_view.xml category.products.list blok
<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>
Coba kode ini. Buat modul khusus.
Tambahkan kode ini di 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>
Sekarang, buat Toolbar.php
file baru di {{Package Name}}\{{Your Module Name}}\Block\Toolbar
lalu, lewati kode di bawah di file baru itu:
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();
}
}
Sekarang hapus blok default dari tata letak tampilan kategori.
toHtml
metodenya.
$this->setChild()
panggilan masuk configureToolbar
dari ProductList
. Lihat github.com/magento/magento2/issues/7253#issuecomment-439630823
Anda dapat memindahkan bilah sisi sebelum area konten utama menggunakan kode tata letak di bawah ini:
Langkah 1: buat / salin file 2columns-left.xml di Magento_Theme / page_layout / dan ganti konten di bawah ini:
Anda juga dapat mengubah / menambahkan kelas css Anda dalam wadah.
<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. Cara modul.
Buat modul baru 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>
Tambahkan plugin untuk mencegah tampilan toolbar default.
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 '';
}
}
Tambahkan blok baru ke halaman kategori.
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 / kode / Vendor / Modul / Blok / 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. Anda dapat menerapkan perubahan yang sama pada tema Anda
Anda tidak perlu plugin karena Anda hanya dapat mengomentari baris yang diberikan bilah alat default.
$block->getToolbarHtml()
Baris komentar dalam
app / design / frontend / Vendor / theme / Magento_Catalog / templates / product / list.phtml
Buat kelas toolbar yang sama dan letakkan di layout xml.
Vendor \ Module \ Block \ ListProduct \ Toolbar
Masalah utama adalah basis kode lama dari bilah alat dan hubungan daftar produk. Beberapa sudah diperbaiki di Magento 2.2.x, tetapi masih ada masalah. Misalnya, di mana pun atau bagaimana Anda meletakkan bilah alat di tata letak, blok daftar produk akan selalu memindahkan bilah alat kembali sebagai anaknya sendiri (lihat komentar ini di Github ).
Berikut adalah solusi lain yang merupakan kombinasi dari solusi Nicholas Miller dan kunj. Keuntungan dari solusi Nicholas Miller dan Chirag Patel adalah, bahwa koleksi produk tidak akan dimuat dua kali.
Vendor / Modul / Blok / Produk / Daftar Produk / 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();
}
}
Vendor / Modul / Blok / Produk / 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>
Sekarang Anda harus dapat bergerak dengan product_list_toolbar
bebas tanpa masalah. mis .: 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>
Sebagai bonus tambahan, Anda juga dapat menetapkan nama blok daftar produk khusus, jika Anda perlu:
<?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>
Demikian juga, nama blok bilah alat yang benar juga harus ditetapkan sesuai pada blok daftar produk (jika nama bilah alat kustom Anda adalah sesuatu selain dari yang standar).
Agar solusi ini berfungsi, Anda memerlukan setidaknya Magento 2.2.6
.
2.2.6
. Saya tidak yakin apakah ada perbedaan yang signifikan antara 2.2.5
dan 2.2.6
mengenai blok daftar produk atau blok bilah alat.
Cukup tambahkan kode di bawah ini dalam catalog_category_view.xml
file dalam tema khusus Anda: -
<move element="product_list_toolbar" destination="columns.top" after="-" />