Shopware 6 Branches Entity Test Task

first of all you very much for your job application.

We really appreciate your interest in working at Shape & Shift! We would like to know more about your development skills and have a closer look at them. I would like to send you a backend task to find out your skills. Hoping that is okay for you.

Also, what is your salary expectations and when would be the earliest possible date to start?

Please use for further communication hello@shapeandshift.dev

What are we acutally doing?

As a small team we're working within the background for primarily German Shopware 6 agencies as an experienced external team. Shopware 6 is a headless E-Commerce System based on Symfony 4 & Vue.js for the administration and Bootstrap, ES6 and Twig for the Storefront.

You can head over to the Shopware 6 Documentation to take a closer look into the System itself.

The Task

The test task is to create an entity to administrate branches within the administration. You have to create the Shopware Plugin, Entity and last but not least the actual administration vue component.

Please create a private Gitlab-repository at https://gitlab.com/, where you can track progress and commit your work at the end of the day. Please make sure it is not visible to public and you give only access to the group “shape-and-shift” https://gitlab.com/shape-and-shift .

You can find the documentation under https://docs.shopware.com/en/shopware-platform-dev-en

Installation

The development template offers you some development helpers such as a watcher like psh.phar administration:watch for the administration or a psh.phar storefront:hot-proxy server for the storefront. You can get all available commands with ./psh.phar.

Helpfulp links:

The new navigation point "Branches -> Overview" should be between customers and content within the administartion. It's described within the documentation how you add this navigation within your admin module. If you wonder how you can specify the order of the menu, take a look at some core module how it's done.

Now let's get started:

Plugin name: SasBranches

You can run bin/console plugin:create to create your plugin via the CLI

Entity Name: sas_branch

The following data should be maintained:

Section	Label	Type	Required	Comment
Branch	Name	varchar(255)	yes
Branch	Street	varchar(255)	yes
Branch	Postcode	varchar(255)	yes
Branch	City	varchar(255)	yes
Branch	Country	binary(16)	yes	relation to country table
Contact	Phone	varchar(255)	no
Contact	Email	varchar(255)	yes

The section is basically a new card component within the detail admin module

Dummy image, the sections are not correct here

The admin module should contain the overview page, detail & create page.

All data (name, street, ...) should be displayed on the overview page. For the overview page please use the sw-entity-listing component. I can't say it enough - Always take a look at the existing core files, for example within the sw-customer-list to see how the components and code works together.

Overview page dummy

There's no CMS element needed, just the entity with its admin module.

Again: Always have a look at the Core, how Shopware is doing it. If you're stuck or think you're going the wrong way: Ask 🗣️

Handling errors and required fields

You should always take a look at the Core, how Shopware is doing it. Regarding the error handling within an admin component, take a look at the mapPropertyErrors computed property within any core admin component, for example the sw-customer-address-form component

If you take a look at the map-error-serice you will see that you have to pass your entityName followed by your properties which are representing the propertyName from your entity definition within an array.

The mapPropertyErrors within your admin vue component are basically mapped to your Entity Definitions within the FieldCollection. You can have a look at the Product Translation Entity for example, where you pass the new Required() to the addFlags method.

If you then have a look at the sw-product-basic-form component you will see that the entityName is passed - in this case product, followed by it's definitions as an array: In this case also the name propertyName from the product translation defition.

Translations

Also make sure to use translation snippets for labels, placeholders and text. You can again - Take a look at the Core code how it's done, for example within the sw-customer-address-form component

What we expect

Get the best out of you! Show what you are capable of. But don't do over engineering! Our goal is to see, if you're able to implement the requirements in a simple way but in high quality, which is good to maintain and improve in the future. We want to see your approach and see at which stage you are in your career currently to become an excellent developer.

A good developer code goes through 4 stages:

simple and wrong
complex and wrong
complex and right
simple and right

There is no real deadline for the task, but the sooner the better. But don't rush things, a high code quality is very important for us, therefore provide your best results - clean, lean high quality code!

What we do

We will check your code, quality and collaborating with you.

Why we're going this way?

You can prove your skills and showing us your willingness, so we could compare your results with our code requirements. It is the quality that matters and we want to see your individual responsibility. I hope, this way is ok for you. If you have any questions, don't hesitate to contact me.

I know Shopware 6 is completly new for you and it may take some time to dive into it. So better ask if you don't know something instead of digging for hours and hours.

Looking forward hearing back from you. As mentioned above, please use for further communication hello@shapeandshift.dev

Shape-and-Shift / shopware-test-task