-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 4d18e70
Showing
61 changed files
with
2,926 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
### 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`. | ||
|
||
![](https://res.cloudinary.com/dtgdh7noz/image/upload/v1614600120/Hotspot%20Plugin/Bildschirmfoto_2021-03-01_um_14.01.22_cxdpu4.png) | ||
*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. | ||
|
||
![](https://res.cloudinary.com/dtgdh7noz/image/upload/v1614600322/Hotspot%20Plugin/Bildschirmfoto_2021-03-01_um_14.04.49_q9xm4u.png) | ||
*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. | ||
|
||
![](https://res.cloudinary.com/dtgdh7noz/image/upload/v1614600531/Hotspot%20Plugin/Bildschirmfoto_2021-03-01_um_14.08.07_zkkouu.png) | ||
*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 | ||
} %} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
{ | ||
"name": "sas/image-hotspot", | ||
"description": "Image Hotspot Plugin for Shopware 6", | ||
"type": "shopware-platform-plugin", | ||
"version":"1.0.0", | ||
"license": "MIT", | ||
"autoload": { | ||
"psr-4": { | ||
"SasImageHotspot\\": "src/" | ||
} | ||
}, | ||
"extra": { | ||
"shopware-plugin-class": "SasImageHotspot\\SasImageHotspot", | ||
"label": { | ||
"de-DE": "Image Hotspot Plugin for Shopware 6", | ||
"en-GB": "Image Hotspot Plugin for Shopware 6" | ||
}, | ||
"plugin-icon":"src/Resources/config/plugin.png", | ||
"description":{ | ||
"de-DE":"Image Hotspot Plugin for Shopware 6", | ||
"en-GB":"Image Hotspot Plugin for Shopware 6" | ||
}, | ||
"manufacturerLink":{ | ||
"de-DE":"https://shapeandshift.dev", | ||
"en-GB":"https://shapeandshift.dev" | ||
}, | ||
"supportLink":{ | ||
"de-DE":"https://shapeandshift.dev", | ||
"en-GB":"https://shapeandshift.dev" | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
<?php declare(strict_types=1); | ||
|
||
namespace SasImageHotspot\Content\Extension; | ||
|
||
use SasImageHotspot\Content\ImageHotspot\ImageHotspotDefinition; | ||
use SasImageHotspot\Content\ImageHotspotMap\ImageHotspotMapDefinition; | ||
use Shopware\Core\Content\Media\MediaDefinition; | ||
use Shopware\Core\Framework\DataAbstractionLayer\EntityExtension; | ||
use Shopware\Core\Framework\DataAbstractionLayer\Field\Flag\CascadeDelete; | ||
use Shopware\Core\Framework\DataAbstractionLayer\Field\OneToManyAssociationField; | ||
use Shopware\Core\Framework\DataAbstractionLayer\Field\OneToOneAssociationField; | ||
use Shopware\Core\Framework\DataAbstractionLayer\FieldCollection; | ||
|
||
class MediaEntityExtension extends EntityExtension | ||
{ | ||
public function extendFields(FieldCollection $collection): void | ||
{ | ||
$collection->add( | ||
(new OneToOneAssociationField('hotspotMap', 'id', 'media_id', ImageHotspotMapDefinition::class, false))->addFlags(new CascadeDelete()) | ||
); | ||
|
||
$collection->add( | ||
(new OneToManyAssociationField('hotspots', ImageHotspotDefinition::class, 'media_id', 'id'))->addFlags(new CascadeDelete()) | ||
); | ||
} | ||
|
||
public function getDefinitionClass(): string | ||
{ | ||
return MediaDefinition::class; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
<?php declare(strict_types=1); | ||
|
||
namespace SasImageHotspot\Content\ImageHotspot; | ||
|
||
use Shopware\Core\Framework\DataAbstractionLayer\EntityCollection; | ||
|
||
/** | ||
* @method void add(ImageHotspotEntity $entity) | ||
* @method void set(string $key, ImageHotspotEntity $entity) | ||
* @method ImageHotspotEntity[] getIterator() | ||
* @method ImageHotspotEntity[] getElements() | ||
* @method ImageHotspotEntity|null get(string $key) | ||
* @method ImageHotspotEntity|null first() | ||
* @method ImageHotspotEntity|null last() | ||
*/ | ||
class ImageHotspotCollection extends EntityCollection | ||
{ | ||
public function getApiAlias(): string | ||
{ | ||
return 'sas_image_hotspot_collection'; | ||
} | ||
|
||
protected function getExpectedClass(): string | ||
{ | ||
return ImageHotspotEntity::class; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
<?php declare(strict_types=1); | ||
|
||
namespace SasImageHotspot\Content\ImageHotspot; | ||
|
||
use SasImageHotspot\Content\ImageHotspot\ImageHotspotTranslation\ImageHotspotTranslationDefinition; | ||
use SasImageHotspot\Content\ImageHotspotMap\ImageHotspotMapDefinition; | ||
use Shopware\Core\Content\Media\MediaDefinition; | ||
use Shopware\Core\Content\Product\ProductDefinition; | ||
use Shopware\Core\Framework\DataAbstractionLayer\EntityDefinition; | ||
use Shopware\Core\Framework\DataAbstractionLayer\Field\FkField; | ||
use Shopware\Core\Framework\DataAbstractionLayer\Field\Flag\AllowHtml; | ||
use Shopware\Core\Framework\DataAbstractionLayer\Field\Flag\PrimaryKey; | ||
use Shopware\Core\Framework\DataAbstractionLayer\Field\Flag\Required; | ||
use Shopware\Core\Framework\DataAbstractionLayer\Field\FloatField; | ||
use Shopware\Core\Framework\DataAbstractionLayer\Field\IdField; | ||
use Shopware\Core\Framework\DataAbstractionLayer\Field\ManyToOneAssociationField; | ||
use Shopware\Core\Framework\DataAbstractionLayer\Field\TranslatedField; | ||
use Shopware\Core\Framework\DataAbstractionLayer\Field\TranslationsAssociationField; | ||
use Shopware\Core\Framework\DataAbstractionLayer\FieldCollection; | ||
|
||
class ImageHotspotDefinition extends EntityDefinition | ||
{ | ||
public const ENTITY_NAME = 'sas_image_hotspot'; | ||
|
||
public function getEntityName(): string | ||
{ | ||
return self::ENTITY_NAME; | ||
} | ||
|
||
public function getEntityClass(): string | ||
{ | ||
return ImageHotspotEntity::class; | ||
} | ||
|
||
public function getCollectionClass(): string | ||
{ | ||
return ImageHotspotCollection::class; | ||
} | ||
|
||
protected function defineFields(): FieldCollection | ||
{ | ||
return new FieldCollection([ | ||
(new IdField('id', 'id'))->setFlags(new PrimaryKey(), new Required()), | ||
|
||
(new FkField('map_id', 'mapId', ImageHotspotMapDefinition::class))->addFlags(new Required()), | ||
|
||
(new FloatField('top', 'top'))->addFlags(new Required()), | ||
(new FloatField('left', 'left'))->addFlags(new Required()), | ||
|
||
(new TranslatedField('description'))->addFlags(new AllowHtml()), | ||
(new TranslatedField('title'))->addFlags(new AllowHtml()), | ||
new TranslatedField('link'), | ||
new TranslatedField('customFields'), | ||
new TranslatedField('openNewTab'), | ||
|
||
new FkField('product_id', 'productId', ProductDefinition::class), | ||
new FkField('media_id', 'mediaId', MediaDefinition::class), | ||
new ManyToOneAssociationField('product', 'product_id', ProductDefinition::class, 'id', false), | ||
new ManyToOneAssociationField('media', 'media_id', MediaDefinition::class, 'id', false), | ||
|
||
new ManyToOneAssociationField('map', 'map_id', ImageHotspotMapDefinition::class, 'id', false), | ||
|
||
(new TranslationsAssociationField(ImageHotspotTranslationDefinition::class, 'sas_image_hotspot_id'))->addFlags(new Required()), | ||
]); | ||
} | ||
} |
Oops, something went wrong.