> For the complete documentation index, see [llms.txt](https://docs.fact-finder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fact-finder.com/shopware6/fact-finder-web-components-for-shopware-6/storefront-integration-and-customization.md).

# Storefront integration and customization

Integrate, track, and extend FACT-Finder Web Components in a Twig storefront.

The plugin supports classic Twig-rendered storefronts only.

### Include scripts and configuration

The plugin includes these files through `Resources/views/storefront/layout/meta.html.twig`, in this order:

```
Resources/public/ff-web-components/vendor/custom-elements-es5-adapter.js
Resources/public/ff-web-components/vendor/webcomponents-loader.js
Resources/public/ff-web-components/ff-web-components/bundle.js
```

Include all three when your theme does not extend the default metadata template.

The plugin renders its configuration from `Resources/views/storefront/base.html.twig`. Themes that do not extend Shopware’s default `base.html.twig` must implement this configuration themselves.

Templates live in `Resources/views/storefront/` and support multi-inheritance with `sw_extends`. Web Component HTML templates use Handlebars.

### Tracking and implemented components

The plugin tracks login, product clicks, add-to-cart actions, and purchases. Login uses the configured user ID. Product clicks use record template directives. Add-to-cart uses a JavaScript plugin. Purchases use `ff-checkout-tracking`.

Implemented components include:

* Header: `ff-searchbox` and `ff-suggest`.
* Results: `ff-record-list`, `ff-asn`, `ff-sortbox`, `ff-paging`, `ff-filter-cloud`, advisor, feedback text, and redirect campaigns.
* Product and checkout: product campaigns, pushed products, recommendations, similar products, and checkout tracking.

Place global configuration in **All Sales Channels**. Only **Channel** and **Disable FactFinder Web Components on frontend?** vary per sales channel.

### Override component templates

Override only the necessary Twig block:

```twig
{% sw_extends '@Parent/storefront/components/factfinder/record-list.html.twig' %}

{% block component_factfinder_record %}
    {# Custom record markup #}
{% endblock %}
```

The block controls the HTML rendered by the component.

### Split ASN on category pages

Add two FF-ASN CMS elements. Configure the main ASN to divide groups into exclusive collections. Disable Filter Cloud because custom topics are unsupported.

To duplicate filters in a second ASN, use `slice` rather than the mutating `splice`. The DOM-updated listener can remain empty. Filter Cloud works when every group remains available in the first ASN.

### Extend proxy responses

Enable the proxy, then subscribe to `EnrichProxyDataEvent`:

```php
public function enrichData(EnrichProxyDataEvent $event)
{
    $data = $event->getData();
    $data['example_data'] = ['some_data' => 'data_1'];
    $event->setData($data);
}
```

Use this event to add or transform returned FACT-Finder data before it reaches the storefront.


---

# 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.fact-finder.com/shopware6/fact-finder-web-components-for-shopware-6/storefront-integration-and-customization.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.