2

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)"
}
}
  • Not working after replacing with "product": "<?= htmlspecialchars($block->escapeHtml($viewModel->getProductName())); ?>" in breadcrumbs – Somya Sep 9 at 7:51
5

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.

  • 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 " – Mohammed Joraid Jul 10 '18 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 Jul 10 '18 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. – Mohammed Joraid Jul 10 '18 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 Jul 10 '18 at 9:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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