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
]);
}
}