# Extensibility

# Customize autocomplete layout

You can make customizations to the default autocomplete layout by extending the Algolia plugin.

Override AlgoliaPlugin in main.js

import AlgoliaOverridePlugin from './js/plugin/algolia-override.plugin';

PluginManager.override('CampitAlgolia', AlgoliaOverridePlugin, '[data-campit-algolia]');

Create a new javascript plugin ex. algolia-override.plugin.js
Extend CampitAlgoliaPlugin class
Override the for example the __renderAutocompleteItemTemplate function. You can now add a layout to your liking

import CampitAlgoliaPlugin
    from "../../../../../../../../vendor/store.shopware.com/campitalgolia/src/Resources/app/storefront/src/plugin/campit-algolia/campit-algolia.plugin";

export default class AlgoliaOverridePlugin extends CampitAlgoliaPlugin {
    _renderAutocompleteItemTemplate(hit, components, html) {
        // your custom design
    }
}

# Send additional data to Algolia

Send additional data to Algolia

# Create datamapper

Make sure to implement the ProductMapperInterface interface

class ProductCustomFieldsMapper implements ProductMapperInterface
{
    public function __invoke(ProductEntity $product, LanguageEntity $language): array
    {
        return [
            'customFields' => $product->getCustomFields(),
        ];
    }
}

# Register datamapper

Make sure to add the tag algolia.product.mapper to your service

<service id="YourNamespace\...\ProductCustomFieldsMapper">
    <tag name="algolia.product.mapper"/>
</service>