Get Sku on list image phtml file

Question

I am setting up a new site using 2.4.2 and need to use existing product images which are set up on a CDN, in the following formats: https://website-list.s3.amazonaws.com/xxxxxx.jpg https://website-thumb.s3.amazonaws.com/xxxxxx.jpg https://website-zoom.s3.amazonaws.com/xxxxxx.jpg where xxxxxx is the product sku.

Because of this structure I can't just edit the base media url

I was trying to just hardcode the main url path in and then get the sku, so I need to be able to getSku() on the image phtmls that are part of the category lists etc, as well as standard product view. Currently I'm working on \themefolder\mag-catalog\templates\product\image_with_borders.phtml. Trying something like this:

src="https://website-thumb.s3.amazonaws.com/<?= /* @noEscape */ $block->getSku() ?>.jpg"

I can get ProductId but not Sku. It just comes back blank.

I thought if I set Yes on the Attribute page for "Visible on Catalog Pages on Storefront" and "Used in Product Listing" that it would make this Sku attribute available but it makes no difference.

Any ideas? Thanks!

Edit - I got this to work:

$product_id = $block->getProductId();
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$product = $objectManager->create('Magento\Catalog\Model\Product')->load($product_id);
$sku = $product->getSku();

Is there any reason not to do it this way?

Answer 1

create preference for Magento\Catalog\Block\Product\Image as vendor\module\Block\Product\Image.php

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace vendor\module\Block\Product;

/**
 * Product image block
 *
 * @api
 * @method string getImageUrl()
 * @method string getWidth()
 * @method string getHeight()
 * @method string getLabel()
 * @method float getRatio()
 * @method string getCustomAttributes()
 * @method string getClass()
 * @since 100.0.2
 */
class Image extends \Magento\Catalog\Block\Product\Image
{
    /**
     * @deprecated 102.0.5 Property isn't used
     * @var \Magento\Catalog\Helper\Image
     */
    protected $imageHelper;

    /**
     * @deprecated 102.0.5 Property isn't used
     * @var \Magento\Catalog\Model\Product
     */
    protected $product;

    /**
     * @deprecated 102.0.5 Property isn't used
     * @var array
     */
    protected $attributes = [];

    /**
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param array $data
     */
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        array $data = []
    ) {
        if (isset($data['template'])) {
            $this->setTemplate($data['template']);
            unset($data['template']);
        }
        parent::__construct($context, $data);
}

public function getProductSku($prodid)
{
    return $product->getSku();
}

then ur template file

 $block->getProductSku($prodid)

Answer 2

You shouldn't call objectmanager.

You should extend the Block class in order to receive the productrepository on it's constructor and get the sku that way :)

Here is how to do it. On you di.xml (etc/di.xml) place the following code

<preference for="Magento\Catalog\Block\Product\Image"          type="vendor\module\Preferences\Product\Image"/>

Now under vendor\module\Preferences\Product let's create the file Image.php and place the following code in it

<?php

namespace vendor\module\Preferences\Product;


class Image extends \Magento\Framework\View\Element\Template
{
    
    protected $imageHelper;
    protected $product;
    protected $attributes = [];
    protected $_productloader;
    
    public function __construct(
        \Magento\Catalog\Model\ProductFactory      $productloader
        \Magento\Framework\View\Element\Template\Context $context,      
        array $data = []
    ) {
    
        $this->_productloader = $productloader;
        if (isset($data['template'])) {
            $this->setTemplate($data['template']);
            unset($data['template']);
        }
        parent::__construct($context, $data);
    }
    
    public function getProductSku($productId)
    {
        return $this->_productloader->create()->load($productId)->getSku();
    }
}
?>

After this compile your code and just use <?= $block->getProductSku($your_product_id); ?> where you need inside your template. Let me know if it worked for you and/or you need any further assistance