Magento 2 - Add 'per page' text inside option tag
-
16-04-2021 - |
문제
I want to change the toolbar limiter and to insert "per page" text inside <option>
tag.
<div class="limiter">
<label class="label" for="limiter">
<span><?= /* @escapeNotVerified */ __('Show') ?></span>
</label>
<div class="control">
<select id="limiter" data-role="limiter" class="limiter-options">
<?php foreach ($block->getAvailableLimit() as $_key => $_limit): ?>
<option value="<?= /* @escapeNotVerified */ $_key ?>"<?php if ($block->isLimitCurrent($_key)): ?>
selected="selected"<?php endif ?>>
<?= /* @escapeNotVerified */ $_limit ?>
</option>
<?php endforeach; ?>
</select>
</div>
<span class="limiter-text"><?= /* @escapeNotVerified */ __('per page') ?></span>
</div>
I add this pages on my custom theme but even if I change something the changes are not displayed.
app/design/frontend/MyTheme/default/Magento_Theme/templates/html/pager.phtml
app/design/frontend/MyTheme/default/Magento_Catalog/template/product/list/toolbar/limiter.phtml
I need to add changes in other file?
해결책
There are little corrections in your limiter.phtml
code and it will be displayed , here is updated file.
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<?php
/**
* Product list toolbar
*
* @var $block \Magento\Catalog\Block\Product\ProductList\Toolbar
*/
use Magento\Catalog\Model\Product\ProductList\Toolbar;
?>
<div class="field limiter">
<label class="label" for="limiter">
<span><?= /* @escapeNotVerified */ __('Show') ?></span>
</label>
<div class="control">
<select id="limiter" data-role="limiter" class="limiter-options">
<?php foreach ($block->getAvailableLimit() as $_key => $_limit): ?>
<option value="<?= /* @escapeNotVerified */ $_key ?>"<?php if ($block->isLimitCurrent($_key)): ?>
selected="selected"<?php endif ?>>
<?= /* @escapeNotVerified */ $_limit ?>
<span class="limiter-text"><?= /* @escapeNotVerified */ __('per page') ?></span>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
Keep your cache disabled or clean your cache .
Note: Tested on LUMA Theme
Let me know if any problem
다른 팁
If you are trying to change to number of products then you do not need to edit any phtml file. There is an option in the backend at following path:
Store > Configuration > Catalog > Catalog > Storefront > Products per Page on Grid Allowed Values
Change the value of Products per Page on Grid Allowed Values according to your requirement.
Thanks.
I realise this is an old question but I assume you don't want the 'Per page' text to be rendered inside the dropdown options also. This can be achieved with the following code inside limiter.phtml file.
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<?php
/**
* Product list toolbar
*
* @var $block \Magento\Catalog\Block\Product\ProductList\Toolbar
*/
use Magento\Catalog\Model\Product\ProductList\Toolbar;
?>
<div class="field limiter">
<label class="label" for="limiter">
<span><?= /* @escapeNotVerified */ __('Show') ?></span>
</label>
<div class="control">
<select id="limiter" data-role="limiter" class="limiter-options">
<?php foreach ($block->getAvailableLimit() as $_key => $_limit): ?>
<option value="<?= /* @escapeNotVerified */ $_key ?>"<?php if ($block->isLimitCurrent($_key)): ?>
selected="selected"<?php endif ?>>
<?php if ($block->isLimitCurrent($_key)): ?><span class="limiter-text"><?= /* @escapeNotVerified */ __('Per Page: ') ?></span><?php endif ?>
<?= /* @escapeNotVerified */ $_limit ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
The path for this file is: vendor/magento/module-catalog/view/frontend/templates/product/list/toolbar/limiter.phtml
But you will want to over-ride this file inside your frontend theme to make the changes. Copy the file and place it here:
app/design/frontend/vendor/themename/Magento_Catalog/templates/product/list/toolbar/limiter.phtml