Magento 2.2.4 Issue – Fix Quotation Mark Breaking Product Pages

productproduct-page

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)"
}
}

Best Answer

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.

Related Solutions

Product Image Helper – How to Resolve Issues with Getting Product Images

So as you have discovered the helper init function actually just populates lots of attributes and then returns itself.

If you look at file /app/design/frontend/base/default/template/catalog/product/view/media.phtml line 40 you will see the following:

$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';

I would assume that looking at this it is safe to cast the helper as a string and use the return string as the image path. The helper has a __toString function that will be used when you perform the cast to string.

Edit

When assigning the imageUrl variable to the array it will only assign a reference so you will always get the last one when you come back to this array in the template. If you really want to have the object in the images then try the following.

$image['imageUrl'] = clone $imageUrl;

This will create a separate copy of the object each time. Personally I think that casting it would be the best solution though.

Magento Product Attributes – Add and Set Default Value

tl;dr: For select attributes this cannot be declared directly in the initial addAttribute() call; two calls are required.

In order to set the default value, eav_attribute.defaultmust be set with the primary key value from the eav_attribute_option table At a high level the need for two calls is apparent by looking at the flow and function of the addAttribute() and addAttributeOption() methods:

Prepare values
Insert/update into the eav_attribute table
Insert/update set/group
Call addAttributeOption() to insert/update option values

The only hope then would be that addAttributeOption() will be able to update the eav_attribute record. However, there is no code which does this. The only tables accessed by this method are eav_attribute_option and eav_attribute_option_value.

It is therefore necessary to call getAttribute() after the initial addAttribute() call, grab the attribute option ID and then call updateAttribute().

Edit:

After the earlier answer I couldn't help but verify my answer against the existing code; after all, for catalog_product entities we have a nice MVC flow to follow thanks to the attribute CRUD GUI. And there it was, in \Mage_Adminhtml_Catalog_Product_AttributeController::saveAction(), that I saw the attribute model being set with the following data just before being saved:

Option and option configuration data visualized with PhpStorm & Xdebug

Note that the attribute's default value has references to the value keys. Do a little digging and you end up at \Mage_Eav_Model_Resource_Entity_Attribute::_saveOption(), which is called from this resource's _afterSave() method - just as you'd expect given that we need to have an eav_attribute record to update. You can even see how multiselect and select defaults are handled in the same place, just before the final update:

$bind  = array('default_value' => implode(',', $attributeDefaultValue));
$where = array('attribute_id =?' => $object->getId());
$adapter->update($this->getMainTable(), $bind, $where);

So, another alternative is to work directly with the resource model.

Best Answer

Related Solutions

Product Image Helper – How to Resolve Issues with Getting Product Images

Magento Product Attributes – Add and Set Default Value

Related Topic