Share on linkedin
Share on facebook
Share on twitter

Shopware – Shopping World

Share on linkedin
Share on facebook
Share on twitter
Bartosz Kaminski

Bartosz Kaminski

Frontend developer working with react.js and vue.js.

I’ve recently been spending a lot of time working on a built-in function in Shopware called Shopping World. My task, or for a better word, my goal, was simply to create special elements for Shopping World, taking into account the individual preferences of the customer. This is undoubtedly a rather intriguing function and one of the most interesting features of Shopware.

What is it exactly is Shopware’s Shopping World?

Let’s first start by discussing what Shopping World really is and what it’s for. Shopping World is a special feature in Shopware that has been designed to enable the user to create and edit impressive landing pages, product presentations and marketing campaigns with only but a few clicks of the mouse. In one design view, you can freely position elements on the page. Among the standard elements are:

• products,
• images,
• banners,
• HTML text,
• movies.

            However, if a client demands a special element that would reflect his individual preferences, then the non-standard element needs to be created. This requires advance programming skills.


Create a custom item

            Shopware provides some helpful functions that can be used when a DependencyInjectionContainer is available. Please download shopware.emotion_component_installer, a simple plugin where you can register one or more items with the createOrUpdate () method. Below you can see the code which is needed to create a custom item that contains two youtube videos.

$this->emotionComponentInstaller = $this->container->get('shopware.emotion_component_installer');

public function create_video_element()
{
    $videoElement = $this->emotionComponentInstaller->createOrUpdate(
        $this->pluginName,
        'SzVideoElement',
        [
            'name' => 'SZ Video Element',
            'xtype' => 'emotion-components-sz-video-element',
            'template' => 'sz_video_element',
            'cls' => 'emotion-video-element',
            'description' => 'Two youTube-embed video elements'
        ]
    );
    
    $videoElement->createTextField([
        'name' => 'sz_video_header',
        'fieldLabel' => 'Header',
        'supportText' => 'Enter some text.',
        'allowBlank' => false
    ]);

    $videoElement->createTextField([
        'name' => 'sz_video_id_1',
        'fieldLabel' => 'Youtube video id 1',
        'supportText' => 'Enter video id',
        'allowBlank' => false
    ]);

    $videoElement->createTextField([
        'name' => 'sz_video_description_1',
        'fieldLabel' => 'Video description text 1',
        'supportText' => 'Enter some text.',
        'allowBlank' => true
    ]);


    $videoElement->createTextField([
        'name' => 'sz_video_id_2',
        'fieldLabel' => 'Youtube video id 2',
        'supportText' => 'Enter video id',
        'allowBlank' => true
    ]);

    $videoElement->createTextField([
        'name' => 'sz_video_description_2',
        'fieldLabel' => 'Video description text 2',
        'supportText' => 'Enter some text.',
        'allowBlank' => true
    ]);

}

In the install() method, we use a helper class that creates a new element, while in the createOrUpdate() method, you should place the plug-in’s name in the configuration tables.

Then I added various form fields, which can be freely configured by the user at his discretion. In our case, I added fields were the client can edit the element header, movies and movie descriptions.

Then I created a frontend template, which must be in the following path “Resources / views / emotion_components / widgets / emotion / components / {elementName} .tpl”. The frontend code looks like this:

{block name="widget_emotion_component_sz_video_element_panel"}

{if $Data}
<div class="emotion--video-element" id="{$Data.sz_video_id_section}"{/if} >
        <h2 class="emotion--video-element-header">{$Data.sz_video_header}</h2>
    <div class="emotion--video-element-container">
        <div class="emotion--video-element--youtube">
            <iframe width="100%" height="315" src="https://www.youtube.com/embed/{$Data.sz_video_id_1}"
                    frameborder="0"
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
            </iframe>
        {if $Data.sz_video_description_1} <span class="emotion--video-element--description">{$Data.sz_video_description_1}</span>{/if}
        </div>
        {if $Data.sz_video_id_2}
            <div class="emotion--video-element--youtube">
                <iframe width="100%"  height="315" src="https://www.youtube.com/embed/{$Data.sz_video_id_2}"
                frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen>
                </iframe>
                {if $Data.sz_video_description_2}<span class="emotion--video-element--description">{$Data.sz_video_description_2}</span>{/if}
            </div>
        {/if}
    </div>
</div>

{/if}

{/block}

To load the template, you must register the component view subscriber of the emotion component in the dependency injection container.

Benefits of Using the Shopping World

            While working with the Shopping World feature, I saw many advantages. First of all, the ease and convenience of use and of course the ability to create and edit website content without any prior programming knowledge or experience. Another key advantage of this feature is the responsiveness of elements and the possibility of allocating individual elements onto selected devices.

            For Shopping World support we use designer tools that are transparent and easy to use. All you need to do is select the appropriate grid and adjust the elements individually to your needs. Below, I am going to show you what the designer tool looks like in Shopping world and how easy it is to use.

On the left, we have a library of elements available for use. The standard panel contain elements already built into the Shopping World. However, we also have additional non-standardised elements at our disposal, elements that were created on the basis of that individual client’s requirements and preferences.

To use an element, drag and drop it onto the grid and edit it according to your person preferences.

Summary

            In this article, we’ve covered what the Shopping World is and how to create custom items. The shopping world is undoubtedly a very useful tool that allows you to customize the content, pictures and present the product in such a way that both highlights the product and encourages customers to make a purchase.

`adam

Twoja wiadomość została wysłana prawidłowo

Wkrótce skontaktujemy się z Tobą. 

`adam

YOUR MESSAGE WAS SENT Successfully​

We will contact you regarding your request soon.

Privacy Statement

Personal data

Dear User,
From 25 May 2018, Regulation 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of individuals with regard to the processing of personal data and on the free movement of such data and repealing Directive 95/46/EC, referred to as “ODA”, will be in force.

Below you will find information on how to process your data. If you would like to know more, please contact us.

We process personal data in accordance with the principles of accountability, adequacy and reliability.

The Administrator of the service has made due diligence in order to adequately secure the personal data provided by you, and in particular to prevent their disclosure to unauthorized persons.

We collect information about you when you use our service, when you register with us, when you fill in the contact form. It is data such as: name, company name, telephone, e-mail, industry. In addition, we automatically collect and store information about your computer and browser, including your IP address, software and hardware version, and the pages you visit. Your personal data is collected by us when you use our services, e.g. websites. Personal data may be stored in cookies (referred to below) which we or our trusted partners install on our websites, as well as in devices you use when using our services or offers. You can change or customize your cookie files. If you do not change these settings, you agree to the use of cookies.

The administrator of personal data is eastside-solutions sp. z o.o. with its registered office in Gdańsk, ul. Szafarnia 6/47, 80-755 Gdańsk, NIP: 525-272-47-40, REGON: 368429420 and our trusted partners, with whom we constantly cooperate, above all, in the field of adapting the content on our website to your needs.

We process your data for the following purposes:

That the services we provide are interesting and useful for Ceba,
To ensure that the content on our site meets your needs,
To ensure the security of your data and to prevent any misuse,
To contact you and send you (with your prior consent) messages containing commercial information,
To carry out direct marketing for you only with prior consent,
To react to information sent to the Administrator using the contact form,
To improve the performance, functionality and efficiency of our website and to determine the effectiveness of our marketing activities.
We collect data on the traffic on our website from our trusted Google partner.

The law allows us to transfer your data to our partners, who will process it on our behalf, i.e. our subcontractors and our employees.

We do not sell or otherwise transfer your personal information to third parties. This does not apply to trusted partners who assist us in running our website or business, as long as they agree to keep this information confidential. Your personal data may be made available to entities entitled to receive it under the applicable law, including judicial authorities. Your data will not be transferred outside the European Union.

You have the right at any time to withdraw your consent to the processing of personal data by Lemonmind Olgierd Mrozik and our trusted partners. In addition, you are entitled to a claim:

access to their data,
the deletion of their data,
rectify their findings,
the limits of their processing,
to object to the processing,
transfers.

To do this, contact the administrator of your personal data via e-mail or mailing address:
eastside-solutions sp. z o.o. E-mail: info@eastside-solutions.com
Szafarnia 6/47, 80-755 Gdańsk

The withdrawal of consent shall not affect the lawfulness of any processing carried out on the basis of your consent prior to the withdrawal.

You also have the right to lodge a complaint with the supervisory authority of the GIODO/Personal Data Protection Authority.

Any processing of your data must be based on an appropriate legal basis in accordance with the applicable laws. Such a legal basis is the so-called legitimate interest of the controller. Processing of your data for marketing purposes will be subject to your voluntary consent.

We reserve the right to make changes to the Privacy Policy.

Privacy statement

This Privacy Policy sets forth the rules of storing and accessing information on the User’s devices by means of Cookies files, used to provide electronic services requested by the User, by eastside-solutions sp. z o.o. with its registered office in Gdańsk, ul. Szafarnia 6/47, 80-755 Gdańsk.

§ 1 Definitions
Administrator – means eastside-solutions sp. z o.o. with its registered office in Gdańsk, ul. Szafarnia 6/47, 80-755 Gdańsk, NIP: 525-272-47-40, REGON: 368429420, who provides electronic services and stores and accesses information in the User’s devices.
Cookies – means information technology data, in particular small text files, stored on devices through which the User uses the website of the Service.
Administrator Cookies – means Cookies placed by the Administrator, related to the provision of services by the Administrator electronically through the Website.
External Cookies – means Cookies placed by the Administrator’s partners, via the Website.
Service – means a website where the Administrator runs a website operating in the eastside-solutions.com domain.
Device – means an electronic device through which the User obtains access to the website of the Service.
User – means an entity for which, in accordance with the Regulations and legal regulations, electronic services may be provided or with whom an Agreement for the provision of electronic services may be concluded.

§ 2 Types of Cookies used
The cookies used by the Cookies Administrator are safe for the User Device. In particular, this way it is not possible for viruses or other unwanted software or malware to reach the User Devices. These files allow to identify the software used by the User and to adjust the Service individually to each User. Cookies usually contain the domain name from which they come, the time they are stored on the Device and the assigned value.

The administrator uses two types of cookies:
Session cookies: are stored on your device and remain there until the end of the session of your browser. The stored information is then permanently deleted from the device memory. The session cookie mechanism does not allow the retrieval of any personal or confidential information from the User Device. Persistent cookies: are stored on your device and remain there until you delete them. Terminating the session of a particular browser or disabling the Device does not delete it from the User’s Device. The persistent cookie mechanism does not allow the retrieval of any personal data or confidential information from the User Device.

You can restrict or disable the access of cookies to your Device. In the event of using this option, the use of the Website will be possible, except for the functions that by their nature require cookies.

§ 3 Purposes for which Cookies are used
The Administrator uses his/her own cookies in order to configure the service correctly, in particular to: adjusting the content of the Service’s websites to the User’s preferences and optimising the use of the Service’s websites; identify the Service User’s device and its location and display the website accordingly, adjusted to his individual needs; remember the settings you have selected and personalize the User Interface, for example, with regard to the language or region of your choice; remembering the history of the pages visited on the website in order to recommend the content; font size, website appearance, etc.

The Administrator uses his/her own cookies in order to authenticate the user on the website and ensure the user’s session on the website, in particular to: maintenance of the Service User session (after logging in), thanks to which the User does not have to re-enter the login and password on every subpage of the Service; correct configuration of selected functions of the Service, enabling, in particular, verification of the authenticity of browser sessions. optimisation and increase of efficiency of services provided by the Administrator.

The Administrator uses his own cookies in order to implement the processes necessary for the full functionality of websites, and in particular to: adjusting the content of the Service’s websites to the User’s preferences and optimising the use of the Service’s websites. In particular, these files allow you to recognize the basic parameters of the User Device and display the website accordingly, tailored to your individual needs; correct handling of the affiliate program, enabling, in particular, verification of the sources of redirections of Users to the websites of the Service.

The Administrator uses User Cookies in order to remember the location of the User, and in particular to correctly configure selected functions of the Service, allowing to adjust the information provided to the User, taking into account the User’s location. The Administrator uses his/her own cookies in order to analyze and research as well as to audit the audience, and in particular to create anonymous statistics which help to understand how the Users of the Service use the websites of the Service, which allows to improve their structure and content. The Administrator uses his own cookies in order to provide advertising services, and in particular to adjust the advertisements presented through the Website to the services and products of third parties. The Administrator of the service uses external cookies in order to collect information on the behavior of users of the Servile by means of the website of the statistics system Google Analytics (administrator of external cookies: Google Inc. with its registered office in the USA).

You can opt out from being tracked by Google Analytics by downloading and installing an add-on for your current web browser. Such an add-on informs JavaScript that no information about your visit shall be transferred to Google Analytics. The browser add-on for the deactivation of Google Analytics is available for Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari, and Opera (as per: September 15th, 2011).

§ 4 Possibility of specifying storage conditions or to be accessed by Cookies
You can change your settings for cookies yourself at any time by specifying the conditions under which they are to be stored and accessed by your Cookies on your Device. The User may change the settings referred to in the previous sentence by means of the settings of the Internet browser or by means of the configuration of the service. These settings may be changed, in particular, to block the automatic handling of cookies in the settings of your browser or to notify you of any placement of cookies on your device. Detailed information about the possibility and methods of using cookies are available in the settings of the software (web browser).
The user can delete cookies at any time by using the available functions in the browser he is using.
Limitation of the use of cookies may affect some of the functionalities available on the Website.

Imprint

sunzinet Polska sp. z o.o.

Head office

Szafarnia 6/47
80-755 Gdansk
Phone: +48 609 301 911
gdansk@sunzinet.com

Company information

CEO: Adam Sieczkowski
KRS: 0000694712
NIP: 525-272-47-40
REGON: 368429420
Registered: National Court Register of District Court for the Capital City of Gdansk in Gdansk

Data protection notice

We are using surfersIdent to control and to analyse the web according to the surfersIdent data privacy statement. Our visitors accept this statement by visiting our website. You will find our terms and conditions on https://www.surfersident.de.

Website tracking

To optimize and analyze websites continuously, data are anonymously collected and reprocessed through the analysis tool surfersIdent. At the same time, pseudonyms are generated to create anonymized usage profiles. These data are certainly not used to identify a visitor personally (insofar as this would be technically possible) or associated with the bearer of a pseudonym.
If you disagree with this service, please click on the following link to contradict the usage of your data and to prevent the website tracking completely.
https://www.surfersident.de/surfersident/public/auth/deactivatevisitor