Wie erstellt man ein neues Einkaufswelt-Element in Shopware 5?

How To Create A New Shopping World Element In Shopware 5
Shopware, Shopware 5

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 3: Schreiben Sie diesen Code in die Datei ShoppingWorldElement.php.

<?php

namespace ShoppingWorldElement;

use Shopware\Components\Plugin;

class ShoppingWorldElement extends Plugin
{
    public static function getSubscribedEvents()
    {

    }
}

Schritt 4: Gehen Sie zur Verwaltungskonsole (Backend), und Configuration>Plugin Manager. Um zu sehen, ob das ShoppingWorldElement-Plugin funktioniert oder nicht.

Schritt 5: Klicken Sie auf das Bleistiftsymbol, um das Plugin zu installieren und zu aktivieren.

Schritt 6: Nachdem Sie das Plugin aktiviert haben, gehen Sie zu der Datei ShoppingWorldElement.php und schreiben Sie diesen Code in diese Datei.

<?php

namespace ShoppingWorldElement;

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;

class ShoppingWorldElement extends Plugin
{
public function install(InstallContext $installContext)
{
$emotionElementInstaller = new EmotionElementInstaller(
$this->getName(),
$this->container->get(’shopware.emotion_component_installer‘)
);

    $emotionElementInstaller->install();
}

public function activate(ActivateContext $activateContext)
{
    $activateContext->scheduleClearCache(ActivateContext::CACHE_LIST_ALL);
}

public function deactivate(DeactivateContext $deactivateContext)
{
    $deactivateContext->scheduleClearCache(DeactivateContext::CACHE_LIST_ALL);
}

public function uninstall(UninstallContext $uninstallContext)
{
    $uninstallContext->scheduleClearCache(UninstallContext::CACHE_LIST_ALL);
}

}

Schritt 7: Erstellen Sie die Datei plugin.xml im Verzeichnis ShoppingWorldElement.

Schritt 8: Gehen Sie zur Datei plugin.xml und schreiben Sie diesen Code.

<?xml version="1.0" encoding="utf-8"?>
<plugin xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/shopware/5.3/engine/Shopware/Components/Plugin/schema/plugin.xsd">

    <label lang="en">Shopping World Element</label>

    <version>1.0.0</version>
    <copyright>(c) Bay 20</copyright>
    <license>MIT</license>
    <link>http://store.shopware.com</link>
    <author>Bay 20</author>
    <compatibility minVersion="5.3.0"/>

    <changelog version="1.0.0">
        <changes lang="en">New release</changes>
    </changelog>
</plugin>

Schritt 9: Erstellen Sie den Ordner Boostrap im Verzeichnis ShoppingWorldElement.

Schritt 10: Erstellen Sie EmotionElementInstaller.php im Bootstrap-Verzeichnis.

Schritt 11: Schreiben Sie diesen Code in die Datei EmotionElementInstaller.php. Dies ist ein Konfigurationsfeld für das Element.

<?php

namespace ShoppingWorldElement\Bootstrap;

use Shopware\Components\Emotion\ComponentInstaller;

class EmotionElementInstaller
{
/**
* @var ComponentInstaller
*/
private $emotionComponentInstaller;

/**
 * @var string
 */
private $pluginName;

/**
 * @param string $pluginName
 * @param ComponentInstaller $emotionComponentInstaller
 */
public function __construct($pluginName, ComponentInstaller $emotionComponentInstaller)
{
    $this->emotionComponentInstaller = $emotionComponentInstaller;
    $this->pluginName = $pluginName;
}

public function install()
{
    $vimeoElement = $this->emotionComponentInstaller->createOrUpdate(
        $this->pluginName,
        'ShoppingWorldElement',
        [
            'name' => 'Vimeo Video',
            'xtype' => 'emotion-components-vimeo',
            'template' => 'emotion_vimeo',
            'cls' => 'emotion-vimeo-element',
            'description' => 'A simple vimeo video element for the shopping worlds.'
        ]
    );

    $vimeoElement->createTextField([
        'name' => 'vimeo_video_id',
        'fieldLabel' => 'Video ID',
        'supportText' => 'Enter the ID of the video you want to embed.',
        'allowBlank' => false
    ]);

    $vimeoElement->createHiddenField([
        'name' => 'vimeo_video_thumbnail'
    ]);

    $vimeoElement->createTextField([
        'name' => 'vimeo_interface_color',
        'fieldLabel' => 'Interface Color',
        'supportText' => 'Enter the #hex color code for the video player interface.',
        'defaultValue' => '#0096FF'
    ]);

    $vimeoElement->createCheckboxField([
        'name' => 'vimeo_autoplay',
        'fieldLabel' => 'Autoplay',
        'defaultValue' => false
    ]);

    $vimeoElement->createCheckboxField([
        'name' => 'vimeo_loop',
        'fieldLabel' => 'Loop',
        'defaultValue' => false
    ]);

    $vimeoElement->createCheckboxField([
        'name' => 'vimeo_show_title',
        'fieldLabel' => 'Show title',
        'defaultValue' => false
    ]);

    $vimeoElement->createCheckboxField([
        'name' => 'vimeo_show_portrait',
        'fieldLabel' => 'Show portrait',
        'defaultValue' => false
    ]);

    $vimeoElement->createCheckboxField([
        'name' => 'vimeo_show_author',
        'fieldLabel' => 'Show author',
        'defaultValue' => false
    ]);
}

}

Schritt 12: Erstellen Sie den Ordner Resources im Verzeichnis ShoppingWorldElement.

Schritt 13: Im Verzeichnis Resources. Erstellen Sie 3 neue Unterordner (Snippets>Backend>Emotion) und erstellen Sie im Ordner emotion die Datei shopping_world_element.ini.

Dateistrukturen

Resources>snippets>backend>emotion>shopping_world_element.ini

Schritt 14: In die Datei shopping_world_element.ini schreiben Sie diesen Code.

[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ür das Video Player Interface ein."

Schritt 15: Erstellen Sie im Ordner Resources ein neues Unterverzeichnis mit dem Namen views.

Schritt 16: Erstellen Sie im Ordner views 6 neue Unterverzeichnisse (backend>emotion>shopping_world_element>view>detail>elements) und im Ordner elements erstellen Sie vimeo_video.js

Schritt 17: Schreiben Sie diesen Code in viemo_video.js

//
//{block name="backend/emotion/view/detail/elements/base"}
//{$smarty.block.parent}
Ext.define('Shopware.apps.Emotion.view.detail.elements.VimeoVideo', {

    /**
     * Extend from the base class for the grid elements.
     */
    extend: 'Shopware.apps.Emotion.view.detail.elements.Base',

    /**
     * Create the alias matching with the xtype you defined for your element.
     * The pattern is always 'widget.detail-element-' + xtype
     */
    alias: 'widget.detail-element-emotion-components-vimeo',

    /**
     * You can define an additional CSS class which will be used for the grid element.
     */
    componentCls: 'emotion--vimeo-video',

    /**
     * Define the path to an image for the icon of your element.
     * You could also use a base64 string.
     */
    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',

    /**
     * You can override the original `createPreview()` method
     * to create a custom grid preview for your element.
     *
     * @returns { string }
     */
    createPreview: function () {
        var me = this,
            preview = '',
            image = me.getConfigValue('vimeo_video_thumbnail'),
            style;

        if (Ext.isDefined(image)) {
            style = Ext.String.format('background-image: url([0]);', image);

            preview = Ext.String.format('<div class="x-emotion-banner-element-preview" style="[0]"></div>', style);
        }

        return preview;
    }
});
//{/block}

Schritt 18: Erstellen Sie den Ordner emotion_components im Verzeichnis views.

Schritt 19: Erstellen Sie im Ordner emotion_components einen neuen Unterordner mit dem Namen backend und erstellen Sie im Backend eine neue Datei viemo_video.js.

Schritt 20: Schreiben Sie diesen Code in die Datei viemo_video.js.

// {namespace name=“backend/emotion/shopping_world_element“}
//{block name=“emotion_components/backend/vimeo_video“}
Ext.define(‚Shopware.apps.Emotion.view.components.VimeoVideo‘, {

/**
 * Extend from the base class for the emotion components
 */
extend: 'Shopware.apps.Emotion.view.components.Base',

/**
 * Create the alias matching the xtype you defined in your `createEmotionComponent()` method.
 * The pattern is always 'widget.' + xtype
 */
alias: 'widget.emotion-components-vimeo',

/**
 * Contains the translations of each input field which was created with the EmotionComponentInstaller.
 * Use the name of the field as identifier
 */
snippets: {
    'vimeo_interface_color': {
        'fieldLabel': '{s name=interfaceColorFieldLabel}{/s}',
        'supportText': '{s name=interfaceColorSupportText}{/s}'
    }
},

/**
 * The constructor method of each component.
 */
initComponent: function () {
    var me = this;

    /**
     * Call the original method of the base class.
     */
    me.callParent(arguments);

    /**
     * Get single fields you've created with the helper functions in your `Bootstrap.php` file.
     */
    me.videoThumbnailField = me.getForm().findField('vimeo_video_thumbnail');
    me.videoIdField = me.getForm().findField('vimeo_video_id');

    /**
     * For example you can register additional event listeners on your fields to handle some data.
     */
    me.videoIdField.on('change', Ext.bind(me.onIdChange, me));
},

/**
 * Event listener for the change event of the video id field.
 *
 * @param field
 * @param value
 */
onIdChange: function (field, value) {
    var me = this;

    me.setVimeoPreviewImage(value);
},

/**
 * Does a request to the vimeo api to get the preview image of the video.
 * We will use the hidden input field we created via the helper functions to
 * store the data we receive from the api.
 *
 * @param vimeoId
 * @returns { boolean }
 */
setVimeoPreviewImage: function (vimeoId) {
    var me = this;

    if (!vimeoId) {
        return false;
    }

    /**
     * Create the url to the correct api endpoint for the given video id.
     */
    var url = Ext.String.format('https://vimeo.com/api/v2/video/[0].json', vimeoId),
        xhr = new XMLHttpRequest(),
        response;

    /**
     * Request additional information about the video.
     */
    xhr.onreadystatechange =  function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            response = Ext.JSON.decode(xhr.responseText);

            /**
             * Save the preview image in the hidden input field.
             */
            if (response[0]) {
                me.videoThumbnailField.setValue(response[0]['thumbnail_large']);
            }
        }
    };

    xhr.open('GET', url, true);
    xhr.send();
}

});
//{/block}

Schritt 21: Erstellen Sie im Ordner emotion_components einen neuen Unterordner widgets.

Schritt 22: Erstellen Sie im Ordner widgets 2 neue Unterordner (emotion>components) und erstellen Sie im Ordner components eine Datei mit dem Namen emotion_viemo.tpl

Schritt 23: Schreiben Sie diesen Code in die Datei emotion_viemo.tpl.

{block name="widgets_emotion_components_vimeo_element"}

    {$videoURL = "https://player.vimeo.com/video/{$Data.vimeo_video_id}?color={$Data.vimeo_interface_color|substr:1}"}

    {if !$Data.vimeo_show_title}
        {$videoURL = "{$videoURL}&title=0"}
    {/if}

    {if !$Data.vimeo_show_portrait}
        {$videoURL = "{$videoURL}&portrait=0"}
    {/if}

    {if !$Data.vimeo_show_author}
        {$videoURL = "{$videoURL}&byline=0"}
    {/if}

    {if $Data.vimeo_loop}
        {$videoURL = "{$videoURL}&loop=1"}
    {/if}

    {if $Data.vimeo_autoplay}
        {$videoURL = "{$videoURL}&autoplay=1"}
    {/if}

    <iframe src="{$videoURL}"
            width="100%"
            height="100%"
            frameborder="0"
            webkitallowfullscreen
            mozallowfullscreen
            allowfullscreen>
    </iframe>
{/block}

Schritt 24: Erstellen Sie die Datei config.xml im Ordner Resources.

Schritt 25: Schreiben Sie diesen Code in die Datei config.xml.

Schritt 26: Erstellen Sie die Datei services.xml im Ordner Resources.

Schritt 27: Schreiben Sie diesen Code in die Datei services.xml.

Schritt 28: Erstellen Sie einen neuen Unterordner Subscriber im Verzeichnis ShoppingWorldElement.

Schritt 29: Erstellen Sie im Ordner Subscriber eine neue Datei namens TemplateRegistration.php

Schritt 30: Schreiben Sie diesen Code in die Datei TemplateRegistration.php.

<?php

namespace ShoppingWorldElement\Subscriber;

use Enlight\Event\SubscriberInterface;
use Enlight_Controller_ActionEventArgs;

class TemplateRegistration implements SubscriberInterface
{
/**
* @var string
*/
private $pluginDirectory;

/**
 * @param $pluginDirectory
 */
public function __construct($pluginDirectory)
{
    $this->pluginDirectory = $pluginDirectory;
}

/**
 * {@inheritdoc}
 */
public static function getSubscribedEvents()
{
    return [
        'Enlight_Controller_Action_PostDispatchSecure_Backend_Emotion' => 'onPostDispatchBackendEmotion'
    ];
}

/**
 * @param \Enlight_Controller_ActionEventArgs $args
 */
public function onPostDispatchBackendEmotion(\Enlight_Controller_ActionEventArgs $args)
{
    $view = $args->getSubject()->View();
    $view->addTemplateDir($this->pluginDirectory . '/Resources/views');
    $view->extendsTemplate('backend/emotion/shopping_world_element/view/detail/elements/vimeo_video.js');
}

}

Schritt 31: Gehen Sie nun in die Verwaltungskonsole und wählen Sie Marketing>Einkaufswelten.

Schritt 31: Klicken Sie auf das Bleistiftsymbol der Einkaufswelt.

Schritt 32: Klicken Sie auf die Option Elemente. Und Sie können Ihr neues benutzerdefiniertes Shopping-Element verwenden.

Schritt 33: Ziehen Sie das Element und klicken Sie auf das Stiftsymbol, um das Element zu bearbeiten.

How To Create A New Shopping World Element In Shopware 5

Schritt 34: Geben Sie die Video-ID ein und wählen Sie eine Option, die Sie verwenden möchten.

Schritt 35: Nachdem Sie diesen Vorgang gespeichert haben, gehen Sie zum Front-Store und sehen Sie nach, ob das benutzerdefinierte Element funktioniert oder nicht.

Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns unter +91-8800519180 an, wenn Sie Unterstützung zu Shopware 5 und Shopware 6 benötigen. Sie können auch die Shopware-Entwicklungsseite besuchen, um die von uns angebotenen Dienstleistungen zu prüfen.