M2: product attributes as icons

[kuono]

I'm searching for an extension that would make it possible to add icons for product attributes and then show them at frontend at suitable places. Is there such extension available?

[Robert Rand]

Check out https://marketplace.magento.com/amasty-shopby.html

Specifically, this feature: "attributes' icons in the navigation help to recognize the desired options at first sight"

Best of luck!

[Rahul Gupta]

@kuono You can use this to show icons as attribute value.

show icon as attibute value 

Thanks

[kuono]

@Robert Rand Thanks for your suggestion. I'm not sure if this meets the requirements. Is it possible to show the icons on product page, because that is mainly my need? I don't think I need the icons in layered navigation.

[Rahul Gupta]

@kuono You dont have to use any extension for this.

Just go to Store>Product>Attribute and create a new Attribute with its input type as media image.

Now you can just add icon to this attribute.

How to resize image? We need this image as an icon so it should be of 50 px * 50 px.

Open the view.xml file from below location of your current theme:   

App/<vendor>/<Theme>/etc/view.xml

If it is not there then copy file from its parent category. Then after define image attribute in Magento Catalog:

<images module="Magento_Catalog">
    <image id="diamond_icon" type="diamond_icon">
        <width>50</width>
        <height>50</height>
    </image>

In your custom phtml file

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$mediaUrl =  $objectManager->get('Magento\Store\Model\StoreManagerInterface')
             ->getStore()
             ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA); 

Now write the following code in foreach loop:

$diamondIcon=$_product->getResource()->getAttribute('diamond_icon')->getFrontend()->getValue($_product);

And then add image tag to display custom attribute in product listing page.

<img src=" <?php echo $mediaUrl."catalog/product".$diamondIcon ?>" /> 

Now, you need to set the “Used in Product Listing” option under "Storefront property" menu as 'Yes'. But for that you have to follow the below steps:

Because of some bug of Magento, when you edit media image type attribute, then the menu of “Storefront Properties” would be hidden. From that menu you need to change the value of “Used in Product Listing”. So first of all you need to unhide that menu from the inspect element of your browser. Press F12 and inspect the ‘ATTRIBUTE INFORMATION’ portion of the attribute edit grid. Inside that <div> there are 3 <li> tags out of which the third is given "display: none" style.

Change it to "display: block". Now you can view the third menu named “Storefront properties” from where you need to set the property “Used in Product Listing” as Yes.

Let me know if you have any concern.

Thanks

[Rahul Gupta]

@kuono The code which i gave you is for product page.
please check once if it meets your requirement.

Thanks

[Milople]

@kuono 

Hello,

We can get you this type of extension specially for you!

Just drop your requirement at support@milople.com,

we will provide the best fit for your requirements.

Thank you!