README

A Shopware 6 static plugin that renders a paginated variants grid on product detail pages for products with variants.

Requirements

• Shopware 6.7.x
• PHP 8.3
• Composer-based Shopware installation

Features

• Automatically shows a variants grid on any product detail page that has variants.
• Dynamic columns based on the product's configurator groups.
• Quantity input for every variant row.
• Single "Add all to cart" button.
• Server-side filtering of rows with zero quantity via a dedicated controller.
• Seamless lazy-loading pagination via JavaScript fetch.
• Preserved quantities across pagination pages.
• Offcanvas cart opens after adding variants, matching default Shopware behavior.
• Configurable rows per page via plugin configuration.
• Unavailable variants are rendered as disabled rows.
• Color/option media rendered as swatches where applicable.

Installation

This plugin is installed as a static plugin via a Composer path repository.

1. Make sure the plugin is located at custom/static-plugins/FyrstVariantsGrid/.

2. Add the path repository to your root composer.json if it is not already present:

   {
       "repositories": [
           {
               "type": "path",
               "url": "custom/static-plugins/*",
               "options": {
                   "symlink": true
               }
           }
       ]
   }

3. Require the plugin:

   composer require fyrst/shopware-variants-grid

4. Install and activate the plugin:

   bin/console plugin:install FyrstVariantsGrid
   bin/console plugin:activate FyrstVariantsGrid

5. Build the storefront assets:

   ./bin/build-storefront.sh

Configuration

Open the plugin configuration in the Shopware administration to set:

• Rows per page — the maximum number of variants displayed per page in the grid. Default: 10.

How it works

Drop-in template override

The plugin overrides the standard buy-box template via:

src/Resources/views/storefront/element/cms-element-buy-box.html.twig

This keeps the implementation lightweight and avoids a custom CMS element.

Custom controller

Instead of submitting to the default line-item route, the grid form posts to a dedicated controller:

frontend.checkout.variants-grid.add

This controller receives every row, ignores entries with quantity <= 0, creates the remaining line items, and adds them to the cart. The response is then handled by Shopware's core AddToCartPlugin, which opens the offcanvas cart.

The same controller also provides an AJAX endpoint for lazy pagination:

frontend.checkout.variants-grid.load

It returns the rendered table rows and pagination HTML for the requested page.

Custom templates for AJAX responses

The frontend.checkout.variants-grid.load endpoint accepts two optional query parameters that allow developers to use their own Twig templates for the AJAX response:

• rowsTemplate — template used to render the variant rows.
• paginationTemplate — template used to render the pagination controls.

Both values must be valid Symfony template names, e.g.:

/checkout/variants-grid/load?parentId=…&variantsPage=2&rowsTemplate=@MyTheme/storefront/component/variants-grid/rows.html.twig&paginationTemplate=@MyTheme/storefront/component/variants-grid/pagination.html.twig

If a parameter is missing, malformed, or the template does not exist, the endpoint falls back to the plugin defaults.

Storefront JavaScript

The storefront JavaScript plugin handles:

• Button state: The "Add all to cart" button is disabled when no row has a positive quantity, enabled as soon as at least one quantity is greater than zero.
• AJAX pagination: Clicking first, previous, numbered, next, or last page links fetches rows via frontend.checkout.variants-grid.load and replaces the table body and pagination without a full page reload. The URL is updated with pushState so pages are bookmarkable and back/forward navigation works.
• Quantity preservation: Entered quantities are stored client-side in a map keyed by variant ID. When the user changes pages and returns, previously entered values are restored. On form submission, quantities from non-visible pages are injected as hidden inputs so all selected variants across all visited pages are submitted.
• Error feedback: If a page fails to load, an inline error message is shown.

File structure

custom/static-plugins/FyrstVariantsGrid/
├── composer.json
├── README.md
├── src/
│   ├── Controller/
│   │   └── VariantsGridController.php
│   ├── FyrstVariantsGrid.php
│   ├── Resources/
│   │   ├── app/
│   │   │   └── storefront/
│   │   │       └── src/
│   │   │           ├── main.js
│   │   │           ├── scss/
│   │   │           │   └── base.scss
│   │   │           └── variants-grid/
│   │   │               └── variants-grid.plugin.js
│   │   ├── config/
│   │   │   ├── config.xml
│   │   │   ├── routes.xml
│   │   │   └── services.xml
│   │   ├── snippet/
│   │   │   ├── de-DE/
│   │   │   │   └── storefront.de-DE.json
│   │   │   └── en-GB/
│   │   │       └── storefront.en-GB.json
│   │   └── views/
│   │       └── storefront/
│   │           ├── component/
│   │           │   └── variants-grid/
│   │           │       ├── columns/
│   │           │       │   ├── preview.html.twig
│   │           │       │   ├── product-number.html.twig
│   │           │       │   ├── options.html.twig
│   │           │       │   ├── unit-price.html.twig
│   │           │       │   └── quantity.html.twig
│   │           │       ├── container.html.twig
│   │           │       ├── pagination.html.twig
│   │           │       ├── rows.html.twig
│   │           │       └── alert.html.twig
│   │           └── element/
│   │               └── cms-element-buy-box.html.twig
│   ├── Service/
│   │   └── VariantsLoader.php
│   ├── Struct/
│   │   └── VariantsGridPagination.php
│   └── Subscriber/
│       └── ProductPageSubscriber.php

Development

After changing storefront assets, rebuild them:

./bin/build-storefront.sh

After changing PHP services, routes, or templates, clear the cache:

bin/console cache:clear