Magento2: Add Manufacturer image to details page
-
12-12-2020 - |
Question
In Magento 2.1, I need to add manufacturer's logo in product detail page. Now, I added an attribute manufacturer
from the backend.
I did that by going to Stores -> Attribute set
then choosing Default. then there was two Unassigned Attributes, Color and Manufacturer. I dragged manufacturer into Product Details under Groups. Now I have a dropdown list at the backend's product catalog page (Product -> catalog -> edit/add the product ).
Now I need to implement when I choose a manufacturer from that dropdown, in that product's, product detail page manufacturer image should be displayed.
How do I accomplish that?
Solution 2
I've accomplished this without creating a module. Hope this may helps somebody
- I created custom product attribute. which allows user to choose manufacturer from dropdown list.
- I get image from app->design>[my vendor]->[my theme]->web->images->products, and image name will be equal to name selected from above dropdown.
- Added layout in xml where I need this image should be.
- used phtml file to locate image and display.
1.
From admin menu, Stores->Attributes->product
Create new attribute. Default Label(your name)
, Catalog Input Type for Store Owner(dropdown)
, Values Required(No)
. under Manage Options (Values of Your Attribute)
you can add your options.
2.
You can choose any location as you need.
3.
This could be different for your needs,
<referenceContainer name="product.details.section" >
<container name="brand.logo" htmlTag="div" htmlClass="right-brand" before="-">
<block class="Magento\Catalog\Block\Product\View" name="customBrandLogo" template="product/view/custombrandlogo.phtml"/>
</container>
4.
in my case, phtml file is custombrandlogo.phtml located at Magento_Catalog->templates->product->view
I get manufacturer name from backend menu,
<?php
$_product = $this->getProduct();
$manufacturerName = $_product->getAttributeText('manufacturer');
$manufacturerId = $_product->getManufacturer();
//php close tag will be at the end
I convert name into lowercase and replaces underscores with spaces.
$manufacturerName= strtolower($manufacturerName);
$manufacturerName=str_replace(' ', '_',$manufacturerName);
I get image path
$imgPath=$this->getViewFileUrl("{$imgPath}/{$manufacturerName}" );
//php tag is closed?>
_Finally display image with img
tag.
<img class="img-responsive" src="<?php echo $imgPath ?>.png" alt="<?php echo $manufacturerName; ?>" /></a>
I hardcoded image extension as .png
OTHER TIPS
Create a module for this task.
Store all your Manufacturer images at path Company/Module/view/frontend/web/images/
with the exact name of menufacturer.
Then, you need to override template file for the product page and get Manufacturer Label in that template file:
$menufacturer = $_product->getResource()->getAttribute('manufacturer')->getFrontend()->getValue($_product);
Then, you can insert image like this:
<img src='<?php echo $this->getViewFileUrl('Company_Module::images/' . $menufacturer . '.png'); ?>' alt="<?php echo $menufacturer ?>" width="30" height="25">
<?php/***********Display Brand Attribute in detail page************/?>
<?php
if($_product->getManufacturer()){
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');//get current category
$brand_value = $_product->getResource()->getAttribute('manufacturer')->getFrontend()->getValue($_product);
$brand_id = $_product->getManufacturer();
$curnt_cat_url = $category->getUrl();
$brandId = '?manufacturer='.$brand_id;
$om = \Magento\Framework\App\ObjectManager::getInstance();
$swatchHelper=$om->get("Magento\Swatches\Helper\Media");
$swatchCollection = $om->create('Magento\Swatches\Model\ResourceModel\Swatch\Collection');
$swatchCollection->addFieldtoFilter('option_id',$brand_id);
$item=$swatchCollection->getFirstItem();
$ThumbImage = $swatchHelper->getSwatchAttributeImage('swatch_thumb', $item->getValue());
$SwatchImage = $swatchHelper->getSwatchAttributeImage('swatch_image', $item->getValue());
?>
<div class="brand_bg">
<a href="<?php echo $curnt_cat_url.$brandId; ?>" title="<?php echo $brand_value; ?>" ><img src="<?php echo $ThumbImage; ?>"></a>
</div>
<?php } ?>
<?php/***********End Brand Attribute************/?>