Limit Options on Category Page

[jerroddavenport]

I'm trying to limit the number of options that show up on a product on the category page.

Currently it looks like the limit is 16.  I'm trying to change it to 5.  I'm unsure where to do this at. 

Anyone point me in the right direction?

[Sunil Patel]

What do you mean option? Do you mean number of products of any category?

[Rakesh Jesadiya · Accepted solution]

You can set it from Magento\Swatch module by changing value of parameter, numberToShow: false, to numberToShow: 5 in swatch-renderer.js file.

File path is,

vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

This file is used for show more button on swatches.

// number of controls to show (false or zero = show all)
            numberToShow: false,

In above variable you have to pass limit.

Second way,

You can just pass limit from phtml file,

override 

vendor/magento/module-swatches/view/frontend/templates/product/listing/renderer.phtml

above file to your theme or module level and keep below content,

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
<div class="swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>"></div>
<script>
    require([
        'jquery',
        'jquery/ui',
        'Magento_Swatches/js/swatch-renderer',
        'Magento_Swatches/js/catalog-add-to-cart',
        'priceBox'
    ], function ($) {
        var jsonConfig = <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>;

        $('.swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>').SwatchRenderer({
            selectorProduct: '.product-item-details',
            onlySwatches: true,
            enableControlLabel: false,
            numberToShow: <?= /* @escapeNotVerified */ $block->getNumberSwatchesPerProduct() ?>,
            jsonConfig: jsonConfig,
            jsonSwatchConfig: <?= /* @escapeNotVerified */ $block->getJsonSwatchConfig() ?>,
            mediaCallback: '<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>',
            numberToShow:5
        });

        var dataPriceBoxSelector = '[data-role=priceBox]',
            dataProductIdSelector = '[data-product-id=<?= $block->escapeHtml($block->getProduct()->getId()) ?>]',
            priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);

        priceBoxes.priceBox({
            'priceConfig': {
                priceFormat: jsonConfig.priceFormat,
                prices: jsonConfig.prices
            }
        });
    });
</script>

[jerroddavenport]

Thank you Rakesh!  Although editing the js file did not work, using the override did.

Thank you!!!!

[xantek]

numberToShow: <?= /* @escapeNotVerified */ $block->getNumberSwatchesPerProduct() ?>,

public function getNumberSwatchesPerProduct()
{
    return $this->_scopeConfig->getValue(
        'catalog/frontend/swatches_per_product',
        ScopeInterface::SCOPE_STORE
    );
}

[prajosh]

Thanks, this is worked for me