Magento 2 Change Minicart Product Image from thumbnail to regular image
题
After editing the minicart for a couple of days now i've noticed that the images are smaller versions of the images that you would see on the product pages. This means as i'm upscaling them to fit a larger container they are losing quality.
The file containing the image reference is within Magento_Catalog/web/template/product/image_with_borders.html
although the image src is set like so:
data-bind="attr: {src: src, alt: alt}
I don't really know how I would go about changing the image src but I imagine there is another file somewhere where this references to but I can't find it. Any help appreciated.
解决方案
Try this,
You can edit view.xml in the below path
app/design/{Package}/{Theme-name}/etc/view.xml
add the below code in it
<image id="mini_cart_product_image" type="image">
<width>100</width>
<height>100</height>
</image>
you can change the image type and width/height as per your need
type - It means what type of image should display in the respective places in the frontend.
Explanation:
- image – corresponds to the Base Image role
- small_image – corresponds to the Small Image role
- swatch_image – corresponds to the Swatch Image role
- swatch_thumb – corresponds to the Swatch Image role
- thumbnail – corresponds to the Thumbnail Image role
For more information Look at this
Hope this helps
其他提示
In this topic we will do How to Change Product Image in Minicart
Step 1: Create di.xml file
Step 2: Create Image.php file
Product image in minicart will getten to show by function doGetItemData()
in Magento\Checkout\CustomerData\DefaultItem
class but this function is protected, so we cannot use plugin on it. Instead, it extends from Magento\Checkout\CustomerData\AbstractItem
and use function getItemData()
First We need to create registration and module file as per structure of magento 2 then follow below steps.
Step 1: Create di.xml file
Create di.xml file in app/code/[Name_Space]/[Your_Module]/etc/frontend
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\CustomerData\AbstractItem">
<plugin name="Change_Product_Image_In_Minicart" type="[Name_Space]\[Your_Module]\Plugin\Minicart\Image" sortOrder="1"/>
</type>
</config>
Step 2: Create Image.php file
Create Image.php file in app/code/[Name_Space]\[Your_Module]\Plugin\Minicart
<?php
namespace [Name_Space]\[Your_Module]\Plugin\Minicart;
class Image
{
public function aroundGetItemData($subject, $proceed, $item)
{
$result = $proceed($item);
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$product = $objectManager->create('Magento\Catalog\Model\Product')->load($result['product_id']);
/* thum url */
$storeManager = $objectManager->create('Magento\Store\Model\StoreManagerInterface');
$currentStore = $storeManager->getStore();
$mediaUrl = $currentStore->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
if($product->getThumbnail()){
$result['product_image']['src'] = $mediaUrl.$product->getThumbnail();
}
else{
$result['product_image']['src'];
}
return $result;
}
}