Shopware bronze & extension partner
Certified Advanced Developers & solution architects
200+ E-commerce Rrojects
50+ Professional developers
Shopware is made up of several modules that separate the entire code base into manageable chunks. Modules may be independent or reliant on other modules.
At a high level, Shopware consists of several modules that divide the complete code base into logical pieces. Modules might be autonomous or dependent on other modules.
Let’s examine the general component layout of the Storefront. When you access this directory, you will see many subdirectories and templates. (./Resources) play a significant role in the functionality of the Storefront component. In addition to that, there are more directories worth checking out: <Storefront> – Controller – DependencyInjection – Event – Framework – Migration – Page – Pagelet – Resources – Test – Theme – .gitignore – composer.json – phpunit.xml.dist – README.md – Storefront.php Starting at the top of this list is the Controller directory which contains all Storefront controllers. As previously stated, a page is constructed inside the same controller with the aid of the appropriate page loaders, pages, pagelets, and event. All of them are found in the directory’s pages, pagelets, and their subdirectories. Annotations are used to provide detailed information about each controller method’s routing. All dependencies utilized by the controllers are included in the DependencyInjection directory. The Framework directory, among other things, contains the routing, caching, and additional information, in contrast to the Event directory, which contains route request events. Of course, migrations and testing also apply to our Storefront component (e.g., tests for each Storefront controller). The template structure inside. /Resources is a starting template derived from the Bootstrap since the Storefront theme uses Bootstrap. Webpack is also used for bundling and transpiring, in addition to using SASS as the CSS preprocessor and Twig as the template engine. This directory layout is an excellent practice for templating.
The specialized SPA sources are in the Administration component of platform/src/Administration in a specific subdirectory, even though the main Vue.js application is wrapped inside a Symfony bundle. Therefore, /Resources/app/administration is the SPA’s primary entry point. Think of everything else in platform/src/Administration as a wrapped configuration for the SPA. The main goals of this bundle are to initialize the Routing (/admin) and the Administration’s main template file, which in turn initializes the SPA (./Resources/views/administration/index.html.twig), as well as offering to handle translation. The three different cases the administration faces are organized along the src directory of the SPA below: • Offer components • An application skeleton • Common functionality <platform/src/Administration/Resources/app/administration/src/> – app – core – module • App: This section contains the Administration’s application framework. Typically, this is where you’ll discover computational elements that depend on the framework. • The binding to the Admin API and services are contained in the core. • Module: Specific view pages’ UI and state management are organized along the Core modules. To understand more about the structure of a module, go to the modules section.
The need-to-render entrance point represents a page that contains views. A view is a lower-level section of the page that includes components. A component can carry other components within itself; the directory structure is undifferentiated after this point. At least one page must be included in each module. Although views and components can be included in the module, there is also a sizable default component library to assist with common situations. |- page1 |- view1 |- component1 |- component2 |- subcomponent1 |- view2 |- component3 |- …
You can examine the order module in greater detail to see a more realistic example. This structure is usually present in conjunction with other modules regarding establishing pages or views for adding, modifying, listing, or viewing a particular entity. <platform/src/Administration/Resources/app/administration/src/module/sw-order/> |- acl |- component |- sw-order-address-modal |- … |- page |- sw-order-create |- sw-order-detail |- sw-order-list |- snippet |- state |- view |- sw-order-create-base |- sw-order-details-base |- index.js If you want to build your own web shop or have questions relating to e-commerce development platforms or apps, read our blog posts for Shopify and Shopware. Our dedicated outsourcing team can be your collaborator in e-commerce.
