How to extend the B2B Platform (Storefront Vue.js)

In this guide, you will learn how to successfully expand the B2B platform (in the frontend), whether through the integration of new components/modules, the addition of menu items, or the customization

Summary:

• As a developer, you can create new Vue.js files (modules, pages, etc.) in the familiar Shopware Administration way, which will be automatically loaded.

• Use the "b2b:platform:watcher" cli command to make local adjustments docs https://docs.b2b-sellers.com/b2b-platform/developer-guides/first-steps/how-to-start-the-b2b-platform-vue.js-watcher

• You can add new modules/components.

• You can override/extend existing modules/components.

• You can build entirely new pages by adding new menu items in the B2B platform.

.

Detail Guide:

1. create main.js file

Before starting the watcher, create the file main.js in your plugin under /Resources/views/b2b_platform/. Initially, you don't need to add any content.

2. start B2B-Platform watcher

Locally start the b2b:platform watcher with the user you need for testing to have the appropriate context.

Why do you need to load main.js before starting the watcher? Because the watcher iterates through all plugins and folders, looking for main.js, and automatically reloads the modules on changes. If you create main.js after the watcher is already running, you'll need to restart the watcher.

3. add first content to main.js

If you add console.log("hello") in main.js, you will see the output in your browser console when loading the B2B platform initially. If this doesn't happen, something went wrong with loading the main.js file.

4. create directory structure

Now, similar to the b2bsellerscore, you can create a suitable folder structure and within it, a Vue.js file and a template file. Make sure that you import new files (functions/components) into your main.js file!

5. Now, start developing

You are ready for development new functions like b2b platform menu items or other cool components.

Take a look into the example Plugin

Take a look here: https://github.com/b2bsellers-suite/B2bExamplePlugin/tree/main/src/Resources/app/b2b_platform/src.

There are already two examples of how to extend the B2B platform.

Example 1 - Overwrite existing component

In address-index, a component provided by b2bsellers is overridden. This is done with Component.override('address-index', .... Here, we simply override the address_index block with different content.

// /src/Resources/app/b2b_platform/src/extension/address/pages/address-index/index.js

import template from './template.html.twig';

const {Component, Mixin} = B2bPlatform;

Component.override('address-index', {
    template,
});

// /src/Resources/app/b2b_platform/src/extension/address/pages/address-index/template.html.twig

{% block address_index %}
    <p>Here we overwrite the address_index block from the B2B platform with the Example plugin</p>
{% endblock %}

Example 2 - register new module for b2b-platform menu

Under modules/example-device, you find a new module with a table component, Create, and Edit.

In the B2bExample Plugin, we have created a separate entity with Store-API controllers for this, which is then represented as a table in the B2B platform.

This is more complex module, please take a look into the github repro.

Last tip: Extending/overriding in the B2B platform is straightforward and closely follows the approach in the Shopware Administration. The only difference is that you need to create the "b2b_platform" folder instead of "administration" in the Resources directory.