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