How to set limit of product’s swatches on category listing page. I have to show 5 swatches of the product on category listing page.
I have tried below code but that’s code working only 5 swatches of product and less than 5 swatches of products, Not working with greater than 5 Swatches of products.
Code is …
app/design/frontend/Vendor/theme/Magento_Swatches/templates/product/listing/renderer.phtml
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
use MagentoCatalogModelProduct;
use MagentoSwatchesBlockProductRendererListingConfigurable;
use MagentoSwatchesViewModelProductRendererConfigurable as ConfigurableViewModel;
/** @var Configurable $block */
/** @var Product $product */
$product = $block->getProduct()
?>
<?php if ($product && $product->isAvailable()): ?>
<?php $productId = $product->getId() ?>
<?php /** @var ConfigurableViewModel $configurableViewModel */ ?>
<?php $configurableViewModel = $block->getConfigurableViewModel() ?>
<div class="swatch-opt-<?= $block->escapeHtmlAttr($productId) ?>"
data-role="swatch-option-<?= $block->escapeHtmlAttr($productId) ?>"></div>
<script type="text/x-magento-init">
{
"[data-role=swatch-option-<?= $block->escapeJs($productId) ?>]": {
"Magento_Swatches/js/swatch-renderer": {
"selectorProduct": ".product-item-details",
"onlySwatches": true,
"enableControlLabel": false,
"numberToShow":5,
"jsonConfig": <?= /* @noEscape */ $block->getJsonConfig() ?>,
"jsonSwatchConfig": <?= /* @noEscape */ $block->getJsonSwatchConfig() ?>,
"mediaCallback": "<?= $block->escapeJs($block->escapeUrl($block->getMediaCallback())) ?>",
"jsonSwatchImageSizeConfig": <?= /* @noEscape */ $block->getJsonSwatchSizeConfig() ?>,
"showTooltip": <?= $block->escapeJs($configurableViewModel->getShowSwatchTooltip()) ?>
}
}
}
</script>
<script type="text/x-magento-init">
{
"[data-role=priceBox][data-price-box=product-id-<?= $block->escapeJs($productId) ?>]": {
"priceBox": {
"priceConfig": {
"priceFormat": <?= /* @noEscape */ $block->getPriceFormatJson() ?>,
"prices": <?= /* @noEscape */ $block->getPricesJson() ?>
}
}
}
}
</script>
<?php endif; ?>
