> For the complete documentation index, see [llms.txt](https://docs.b2b-sellers.com/b2b-platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.b2b-sellers.com/b2b-platform/developer-guide/how-to/extending-the-b2b-platform.md).

# 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.

{% hint style="info" %}
This page covers the Vue.js frontend of the B2B Platform. For PHP-side extension points around cart recalculation — preserving custom line item payload and address entity extensions across order approvals and virtual carts — see [Cart Recalculation Extension Points](/b2b-platform/developer-guide/how-to/cart-recalculation-extension-points.md).
{% endhint %}

## 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`

{% hint style="info" %}
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.
{% endhint %}

### **Start the Watcher**

{% content-ref url="/pages/waMGPjlhhwvTotGMG6op" %}
[Watcher for the B2B Platform](/b2b-platform/developer-guide/cli-commands/development-commands/watcher-for-the-b2b-platform.md)
{% endcontent-ref %}

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:

{% content-ref url="/pages/dYXWl5eudbdquVn13CQK" %}
[Example Plugin](/b2b-platform/developer-guide/first-steps/example-plugins.md)
{% endcontent-ref %}

### **Overriding an Existing Component**

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

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

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

const { Component } = B2bPlatform;

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

```twig
// ../template.html.twig

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

#### Overriding the address cards

The address overview spans two components. `address-index` holds the page frame — the title, the two default address cards, and the modal with its form fields. The list of all remaining addresses lives in its own `address-detail-list` component, which fetches and pages the addresses itself.

The example above is unaffected: `address_index` and every `address_index_*` block still belong to `address-index`. An override that reaches into the individual address cards has to target the other component. The block names are unchanged — only the component they belong to is different:

```javascript
// the page frame, the default address cards, the modal
Component.override('address-index', { template });

// the cards of the paged address list
Component.override('address-detail-list', { template });
```

These blocks belong to `address-detail-list`:

| Block                                                             | Purpose                                                           |
| ----------------------------------------------------------------- | ----------------------------------------------------------------- |
| `address_detail_list`                                             | the whole list, including search and pagination                   |
| `address_detail_list_search`                                      | the search field above the list                                   |
| `address_detail_list_loader`                                      | the loading indicator for the first page                          |
| `address_detail_list_empty`                                       | the message shown when no address matches                         |
| `address_detail_list_row`                                         | the grid holding the address cards                                |
| `address_detail_list_pagination`                                  | the pagination below the list                                     |
| `page_account_address_overview_body`                              | one address card                                                  |
| `page_account_address_overview_address`                           | the rendered address inside a card                                |
| `page_account_address_overview_actions`                           | the action area of a card                                         |
| `page_account_address_overview_actions_shipping_set_default`      | "set as default shipping address"                                 |
| `page_account_address_overview_actions_billing_set_default`       | "set as default billing address"                                  |
| `page_account_address_overview_actions_edit`                      | the edit button                                                   |
| `page_account_address_overview_actions_delete`                    | the delete button                                                 |
| `page_account_address_overview_actions_edit_shipping_set_default` | the disabled shipping button without the `editAddress` permission |
| `page_account_address_overview_actions_edit_billing_set_default`  | the disabled billing button without the `editAddress` permission  |
| `page_account_address_overview_actions_edit_second`               | the disabled edit button without the `editAddress` permission     |
| `page_account_address_overview_actions_delete_second`             | the disabled delete button without the `editAddress` permission   |
| `page_account_address_overview_actions_custom`                    | empty, for your own actions on a card                             |

### **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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.b2b-sellers.com/b2b-platform/developer-guide/how-to/extending-the-b2b-platform.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.