Cart Images: Get Product Image in Customer Cart Magento 2 REST API

in this article, I am going to explain how we can get the customer cart images in Magento 2 REST API. Magento 2 default rest API doesn't have the functionality to get cart items with images so we have to implement the custom plugin to get the customer cart product image.

Magento 2 product images are displayed in the cart as a thumbnail after adding the product to the cart that helps customers a quick overview for the convenience to review his product before buying.

However, if the product has multiple options for the color then, It may also be that the color does not match the variation of the product that is in the cart. If the customer also adds a product of a particular type of color, then the product image of the same color will appear in his cart.

Customer Cart Images

 

Steps To Get Customer Cart Product Images

We will create a Magento 2 model to get the product images containing the customer's cart. To make them, we have to create some files like:

app/code/Wishusucess/CartImages/registration.php

app/code/Wishusucess/CartImages/etc/module.xml

app/code/Wishusucess/CartImages/etc/extension_attributes.xml

app/code/Wishusucess/CartImages/etc/webapi_rest/di.xml

app/code/Wishusucess/CartImages/Plugin/QuotePlugin.php

Within this model, we also need to create a plugin that will modify the behavior of the default cart functionality of Magento and we will see links to the product images.

So by using this module you will get the images of each product in the customer cart list.

 

Magento 2 Configure Cart Thumbnails

If you looking for the setting of the Grouped Product Image to change the product thumbnail then you can use it in the cart for grouped products:

Product Thumbnail Itself: Uses the thumbnail assigned to the product variation that is added to the cart.

Parent Product Thumbnails: Uses the thumbnail assigned to the parent product.

Admin > Stores > Settings > Configuration.

 

Step 1: Create Cart Images Registration File

app/code/Wishusucess/CartImages/registration.php

<?php
/**
* Category: Wishusucess_CartImages
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Wishusucess_CartImages',
__DIR__
);

 

Step 2: Module XML File

app/code/Wishusucess/CartImages/etc/module.xml

<?xml version="1.0"?>
<!--
/**
* Category: Wishusucess_CartImages
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Wishusucess_CartImages" setup_version="2.0.0" />
</config>

 

Step 3: Extension Attributes File for Cart Images

app/code/Wishusucess/CartImages/etc/extension_attributes.xml

<?xml version="1.0"?>
<!---
/**
* Category: Wishusucess_CartImages
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
<extension_attributes for="Magento\Quote\Api\Data\CartItemInterface">
<attribute code="image" type="string" />
</extension_attributes>
</config>

 

Step 4: Dependency Injection File

app/code/Wishusucess/CartImages/etc/webapi_rest/di.xml\

<?xml version="1.0" ?>
<!--
/**
* Category: Wishusucess_CartImages
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Quote\Api\CartRepositoryInterface">
<plugin name="add_more_info" type="Wishusucess\CartImages\Plugin\QuotePlugin" sortOrder="10" />
</type>
</config>

 

Step 5: Create Cart Images Quote Plugin

app/code/Wishusucess/CartImages/Plugin/QuotePlugin.php

<?php
/**
* Category: Wishusucess_CartImages
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
namespace Wishusucess\CartImages\Plugin;

use Magento\Quote\Api\Data\CartInterface;

class QuotePlugin {

/**
* @var \Magento\Quote\Api\Data\CartItemExtensionFactory
*/
protected $cartItemExtension;

/**
* @var \Magento\Catalog\Api\ProductRepositoryInterface
*/
protected $productRepository;

/**
* @param \Magento\Quote\Api\Data\CartItemExtensionFactory $cartItemExtension
* @param \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
*/
public function __construct(
\Magento\Quote\Api\Data\CartItemExtensionFactory $cartItemExtension, 
\Magento\Catalog\Api\ProductRepositoryInterfaceFactory $productRepository ) {
$this->cartItemExtension = $cartItemExtension;
$this->productRepository = $productRepository;
}

/**
* Add attribute values
*
* @param \Magento\Quote\Api\CartRepositoryInterface $subject,
* @param $quote
* @return $quoteData
*/
public function afterGet(
\Magento\Quote\Api\CartRepositoryInterface $subject, $quote
) {
$quoteData = $this->setAttributeValue($quote);
return $quoteData;
}

/**
* Add attribute values
*
* @param \Magento\Quote\Api\CartRepositoryInterface $subject,
* @param $quote
* @return $quoteData
*/
public function afterGetActiveForCustomer(
\Magento\Quote\Api\CartRepositoryInterface $subject, $quote
) {
$quoteData = $this->setAttributeValue($quote);
return $quoteData;
}

/**
* set value of attributes
*
* @param $product,
* @return $extensionAttributes
*/
private function setAttributeValue($quote) {
$data = [];
if ($quote->getItemsCount()) {
foreach ($quote->getItems() as $item) { 
$data = [];
$extensionAttributes = $item->getExtensionAttributes();
if ($extensionAttributes === null) {
$extensionAttributes = $this->cartItemExtension->create();
}
$productData = $this->productRepository->create()->get($item->getSku()); 
$extensionAttributes->setImage($productData->getThumbnail());

$item->setExtensionAttributes($extensionAttributes);
}
}

return $quote;
}

}

 

Step 6: Final Result of Cart REST API

So, in the end, you will get to see some such results. Along with other details of the product, you will also get to see the image URL of the product.

Customer Cart Product REST API

 

Check on GitHub

 

Conclusion:

We do not get the images of the product added by the customer in the Magento 2 default API, but we can get it through a custom extension, for we have created a plugin that is a perfect solution.

 

Similar Post:

Product Alert API: Get Magento 2 Product Alert Using API

How to Override Block, Controller, and Model in Magento 2

Factory Class: What is Factory Design Pattern in Magento 2

 

Leave a Reply