Skip to content

i have issue after searching on the product

i have issue after searching on any product the issue from image_with_borders.phtml

enter image description here

all code

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<?php
/** @var $block MagentoCatalogBlockProductImage */
/** @var $escaper MagentoFrameworkEscaper */
/** @var MagentoFrameworkViewHelperSecureHtmlRenderer $secureRenderer */
/**
 * Enable lazy loading for images with borders and if variable enable_lazy_loading_for_images_without_borders
 * is enabled in view.xml. Otherwise small size images without borders may be distorted. So max-width is used for them
 * to prevent stretching and lazy loading does not work.
 */
$borders                         = (bool)$block->getVar('product_image_white_borders', 'Magento_Catalog');
$enableLazyLoadingWithoutBorders = (bool)$block->getVar(
    'enable_lazy_loading_for_images_without_borders',
    'Magento_Catalog'
);
$width                           = (int)$block->getWidth();
$paddingBottom                   = $block->getRatio() * 100;
$_config                         = $this->helper('SmThemecoreHelperData');
$enableLadyLoading               = $_config->getAdvanced('lazyload_group/enable_ladyloading');
$mediaSrc                        = $_config->getMediaUrl();
if ($enableLadyLoading) {
    $imgClass = 'lazyload';
} else {
    $imgClass = '';
}
?>
<span class="product-image-container product-image-container-<?= /* @noEscape */
$block->getProductId() ?>" style="width: <?php echo $width . "px"; ?>">
    <span class="product-image-wrapper">
        <img class="<?= $escaper->escapeHtmlAttr($block->getClass()) ?> <?php echo $imgClass; ?>"
            <?php foreach ($block->getCustomAttributes() as $name => $value): ?>
                <?= $escaper->escapeHtmlAttr($name) ?>="<?= $escaper->escapeHtmlAttr($value) ?>"
            <?php endforeach; ?>
        <?php if ($enableLadyLoading) { ?>
            src="<?php echo $mediaSrc . 'lazyloading/blank.png'; ?>"
            data-src="<?= $escaper->escapeUrl($block->getImageUrl()) ?>"
        <?php } else { ?>
            src="<?= $escaper->escapeUrl($block->getImageUrl()) ?>"
        <?php } ?>
            loading="lazy"
            <?php if ($borders || $enableLazyLoadingWithoutBorders): ?>
                width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
                height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
            <?php else: ?>
                max-width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
                max-height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
            <?php endif; ?>
            alt="<?= $escaper->escapeHtmlAttr($block->getLabel()) ?>"/></span>
</span>
<?php
$styles = <<<STYLE
/**
.product-image-container-{$block->getProductId()} {
    width: {$width}px;
}
*/
.product-image-container-{$block->getProductId()} span.product-image-wrapper {
    padding-bottom: {$paddingBottom}%;
}
STYLE;
//In case a script was using "style" attributes of these elements
$script = <<<SCRIPT
prodImageContainers = document.querySelectorAll(".product-image-container-{$block->getProductId()}");
/**
for (var i = 0; i < prodImageContainers.length; i++) {
    prodImageContainers[i].style.width = "{$width}px";
}
*/
prodImageContainersWrappers = document.querySelectorAll(
    ".product-image-container-{$block->getProductId()}  span.product-image-wrapper"
);
for (var i = 0; i < prodImageContainersWrappers.length; i++) {
    prodImageContainersWrappers[i].style.paddingBottom = "{$paddingBottom}%";
}
SCRIPT;
?>
<?= /* @noEscape */
$secureRenderer->renderTag('style', [], $styles, false) ?>
<?= /* @noEscape */