{"id":12048,"date":"2021-09-03T00:47:41","date_gmt":"2021-09-03T06:17:41","guid":{"rendered":"https:\/\/www.emizentech.com\/blog\/?p=12048"},"modified":"2023-01-30T11:03:05","modified_gmt":"2023-01-30T11:03:05","slug":"add-custom-media-in-admin-config-settings-in-shopware-6","status":"publish","type":"post","link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/add-custom-media-in-admin-config-settings-in-shopware-6.html","title":{"rendered":"How To Add Custom Media In Admin Config Settings In Shopware 6"},"content":{"rendered":"
\n
\n
\n
\n
\n

\tWhen 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.<\/p>\n

\tShopware, 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.<\/p>\n

<\/span>1. Add the code to this location<\/span><\/h3>\n

\tcustom\/plugins\/PluginName\/src\/Resources\/app\/administration\/src\/module\/sw-cms\/elements\/elementFolderName\/index.js<\/p>\n

\tcode example : To add custom Media
\n\t
\n\tdefaultConfig: {
\n\tcustomImageMedia:{
\n\tsource: 'static',
\n\tvalue: '',
\n\tentity: {
\n\tname: 'customImageMedia'
\n\t}
\n\t}
\n\t}
\n\t<\/code><\/p>\n

<\/span>2. After that you need to add block in the config template<\/span><\/h3>\n

\tadd the given code on the given location :<\/p>\n

\tcustom\/plugins\/PluginName\/src\/Resources\/app\/administration\/src\/module\/sw-cms\/elements\/elementFolderName\/config\/FileTemplateName.html.twig
\n\t
\n\t{% block sw_cms_element_image_config_customImageMedia_upload %}
\n\t<sw-cms-mapping-field label=\"Image\" valueTypes=\"entity\" entity=\"customImageMedia\" v-model=\"element.config.customImageMedia\">
\n\t<sw-media-upload-v2 variant=\"regular\"
\n\t:uploadTag=\"uploadCustomImageMediaTag\"
\n\t:source=\"previewCustomImageMediaSource\"
\n\t:allowMultiSelect=\"false\"
\n\t:defaultFolder=\"cmsPageState.pageEntityName\"
\n\t:caption=\"$tc('sw-cms.elements.general.config.caption.mediaUpload')\"
\n\t@media-upload-sidebar-open=\"onOpenCustomImageMediaModal\"
\n\t@media-upload-remove-image=\"onCustomImageMediaRemove\">
\n\t<\/sw-media-upload-v2>
\n\t<\/sw-cms-mapping-field>
\n\t<sw-upload-listener
\n\t:uploadTag=\"uploadCustomImageMediaTag\"
\n\tautoUpload
\n\t@media-upload-finish=\"onCustomImageMediaUpload\">
\n\t<\/sw-upload-listener>
\n\t{% endblock %}
\n\t{% block sw_cms_element_image_config_customImageMedia_modal %}
\n\t<sw-media-modal-v2
\n\tvariant=\"regular\"
\n\tv-if=\"customImageMediaModalIsOpen\"
\n\t:caption=\"$tc('sw-cms.elements.general.config.caption.mediaUpload')\"
\n\t:entityContext=\"cmsPageState.entityName\"
\n\t:allowMultiSelect=\"false\"
\n\t:initialFolderId=\"cmsPageState.defaultMediaFolderId\"
\n\t@media-upload-remove-image=\"onCustomImageMediaRemove\"
\n\t@media-modal-selection-change=\"onCustomImageMediaSelectionChanges\"
\n\t@modal-close=\"onCustomImageMediaCloseModal\">
\n\t<\/sw-media-modal-v2>
\n\t{% endblock %}
\n\t<\/code><\/p>\n

<\/span>3. After that you need to add the given code on the given location:<\/span><\/h3>\n

\t\"Custom
\n\tcustom\/plugins\/PluginName\/src\/Resources\/app\/administration\/src\/module\/sw-cms\/elements\/elementFolderName\/config\/index.js<\/p>\n

\t
\n\tdata() {
\n\treturn {
\n\tinitialFolderId: null,
\n\tcustomImageMediaModalIsOpen: false
\n\t};
\n\t},<\/code><\/p>\n

\tcomputed: {
\n\tuploadCustomImageMediaTag() {
\n\treturn `cms-element-advancedslider-customImageMedia-config-${this.element.id}`;
\n\t},
\n\tpreviewCustomImageMediaSource() {
\n\tif (this.element.data && this.element.data.customImageMedia && this.element.data.customImageMedia.id) {
\n\treturn this.element.data.customImageMedia;
\n\t}
\n\treturn this.element.config.customImageMedia.value;
\n\t},
\n\tcustomImageMediaRepository() {
\n\treturn this.repositoryFactory.create(‘media’);
\n\t}
\n\t}<\/p>\n

\tmethods: {
\n\tasync createdComponent() {
\n\tthis.initElementConfig(‘media’);
\n\t},
\n\tonOpenCustomImageMediaModal() {
\n\tthis.customImageMediaModalIsOpen = true;
\n\t},
\n\tonCustomImageMediaRemove() {
\n\tthis.element.config.customImageMedia.value = null;
\n\tthis.updateCustomImageMediaElementData();
\n\tthis.$emit(‘element-update’, this.element);
\n\t},
\n\tasync onCustomImageMediaUpload({ targetId }) {
\n\tconst mediaEntity = await this.customImageMediaRepository.get(targetId);<\/p>\n

\tthis.element.config.customImageMedia.value = mediaEntity.id;<\/p>\n

\tthis.updateCustomImageMediaElementData(mediaEntity);<\/p>\n

\tthis.$emit(‘element-update’, this.element);
\n\t},
\n\tupdateCustomImageMediaElementData(customImageMedia = null) {
\n\tconst customImageMediaId = customImageMedia === null ? null : customImageMedia.id;
\n\tif (!this.element.data) {
\n\tthis.$set(this.element, ‘data’, { customImageMediaId });
\n\tthis.$set(this.element, ‘data’, { customImageMedia });
\n\t} else {
\n\tthis.$set(this.element.data, ‘customImageMediaId’, customImageMediaId);
\n\tthis.$set(this.element.data, ‘customImageMedia’, customImageMedia);
\n\t}
\n\t},
\n\tonCustomImageMediaCloseModal() {
\n\tthis.customImageMediaModalIsOpen = false;
\n\t},<\/p>\n

\tonCustomImageMediaSelectionChanges(mediaEntity) {
\n\tconst customImageMedia = mediaEntity[0];
\n\tthis.element.config.customImageMedia.value = customImageMedia.id;
\n\tthis.updateCustomImageMediaElementData(customImageMedia);
\n\tthis.$emit(‘element-update’, this.element);
\n\t},
\n\t}<\/p>\n

<\/span>4. Afterwards you will get the output like the given image in the element config setting.<\/span><\/h3>\n

\t\"Custom<\/p>\n

\t <\/p>\n

<\/span>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.<\/span><\/h3>\n

\t\"Custom<\/p><\/div>\n

<\/p><\/div>\n

<\/p><\/div>\n

<\/p><\/div>\n<\/section>\n\n","protected":false},"excerpt":{"rendered":"

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<\/p>\n","protected":false},"author":36,"featured_media":12049,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"MSN_Categories":"Uncategorized","MSN_Publish_Option":false,"MSN_Is_Local_News":false,"MSN_Is_AIAC_Included":"Empty","MSN_Location":"[]","MSN_Add_Feature_Img_On_Top_Of_Post":false,"MSN_Has_Custom_Author":false,"MSN_Custom_Author":"","MSN_Has_Custom_Canonical_Url":false,"MSN_Custom_Canonical_Url":"","_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[85],"tags":[84],"class_list":{"0":"post-12048","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-shopware","8":"tag-shopware"},"modified_by":"Marketing EmizenTech","featured_image_src":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2021\/09\/How-To-Add-Custom-Media-In-Admin-Config-Settings-In-Shopware-6-1.jpg","featured_image_src_square":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2021\/09\/How-To-Add-Custom-Media-In-Admin-Config-Settings-In-Shopware-6-1.jpg","author_info":{"display_name":"Vivek Khatri","author_link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/author\/vivek"},"_links":{"self":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/12048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/comments?post=12048"}],"version-history":[{"count":0,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/12048\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media\/12049"}],"wp:attachment":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media?parent=12048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/categories?post=12048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/tags?post=12048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}