{"id":8565,"date":"2021-06-07T09:27:19","date_gmt":"2021-06-07T09:27:19","guid":{"rendered":"https:\/\/www.bay20.com\/?p=8565"},"modified":"2025-05-21T16:21:59","modified_gmt":"2025-05-21T10:36:59","slug":"wie-schaffe-ich-eine-neue-einkaufswelt-element-in-shopware-5","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/wie-schaffe-ich-eine-neue-einkaufswelt-element-in-shopware-5\/","title":{"rendered":"Wie erstellt man ein neues Einkaufswelt-Element in Shopware 5?"},"content":{"rendered":"\n

Um ein neues Einkaufswelt-Element in Shopware 5 zu erstellen, gehen Sie wie folgt vor.<\/p>\n\n\n\n

Schritt 1:<\/strong> Erstellen Sie ein neues Unterverzeichnis im Plugin-Verzeichnis.<\/p>\n\n\n\n

Dateistruktur<\/strong><\/p>\n\n\n\n

custom>plugins>ShoppingWorldElement<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Hinweis: – ShoppingWorldElement<\/strong> ist ein neues Plugin, in dem wir dieses Verzeichnis bearbeiten, um ein neues Shopping World Element zu erstellen.<\/p>\n\n\n\n

Schritt 2:<\/strong> Erstellen Sie ShoppingWorldElement.php<\/strong> im Verzeichnis ShoppingWorldElement.<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Schritt 3:<\/strong> Schreiben Sie diesen Code in die Datei ShoppingWorldElement.php.<\/p>\n\n\n\n

<?php

namespace ShoppingWorldElement;
<\/strong>
<\/strong>use Shopware\\Components\\Plugin;
<\/strong>
<\/strong>class ShoppingWorldElement extends Plugin
{
    public static function getSubscribedEvents()
    {

    }
}<\/pre>\n\n\n\n
Schritt 4:<\/strong> Gehen Sie zur Verwaltungskonsole (Backend), und Configuration>Plugin Manager<\/strong>. Um zu sehen, ob das ShoppingWorldElement-Plugin funktioniert oder nicht.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 5:<\/strong> Klicken Sie auf das Bleistiftsymbol, um das Plugin zu installieren und zu aktivieren.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 6:<\/strong> Nachdem Sie das Plugin aktiviert haben, gehen Sie zu der Datei ShoppingWorldElement.php und<\/strong> schreiben Sie diesen Code in diese Datei.<\/p>\n\n\n\n
<?php<\/p>\n\n\n\n
namespace ShoppingWorldElement;<\/p>\n\n\n\n
use Shopware\\Components\\Plugin;
use Shopware\\Components\\Plugin\\Context\\ActivateContext;
use Shopware\\Components\\Plugin\\Context\\DeactivateContext;
use Shopware\\Components\\Plugin\\Context\\InstallContext;
use Shopware\\Components\\Plugin\\Context\\UninstallContext;
use ShoppingWorldElement\\Bootstrap\\EmotionElementInstaller;<\/p>\n\n\n\n
class ShoppingWorldElement extends Plugin
{
public function install(InstallContext $installContext)
{
$emotionElementInstaller = new EmotionElementInstaller(
$this->getName(),
$this->container->get(’shopware.emotion_component_installer‘)
);<\/p>\n\n\n\n
    $emotionElementInstaller->install();\n}\n\npublic function activate(ActivateContext $activateContext)\n{\n    $activateContext->scheduleClearCache(ActivateContext::CACHE_LIST_ALL);\n}\n\npublic function deactivate(DeactivateContext $deactivateContext)\n{\n    $deactivateContext->scheduleClearCache(DeactivateContext::CACHE_LIST_ALL);\n}\n\npublic function uninstall(UninstallContext $uninstallContext)\n{\n    $uninstallContext->scheduleClearCache(UninstallContext::CACHE_LIST_ALL);\n}<\/code><\/pre>\n\n\n\n
}<\/p>\n\n\n\n
Schritt 7:<\/strong> Erstellen Sie die Datei plugin.xml <\/strong>im Verzeichnis ShoppingWorldElement.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 8:<\/strong> Gehen Sie zur Datei plugin.xml <\/strong>und schreiben Sie diesen Code.<\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<plugin xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"https:\/\/raw.githubusercontent.com\/shopware\/shopware\/5.3\/engine\/Shopware\/Components\/Plugin\/schema\/plugin.xsd\">\n\n    <label lang=\"en\">Shopping World Element<\/label>\n\n    <version>1.0.0<\/version>\n    <copyright>(c) Bay 20<\/copyright>\n    <license>MIT<\/license>\n    <link>http:\/\/store.shopware.com<\/link>\n    <author>Bay 20<\/author>\n    <compatibility minVersion=\"5.3.0\"\/>\n\n    <changelog version=\"1.0.0\">\n        <changes lang=\"en\">New release<\/changes>\n    <\/changelog>\n<\/plugin>\n<\/pre>\n\n\n\n
Schritt 9:<\/strong> Erstellen Sie den Ordner Boostrap<\/strong> im Verzeichnis ShoppingWorldElement.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 10:<\/strong> Erstellen Sie EmotionElementInstaller.php<\/strong> im Bootstrap<\/strong>-Verzeichnis.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 11:<\/strong> Schreiben Sie diesen Code in die Datei EmotionElementInstaller.php<\/strong>. Dies ist ein Konfigurationsfeld f\u00fcr das Element.<\/p>\n\n\n\n
<?php<\/p>\n\n\n\n
namespace ShoppingWorldElement\\Bootstrap;<\/p>\n\n\n\n
use Shopware\\Components\\Emotion\\ComponentInstaller;<\/p>\n\n\n\n
class EmotionElementInstaller
{
\/**
* @var ComponentInstaller
*\/
private $emotionComponentInstaller;<\/p>\n\n\n\n
\/**\n * @var string\n *\/\nprivate $pluginName;\n\n\/**\n * @param string $pluginName\n * @param ComponentInstaller $emotionComponentInstaller\n *\/\npublic function __construct($pluginName, ComponentInstaller $emotionComponentInstaller)\n{\n    $this->emotionComponentInstaller = $emotionComponentInstaller;\n    $this->pluginName = $pluginName;\n}\n\npublic function install()\n{\n    $vimeoElement = $this->emotionComponentInstaller->createOrUpdate(\n        $this->pluginName,\n        'ShoppingWorldElement',\n        [\n            'name' => 'Vimeo Video',\n            'xtype' => 'emotion-components-vimeo',\n            'template' => 'emotion_vimeo',\n            'cls' => 'emotion-vimeo-element',\n            'description' => 'A simple vimeo video element for the shopping worlds.'\n        ]\n    );\n\n    $vimeoElement->createTextField([\n        'name' => 'vimeo_video_id',\n        'fieldLabel' => 'Video ID',\n        'supportText' => 'Enter the ID of the video you want to embed.',\n        'allowBlank' => false\n    ]);\n\n    $vimeoElement->createHiddenField([\n        'name' => 'vimeo_video_thumbnail'\n    ]);\n\n    $vimeoElement->createTextField([\n        'name' => 'vimeo_interface_color',\n        'fieldLabel' => 'Interface Color',\n        'supportText' => 'Enter the #hex color code for the video player interface.',\n        'defaultValue' => '#0096FF'\n    ]);\n\n    $vimeoElement->createCheckboxField([\n        'name' => 'vimeo_autoplay',\n        'fieldLabel' => 'Autoplay',\n        'defaultValue' => false\n    ]);\n\n    $vimeoElement->createCheckboxField([\n        'name' => 'vimeo_loop',\n        'fieldLabel' => 'Loop',\n        'defaultValue' => false\n    ]);\n\n    $vimeoElement->createCheckboxField([\n        'name' => 'vimeo_show_title',\n        'fieldLabel' => 'Show title',\n        'defaultValue' => false\n    ]);\n\n    $vimeoElement->createCheckboxField([\n        'name' => 'vimeo_show_portrait',\n        'fieldLabel' => 'Show portrait',\n        'defaultValue' => false\n    ]);\n\n    $vimeoElement->createCheckboxField([\n        'name' => 'vimeo_show_author',\n        'fieldLabel' => 'Show author',\n        'defaultValue' => false\n    ]);\n}<\/code><\/pre>\n\n\n\n
}<\/p>\n\n\n\n
Schritt 12:<\/strong> Erstellen Sie den Ordner Resources<\/strong> im Verzeichnis ShoppingWorldElement.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 13:<\/strong> Im Verzeichnis Resources<\/strong>. Erstellen Sie 3 neue Unterordner (Snippets>Backend>Emotion) <\/strong>und erstellen Sie im Ordner emotion die Datei shopping_world_element.ini.<\/strong><\/p>\n\n\n\n
Dateistrukturen<\/strong><\/p>\n\n\n\n
Resources>snippets>backend>emotion>shopping_world_element.ini<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 14: <\/strong>In die Datei shopping_world_element.ini<\/strong> schreiben Sie diesen Code.<\/p>\n\n\n\n
[en_GB]
interfaceColorFieldLabel = \"Interface Color\"
interfaceColorSupportText = \"Enter the #hex color code for the video player interface.\"

[de_DE]
interfaceColorFieldLabel = \"Interface Farbe\"
interfaceColorSupportText = \"Gib den #hex Farbcode f\u00fcr das Video Player Interface ein.\"<\/pre>\n\n\n\n
Schritt 15:<\/strong> Erstellen Sie im Ordner Resources<\/strong> ein neues Unterverzeichnis mit dem Namen views.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 16:<\/strong> Erstellen Sie im Ordner views<\/strong> 6 neue Unterverzeichnisse (backend>emotion>shopping_world_element>view>detail>elements)<\/strong> und im Ordner elements <\/strong>erstellen Sie vimeo_video.js<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 17:<\/strong> Schreiben Sie diesen Code in viemo_video.js<\/strong><\/p>\n\n\n\n
\/\/
\/\/{block name=\"backend\/emotion\/view\/detail\/elements\/base\"}
\/\/{$smarty.block.parent}
Ext<\/em><\/strong>.define('Shopware.apps.Emotion.view.detail.elements.VimeoVideo', <\/strong>{

    \/**
<\/em>     * Extend from the base class for the grid elements.
<\/em>     *\/
<\/em>    <\/em>extend: 'Shopware.apps.Emotion.view.detail.elements.Base',
<\/strong>
<\/strong>    <\/strong>\/**
<\/em>     * Create the alias matching with the xtype you defined for your element.
<\/em>     * The pattern is always 'widget.detail-element-' + xtype
<\/em>     *\/
<\/em>    <\/em>alias: 'widget.detail-element-emotion-components-vimeo',
<\/strong>
<\/strong>    <\/strong>\/**
<\/em>     * You can define an additional CSS class which will be used for the grid element.
<\/em>     *\/
<\/em>    <\/em>componentCls: 'emotion--vimeo-video',
<\/strong>
<\/strong>    <\/strong>\/**
<\/em>     * Define the path to an image for the icon of your element.
<\/em>     * You could also use a base64 string.
<\/em>     *\/
<\/em>    <\/em>icon: 'data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw\/eHBhY2tldCBiZWdpbj0i77u\/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI4MUE3MUYxMzE0OTExRTY5RTAxREU4QzRENjE3OTVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI4MUE3MUYyMzE0OTExRTY5RTAxREU4QzRENjE3OTVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjgxQTcxRUYzMTQ5MTFFNjlFMDFERThDNEQ2MTc5NUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjgxQTcxRjAzMTQ5MTFFNjlFMDFERThDNEQ2MTc5NUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw\/eHBhY2tldCBlbmQ9InIiPz6h+p8gAAAFjklEQVR42rRY208cVRj\/mJ3d5X6\/lUJBQQxqKW2hxWBFbeITvNQYtb5ArabRRx\/6N\/RP0KrQEC94S0pbY6NSlAqEi6VES0uhtCDlToG9sezN73eY3SyzM+wA8iVfzsw5Z875ne9+Jqal9TKpyb2+TiaTifx+P8XExIg+n89HsiyjfY7HTnL7Io8VMxfwcILyqSMQCEwyj0mS1MXft3N7h9\/FOmA8Y12s5XS6IvaWyTg1gHmDWiwKwGhVlMyb7uM5x3jsHW7R18F8ibnZyCaSgTn1zEMMoIk3qQ12aoAhnbFXGGQTt7eVtXYF6CJzGy94kHZP5Qy0jdtPdwIojbmfgZyNJo3tEq\/5Pjd9zKlGASUxgD7mo7QHpNhfpWwyAVRihFGvud2bO2S5k42xmPaQAMrr85VYLOZO5sNSjKQroSZ2yUNBV99LUsJIBT9+oaeykyzKBqNgjNoVNgZr2JKIR16vr5FfXw1pCPFE2aAZcQOTdIxxI\/I5nbS2tk54tVgslJSYsOmb4Dyb3UFu9zrFx8WKvpVVOyUmxFNsrDViDw7EzTynMDwwvs0d+XpgAHSdo\/eT5VUqLMijioNllBAfRwO3\/6FHk48pJTkpFNW9Xq+YV3RgP5U\/\/yzl5WaL\/smpaersHhDROY5BhkuYxw9w8xZzq6zo8ryeCgDG7nCQy+Wm116upsqKF0Jj+Xm59FnLdzy2RlarRahmecVGtTVVdOxI+aZ1ykqLKTM9jb78\/gpL1kxKFA+pn9\/P86Fa0fsMd1TogVm12cnj8dK7b9ZvAhMkSAtzMHfpyQq9VH00AkyQsjLT6anCfHLyAdTmwBgO82MJC0eu05JOUDIYazx9SqhFiwr27xN5DaCgzurKQ1saOewIatURQJ3s8XiqYZxq+1lbc5NZNtO5hjcoaPhalJGWKjaBER\/Iz6P5hSVx4syMNM35mIdMr+O51fCyUi0JoQ8bAczU9Cw9nJiimuNHIssF2SQ8DfPvjY6z4faLw3343mnRryYAtrIAdKhU5tPkaAGCezpdLmr66kdWnZNmZueptLhI2IGaUlOSaG5hkcxmWUhmbn6R3dwWAQgeCQ\/UWkOhXEkrnwQlZDab2d09IpakpiTT8MiY5irZWRliHqSJQ2BDeKCa\/h4eEaC3oAQpWjQOuijUN\/Hv9JaGDUIAhKepCVK+e39c1znCU4fdSAqACqGWxaXliLEcllBaarKwteKiAqFaNf32R7eI7uHxR4McEkth1kj+2ojCPhp7OKE5DlAIkKfqXo8Yg+0M3xtj0CnRcuCMxNF1xAggLBTP6QLepkWI4h9\/dEbTRq5cvyFUZWCfEYljQo9eDlNTHKttZm6BE6xLYyxWqE1NX\/9wbSPJ8mEMVAg9kNBVozUMDBdqGRufMDT\/evtNdoTHIhQYPPRVWNh95kGjNRAy9agBQB1\/9tJfQ3dESIgGRpHcLeZRCVbPHReMSgllx6PJKRF39Ki9s4e6+waFoRt1GOYLaIM++A3zpFG14UQ\/\/fq75njbz+3UOzAkwCiHNQIIIm8VcQheAeac1GBUbemcUEcfTNAvHV2h8hQ5quXby3R35AHl5mRtBwyyfwMqAHC4j7YzKC7yA43YJJqoYahIBTBaqHGBAyYA5GRnGjLg4HXcJEmfM5AbereOMzw4uFW5EVwMjEDn8\/lFYYaQoK6vo6me94Ihn91UPdhsDvXcE7FW6y1PIFASTeQbCVgOBUOjNxFInyUz6vJ4T6AajXZztfsD\/ipWW\/9e3clYir0+v78Sucvo3R4ZtIoN8+L\/DYal8wk3x1EY7OTvxwe8QL3yK2W31+dB1Mz8eG63\/4eQWiqUH1YdO8DSoXyLW8W1aJO38wftksJlSO7MNcxPoz4LqzrtSoBFadmFUMI8vB30\/wkwANX0n3B5XHA1AAAAAElFTkSuQmCC',
<\/strong>
<\/strong>    <\/strong>\/**
<\/em>     * You can override the original `createPreview()` method
<\/em>     * to create a custom grid preview for your element.
<\/em>     *
<\/em>     * <\/em>@returns <\/em><\/strong>{ string }
<\/em>     <\/em>*\/
<\/em>    <\/em>createPreview: function () {
        var me = this,
<\/strong>            <\/strong>preview = '',
<\/strong>            <\/strong>image = me.getConfigValue('vimeo_video_thumbnail'),
<\/strong>            <\/strong>style;
<\/strong>
<\/strong>        <\/strong>if (Ext<\/em><\/strong>.isDefined(image)) {
            style = Ext<\/em><\/strong>.String.format('background-image: url([0]);', <\/strong>image);
<\/strong>
<\/strong>            <\/strong>preview = Ext<\/em><\/strong>.String.format('<div class=\"x-emotion-banner-element-preview\" style=\"[0]\"><\/div>', <\/strong>style);
<\/strong>        <\/strong>}

        return preview;
<\/strong>    <\/strong>}
});
<\/strong>\/\/{\/block}<\/pre>\n\n\n\n
Schritt 18:<\/strong> Erstellen Sie den Ordner emotion_components<\/strong> im Verzeichnis views.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 19:<\/strong> Erstellen Sie im Ordner emotion_components<\/strong> einen neuen Unterordner mit dem Namen backend<\/strong> und erstellen Sie im Backend<\/strong> eine neue Datei viemo_video.js.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 20:<\/strong> Schreiben Sie diesen Code in die Datei viemo_video.js.<\/strong><\/p>\n\n\n\n
\/\/ {namespace name=“backend\/emotion\/shopping_world_element“}
\/\/{block name=“emotion_components\/backend\/vimeo_video“}
Ext.define(‚Shopware.apps.Emotion.view.components.VimeoVideo‘, {<\/p>\n\n\n\n
\/**\n * Extend from the base class for the emotion components\n *\/\nextend: 'Shopware.apps.Emotion.view.components.Base',\n\n\/**\n * Create the alias matching the xtype you defined in your `createEmotionComponent()` method.\n * The pattern is always 'widget.' + xtype\n *\/\nalias: 'widget.emotion-components-vimeo',\n\n\/**\n * Contains the translations of each input field which was created with the EmotionComponentInstaller.\n * Use the name of the field as identifier\n *\/\nsnippets: {\n    'vimeo_interface_color': {\n        'fieldLabel': '{s name=interfaceColorFieldLabel}{\/s}',\n        'supportText': '{s name=interfaceColorSupportText}{\/s}'\n    }\n},\n\n\/**\n * The constructor method of each component.\n *\/\ninitComponent: function () {\n    var me = this;\n\n    \/**\n     * Call the original method of the base class.\n     *\/\n    me.callParent(arguments);\n\n    \/**\n     * Get single fields you've created with the helper functions in your `Bootstrap.php` file.\n     *\/\n    me.videoThumbnailField = me.getForm().findField('vimeo_video_thumbnail');\n    me.videoIdField = me.getForm().findField('vimeo_video_id');\n\n    \/**\n     * For example you can register additional event listeners on your fields to handle some data.\n     *\/\n    me.videoIdField.on('change', Ext.bind(me.onIdChange, me));\n},\n\n\/**\n * Event listener for the change event of the video id field.\n *\n * @param field\n * @param value\n *\/\nonIdChange: function (field, value) {\n    var me = this;\n\n    me.setVimeoPreviewImage(value);\n},\n\n\/**\n * Does a request to the vimeo api to get the preview image of the video.\n * We will use the hidden input field we created via the helper functions to\n * store the data we receive from the api.\n *\n * @param vimeoId\n * @returns { boolean }\n *\/\nsetVimeoPreviewImage: function (vimeoId) {\n    var me = this;\n\n    if (!vimeoId) {\n        return false;\n    }\n\n    \/**\n     * Create the url to the correct api endpoint for the given video id.\n     *\/\n    var url = Ext.String.format('https:\/\/vimeo.com\/api\/v2\/video\/[0].json', vimeoId),\n        xhr = new XMLHttpRequest(),\n        response;\n\n    \/**\n     * Request additional information about the video.\n     *\/\n    xhr.onreadystatechange =  function () {\n        if (xhr.readyState === 4 && xhr.status === 200) {\n            response = Ext.JSON.decode(xhr.responseText);\n\n            \/**\n             * Save the preview image in the hidden input field.\n             *\/\n            if (response[0]) {\n                me.videoThumbnailField.setValue(response[0]['thumbnail_large']);\n            }\n        }\n    };\n\n    xhr.open('GET', url, true);\n    xhr.send();\n}<\/code><\/pre>\n\n\n\n
});
\/\/{\/block}<\/p>\n\n\n\n
Schritt 21:<\/strong> Erstellen Sie im Ordner emotion_components<\/strong> einen neuen Unterordner widgets.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 22:<\/strong> Erstellen Sie im Ordner widgets <\/strong>2 neue Unterordner (emotion>components) <\/strong>und erstellen Sie im Ordner components<\/strong> eine Datei mit dem Namen emotion<\/strong>_viemo.tpl<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 23:<\/strong> Schreiben Sie diesen Code in die Datei emotion_viemo.tpl.<\/strong><\/p>\n\n\n\n
{block name=\"widgets_emotion_components_vimeo_element\"}\n\n    {$videoURL = \"https:\/\/player.vimeo.com\/video\/{$Data.vimeo_video_id}?color={$Data.vimeo_interface_color|substr:1<\/strong>}\"}\n\n    {if !$Data.vimeo_show_title}\n        {$videoURL = \"{$videoURL}&title=0\"}\n    {\/if}\n\n    {if !$Data.vimeo_show_portrait}\n        {$videoURL = \"{$videoURL}&portrait=0\"}\n    {\/if}\n\n    {if !$Data.vimeo_show_author}\n        {$videoURL = \"{$videoURL}&byline=0\"}\n    {\/if}\n\n    {if $Data.vimeo_loop}\n        {$videoURL = \"{$videoURL}&loop=1\"}\n    {\/if}\n\n    {if $Data.vimeo_autoplay}\n        {$videoURL = \"{$videoURL}&autoplay=1\"}\n    {\/if}\n\n    <iframe src=\"{$videoURL}\"\n            width=\"100%\"\n            height=\"100%\"\n            frameborder=\"0\"\n            webkitallowfullscreen\n            mozallowfullscreen\n            allowfullscreen>\n    <\/iframe>\n{\/block}<\/pre>\n\n\n\n
Schritt 24:<\/strong> Erstellen Sie die Datei config.xml<\/strong> im Ordner Resources.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 25:<\/strong> Schreiben Sie diesen Code in die Datei config.xml.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 26:<\/strong> Erstellen Sie die Datei services.xml<\/strong> im Ordner Resources.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 27:<\/strong> Schreiben Sie diesen Code in die Datei services.xml.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 28:<\/strong> Erstellen Sie einen neuen Unterordner Subscriber<\/strong> im Verzeichnis ShoppingWorldElement.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 29:<\/strong> Erstellen Sie im Ordner Subscriber<\/strong> eine neue Datei namens TemplateRegistration.php<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 30:<\/strong> Schreiben Sie diesen Code in die Datei TemplateRegistration.php.<\/strong><\/p>\n\n\n\n
<?php<\/p>\n\n\n\n
namespace ShoppingWorldElement\\Subscriber;<\/p>\n\n\n\n
use Enlight\\Event\\SubscriberInterface;
use Enlight_Controller_ActionEventArgs;<\/p>\n\n\n\n
class TemplateRegistration implements SubscriberInterface
{
\/**
* @var string
*\/
private $pluginDirectory;<\/p>\n\n\n\n
\/**\n * @param $pluginDirectory\n *\/\npublic function __construct($pluginDirectory)\n{\n    $this->pluginDirectory = $pluginDirectory;\n}\n\n\/**\n * {@inheritdoc}\n *\/\npublic static function getSubscribedEvents()\n{\n    return [\n        'Enlight_Controller_Action_PostDispatchSecure_Backend_Emotion' => 'onPostDispatchBackendEmotion'\n    ];\n}\n\n\/**\n * @param \\Enlight_Controller_ActionEventArgs $args\n *\/\npublic function onPostDispatchBackendEmotion(\\Enlight_Controller_ActionEventArgs $args)\n{\n    $view = $args->getSubject()->View();\n    $view->addTemplateDir($this->pluginDirectory . '\/Resources\/views');\n    $view->extendsTemplate('backend\/emotion\/shopping_world_element\/view\/detail\/elements\/vimeo_video.js');\n}<\/code><\/pre>\n\n\n\n
}<\/p>\n\n\n\n
Schritt 31:<\/strong> Gehen Sie nun in die Verwaltungskonsole und w\u00e4hlen Sie Marketing>Einkaufswelten.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 31:<\/strong> Klicken Sie auf das Bleistiftsymbol der Einkaufswelt.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 32:<\/strong> Klicken Sie auf die Option Elemente<\/strong>. Und Sie k\u00f6nnen Ihr neues benutzerdefiniertes Shopping-Element verwenden.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 33:<\/strong> Ziehen Sie das Element und klicken Sie auf das Stiftsymbol, um das Element zu bearbeiten.<\/p>\n\n\n\n
\"How<\/figure>\n\n\n\n
Schritt 34:<\/strong> Geben Sie die Video-ID ein und w\u00e4hlen Sie eine Option, die Sie verwenden m\u00f6chten.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 35:<\/strong> Nachdem Sie diesen Vorgang gespeichert haben, gehen Sie zum Front-Store und sehen Sie nach, ob das benutzerdefinierte Element funktioniert oder nicht.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Bitte kontaktieren Sie uns unter manish@bay20.com<\/a><\/strong> oder rufen Sie uns unter +91-8800519180<\/a><\/strong> an, wenn Sie Unterst\u00fctzung zu Shopware 5 und Shopware 6 ben\u00f6tigen. Sie k\u00f6nnen auch die Shopware-Entwicklungsseite<\/strong><\/a><\/strong> besuchen, um die von uns angebotenen Dienstleistungen zu pr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
Um ein neues Einkaufswelt-Element in Shopware 5 zu erstellen, gehen Sie wie folgt vor. Schritt 1: Erstellen Sie ein neues Unterverzeichnis im Plugin-Verzeichnis. Dateistruktur custom>plugins>ShoppingWorldElement Hinweis: – ShoppingWorldElement ist ein neues Plugin, in dem wir dieses Verzeichnis bearbeiten, um ein neues Shopping World Element zu erstellen. Schritt 2: Erstellen Sie ShoppingWorldElement.php im Verzeichnis ShoppingWorldElement. Schritt […]<\/p>\n","protected":false},"author":74,"featured_media":8567,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[78,116],"tags":[],"class_list":["post-8565","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopware","category-shopware-5"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/8565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=8565"}],"version-history":[{"count":13,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/8565\/revisions"}],"predecessor-version":[{"id":17287,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/8565\/revisions\/17287"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/8567"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=8565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=8565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=8565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}