3

I have just installed Magento 2.2.4 to try out and have so far noticed a few issues in my first half hour. Was wondering if this is just my custom installation or is happening for anyone else.

The product images alt attribute seems to be loaded asynchronously and appended under the product image. The product page seems to stop processing javascript just before this however breaking the page. This seems to fail if a quotation mark exists in the product name (e.g. 12" Ruler (30cm)) throwing the below error:

Uncaught SyntaxError: Unexpected token ( in JSON at position 129
at JSON.parse (<anonymous>)
at getData (main.js:58)
at Array.map (<anonymous>)
at HTMLDocument.apply (main.js:74)
at fire (jquery.js:3232)
at Object.add [as done] (jquery.js:3291)
at jQuery.fn.init.jQuery.fn.ready (jquery.js:3542)
at jQuery.fn.init (jquery.js:2967)
at new jQuery.fn.init (jquery-migrate.js:225)
at jQuery (jquery.js:75)

Switching the product name fixed the immediate issue however there are many items with quotation marks to change and want to solve this without changing product names.

It seems that quotations in product names are not being escaped for the breadcrumbs as logging the object just before the error shows below:

{
"breadcrumbs": {
    "categoryUrlSuffix": ".html",
    "useCategoryPathInUrl": 0,
    "product": "12" Ruler (30cm)"
}
}
1
  • Not working after replacing with "product": "<?= htmlspecialchars($block->escapeHtml($viewModel->getProductName())); ?>" in breadcrumbs
    – Somya
    Commented Sep 9, 2019 at 7:51

1 Answer 1

7

For now I have overridden the file for the breadcrumbs within my own theme.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
/** @var \Magento\Theme\Block\Html\Breadcrumbs $block */
/** @var \Magento\Catalog\ViewModel\Product\Breadcrumbs $viewModel */
$viewModel = $block->getData('viewModel');
?>
<div class="breadcrumbs" data-mage-init='{
    "breadcrumbs": {
        "categoryUrlSuffix": "<?= $block->escapeHtml($viewModel->getCategoryUrlSuffix()); ?>",
        "useCategoryPathInUrl": <?= (int)$viewModel->isCategoryUsedInProductUrl(); ?>,
        "product": "<?= htmlspecialchars($block->escapeHtml($viewModel->getProductName())); ?>"
    }
}'>
</div>

Replace line 14 adding the htmlspecialchars function to format quotations within the product name on breadcrumbs json as &quot:

Original:

"product": "<?= $block->escapeHtml($viewModel->getProductName()); ?>"

vendor/magento/module-catalog/view/frontend/templates/product/breadcrumbs.phtml

Replaced with:

"product": "<?= htmlspecialchars($block->escapeHtml($viewModel->getProductName())); ?>"

app/design/frontend/ThemeVendor/ThemeName/Magento_Catalog/templates/product/breadcrumbs.phtml

There is probably a more elegant way of fixing this however this will do for now.

4
  • Even though this fixes the initial issue and the product image starts to load fine, the breadcrumbs now show HTML code &quot; instead of character " Commented Jul 10, 2018 at 7:37
  • 1
    Hmm i didn't notice it doing that. Have a look here: github.com/magento/magento2/issues/15268 They have a solution in there that looks different to mine that prob works better.
    – harri
    Commented Jul 10, 2018 at 7:48
  • Thank you. I can confirm the solution mentioned in the GitHub link you provided did actually fix the issue for me. I believe the difference is in the escape function and the order of use. It is uses escapeJsQuote first then escapeHtml. Appreciated. Commented Jul 10, 2018 at 8:40
  • Awesome thanks for letting me know, yeah i replace breadcrumbs in my instances as i don't like the way they normally work so that is why i haven't noticed. I will update my answer.
    – harri
    Commented Jul 10, 2018 at 9:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.