Magento2: Product Details Page breadcrumbs cause syntax error on products containing quotes

[brian-labelle]

Preconditions

1. Magento version: 2.2.4

Steps to reproduce

1. Add a product with " in the title, e.g. My Product - 19" x 16" Header
2. Navigate to Product Details Page
3. Observe the Syntax Error in the browser console

Expected result

1. Template file should escape " in product name

Actual result

1. Syntax Error occurs in console upon JSON Parse SyntaxError: Unexpected token x in JSON

[brian-labelle]

Magento_Catalog view/frontend/templates/product/breadcrumbs.phtml:

<div class="breadcrumbs" data-mage-init='{
    "breadcrumbs": {
        "categoryUrlSuffix": "<?= $block->escapeHtml($viewModel->getCategoryUrlSuffix()); ?>",
        "useCategoryPathInUrl": <?= (int)$viewModel->isCategoryUsedInProductUrl(); ?>,
        "product": "<?= $block->escapeHtml($viewModel->getProductName()); ?>"
    }
}'>
</div>

To fix the issue, the product name value must go through $block->escapeJs()

[kanduvisla]

I have the same issue here (also 2.2.4). I'll quick fix it for now (thanks @brian-labelle), but this definitely needs to be fixed.

[Bobstar040]

We have the same issue, is there any fix for this already?

[kanduvisla]

@Bobstar040 : my best guess would be to implement the fix as described by @brian-labelle at the moment. I hope that this will be fixed in M2.2.5+ / M2.3, but probably @magento-engcom-team could shed more light on this.

[POLYPERFORMANCE]

Same issue here too with hundreds of products that contain quotes. I'll implement @brian-labelle 's fix.
Nice detailed fix: https://magento.stackexchange.com/q/224587/52084

[chiragp-wagento]

@magento-engcom-team unable to re-produce the issue in 2.2-develop branch, magento version 2.2.6-dev.
#dmcdindia

[jignesh-baldha]

I am working on this at #dmcdindia

[magento-engcom-team]

Hi @brian-labelle. Thank you for your report.
The issue has been fixed in magento/magento2#15347 by @jignesh-baldha in 2.2-develop branch
Related commit(s):

• 6fcfb88a1077602d632c2e8e4037f8cdd147a86b
• bfb39b5bfe24ca0b00de0bf0348db4fb3b5ef3d2
• 8e93b0da2930502e46b933cc57cd6eb98aba7f8a

The fix will be available with the upcoming 2.2.5 release.

[magento-engcom-team]

Hi @brian-labelle. Thank you for your report.
The issue has been fixed in magento/magento2#16148 by @jignesh-baldha in 2.3-develop branch
Related commit(s):

• e9fa7b69611152dae7e4c13838ba9701178c5602
• 388b58700be8b4ff3f9c2457f0766cae57ced289

The fix will be available with the upcoming 2.3.0 release.

[dyron]

Again not in Magento 2.2.5:
https://github.com/magento/magento2/blob/2.2.5/app/code/Magento/Catalog/view/frontend/templates/product/breadcrumbs.phtml#L14

[benhtn]

Since @magento-engcom-team have not implemented this in 2.5.5... For anyone else who needs it, to implement the fix described by @brian-labelle in a theme.
cp app/code/Magento/Catalog/view/frontend/templates/product/breadcrumbs.phtml app/design/frontend/<vendor>/<theme>/Magento_Catalog/templates/product/
then edit
"product": "<?= $block->escapeHtml($viewModel->getProductName()); ?>"
to
"product": "<?= $block->escapeJs($viewModel->getProductName()); ?>"
then clear your cache.

[Quent6457]

https://magento.stackexchange.com/questions/224587/issue-with-magento-2-2-4-quotation-mark-in-product-name-break-product-pages

[divyabhagat]

You have to overwrite the file app/design/frontend/Vendor/Theme/Magento_Catalog/templates/product/breadcrumbs.phtml
then edit
"product": "escapeHtml($viewModel->getProductName()); ?>"
to
"product": "product": "escapeHtml($block->escapeJsQuote($viewModel->getProductName(), '"')); ?>"
then clear your cache.