Shopware 6: Dynamic Customer Group Switching With Frontend Toggle

Oct 13, 2025 by Dimemap Team 66 views

Hey guys! Let's dive into crafting a cool Shopware 6 plugin that allows your customers to dynamically switch between customer groups (like those with or without VAT) right from the frontend using a simple toggle. You've already got the UI working, which is awesome! So, we'll focus on the backend logic to connect the dots and make this thing sing. This is especially useful for those of you running a B2B shop alongside a B2C one, or if you need to cater to different tax regulations based on location. Get ready to level up your Shopware game!

The Big Picture: What We're Building

So, the game plan is this: We're building a Shopware 6 plugin that listens for a toggle switch in your frontend. When a customer flips that switch, the plugin will update their customer group in real-time. Think of it like instant access to either VAT-inclusive or VAT-exclusive pricing. The core components will include a backend plugin that handles the heavy lifting of modifying the customer's session, a frontend part that manages the toggle switch's interaction, and the glue in between that connects it all. The plugin will need to: store the customer's desired customer group in the session, retrieve the customer's current customer group, and update the customer's session with the new customer group when the toggle is switched. This will ensure that the prices on the page reflect the correct VAT settings. Let's break down the steps!

Setting Up Your Shopware 6 Plugin

Alright, first things first: We need to get our plugin structure ready. This involves creating a new directory in your Shopware 6 custom/plugins/ directory. Name it something descriptive, like SwagCustomerGroupToggle. Inside this directory, you'll need a plugin.xml file. This file provides basic information about your plugin, such as the name, description, and version. After the plugin.xml file, we need to create a composer.json file, this file will handle the plugin's dependencies. It is really important! For example, a basic plugin.xml might look like this:

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="./plugin.xsd">
 <name>SwagCustomerGroupToggle</name>
 <label>Customer Group Toggle</label>
 <version>1.0.0</version>
 <license>MIT</license>
 <author>Your Name</author>
 <description>Allows customers to switch customer groups via a frontend toggle.</description>
 <changelog>
  <version>
   <label>1.0.0</label>
   <changes>Initial release.</changes>
  </version>
 </changelog>
 <compatibility>
  <minimum-version>6.4.0</minimum-version>
  <maximum-version>6.9.9999999.9999999</maximum-version>
 </compatibility>
</plugin>

Then, create a composer.json file. Run composer install in your plugin directory. This will create the vendor directory. In addition, create a file named SwagCustomerGroupToggle.php file. Inside it, you'll define your plugin class, extending Shopware\Core\Framework\Plugin. This class is the heart of your plugin, and it's where you'll handle the plugin's lifecycle and functionality. This file is the main entry point for your plugin and should handle the basic plugin setup, like registering services. The SwagCustomerGroupToggle.php file will look something like this:

<?php

namespace SwagCustomerGroupToggle;

use Shopware\Core\Framework\Plugin;

class SwagCustomerGroupToggle extends Plugin
{
}

Make sure to activate the plugin in the Shopware admin or via the console using the command bin/console plugin:install --activate SwagCustomerGroupToggle. This is the barebones structure, but it's enough to get started. Let's move on to the real magic: making the customer group changes happen!

Backend Logic: Hooking into the Session and Customer Data

This is where the core magic happens. Our plugin needs a way to store the customer group preference in the session. We'll also need to update the customer's session whenever the toggle is flipped. Now, let's look at how we can implement the session management and the hook into customer data to update the customer's customer group. The first step is to define the services. The services.xml file configures the services used by your plugin. This file goes in the Resources/config directory. To handle this, let's create a custom service, probably a controller or a custom service. Then define a service, it could be a service class like CustomerGroupService, that handles the logic to get, set, and update the customer group. We will register it in services.xml. This service will be responsible for managing the customer group within the session and updating it when required. The services.xml file might look like this:

<?xml version="1.0" ?>
<container xmlns="http://symfony.com/schema/dic/services" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
 <services>
  <service id="SwagCustomerGroupToggle\Service\CustomerGroupService">
   <argument type="service" id="session"/>
   <argument type="service" id="Shopware\Core\System\SalesChannel\SalesChannelContextService"/>
   <argument type="service" id="customer.repository"/>
  </service>

  <service id="SwagCustomerGroupToggle\Controller\CustomerGroupController">
   <argument type="service" id="SwagCustomerGroupToggle\Service\CustomerGroupService"/>
   <call method="setContainer">
    <argument type="service" id="service_container"/>
   </call>
   <tag name="controller.service_subscriber"/>
  </service>
 </services>
</container>

Inside CustomerGroupService.php, you will need to get the customer's current group, set the customer's group, and update it. This service handles all the logic to manage the customer group. The important part here is to use the session service to store the customer group and the customer.repository to update the customer's data. For example:

<?php

namespace SwagCustomerGroupToggle\Service;

use Shopware\
Core\Framework\DataAbstractionLayer\EntityRepositoryInterface;
use Shopware\Core\System\SalesChannel\SalesChannelContextService;
use Symfony\Component\HttpFoundation\Session\SessionInterface;

class CustomerGroupService
{
 private SessionInterface $session;
 private SalesChannelContextService $salesChannelContextService;
 private EntityRepositoryInterface $customerRepository;

 public function __construct(
  SessionInterface $session,
  SalesChannelContextService $salesChannelContextService,
  EntityRepositoryInterface $customerRepository
 )
 {
  $this->session = $session;
  $this->salesChannelContextService = $salesChannelContextService;
  $this->customerRepository = $customerRepository;
 }

 public function getCustomerGroupFromSession(): ?string
 {
  return $this->session->get('customer_group_id');
 }

 public function setCustomerGroupInSession(string $customerGroupId): void
 {
  $this->session->set('customer_group_id', $customerGroupId);
 }

 public function updateCustomerGroup(string $customerGroupId, string $salesChannelId, string $customerId):
  void
 {
  $salesChannelContext = $this->salesChannelContextService->getContext($salesChannelId);

  $this->customerRepository->update(
  [
  [
  'id' => $customerId,
  'customerGroupId' => $customerGroupId,
  ],
  ],
  $salesChannelContext->getContext()
  );
 }
}

Now you can interact with the customer group, using the CustomerGroupController to handle incoming requests from the frontend. We'll set up an API endpoint that receives the customer group ID from the frontend and updates the customer group using the service we just created.

Creating the Controller and API Endpoint

To communicate with the frontend, we need to define an API endpoint. Create a new controller, let's say CustomerGroupController. This controller will handle the incoming requests from your frontend toggle. Inside this controller, you'll have an action that receives the new customer group ID and updates the customer's session. This action will then call the CustomerGroupService we defined earlier to actually perform the necessary actions. Example code below:

<?php

namespace SwagCustomerGroupToggle\Controller;

use Shopware\Core\Framework\Routing\Annotation\RouteScope;
use Shopware\Core\Framework\Routing\Annotation\Since;
use SwagCustomerGroupToggle\Service\CustomerGroupService;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;

/**
 * @RouteScope(scopes={"storefront"})
 */
class CustomerGroupController extends AbstractController
{
 private CustomerGroupService $customerGroupService;

 public function __construct(CustomerGroupService $customerGroupService)
 {
  $this->customerGroupService = $customerGroupService;
 }

 /**
  * @Since("6.0.0.0")
  * @Route("/customer-group-toggle/update", name="frontend.customer.group.update", methods={"POST"})
  */
 public function updateCustomerGroup(Request $request):
  JsonResponse
 {
  $customerGroupId = $request->request->get('customerGroupId');
  $salesChannelId = $request->request->get('salesChannelId');
  $customerId = $request->request->get('customerId');

  if (!$customerGroupId || !$salesChannelId || !$customerId) {
  return new JsonResponse(['success' => false, 'message' => 'Missing parameters'], 400);
  }

  try {
  $this->customerGroupService->updateCustomerGroup($customerGroupId, $salesChannelId, $customerId);
  return new JsonResponse(['success' => true]);
  } catch (\Exception $e) {
  return new JsonResponse(['success' => false, 'message' => $e->getMessage()], 500);
  }
 }
}

In this example, we get the new customer group ID from the request. Then use the service to update the customer group for a specific customer. Remember to configure the controller in your services.xml file, as shown in the previous section, so that Shopware knows how to use this controller.

Frontend Magic: The Toggle Switch and JavaScript

Now for the fun part! You've got the UI working already, but let's ensure it's talking to our backend. You'll need to add the JavaScript to your storefront theme. This will include fetching the current customer's group and setting it, the logic for the toggle switch and making an API call to update the customer group when the toggle's state changes.

First, let's consider the HTML. The structure for the toggle switch might look something like this:

<div class="customer-group-toggle">
 <label for="customerGroupToggle">Switch Customer Group</label>
 <input type="checkbox" id="customerGroupToggle" name="customerGroupToggle">
</div>

This is a simple HTML structure. The key is the id and the name. In your theme.js file, which you'll create if you don't have one, you'll attach an event listener to this toggle. When the toggle changes its state, a fetch request should be made to the API endpoint we created, including the customerGroupId . The javascript file might look like:

import axios from 'axios';

document.addEventListener('DOMContentLoaded', () => {
 const toggle = document.getElementById('customerGroupToggle');
 if (!toggle) {
  return;
 }

 const salesChannelId = document.querySelector('input[name="salesChannelId"]')?.value;
 const customerId = document.querySelector('input[name="customerId"]')?.value;

 toggle.addEventListener('change', async () => {
  const customerGroupId = toggle.checked ? 'your_vat_group_id' : 'your_no_vat_group_id';

  try {
  const response = await axios.post('/customer-group-toggle/update', {
  customerGroupId: customerGroupId,
  salesChannelId: salesChannelId,
  customerId: customerId,
  });

  if (response.data.success) {
  console.log('Customer group updated successfully');
  }
  } catch (error) {
  console.error('Error updating customer group:', error);
  }
 });
});

In the code above, we're listening for changes to the toggle and making an API call to our custom endpoint when the toggle is changed. This code also includes the relevant parameters needed to update the customer group properly. Be sure to include your theme in the Resources/views/storefront/ directory.

Testing and Troubleshooting

After implementing the plugin, thoroughly test it. Activate the plugin in your Shopware 6 admin panel. You might need to clear the cache after activating and installing the plugin. Test by logging in as a customer, switching the toggle, and verifying that the prices on the storefront reflect the correct VAT settings. Use your browser's developer tools to check for errors in the console, and make sure your API endpoint is being hit and that the requests are being correctly processed.

Common Issues and Solutions:

Cache Issues: Clear your Shopware cache after installing or updating the plugin. Run the command bin/console cache:clear in the root directory.
Permissions: Make sure your plugin files have the correct permissions to be read and executed by the web server.
Incorrect Endpoint: Double-check that your API endpoint URL in the JavaScript code matches the route you defined in your controller.
Session Management: Verify that the session is correctly initialized and that the customer group information is being stored and retrieved properly.
Debugging: Use console.log() statements in your JavaScript code and dump() or error_log() in your PHP code to debug issues.

Conclusion

And that's the basics, guys! You should now have a working Shopware 6 plugin that allows your customers to toggle their customer groups from the frontend. Remember to customize the customer group IDs according to your shop's setup. You can expand this plugin with more features, like adding a confirmation message after the customer group is updated, or integrate with other services that might be useful for your specific needs. This is just a starting point – go build something awesome!