swatch-renderer.js outputs invalid HTML

[thdoan]

Preconditions

1. Magento 2.1.5 (but it exists in all versions)

Steps to reproduce

1. Go to a product page that has swatches, e.g. http://magento2-demo.nexcess.net/caesar-warm-up-pant.html
2. Right-click and Inspect a swatch

Expected result

1. The HTML for the swatch should be valid.

Actual result

1. The swatch HTML is invalid ( "=""):

<div class="swatch-option image selected" option-type="2" 
  option-id="887" 
  option-label="Mossy Oak Break-up Country" 
  option-tooltip-thumb="https://muckbootusuat.specom.io/pub/media/attribute/swatch/swatch_thumb/110x90/s/w/swatch_realtree-apg.png" 
  option-tooltip-value="https://muckbootusuat.specom.io/pub/media/attribute/swatch/swatch_image/30x20/s/w/swatch_realtree-apg.png"
  "=""
  style="background: url(&quot;https://muckbootusuat.specom.io/pub/media/attribute/swatch/swatch_thumb/110x90/s/w/swatch_realtree-apg.png&quot;) center center no-repeat;"></div>

The root cause is in vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js starting at around line 408:

} else if (type === 1) {
    // Color
    html += '<div class="' + optionClass + ' color" ' + attr +
        '" style="background: ' + value +
        ' no-repeat center; background-size: initial;">' + '' +
        '</div>';
} else if (type === 2) {
    // Image
    html += '<div class="' + optionClass + ' image" ' + attr +
        '" style="background: url(' + value + ') no-repeat center; background-size: initial;">' + '' +
        '</div>';
} else if (type === 3) {

To fix this, you need to remove the extra " before the style attribute:

} else if (type === 1) {
    // Color
    html += '<div class="' + optionClass + ' color" ' + attr +
        ' style="background: ' + value +
        ' no-repeat center; background-size: initial;">' + '' +
        '</div>';
} else if (type === 2) {
    // Image
    html += '<div class="' + optionClass + ' image" ' + attr +
        ' style="background: url(' + value + ') no-repeat center; background-size: initial;">' + '' +
        '</div>';
} else if (type === 3) {

[PieterCappelle]

You should create PR with such explanation 👌🏻

[thdoan]

Sorry, I'm not working from the repo (on Enterprise). This is a quick fix, so hope someone can take this on.

[nntoan]

@thdoan Unfortunately, Magento 2 team/contributors fix your problem in the mainline code over here, but it wasn't merged to any releases yet.

I believe they will fix it in the next major release (v2.2).

Have a good day :)