0

i'm trying to move this UI element vendor/magento/module-catalog/view/frontend/templates/product/list/toolbar/sorter.phtml from its original position to the right side of the screen inside another container.

The problem is that i couldn't for the life of me find its name to select it so instead i tried selecting the entire toolbar.phtml block and move it like this:

<move element="product_list_toolbar" destination="sidebar.additional" />

but nothing changes on the front end.

i found the name product_list_toolbar in vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml specifically here:

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

Can anyone help?

The ideal would be to move only the sorter element that is found inside toolbar but even if you can help me select the entire toolbar it would be of huge help!

1 Answer 1

0

hello dear I will find your solution so please follow the below steps. I will explain step by step.

Step 1: go to your theme directory and add the below file.

/var/www/html/project/app/design/frontend/Magento/customtheme/Magento_Catalog/layout/catalog_category_view.xml

<?xml version="1.0"?>
<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\ProductList\Toolbar" name="custom.toolbar" template="Magento_Catalog::product/list/toolbar/sorter.phtml" after="-" />
    </referenceContainer> 
</body>

Step 2 : /var/www/html/project/app/design/frontend/Magento/customtheme/Magento_Catalog/templates/product/list/toolbar.phtml

<?php if ($block->getCollection()->getSize()) :?>
<?php $widget = $this->helper(\Magento\Framework\Json\Helper\Data::class)->jsonDecode($block->getWidgetOptionsJson());
    $widgetOptions = $this->helper(\Magento\Framework\Json\Helper\Data::class)->jsonEncode($widget['productListToolbarForm']);
?>
<div class="toolbar toolbar-products" data-mage-init='{"productListToolbarForm":<?= /* @noEscape */ $widgetOptions ?>}'>
    <?php if ($block->getIsBottom()): ?>
        <?= $block->getPagerHtml() ?>
        <?= $block->fetchView($block->getTemplateFile('Magento_Catalog::product/list/toolbar/limiter.phtml')) ?>
    <?php else: ?>
        <?php if ($block->isExpanded()): ?>
            <?= $block->fetchView($block->getTemplateFile('Magento_Catalog::product/list/toolbar/viewmode.phtml')) ?>
        <?php endif ?>
        <?= $block->fetchView($block->getTemplateFile('Magento_Catalog::product/list/toolbar/amount.phtml')) ?>
       
    <?php endif ?>
</div>

The above file just removed for sorter.phtml

Step 3:

/var/www/html/project/app/design/frontend/Magento/customtheme/Magento_Catalog/templates/product/list/toolbar/sorter.phtml

<?php $widget = $this->helper(\Magento\Framework\Json\Helper\Data::class)->jsonDecode($block->getWidgetOptionsJson());
    $widgetOptions = $this->helper(\Magento\Framework\Json\Helper\Data::class)->jsonEncode($widget['productListToolbarForm']);
?>
 <div data-mage-init='{"productListToolbarForm":<?= /* @noEscape */ $widgetOptions ?>}'>
<div class="toolbar-sorter sorter">
<label class="sorter-label" for="sorter"><?= $block->escapeHtml(__('Sort By')) ?></label>
<select id="sorter" data-role="sorter" class="sorter-options">
    <?php foreach ($block->getAvailableOrders() as $_key => $_order) :?>
        <option value="<?= $block->escapeHtmlAttr($_key) ?>"
            <?php if ($block->isOrderCurrent($_key)) :?>
                selected="selected"
            <?php endif; ?>
            >
            <?= $block->escapeHtml(__($_order)) ?>
        </option>
    <?php endforeach; ?>
</select>
<?php if ($block->getCurrentDirection() == 'desc') :?>
    <a title="<?= $block->escapeHtmlAttr(__('Set Ascending Direction')) ?>"
       href="#"
       class="action sorter-action sort-desc"
       data-role="direction-switcher"
       data-value="asc">
        <span><?= $block->escapeHtml(__('Set Ascending Direction')) ?></span>
    </a>
<?php else :?>
    <a title="<?= $block->escapeHtmlAttr(__('Set Descending Direction')) ?>"
       href="#"
       class="action sorter-action sort-asc"
       data-role="direction-switcher"
       data-value="desc">
        <span><?= $block->escapeHtml(__('Set Descending Direction')) ?></span>
    </a>
<?php endif; ?>
</div>
</div>

i hope that works. so please accept my answer and upvote me.

I will also share my screenshot. for the sorter move in the sidebar additional.

enter image description here enter image description here enter image description here

if you any issue so please tell me i will try to help.

3
  • hi, thanks this worked! i have a question though, can you tell me where did you get custom.toolbar ? and why did you remove the sorter.phtml element from toolbar.phtml? i thought it was the opposite, it thought sorter.phtml needed to be there or it wouldn't work. Commented Mar 28 at 8:05
  • yes,custom.toolbar was created only. your code moves the element to you are already said sorter toolbar move in the sidebar container. so I will move the sorter toolbar and that is also working in the sidebar additional. Commented Mar 28 at 8:48
  • hello, any issue with this then tell me. Commented Mar 28 at 12:39

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.