SHOPWARE 6 VIDEO HACK: SO FÜGEN SIE BENUTZERDEFINIERTE UPLOADS HINZU

Standardmäßig stellt Shopware 6 nur 2 cm große Elemente zur Verfügung, um Videos zu den Einkaufserlebnisseiten hinzuzufügen. Es handelt sich um Vimeo-Videos und YouTube-Videos. Sie können unserer Website nur Inhalte von YouTube oder Vimeo hinzufügen. Daher gibt es keine Möglichkeit, Videos direkt hochzuladen und im Frontend anzuzeigen. In diesem Blog wird erläutert, wie Sie benutzerdefinierte hochgeladene Videos zur Website hinzufügen. In diesem Blog wird davon ausgegangen, dass Sie über die Grundkenntnisse zum Entwickeln von CMS-Blöcken und -Elementen verfügen. Zuerst müssen wir einen benutzerdefinierten CMS-Block erstellen. Ich schreibe hier nicht den vollständigen Code. Ich erkläre nur, was zusätzlich benötigt wird, um es umzusetzen. Rufen Sie im benutzerdefinierten CMS-Block für Video einfach das benutzerdefinierte Video-CMS-Element aus dem Block auf, den wir entwickeln werden. Im benutzerdefinierten Video-CMS-Element können Sie dasselbe Element wie das Bild-CMS-Element und das YouTube-Videoelement verwenden. Sie können das Bild-Upload-Element aus dem Bild-CMS-Element und die Konfigurationseinstellungen des YouTube-Video-Elements verwenden. Kopieren Sie die Bild-Upload-Elemente und fügen Sie einfach eine Datei hinzu. Akzeptieren Sie einen Parameter, um nur Videos zu akzeptieren, wie unten gezeigt:

&lt;sw-media-upload-v2
           variant="regular"
           :upload-tag="uploadTag"
           :source="previewSource"
           :allow-multi-select="false"
           :default-folder="cmsPageState.pageEntityName"
           :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
           @media-upload-sidebar-open="onOpenMediaModal"
           @media-upload-remove-image="onImageRemove"
           fileAccept="video/*"
       /&gt;

<sw-media-upload-v2

variant="regular"

:upload-tag="uploadTag"

:source="previewSource"

:allow-multi-select="false"

:default-folder="cmsPageState.pageEntityName"

:caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"

@media-upload-sidebar-open="onOpenMediaModal"

@media-upload-remove-image="onImageRemove"

fileAccept="video/*"

Außerdem können Sie Einstellungen wie Schleife, automatische Wiedergabe usw. hinzufügen, z. B. YouTube-Videoelemente. Als letztes ist die Medienvorschau erforderlich, um eine Miniaturansicht des Videos auf der Website anzuzeigen.
Sie können dasselbe Bild-Upload-Element mit Änderungen am Funktionsnamen verwenden, z. B. durch Umbenennen von onOpenMediaModal in onOpenMediaPreviewModal. Sie müssen außerdem einen Datenauflöser hinzufügen, um die Mediendaten in das Frontend zu laden. Vergessen Sie nicht, Daten für Video- und Medienvorschauen im Resolver hinzuzufügen.

Mit diesen Anpassungen wird Shopware 6 vielseitiger und ermöglicht es Unternehmen, über YouTube und Vimeo hinaus ein breiteres Spektrum an Inhalten zu präsentieren und so das gesamte Einkaufserlebnis im Frontend zu verbessern.

Grüße! Ich bin Aneesh Sreedharan, CEO von 2Hats Logic Solutions. Bei 2Hats Logic Solutions widmen wir uns der Bereitstellung von technischem Fachwissen und der Lösung Ihrer Probleme in der Welt der Technologie. Unsere Blog-Seite dient als Ressource, in der wir Einblicke und Erfahrungen teilen und wertvolle Perspektiven auf Ihre Fragen bieten.