Skip to main content

Integration Guide

This guide will help you integrate FelAIProductAdvisor into your Shopware store.

Basic Integration

The most common way to integrate FelAIProductAdvisor is to use the provided Twig functions in your templates.

Product Detail Page

To add recommendations to your product detail page, add the following code to your template:

{% block page_product_detail_content %}
{{ parent() }}

<div class="product-recommendations">
<h2>You might also like</h2>
{{ fel_ai_product_advisor_recommendations(page.product.id, 4) }}
</div>
{% endblock %}

Category Page

To add recommendations to your category page, add the following code to your template:

{% block element_product_listing_wrapper_content %}
{{ parent() }}

{% if page.listing.aggregations.manufacturer %}
<div class="category-recommendations">
<h2>Popular in this category</h2>
{{ fel_ai_product_advisor_category_recommendations(page.header.navigation.active.id, 4) }}
</div>
{% endif %}
{% endblock %}

Cart Page

To add recommendations to your cart page, add the following code to your template:

{% block page_checkout_cart_cross_selling %}
{{ parent() }}

<div class="cart-recommendations">
<h2>Frequently bought together</h2>
{{ fel_ai_product_advisor_cart_recommendations(4) }}
</div>
{% endblock %}

Advanced Integration

Custom Recommendation Widget

You can create a custom recommendation widget with specific parameters:

{{ fel_ai_product_advisor_custom_recommendations({
'productId': page.product.id,
'limit': 4,
'algorithm': 'hybrid',
'minConfidence': 0.7,
'excludeCategories': [categoryId1, categoryId2],
'template': '@FelAIProductAdvisor/storefront/recommendation/slider.html.twig'
}) }}

Custom Templates

You can create custom templates for your recommendations. Create a file in your theme:

custom/plugins/YourTheme/src/Resources/views/storefront/fel-ai-product-advisor/recommendation/custom.html.twig

With the following content:

{% block fel_ai_product_advisor_recommendation_custom %}
<div class="custom-recommendation-slider">
<div class="row">
{% for product in products %}
<div class="col-md-3">
<div class="card">
<img src="{{ product.thumbnailUrl }}" class="card-img-top" alt="{{ product.name }}">
<div class="card-body">
<h5 class="card-title">{{ product.name }}</h5>
<p class="card-text">{{ product.price|currency }}</p>
<a href="{{ product.url }}" class="btn btn-primary">View Product</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}

Then use it in your template:

{{ fel_ai_product_advisor_custom_recommendations({
'productId': page.product.id,
'template': '@YourTheme/storefront/fel-ai-product-advisor/recommendation/custom.html.twig'
}) }}

Programmatic Integration

You can also use the recommendation service programmatically in your controllers or services:

<?php

namespace YourPlugin\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use FelAIProductAdvisor\Service\RecommendationService;

class YourController extends AbstractController
{
private $recommendationService;

public function __construct(RecommendationService $recommendationService)
{
$this->recommendationService = $recommendationService;
}

/**
* @Route("/your-custom-page", name="your_custom_page", methods={"GET"})
*/
public function index(): Response
{
$productId = '12345';
$recommendations = $this->recommendationService->getRecommendations($productId, 5, [
'algorithm' => 'hybrid',
'minConfidence' => 0.7
]);

return $this->render('@YourPlugin/storefront/page/custom.html.twig', [
'recommendations' => $recommendations
]);
}
}