Last Updated on January 30, 2023

When working with the Shopware 6 admin interface, you can upload the file in the Shopware 6 system configuration. The admin interface in Shopware 6 accepts all types of input types such as text files, radio buttons, drop-downs, and multiple selects that are plain, encrypted, or serialized and then displayed in various ways such as grids, forms, simple fields, and images.

Shopware, in particular, allows you to extend the default interface, allowing you to freely add fields. In this guide, we will learn How to Add Custom Media in Shopware 6 Admin Config Settings.

1. Add the code to this location

custom/plugins/PluginName/src/Resources/app/administration/src/module/sw-cms/elements/elementFolderName/index.js

code example : To add custom Media

defaultConfig: {
customImageMedia:{
source: 'static',
value: '',
entity: {
name: 'customImageMedia'
}
}
}

2. After that you need to add block in the config template

add the given code on the given location :

custom/plugins/PluginName/src/Resources/app/administration/src/module/sw-cms/elements/elementFolderName/config/FileTemplateName.html.twig

{% block sw_cms_element_image_config_customImageMedia_upload %}
<sw-cms-mapping-field label="Image" valueTypes="entity" entity="customImageMedia" v-model="element.config.customImageMedia">
<sw-media-upload-v2 variant="regular"
:uploadTag="uploadCustomImageMediaTag"
:source="previewCustomImageMediaSource"
:allowMultiSelect="false"
:defaultFolder="cmsPageState.pageEntityName"
:caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
@media-upload-sidebar-open="onOpenCustomImageMediaModal"
@media-upload-remove-image="onCustomImageMediaRemove">
</sw-media-upload-v2>
</sw-cms-mapping-field>
<sw-upload-listener
:uploadTag="uploadCustomImageMediaTag"
autoUpload
@media-upload-finish="onCustomImageMediaUpload">
</sw-upload-listener>
{% endblock %}
{% block sw_cms_element_image_config_customImageMedia_modal %}
<sw-media-modal-v2
variant="regular"
v-if="customImageMediaModalIsOpen"
:caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
:entityContext="cmsPageState.entityName"
:allowMultiSelect="false"
:initialFolderId="cmsPageState.defaultMediaFolderId"
@media-upload-remove-image="onCustomImageMediaRemove"
@media-modal-selection-change="onCustomImageMediaSelectionChanges"
@modal-close="onCustomImageMediaCloseModal">
</sw-media-modal-v2>
{% endblock %}

3. After that you need to add the given code on the given location:

Custom media add in shopware 6
custom/plugins/PluginName/src/Resources/app/administration/src/module/sw-cms/elements/elementFolderName/config/index.js


data() {
return {
initialFolderId: null,
customImageMediaModalIsOpen: false
};
},

computed: {
uploadCustomImageMediaTag() {
return `cms-element-advancedslider-customImageMedia-config-${this.element.id}`;
},
previewCustomImageMediaSource() {
if (this.element.data && this.element.data.customImageMedia && this.element.data.customImageMedia.id) {
return this.element.data.customImageMedia;
}
return this.element.config.customImageMedia.value;
},
customImageMediaRepository() {
return this.repositoryFactory.create(‘media’);
}
}

methods: {
async createdComponent() {
this.initElementConfig(‘media’);
},
onOpenCustomImageMediaModal() {
this.customImageMediaModalIsOpen = true;
},
onCustomImageMediaRemove() {
this.element.config.customImageMedia.value = null;
this.updateCustomImageMediaElementData();
this.$emit(‘element-update’, this.element);
},
async onCustomImageMediaUpload({ targetId }) {
const mediaEntity = await this.customImageMediaRepository.get(targetId);

this.element.config.customImageMedia.value = mediaEntity.id;

this.updateCustomImageMediaElementData(mediaEntity);

this.$emit(‘element-update’, this.element);
},
updateCustomImageMediaElementData(customImageMedia = null) {
const customImageMediaId = customImageMedia === null ? null : customImageMedia.id;
if (!this.element.data) {
this.$set(this.element, ‘data’, { customImageMediaId });
this.$set(this.element, ‘data’, { customImageMedia });
} else {
this.$set(this.element.data, ‘customImageMediaId’, customImageMediaId);
this.$set(this.element.data, ‘customImageMedia’, customImageMedia);
}
},
onCustomImageMediaCloseModal() {
this.customImageMediaModalIsOpen = false;
},

onCustomImageMediaSelectionChanges(mediaEntity) {
const customImageMedia = mediaEntity[0];
this.element.config.customImageMedia.value = customImageMedia.id;
this.updateCustomImageMediaElementData(customImageMedia);
this.$emit(‘element-update’, this.element);
},
}

4. Afterwards you will get the output like the given image in the element config setting.

Custom media add in shopware 6

 

5. You can upload media by clicking on upload file select image then save, after that, you will find the config setting image like the given screenshot.

Custom media add in shopware 6

Avatar photo
Author

Founder and tech lead at Emizentech, Mr. Vivek has over ten years of experience in developing IT infrastructures and solutions. With his profound knowledge in eCommerce technologies like Shopware, Magento, and Shopify, Mr. Vivek has been assisting SMEs to enterprises across the globe by developing and maintaining their eCommerce applications. Technology innovation and trends insight come easy to Vivek with his thorough knowledge in the eCommerce domain. See him talking about ideas, trends, and technology in this blog. To know more about how Team Vivek can assist you in your eCommerce strategy? Connect team Vivek here.

whatsapp