Extending the B2B Platform

The B2Bsellers Suite is designed for maximum extensibility. Developers can create new Vue.js modules, override core components, or build entirely new pages and menu items using patterns that are highly similar to the Shopware Administration.

Quick Overview

• Familiar Syntax: Uses the same Vue.js structure as Shopware’s admin area.

• Automatic Loading: New modules are automatically detected via a central entry point.

• Hot Reloading: Use the Platform-Watcher CLI command for real-time development.

• Total Control: Override existing logic, add custom components, or register new menu entries.

Step-by-Step Guide

Initialize the Entry Point

Before starting development, you must create a main.js file in your plugin at: <PluginRoot>/src/Resources/app/b2b_platform/src/main.js

The Watcher scans for this file on startup. If you create it while the Watcher is already running, you must restart the process to detect the new file.

Start the Watcher

Watcher for the B2B Platform

To verify it's working, add console.log("B2B Platform Loaded") to your main.js. You should see the output in your browser console immediately.

Customization Examples

For a deep dive into implementation, refer to:

Example Plugin

Overriding an Existing Component

You can modify core components using Component.override. In this example, we customize the address index page.

// .../extension/address/pages/address-index/index.js

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

const { Component } = B2bPlatform;

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

// ../template.html.twig

{% block address_index %}
    <p>This block has been overridden by the Example Plugin.</p>
{% endblock %}

Registering a New Module

To create a complex feature, you can register a new module. This typically involves:

1. Creating a custom Entity and Store-API controller.

2. Building the Vue.js component.

3. Registering the module in the B2B Platform.

Best Practices

1. The development process is almost identical to Shopware Administration development. The only key difference is the directory path: simply use the b2b_platform directory instead of the administration directory within your plugin's Resources folder.

2. Mirror the structure of the B2BsellersCore plugin for consistency. Create a folder for your component/module containing a Vue.js file and a template.