Shape-and-Shift/shopware-image-hotspot

Shopware 6 plugin to add hotspots with a title and text popover to an image

Short video introduction

Install the plugin

After you cloned the plugin you still have to install the npm dependencies. Go to the administration plugin folder which is located in PLUGIN/src/Resources/app/administration and run an npm install.

Now you can build the administration.

How to show a custom media field with a Hotspot

It is also possible to show the image hotspots on a media type which was generated through a custom field.

First you would need to create of course your custom media type.

Because the media type in custom fields only supports the compact media uploader, we need to set the hotspot directly within the media library.

Head over to your media library and go to the HotSpot image folder Media > Hotspot Images and upload your image.

Open the context menu and click Set image hotspot.

Hotspot Image folder in media library

Next a new modal will open where you can add your hotspots. Just left-click on a position somewhere on your image to create a new hotspot.

To save the hotspot click apply

After you added all your hotspots click save to save your new image hotspot file, which you can choose now for your custom field: for example within your product.

Choose your hotspot image within your custom field media type

Storefront integration

Finally you need some code to show the custom media field with its image hotspots within the Storefront.

To do so the following code would get the custom media field and show the hotspots

{# get the media ID of the custom field #}
{% set hotspotMediaId = page.product.customFields.your_media_custom_field %}

# fetch media as batch - optimized for performance #}
{% set mediaCollection = searchMedia([hotspotMediaId], context.context) %}

{# extract single media object #}
{% set hotspotMedia = mediaCollection.get(hotspotMediaId) %}

{# generate the thumbnail and passing the hotspotEnabled option  #}
{% sw_thumbnails 'hotspot-image' with {
    media: hotspotMedia,
    hotspotEnabled: true
} %}