Skip to content

Commit dd7674e

Browse files
niravcodilarniravcodilar
committed
fixed-html validation issue for some attribute
1 parent e8c2526 commit dd7674e

File tree

2 files changed

+72
-70
lines changed

2 files changed

+72
-70
lines changed

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

Lines changed: 49 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,12 @@ define([
6363
/**
6464
* Render tooltips by attributes (only to up).
6565
* Required element attributes:
66-
* - option-type (integer, 0-3)
67-
* - option-label (string)
68-
* - option-tooltip-thumb
69-
* - option-tooltip-value
70-
* - thumb-width
71-
* - thumb-height
66+
* - data-option-type (integer, 0-3)
67+
* - data-option-label (string)
68+
* - data-option-tooltip-thumb
69+
* - data-option-tooltip-value
70+
* - data-thumb-width
71+
* - data-thumb-height
7272
*/
7373
$.widget('mage.SwatchRendererTooltip', {
7474
options: {
@@ -84,12 +84,12 @@ define([
8484
$this = this.element,
8585
$element = $('.' + $widget.options.tooltipClass),
8686
timer,
87-
type = parseInt($this.attr('option-type'), 10),
88-
label = $this.attr('option-label'),
89-
thumb = $this.attr('option-tooltip-thumb'),
90-
value = $this.attr('option-tooltip-value'),
91-
width = $this.attr('thumb-width'),
92-
height = $this.attr('thumb-height'),
87+
type = parseInt($this.data('option-type'), 10),
88+
label = $this.data('option-label'),
89+
thumb = $this.data('option-tooltip-thumb'),
90+
value = $this.data('option-tooltip-value'),
91+
width = $this.data('thumb-width'),
92+
height = $this.data('thumb-height'),
9393
$image,
9494
$title,
9595
$corner;
@@ -429,8 +429,8 @@ define([
429429
// Create new control
430430
container.append(
431431
'<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
432-
'attribute-code="' + item.code + '" ' +
433-
'attribute-id="' + item.id + '">' +
432+
'data-attribute-code="' + item.code + '" ' +
433+
'data-attribute-id="' + item.id + '">' +
434434
label +
435435
'<div aria-activedescendant="" ' +
436436
'tabindex="0" ' +
@@ -462,7 +462,7 @@ define([
462462
if (showTooltip === 1) {
463463
// Connect Tooltip
464464
container
465-
.find('[option-type="1"], [option-type="2"], [option-type="0"], [option-type="3"]')
465+
.find('[data-option-type="1"], [data-option-type="2"], [data-option-type="0"], [data-option-type="3"]')
466466
.SwatchRendererTooltip();
467467
}
468468

@@ -537,21 +537,22 @@ define([
537537
' aria-checked="false"' +
538538
' aria-describedby="' + controlId + '"' +
539539
' tabindex="0"' +
540-
' option-type="' + type + '"' +
541-
' option-id="' + id + '"' +
542-
' option-label="' + label + '"' +
540+
' data-option-type="' + type + '"' +
541+
' data-option-id="' + id + '"' +
542+
' data-option-label="' + label + '"' +
543543
' aria-label="' + label + '"' +
544-
' option-tooltip-thumb="' + thumb + '"' +
545-
' option-tooltip-value="' + value + '"' +
546544
' role="option"' +
547-
' thumb-width="' + width + '"' +
548-
' thumb-height="' + height + '"';
545+
' data-thumb-width="' + width + '"' +
546+
' data-thumb-height="' + height + '"';
547+
548+
attr += thumb !== '' ? ' data-option-tooltip-thumb="' + thumb + '"' : '';
549+
attr += value !== '' ? ' data-option-tooltip-value="' + value + '"' : '';
549550

550551
swatchImageWidth = _.has(sizeConfig, 'swatchImage') ? sizeConfig.swatchImage.width : 30;
551552
swatchImageHeight = _.has(sizeConfig, 'swatchImage') ? sizeConfig.swatchImage.height : 20;
552553

553554
if (!this.hasOwnProperty('products') || this.products.length <= 0) {
554-
attr += ' option-empty="true"';
555+
attr += ' data-option-empty="true"';
555556
}
556557

557558
if (type === 0) {
@@ -599,14 +600,14 @@ define([
599600

600601
html =
601602
'<select class="' + this.options.classes.selectClass + ' ' + config.code + '">' +
602-
'<option value="0" option-id="0">' + chooseText + '</option>';
603+
'<option value="0" data-option-id="0">' + chooseText + '</option>';
603604

604605
$.each(config.options, function () {
605606
var label = this.label,
606-
attr = ' value="' + this.id + '" option-id="' + this.id + '"';
607+
attr = ' value="' + this.id + '" data-option-id="' + this.id + '"';
607608

608609
if (!this.hasOwnProperty('products') || this.products.length <= 0) {
609-
attr += ' option-empty="true"';
610+
attr += ' data-option-empty="true"';
610611
}
611612

612613
html += '<option ' + attr + '>' + label + '</option>';
@@ -721,7 +722,7 @@ define([
721722
var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
722723
$wrapper = $this.parents('.' + $widget.options.classes.attributeOptionsWrapper),
723724
$label = $parent.find('.' + $widget.options.classes.attributeSelectedOptionLabelClass),
724-
attributeId = $parent.attr('attribute-id'),
725+
attributeId = $parent.data('attribute-id'),
725726
$input = $parent.find('.' + $widget.options.classes.attributeInput),
726727
checkAdditionalData = JSON.parse(this.options.jsonSwatchConfig[attributeId]['additional_data']);
727728

@@ -736,14 +737,14 @@ define([
736737
}
737738

738739
if ($this.hasClass('selected')) {
739-
$parent.removeAttr('option-selected').find('.selected').removeClass('selected');
740+
$parent.removeAttr('data-option-selected').find('.selected').removeClass('selected');
740741
$input.val('');
741742
$label.text('');
742743
$this.attr('aria-checked', false);
743744
} else {
744-
$parent.attr('option-selected', $this.attr('option-id')).find('.selected').removeClass('selected');
745-
$label.text($this.attr('option-label'));
746-
$input.val($this.attr('option-id'));
745+
$parent.attr('data-option-selected', $this.data('option-id')).find('.selected').removeClass('selected');
746+
$label.text($this.data('option-label'));
747+
$input.val($this.data('option-id'));
747748
$input.attr('data-attr-name', this._getAttributeCodeById(attributeId));
748749
$this.addClass('selected');
749750
$widget._toggleCheckedAttributes($this, $wrapper);
@@ -805,7 +806,7 @@ define([
805806
*/
806807
_OnChange: function ($this, $widget) {
807808
var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
808-
attributeId = $parent.attr('attribute-id'),
809+
attributeId = $parent.data('attribute-id'),
809810
$input = $parent.find('.' + $widget.options.classes.attributeInput);
810811

811812
if ($widget.productForm.length > 0) {
@@ -815,10 +816,10 @@ define([
815816
}
816817

817818
if ($this.val() > 0) {
818-
$parent.attr('option-selected', $this.val());
819+
$parent.attr('data-option-selected', $this.val());
819820
$input.val($this.val());
820821
} else {
821-
$parent.removeAttr('option-selected');
822+
$parent.removeAttr('data-option-selected');
822823
$input.val('');
823824
}
824825

@@ -845,8 +846,8 @@ define([
845846
* @private
846847
*/
847848
_Rewind: function (controls) {
848-
controls.find('div[option-id], option[option-id]').removeClass('disabled').removeAttr('disabled');
849-
controls.find('div[option-empty], option[option-empty]')
849+
controls.find('div[data-option-id], option[data-option-id]').removeClass('disabled').removeAttr('disabled');
850+
controls.find('div[data-option-empty], option[data-option-empty]')
850851
.attr('disabled', true)
851852
.addClass('disabled')
852853
.attr('tabindex', '-1');
@@ -859,8 +860,8 @@ define([
859860
*/
860861
_Rebuild: function () {
861862
var $widget = this,
862-
controls = $widget.element.find('.' + $widget.options.classes.attributeClass + '[attribute-id]'),
863-
selected = controls.filter('[option-selected]');
863+
controls = $widget.element.find('.' + $widget.options.classes.attributeClass + '[data-attribute-id]'),
864+
selected = controls.filter('[data-option-selected]');
864865

865866
// Enable all options
866867
$widget._Rewind(controls);
@@ -873,16 +874,16 @@ define([
873874
// Disable not available options
874875
controls.each(function () {
875876
var $this = $(this),
876-
id = $this.attr('attribute-id'),
877+
id = $this.data('attribute-id'),
877878
products = $widget._CalcProducts(id);
878879

879-
if (selected.length === 1 && selected.first().attr('attribute-id') === id) {
880+
if (selected.length === 1 && selected.first().data('attribute-id') === id) {
880881
return;
881882
}
882883

883-
$this.find('[option-id]').each(function () {
884+
$this.find('[data-option-id]').each(function () {
884885
var $element = $(this),
885-
option = $element.attr('option-id');
886+
option = $element.data('option-id');
886887

887888
if (!$widget.optionsMap.hasOwnProperty(id) || !$widget.optionsMap[id].hasOwnProperty(option) ||
888889
$element.hasClass('selected') ||
@@ -905,12 +906,13 @@ define([
905906
*/
906907
_CalcProducts: function ($skipAttributeId) {
907908
var $widget = this,
909+
selectedOptions = '.' + $widget.options.classes.attributeClass + '[data-option-selected]',
908910
products = [];
909911

910912
// Generate intersection of products
911-
$widget.element.find('.' + $widget.options.classes.attributeClass + '[option-selected]').each(function () {
912-
var id = $(this).attr('attribute-id'),
913-
option = $(this).attr('option-selected');
913+
$widget.element.find(selectedOptions).each(function () {
914+
var id = $(this).data('attribute-id'),
915+
option = $(this).attr('data-option-selected');
914916

915917
if ($skipAttributeId !== undefined && $skipAttributeId === id) {
916918
return;
@@ -1322,7 +1324,7 @@ define([
13221324
_EmulateSelected: function (selectedAttributes) {
13231325
$.each(selectedAttributes, $.proxy(function (attributeCode, optionId) {
13241326
var elem = this.element.find('.' + this.options.classes.attributeClass +
1325-
'[attribute-code="' + attributeCode + '"] [option-id="' + optionId + '"]'),
1327+
'[data-attribute-code="' + attributeCode + '"] [data-option-id="' + optionId + '"]'),
13261328
parentInput = elem.parent();
13271329

13281330
if (elem.hasClass('selected')) {
@@ -1346,7 +1348,7 @@ define([
13461348
_EmulateSelectedByAttributeId: function (selectedAttributes) {
13471349
$.each(selectedAttributes, $.proxy(function (attributeId, optionId) {
13481350
var elem = this.element.find('.' + this.options.classes.attributeClass +
1349-
'[attribute-id="' + attributeId + '"] [option-id="' + optionId + '"]'),
1351+
'[data-attribute-id="' + attributeId + '"] [data-option-id="' + optionId + '"]'),
13501352
parentInput = elem.parent();
13511353

13521354
if (elem.hasClass('selected')) {

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

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
?>
1212
<?php $swatchData = $block->getSwatchData(); ?>
1313
<div class="swatch-attribute swatch-layered <?= $block->escapeHtmlAttr($swatchData['attribute_code']) ?>"
14-
attribute-code="<?= $block->escapeHtmlAttr($swatchData['attribute_code']) ?>"
15-
attribute-id="<?= $block->escapeHtmlAttr($swatchData['attribute_id']) ?>">
14+
data-attribute-code="<?= $block->escapeHtmlAttr($swatchData['attribute_code']) ?>"
15+
data-attribute-id="<?= $block->escapeHtmlAttr($swatchData['attribute_id']) ?>">
1616
<div class="swatch-attribute-options clearfix">
1717
<?php foreach ($swatchData['options'] as $option => $label) : ?>
1818
<a href="<?= $block->escapeUrl($label['link']) ?>"
@@ -24,11 +24,11 @@
2424
?>
2525
<div class="swatch-option <?= $block->escapeHtmlAttr($label['custom_style']) ?>"
2626
tabindex="-1"
27-
option-type="3"
28-
option-id="<?= $block->escapeHtmlAttr($option) ?>"
29-
option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
30-
option-tooltip-thumb=""
31-
option-tooltip-value=""
27+
data-option-type="3"
28+
data-option-id="<?= $block->escapeHtmlAttr($option) ?>"
29+
data-option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
30+
data-option-tooltip-thumb=""
31+
data-option-tooltip-value=""
3232
></div>
3333
<?php break;
3434
case '2':
@@ -37,34 +37,34 @@
3737
<?php $swatchImagePath = $block->getSwatchPath('swatch_image', $swatchData['swatches'][$option]['value']); ?>
3838
<div class="swatch-option image <?= $block->escapeHtmlAttr($label['custom_style']) ?>"
3939
tabindex="-1"
40-
option-type="2"
41-
option-id="<?= $block->escapeHtmlAttr($option) ?>"
42-
option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
43-
option-tooltip-thumb="<?= $block->escapeUrl($swatchThumbPath) ?>"
44-
option-tooltip-value=""
40+
data-option-type="2"
41+
data-option-id="<?= $block->escapeHtmlAttr($option) ?>"
42+
data-option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
43+
data-option-tooltip-thumb="<?= $block->escapeUrl($swatchThumbPath) ?>"
44+
data-option-tooltip-value=""
4545
style="background: url(<?= $block->escapeUrl($swatchImagePath) ?>) no-repeat center; background-size: initial;"></div>
4646
<?php break;
4747
case '1':
4848
?>
4949
<div class="swatch-option color <?= $block->escapeHtmlAttr($label['custom_style']) ?>"
5050
tabindex="-1"
51-
option-type="1"
52-
option-id="<?= $block->escapeHtmlAttr($option) ?>"
53-
option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
54-
option-tooltip-thumb=""
55-
option-tooltip-value="<?= $block->escapeHtmlAttr($swatchData['swatches'][$option]['value']) ?>"
51+
data-option-type="1"
52+
data-option-id="<?= $block->escapeHtmlAttr($option) ?>"
53+
data-option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
54+
data-option-tooltip-thumb=""
55+
data-option-tooltip-value="<?= $block->escapeHtmlAttr($swatchData['swatches'][$option]['value']) ?>"
5656
style="background: <?= $block->escapeHtmlAttr($swatchData['swatches'][$option]['value']) ?> no-repeat center; background-size: initial;"></div>
5757
<?php break;
5858
case '0':
5959
default:
6060
?>
6161
<div class="swatch-option text <?= $block->escapeHtmlAttr($label['custom_style']) ?>"
6262
tabindex="-1"
63-
option-type="0"
64-
option-id="<?= $block->escapeHtmlAttr($option) ?>"
65-
option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
66-
option-tooltip-thumb=""
67-
option-tooltip-value=""
63+
data-option-type="0"
64+
data-option-id="<?= $block->escapeHtmlAttr($option) ?>"
65+
data-option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
66+
data-option-tooltip-thumb=""
67+
data-option-tooltip-value=""
6868
><?= $block->escapeHtml($swatchData['swatches'][$option]['value']) ?></div>
6969
<?php break;
7070
} ?>
@@ -77,7 +77,7 @@
7777
<script>
7878
require(["jquery", "Magento_Swatches/js/swatch-renderer"], function ($) {
7979
$('.swatch-layered.<?= $block->escapeJs($swatchData['attribute_code']) ?>')
80-
.find('[option-type="1"], [option-type="2"], [option-type="0"], [option-type="3"]')
80+
.find('[data-option-type="1"], [data-option-type="2"], [data-option-type="0"], [data-option-type="3"]')
8181
.SwatchRendererTooltip();
8282
});
8383
</script>

0 commit comments

Comments
 (0)