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.
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.
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