1

I want to change the toolbar limiter and to insert "per page" text inside <option> tag.

enter image description here

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

3
  • which file you are editing ? what's your custom file path ? Oct 24, 2017 at 11:21
  • is already in the post the files that I try to edit, pager.phtml and limiter.phtml
    – Robert
    Oct 24, 2017 at 11:25
  • there are little corrections in code, try with updated code Oct 24, 2017 at 11:38

3 Answers 3

4

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>

enter image description here

Keep your cache disabled or clean your cache .

Note: Tested on LUMA Theme

Let me know if any problem

8
  • no is not work, so is not display any changes in this files: pager.phtml or limiter.phtml
    – Robert
    Oct 24, 2017 at 11:43
  • only need to edit limiter.phtml , try clearing your cache and deploying static files once Oct 24, 2017 at 11:46
  • great @Robert ! cheers :) Oct 24, 2017 at 11:48
  • can you tell me with something please? is there any way to change the click on limiter with hover state?
    – Robert
    Oct 24, 2017 at 11:48
  • you want to make it show all options on hover state rather than clicking Oct 24, 2017 at 11:49
0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.