Compare different products with each other
-
run
composer require asdoria/sylius-product-comparator-plugin
-
Import config and enable sylius_api in
config/packages/_sylius.yaml
imports:
- { resource: "@AsdoriaSyliusProductComparatorPlugin/Resources/config/app/config.yaml"}
[...]
sylius_api:
enabled: true
-
In
config/routes/sylius_shop.yaml
:- Add comparator route
asdoria_product_comparator: resource: "@AsdoriaSyliusProductComparatorPlugin/Resources/config/routing.yaml"
- Expose
sylius_shop
sylius_shop: resource: "@SyliusShopBundle/Resources/config/routing.yml" prefix: /{_locale} requirements: _locale: ^[A-Za-z]{2,4}(_([A-Za-z]{4}|[0-9]{3}))?(_([A-Za-z]{2}|[0-9]{3}))?$ options: expose: true
-
Add the following 4 lines to the auto-scripts in
composer.json
"scripts": {
[...],
"auto-scripts": {
[...]
"fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json": "symfony-cmd",
"bazinga:js-translation:dump public/js --format=json": "symfony-cmd"
}
},
Now run them with composer run auto-scripts
Add global tailwind
variable if you want use a tailwind theme in config/packages/twig.yaml
:
twig:
[...]
globals:
tailwind: true
To switch between Semantic UI and Tailwind CSS, change the value of this variable.
Choose products to compare here.
Then, click on the blue button Comparator
or go here!
Note that we have developed several other open source plugins for Sylius, whose demos and documentation are listed on the following page.
-
Run
mkdir -p templates/bundles/SyliusShopBundle/Product/Box/
-
Run
cp -r vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle/Resources/views/Product/Box/_content.html.twig templates/bundles/SyliusShopBundle/Product/Box/
-
Add the button to let the customer choose which products to compare
Override the Box/_content template to include the event asdoria.shop.add_to_comparator.content
with product
as the parameter
<!-- templates/bundles/SyliusShopBundle/Product/Box/_content.html.twig -->
{% import "@SyliusShop/Common/Macro/money.html.twig" as money %}
<div class="ui fluid card" {{ sylius_test_html_attribute('product') }}>
<a href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}" class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">{{ 'sylius.ui.view_more'|trans }}</div>
</div>
</div>
</div>
{% include '@SyliusShop/Product/_mainImage.html.twig' with {'product': product} %}
</a>
{{ sylius_template_event('asdoria.shop.add_to_comparator.content', {'product': product}) }}
[...]
</div>
- The fixed button redirecting to the comparator page is already included inside the event
sylius.shop.layout.before_content
You can choose which product attributes will be displayed in the comparator page by add configuration into config/packages/_sylius.yaml
asdoria_sylius_product_comparator:
available_attributes:
- t_shirt_brand
- t_shirt_material
- length
The array contains the code of all attributes you want to compare.