Skip to content

Commit 5599cdd

Browse files
BartlomiejszBartlomiejsz
committed
Fix #29971 - Layered navigation swatches ignore show tooltip setting
1 parent d7ff26b commit 5599cdd

File tree

3 files changed

+134
-80
lines changed

3 files changed

+134
-80
lines changed

‎app/code/Magento/Swatches/Model/Plugin/FilterRenderer.php

Lines changed: 48 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,63 +3,82 @@
33
* Copyright © Magento, Inc. All rights reserved.
44
* See COPYING.txt for license details.
55
*/
6+
declare(strict_types=1);
7+
68
namespace Magento\Swatches\Model\Plugin;
79

8-
/**
9-
* Class FilterRenderer
10-
*/
10+
use Closure;
11+
use Magento\Catalog\Model\Layer\Filter\FilterInterface;
12+
use Magento\Framework\App\ObjectManager;
13+
use Magento\Framework\Exception\LocalizedException;
14+
use Magento\Framework\View\LayoutInterface;
15+
use Magento\LayeredNavigation\Block\Navigation\FilterRenderer as Subject;
16+
use Magento\Swatches\Block\LayeredNavigation\RenderLayered;
17+
use Magento\Swatches\Helper\Data;
18+
use Magento\Swatches\ViewModel\Product\Renderer\Configurable as ConfigurableViewModel;
19+
1120
class FilterRenderer
1221
{
1322
/**
14-
* @var \Magento\Framework\View\LayoutInterface
23+
* @var LayoutInterface
1524
*/
1625
protected $layout;
1726

1827
/**
19-
* Path to RenderLayered Block
20-
*
21-
* @var string
28+
* @var Data
2229
*/
23-
protected $block = \Magento\Swatches\Block\LayeredNavigation\RenderLayered::class;
30+
protected $swatchHelper;
2431

2532
/**
26-
* @var \Magento\Swatches\Helper\Data
33+
* @var ConfigurableViewModel|null
2734
*/
28-
protected $swatchHelper;
35+
private $configurableViewModel;
2936

3037
/**
31-
* @param \Magento\Framework\View\LayoutInterface $layout
32-
* @param \Magento\Swatches\Helper\Data $swatchHelper
38+
* @var string
39+
*/
40+
protected $block = RenderLayered::class;
41+
42+
/**
43+
* @param LayoutInterface $layout
44+
* @param Data $swatchHelper
45+
* @param ConfigurableViewModel|null $configurableViewModel
3346
*/
3447
public function __construct(
35-
\Magento\Framework\View\LayoutInterface $layout,
36-
\Magento\Swatches\Helper\Data $swatchHelper
48+
LayoutInterface $layout,
49+
Data $swatchHelper,
50+
?ConfigurableViewModel $configurableViewModel = null
3751
) {
3852
$this->layout = $layout;
3953
$this->swatchHelper = $swatchHelper;
54+
$this->configurableViewModel = $configurableViewModel
55+
?? ObjectManager::getInstance()->get(ConfigurableViewModel::class);
4056
}
4157

4258
/**
43-
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
44-
* @param \Magento\LayeredNavigation\Block\Navigation\FilterRenderer $subject
45-
* @param \Closure $proceed
46-
* @param \Magento\Catalog\Model\Layer\Filter\FilterInterface $filter
59+
* Override block rendered for swatch attribute in layered navigation
60+
*
61+
* @param Subject $subject
62+
* @param Closure $proceed
63+
* @param FilterInterface $filter
64+
*
4765
* @return mixed
48-
* @throws \Magento\Framework\Exception\LocalizedException
66+
* @throws LocalizedException
67+
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
4968
*/
5069
public function aroundRender(
51-
\Magento\LayeredNavigation\Block\Navigation\FilterRenderer $subject,
52-
\Closure $proceed,
53-
\Magento\Catalog\Model\Layer\Filter\FilterInterface $filter
70+
Subject $subject,
71+
Closure $proceed,
72+
FilterInterface $filter
5473
) {
55-
if ($filter->hasAttributeModel()) {
56-
if ($this->swatchHelper->isSwatchAttribute($filter->getAttributeModel())) {
57-
return $this->layout
58-
->createBlock($this->block)
59-
->setSwatchFilter($filter)
60-
->toHtml();
61-
}
74+
if ($filter->hasAttributeModel() && $this->swatchHelper->isSwatchAttribute($filter->getAttributeModel())) {
75+
return $this->layout
76+
->createBlock($this->block)
77+
->setSwatchFilter($filter)
78+
->setData('configurable_view_model', $this->configurableViewModel)
79+
->toHtml();
6280
}
81+
6382
return $proceed($filter);
6483
}
6584
}

‎app/code/Magento/Swatches/view/frontend/templates/product/layered/renderer.phtml

Lines changed: 56 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,38 @@
44
* See COPYING.txt for license details.
55
*/
66

7+
use Magento\Framework\Escaper;
8+
use Magento\Framework\View\Helper\SecureHtmlRenderer;
9+
use Magento\Swatches\Block\LayeredNavigation\RenderLayered;
10+
use Magento\Swatches\ViewModel\Product\Renderer\Configurable as ConfigurableViewModel;
11+
712
// phpcs:disable PSR2.ControlStructures.SwitchDeclaration
813
// phpcs:disable Generic.WhiteSpace.ScopeIndent
914

10-
/** @var $block \Magento\Swatches\Block\LayeredNavigation\RenderLayered */
11-
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
12-
/** @var \Magento\Framework\Escaper $escaper */
15+
/** @var RenderLayered $block */
16+
/** @var SecureHtmlRenderer $secureRenderer */
17+
/** @var Escaper $escaper */
1318
?>
1419
<?php $swatchData = $block->getSwatchData(); ?>
15-
<div class="swatch-attribute swatch-layered <?= $block->escapeHtmlAttr($swatchData['attribute_code']) ?>"
16-
data-attribute-code="<?= $block->escapeHtmlAttr($swatchData['attribute_code']) ?>"
17-
data-attribute-id="<?= $block->escapeHtmlAttr($swatchData['attribute_id']) ?>">
20+
<?php /** @var ConfigurableViewModel $configurableViewModel */ ?>
21+
<?php $configurableViewModel = $block->getConfigurableViewModel() ?>
22+
<div class="swatch-attribute swatch-layered <?= $escaper->escapeHtmlAttr($swatchData['attribute_code']) ?>"
23+
data-attribute-code="<?= $escaper->escapeHtmlAttr($swatchData['attribute_code']) ?>"
24+
data-attribute-id="<?= $escaper->escapeHtmlAttr($swatchData['attribute_id']) ?>">
1825
<div class="swatch-attribute-options clearfix">
1926
<?php foreach ($swatchData['options'] as $option => $label): ?>
20-
<a href="<?= $block->escapeUrl($label['link']) ?>" rel="nofollow"
21-
aria-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
27+
<a href="<?= $escaper->escapeUrl($label['link']) ?>" rel="nofollow"
28+
aria-label="<?= $escaper->escapeHtmlAttr($label['label']) ?>"
2229
class="swatch-option-link-layered">
2330
<?php if (isset($swatchData['swatches'][$option]['type'])): ?>
2431
<?php switch ($swatchData['swatches'][$option]['type']) {
2532
case '3':
2633
?>
27-
<div class="swatch-option <?= $block->escapeHtmlAttr($label['custom_style']) ?>"
34+
<div class="swatch-option <?= $escaper->escapeHtmlAttr($label['custom_style']) ?>"
2835
tabindex="-1"
2936
data-option-type="3"
30-
data-option-id="<?= $block->escapeHtmlAttr($option) ?>"
31-
data-option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
37+
data-option-id="<?= $escaper->escapeHtmlAttr($option) ?>"
38+
data-option-label="<?= $escaper->escapeHtmlAttr($label['label']) ?>"
3239
data-option-tooltip-thumb=""
3340
data-option-tooltip-value=""
3441
></div>
@@ -43,79 +50,77 @@
4350
'swatch_image',
4451
$swatchData['swatches'][$option]['value']
4552
);
46-
$escapedUrl = $block->escapeUrl($swatchImagePath);
53+
$escapedUrl = $escaper->escapeUrl($swatchImagePath);
4754
?>
48-
<div class="swatch-option image <?= $block->escapeHtmlAttr($label['custom_style']) ?>"
55+
<div class="swatch-option image <?= $escaper->escapeHtmlAttr($label['custom_style']) ?>"
4956
tabindex="-1"
5057
data-option-type="2"
51-
data-option-id="<?= $block->escapeHtmlAttr($option) ?>"
52-
data-option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
53-
data-option-tooltip-thumb="<?= $block->escapeUrl($swatchThumbPath) ?>"
58+
data-option-id="<?= $escaper->escapeHtmlAttr($option) ?>"
59+
data-option-label="<?= $escaper->escapeHtmlAttr($label['label']) ?>"
60+
data-option-tooltip-thumb="<?= $escaper->escapeUrl($swatchThumbPath) ?>"
5461
data-option-tooltip-value="">
5562
</div>
5663
<?php
57-
$element = 'swatchImageOption' .$escaper->escapeJs($option);
58-
$script = 'var ' .$element
59-
.' = document.querySelector(\'div[data-option-id="' .$escaper->escapeJs($option)
60-
.'"]\');' .PHP_EOL;
61-
$script .= $element .'.style.background = "url(\''
62-
.$escapedUrl .'\') no-repeat center";' .PHP_EOL;
63-
$script .= $element .'.style.backgroundSize = "initial";';
64+
$element = 'swatchImageOption' . $escaper->escapeJs($option);
65+
$script = 'var ' . $element
66+
. ' = document.querySelector(\'div[data-option-id="' . $escaper->escapeJs($option)
67+
. '"]\');' . PHP_EOL;
68+
$script .= $element . '.style.background = "url(\''
69+
. $escapedUrl . '\') no-repeat center";' . PHP_EOL;
70+
$script .= $element . '.style.backgroundSize = "initial";';
6471
?>
65-
<?= /* @noEscape*/ $secureRenderer->renderTag('script', [], $script, false); ?>
72+
<?= /* @noEscape*/ $secureRenderer->renderTag('script', [], $script, false) ?>
6673
<?php break;
6774
case '1':
6875
?>
69-
<div class="swatch-option color <?= $block->escapeHtmlAttr($label['custom_style']) ?>"
76+
<div class="swatch-option color <?= $escaper->escapeHtmlAttr($label['custom_style']) ?>"
7077
tabindex="-1"
7178
data-option-type="1"
72-
data-option-id="<?= $block->escapeHtmlAttr($option) ?>"
73-
data-option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
79+
data-option-id="<?= $escaper->escapeHtmlAttr($option) ?>"
80+
data-option-label="<?= $escaper->escapeHtmlAttr($label['label']) ?>"
7481
data-option-tooltip-thumb=""
75-
data-option-tooltip-value="<?= $block->escapeHtmlAttr(
82+
data-option-tooltip-value="<?= $escaper->escapeHtmlAttr(
7683
$swatchData['swatches'][$option]['value']
7784
) ?>">
7885
</div>
7986
<?php
80-
$element = 'swatchImageOption' .$escaper->escapeJs($option);
87+
$element = 'swatchImageOption' . $escaper->escapeJs($option);
8188
$backgroundValue = $escaper->escapeJs(
8289
str_replace('\'', '\\\'', $swatchData['swatches'][$option]['value'])
8390
);
84-
$script = 'var ' .$element
85-
.' = document.querySelector(\'div[data-option-id="' .$escaper->escapeJs($option)
86-
.'"]\');' .PHP_EOL;
87-
$script .= $element .'.style.background = "' .$backgroundValue
88-
.' no-repeat center";' .PHP_EOL;
89-
$script .= $element .'.style.backgroundSize = "initial";';
91+
$script = 'var ' . $element
92+
. ' = document.querySelector(\'div[data-option-id="' . $escaper->escapeJs($option)
93+
. '"]\');' . PHP_EOL;
94+
$script .= $element . '.style.background = "' . $backgroundValue
95+
. ' no-repeat center";' . PHP_EOL;
96+
$script .= $element . '.style.backgroundSize = "initial";';
9097
?>
91-
<?= /* @noEscape*/ $secureRenderer->renderTag('script', [], $script, false); ?>
98+
<?= /* @noEscape*/ $secureRenderer->renderTag('script', [], $script, false) ?>
9299
<?php break;
93100
case '0':
94101
default:
95102
?>
96-
<div class="swatch-option text <?= $block->escapeHtmlAttr($label['custom_style']) ?>"
103+
<div class="swatch-option text <?= $escaper->escapeHtmlAttr($label['custom_style']) ?>"
97104
tabindex="-1"
98105
data-option-type="0"
99-
data-option-id="<?= $block->escapeHtmlAttr($option) ?>"
100-
data-option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
106+
data-option-id="<?= $escaper->escapeHtmlAttr($option) ?>"
107+
data-option-label="<?= $escaper->escapeHtmlAttr($label['label']) ?>"
101108
data-option-tooltip-thumb=""
102109
data-option-tooltip-value=""
103-
><?= $block->escapeHtml($swatchData['swatches'][$option]['value']) ?></div>
110+
><?= $escaper->escapeHtml($swatchData['swatches'][$option]['value']) ?></div>
104111
<?php break;
105112
} ?>
106113
<?php endif; ?>
107114
</a>
108115
<?php endforeach; ?>
109116
</div>
110117
</div>
111-
<?php $scriptString = <<<script
112-
113-
require(["jquery", "Magento_Swatches/js/swatch-renderer"], function ($) {
114-
$('.swatch-layered.{$block->escapeJs($swatchData['attribute_code'])}')
115-
.find('[data-option-type="1"], [data-option-type="2"], [data-option-type="0"], [data-option-type="3"]')
116-
.SwatchRendererTooltip();
117-
});
118-
119-
script;
120-
?>
121-
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
118+
<script type="text/x-magento-init">
119+
{
120+
".swatch-layered.<?= $escaper->escapeJs($swatchData['attribute_code']) ?>": {
121+
"Magento_Swatches/js/layered/swatch-renderer": {
122+
"showTooltip": <?= $escaper->escapeJs($configurableViewModel->getShowSwatchTooltip()) ?>
123+
}
124+
}
125+
}
126+
</script>

‎app/code/Magento/Swatches/view/frontend/web/js/layered/swatch-renderer.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
define([
7+
'jquery',
8+
'Magento_Swatches/js/swatch-renderer'
9+
], function ($) {
10+
'use strict';
11+
12+
$.widget('mage.layeredSwatchRenderer', {
13+
options: {
14+
showTooltip: 1,
15+
swatchElementSelector: '[data-option-type="1"], [data-option-type="2"], ' +
16+
'[data-option-type="0"], [data-option-type="3"]'
17+
},
18+
19+
/**
20+
* @private
21+
*/
22+
_create: function () {
23+
if (this.options.showTooltip === 1) {
24+
$(this.element).find(this.options.swatchElementSelector).SwatchRendererTooltip();
25+
}
26+
}
27+
});
28+
29+
return $.mage.layeredSwatchRenderer;
30+
});

0 commit comments

Comments
 (0)