Issue when we create a new product with double quotes in the title

[p3ll3]

Preconditions

1. Magento version 2.2.4
2. PHP 7.0.30-0ubuntu0.16.04.1

Steps to reproduce

1. Go to Catalog >> Products
2. Create a new product with double quotes, e.g. PROBASS BAFLE 15" 1000W
3. Go to the detailed view of the product

Expected result

1. Product loading correctly:
   

Actual result

1. Error in console :
   
2. Tabs of the product section, breadcrumbs, product images and information tabs not loading correctly.
   

Kind regards!

[ghost]

Hello,
We have a solution for this issue, you have faced this issue just because of breadcrumb feature update.
To solve this issue override "breadcrumb.phtml" file in your theme

app/design/frontend/[THEME VENDOR]/[YOUR THEME]/Magento_Catalog/templates/product

path and replace with below code.

<?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": "<?= $block->escapeHtml($block->escapeJsQuote($viewModel->getProductName(), '"')); ?>"
    }
}'>
</div>

Actually this issue is already fixed #15347 and The fix will be available with the upcoming 2.2.5 release. Click here and see.

I hope it will help you !!.

[p3ll3]

Thank you @emiprotech , I'll try that solution and hopefully with the upcoming of Magento 2.2.5 the issue will be solved.

[DanielRuf]

Thank you @emiprotech , I'll try that solution and hopefully with the upcoming of Magento 2.2.5 the issue will be solved.

It's not in 2.2.5.

[DanielRuf]

See 213e11d#diff-3f348dd219394a12da6df66aa9410956

[DanielRuf]

And also

magento2/app/code/Magento/Catalog/ViewModel/Product/Breadcrumbs.php

Line 111 in 40e2672

'product' => $this->getProductName()

[hostep]

In case anyone's interested, here's the patch we use to get it working on Magento 2.2.5.

Apply it to the Magento_Catalog module: ENGCOM-1703-Catalog.diff.txt

Fix is already in 2.2-develop branch as @DanielRuf noticed, by this PR: #15521

The patch isn't an exact implementation of the PR, since other very small commits prevented applying that PR cleanly on Magento 2.2.5, but the patch I've attached above does apply cleanly to Magento 2.2.5

[DanielRuf]

In case anyone's interested, here's the patch we use to get it working on Magento 2.2.5.

Apply it to the Magento_Catalog module: ENGCOM-1703-Catalog.diff.txt

Fix is already in 2.2-develop branch as @DanielRuf noticed, by this PR: #15521

The patch isn't an exact implementation of the PR, since other very small commits prevented applying that PR cleanly on Magento 2.2.5, but the patch I've attached above does apply cleanly to Magento 2.2.5

We use 2.2.5 and it is not fixed. The article name is not escaped. We had to overwrite the ViewModel.

[DanielRuf]

getProductName and "product": "<?= $block->escapeHtml($block->escapeJs($viewModel->getProductName())); ?>" are not the fixed version.

[hostep]

I know, have you checked the patch or the PR? ;)

[DanielRuf]

@magento-engcom-team give me 2.2.5 instance

[magento-engcom-team]

Hi @DanielRuf. Thank you for your request. I'm working on Magento 2.2.5 instance for you

[magento-engcom-team]

Hi @DanielRuf, here is your Magento instance.
Admin access: https://i-15631-2-2-5.engcom.dev.magento.com/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[hostep]

@DanielRuf: it is not fixed in 2.2.5 like I said, you need that patch I've attached to make it work in 2.2.5, hope this is a bit more clear now :)

[DanielRuf]

@DanielRuf: it is not fixed in 2.2.5 like I said, you need that patch I've attached to make it work in 2.2.5, hope this is a bit more clear now :)

Well, the eng team wrote it will be fixed in 2.2.5. Also it is not fixed in 2.2-develop, I see no escaping like it should be used.

[hostep]

Yes, it's like those other fixes that were supposed to go in 2.2.5, the cut of point/date was incorrectly made and so a bunch of fixes that were supposed to go in 2.2.5 didn't make it. Like the other one you fixed for the area code, remember ;). It's the same thing for this fix, it didn't make it in 2.2.5, so it will probably be in 2.2.6

Additional info: fix #15347 was very incorrect, the wrapper escapeHtml should have been removed, only escapeJs was needed for a proper fix. But by json_encoding it, like what is done in #15521, also fixes it.

[DanielRuf]

https://i-15631-2-2-5.engcom.dev.magento.com/test-1-product.html

[DanielRuf]

@magento-engcom-team give me 2.2-develop instance

[magento-engcom-team]

Hi @DanielRuf. Thank you for your request. I'm working on Magento 2.2-develop instance for you

[magento-engcom-team]

Hi @DanielRuf, here is your Magento instance.
Admin access: https://i-15631-2-2-develop.engcom.dev.magento.com/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[hostep]

Can you please show me the page of the 2.2-develop instance, your screenshot is from the 2.2.5 instance.

The fix is definitely here though: https://github.com/magento/magento2/blob/2.2-develop/app/code/Magento/Catalog/view/frontend/templates/product/breadcrumbs.phtml

[DanielRuf]

Weird, the one from the dev branch does not load the page, wait a moment.

[DanielRuf]

See https://i-15631-2-2-develop.engcom.dev.magento.com/catalogsearch/result/?q=product

https://i-15631-2-2-develop.engcom.dev.magento.com/test-1-product.html

[hostep]

Weird, maybe some other new bug, or some caching problem maybe, dunno.

Anyways, I've tested the patch I've refered to above a couple of weeks ago on a 2.2.5 instance, and it solved the issue with the incorrectly escaped characters (" was one of those), so I'm pretty confident the patch works.

The patch is the sum of the last 4 commits in the history of that file: https://github.com/magento/magento2/commits/2.2-develop/app/code/Magento/Catalog/view/frontend/templates/product/breadcrumbs.phtml

[DanielRuf]

This works: https://i-15631-2-2-develop.engcom.dev.magento.com/test-2-product.html

But imho it is not underatandable why the move was needed and why different methods are used and not these values internally escaped for all view and consumers. It feels "hacky". And it also feels bad to still read that it will be in a specific release and it will not be there (this is a critical issue for production shops).

Imho there are too many changes happening here in this part.

[hostep]

I agree, some PR's were accepted too fast without a decent review.

But I like the end result, instead of having to escape every single value of that json structure one by one in the phtml (which was done incorrectly), they've chosen to "simplify" it with a single json_encode call in the ViewModel.

[DanielRuf]

I agree, some PR's were accepted too fast without a decent review.

Which is bad for Magento and its reputation and expectations of fixes.
In this case every PR / change which did not land in 2.2.5 should be available as official patch as this one would be critical for big stores which use parts with inch / " in the article name. Just my two cents about this as this is not the first time and the second time that the change was not in the expected release.

[DanielRuf]

But I like the end result, instead of having to escape every single value of that json structure one by one in the phtml (which was done incorrectly), they've chosen to "simplify" it with a single json_encode call in the ViewModel.

Definitely. But shouldn' we do this then in much more modules? And can this not be done in the phtml too? What does the ViewModel provide here what the phtml can not (availability of helper methods).

json_encode call in the ViewModel

Probably also possible in the phtml file(s) I guess?

[hostep]

Welcome to Magento :)
Where the stability for every new release is a big question mark and where there are a lot of inconsistencies.
I guess that's what happens when you have sooo many developers working on the same product.

I can't really answer about ViewModel vs Block vs phtml, I don't know the right answer to that.

[ghost]

Hi @DanielRuf I was reproduce this issue, with this error in console log

[evagabond]

Hello,
We have a solution for this issue, you have faced this issue just because of breadcrumb feature update.
To solve this issue override "breadcrumb.phtml" file in your theme

app/design/frontend/[THEME VENDOR]/[YOUR THEME]/Magento_Catalog/templates/product

path and replace with below code.

<?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": "<?= $block->escapeHtml($block->escapeJsQuote($viewModel->getProductName(), '"')); ?>"
    }
}'>
</div>

Actually this issue is already fixed #15347 and The fix will be available with the upcoming 2.2.5 release. Click here and see.

I hope it will help you !!.

The issue still exists in 2.2.5. This solution seems to help fix the issue.

[m2-assistant]

Hi @cstergianos. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if you want to validate it one more time, please, go though the following instruction:

• 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• 2. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

• 3. If the issue is not relevant or is not reproducible any more, feel free to close it.

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[cstergianos]

@magento-engcom-team it seems that this issue is not reproducible anymore.Please take a look at the following screenshot for more details:

https://drive.google.com/file/d/1_aJQh2gFpdKy5WVlQdwgOkjhsubKHyu6/view

[yanncharlou]

For the ones that still use the old breadcrumbs way (because of custom megamenu that don't work with magento's breadcrumb js, that's what i put in my magento2/app/design/frontend/me/mytheme/Magento_Catalog/templates/product/breadcrumbs.phtml

Using json_encode seems to me a simpler and cleaner way to pass init parameters.

$viewModel = $block->getData('viewModel');

$init = [
    'breadcrumbs' => [
        'categoryUrlSuffix' => $viewModel->getCategoryUrlSuffix(),
        'useCategoryPathInUrl' => (int) $viewModel->isCategoryUsedInProductUrl(),
        'product' => $viewModel->getProductName()
    ]
];
?>
<div class="breadcrumbs" data-mage-init='<?= htmlspecialchars(json_encode($init)) ?>' ></div>