Replace add-to-wishlist with WishlistButtonComponent LiveComponent

UPGRADE-2.0.md

@@ -24,3 +24,59 @@ The same applies to `RemoveProductVariantFromWishlist`.
 ### Authorization moved to controllers
 
 The `RemoveProductFromWishlistHandler` and `RemoveProductVariantFromWishlistHandler` no longer perform authorization checks. Authorization (`WishlistVoter::DELETE`) is now the responsibility of the calling controller. If you dispatch these commands from custom code, ensure you verify permissions before dispatching.
+
+## Add-to-wishlist button replaced with LiveComponent
+
+The add-to-wishlist button on product cards and product show page has been replaced with `WishlistButtonComponent` — a Symfony UX LiveComponent that toggles add/remove without page reload.
+
+### Removed classes
+
+- `Sylius\WishlistPlugin\Controller\Action\AddProductToWishlistAction`
+- `Sylius\WishlistPlugin\Controller\Action\AddProductToSelectedWishlistAction`
+- `Sylius\WishlistPlugin\Twig\Component\Product\AddToWishlistComponent`
+- `Sylius\WishlistPlugin\Processor\AddProductVariantToWishlistProcessor` (and interface)
+- `Sylius\WishlistPlugin\Form\Type\AddToWishlistType`
+
+### Removed routes
+
+- `wishlist_add_product` (`/wishlist/add/{productId}`)
+- `wishlist_add_product_to_selected_wishlist` (`/wishlist/{wishlistId}/add/{productId}`)
+
+### Removed JavaScript
+
+- `assets/shop/js/WishlistVariantButton.js`
+
+### New classes
+
+- `Sylius\WishlistPlugin\Twig\Component\WishlistButtonComponent` — LiveComponent replacing the above
+- `Sylius\WishlistPlugin\Checker\WishlistProductChecker` (and interface) — checks if product is in any wishlist
+
+### New resolver method
+
+`WishlistsResolverInterface` has a new method `resolveById(int $wishlistId): ?WishlistInterface` that finds a wishlist by ID only among the current user's wishlists.
+
+### Template changes
+
+All templates under `templates/common/add_to_wishlist/` and `templates/product/show/add_to_wishlist/` have been removed and replaced with:
+
+- `templates/common/wishlist_button.html.twig` — main component template
+- `templates/common/wishlist_button/single/button.html.twig` — single wishlist button
+- `templates/common/wishlist_button/multiple/dropdown.html.twig` — multi-wishlist dropdown
+- `templates/common/wishlist_button/multiple/dropdown/toggle.html.twig` — dropdown toggle
+- `templates/common/wishlist_button/multiple/dropdown/items.html.twig` — dropdown items list
+- `templates/common/wishlist_button/multiple/dropdown/items/item.html.twig` — single dropdown item
+
+### Twig hooks changes
+
+Old hooks under `sylius_shop.common.add_to_wishlist.*` and `sylius_shop.product.show.add_to_wishlist.*` have been removed. New hooks:
+
+- `sylius_shop.common.wishlist_button.single`
+- `sylius_shop.common.wishlist_button.multiple`
+- `sylius_shop.common.wishlist_button.multiple.dropdown`
+- `sylius_shop.common.wishlist_button.multiple.dropdown.items`
+
+### Migration for custom overrides
+
+If you overrode the add-to-wishlist templates or hooked into `sylius_shop.common.add_to_wishlist.*`, migrate to the new hook names. The component now handles both product cards and product show page — there is no separate product page component.
+
+The button dispatches existing `AddProductToWishlist`, `AddProductVariantToWishlist` and `RemoveProductFromWishlist` commands via MessageBus, so any custom command handlers will still work.

assets/shop/js/index.js

@@ -3,11 +3,3 @@ import './handleCopyToWishlistListModal';
 import './handleAddAnotherWishlistModal';
 import './handleRemoveWishlistModal';
 import './handleEditWishlistModal';
-import { WishlistVariantButton } from './WishlistVariantButton';
-
-const WishlistVariantElements = [...document.querySelectorAll('[data-bb-toggle="wishlist-variant"]')];
-export const WishlistVariantButtonList = WishlistVariantElements.map(button => new WishlistVariantButton(button).init());
-
-export default {
-    WishlistVariantButtonList
-};

config/routes/shop.yaml

@@ -10,11 +10,6 @@ wishlist_add_products:
     defaults:
         _controller: sylius_wishlist_plugin.controller.action.add_products_to_wishlist
 
-wishlist_add_product:
-    path: /wishlist/add/{productId}
-    defaults:
-        _controller: sylius_wishlist_plugin.controller.action.add_product_to_wishlist
-
 wishlist_remove_product:
     path: /wishlist/remove/{productId}
     defaults:
@@ -98,10 +93,6 @@ wishlist_show_chosen_wishlist:
     defaults:
         _controller: sylius_wishlist_plugin.controller.action.show_chosen_wishlist
 
-wishlist_add_product_to_selected_wishlist:
-    path: /wishlist/{wishlistId}/add/{productId}
-    defaults:
-        _controller: sylius_wishlist_plugin.controller.action.add_product_to_selected_wishlist
 
 wishlist_copy_selected_products_to_other_wishlist:
     path: /wishlists/{wishlistId}/copy/{destinedWishlistId}

config/services/checker.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<container xmlns="http://symfony.com/schema/dic/services"
+           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+           xsi:schemaLocation="http://symfony.com/schema/dic/services
+               http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+    <services>
+        <service id="sylius_wishlist_plugin.checker.wishlist_product" class="Sylius\WishlistPlugin\Checker\WishlistProductChecker" />
+    </services>
+</container>

config/services/controller.xml

@@ -48,17 +48,6 @@
             <tag name="controller.service_arguments"/>
         </service>
 
-        <service id="sylius_wishlist_plugin.controller.action.add_product_to_wishlist" class="Sylius\WishlistPlugin\Controller\Action\AddProductToWishlistAction">
-            <argument type="service" id="sylius.repository.product"/>
-            <argument type="service" id="sylius_wishlist_plugin.factory.wishlist_product"/>
-            <argument type="service" id="request_stack"/>
-            <argument type="service" id="translator"/>
-            <argument type="service" id="sylius_wishlist_plugin.resolver.wishlists_resolver"/>
-            <argument type="service" id="sylius_wishlist_plugin.manager.wishlist"/>
-            <argument type="service" id="sylius.context.channel"/>
-            <tag name="controller.service_arguments"/>
-        </service>
-
         <service id="sylius_wishlist_plugin.controller.action.remove_product_from_wishlist" class="Sylius\WishlistPlugin\Controller\Action\RemoveProductFromWishlistAction">
             <argument type="service" id="sylius_wishlist_plugin.context.wishlist"/>
             <argument type="service" id="sylius.repository.product"/>
@@ -168,16 +157,6 @@
             <tag name="controller.service_arguments"/>
         </service>
 
-        <service id="sylius_wishlist_plugin.controller.action.add_product_to_selected_wishlist" class="Sylius\WishlistPlugin\Controller\Action\AddProductToSelectedWishlistAction">
-            <argument type="service" id="sylius_wishlist_plugin.repository.wishlist"/>
-            <argument type="service" id="sylius.repository.product"/>
-            <argument type="service" id="request_stack"/>
-            <argument type="service" id="translator"/>
-            <argument type="service" id="router"/>
-            <argument type="service" id="sylius.command_bus"/>
-            <tag name="controller.service_arguments"/>
-        </service>
-
         <service id="sylius_wishlist_plugin.controller.action.copy_selected_products_to_other_wishlist" class="Sylius\WishlistPlugin\Controller\Action\CopySelectedProductsToOtherWishlistAction">
             <argument type="service" id="sylius.command_bus"/>
             <argument type="service" id="request_stack"/>

config/services/form.xml

@@ -26,10 +26,5 @@
             <argument type="service" id="sylius_wishlist_plugin.processor.selected_wishlist_products_processor"/>
             <tag name="form.type"/>
         </service>
-
-        <service id="sylius.wishlist_plugin.form.type.add_to_wishlist_type" class="Sylius\WishlistPlugin\Form\Type\AddToWishlistType">
-            <argument type="service" id="sylius_wishlist_plugin.resolver.wishlists_resolver"/>
-            <tag name="form.type"/>
-        </service>
     </services>
 </container>

config/services/processor.xml

@@ -12,16 +12,5 @@
         <service id="sylius_wishlist_plugin.processor.variant_pdf_model_processor" class="Sylius\WishlistPlugin\Processor\VariantPdfModelProcessor">
             <argument type="service" id="sylius_wishlist_plugin.services.generator.model_creator"/>
         </service>
-
-        <service id="sylius.wishlist_plugin.processor.add_product_variant_to_wishlist" class="Sylius\WishlistPlugin\Processor\AddProductVariantToWishlistProcessor">
-            <argument type="service" id="security.helper"/>
-            <argument type="service" id="sylius_wishlist_plugin.twig.extension.wishlist_extension"/>
-            <argument type="service" id="sylius.context.channel"/>
-            <argument type="service" id="sylius_wishlist_plugin.factory.wishlist_product"/>
-            <argument type="service" id="request_stack"/>
-            <argument type="service" id="translator"/>
-            <argument type="service" id="router"/>
-            <argument type="service" id="sylius_wishlist_plugin.repository.wishlist"/>
-        </service>
     </services>
 </container>

config/services/twig/component/product.xml → config/services/twig/component.xml

@@ -12,16 +12,15 @@
 <container xmlns="http://symfony.com/schema/dic/services" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
     <services>
         <service
-                id="sylius.wishlist_plugin.twig.component.product.add_to_wishlist"
-                class="Sylius\WishlistPlugin\Twig\Component\Product\AddToWishlistComponent"
+                id="sylius.wishlist_plugin.twig.component.wishlist_button"
+                class="Sylius\WishlistPlugin\Twig\Component\WishlistButtonComponent"
         >
-            <argument type="service" id="sylius.wishlist_plugin.processor.add_product_variant_to_wishlist" />
-            <argument type="service" id="form.factory" />
-            <argument type="service" id="sylius.resolver.product_variant.default" />
             <argument type="service" id="sylius.repository.product" />
-            <argument type="service" id="sylius.repository.product_variant" />
+            <argument type="service" id="sylius_wishlist_plugin.resolver.wishlists_resolver" />
+            <argument type="service" id="sylius_wishlist_plugin.checker.wishlist_product" />
+            <argument type="service" id="sylius.command_bus" />
 
-            <tag name="sylius.live_component.shop" key="sylius_shop:product:add_to_wishlist"/>
+            <tag name="sylius.live_component.shop" key="sylius_shop:wishlist:button"/>
         </service>
     </services>
 </container>

config/twig_hooks/common/wishlist_button.yaml

@@ -0,0 +1,21 @@
+sylius_twig_hooks:
+    hooks:
+        'sylius_shop.common.wishlist_button.single':
+            button:
+                template: '@SyliusWishlistPlugin/common/wishlist_button/single/button.html.twig'
+                priority: 0
+        'sylius_shop.common.wishlist_button.multiple':
+            dropdown:
+                template: '@SyliusWishlistPlugin/common/wishlist_button/multiple/dropdown.html.twig'
+                priority: 0
+        'sylius_shop.common.wishlist_button.multiple.dropdown':
+            toggle:
+                template: '@SyliusWishlistPlugin/common/wishlist_button/multiple/dropdown/toggle.html.twig'
+                priority: 100
+            items:
+                template: '@SyliusWishlistPlugin/common/wishlist_button/multiple/dropdown/items.html.twig'
+                priority: 0
+        'sylius_shop.common.wishlist_button.multiple.dropdown.items':
+            item:
+                template: '@SyliusWishlistPlugin/common/wishlist_button/multiple/dropdown/items/item.html.twig'
+                priority: 0

config/twig_hooks/product/card.yaml

@@ -2,5 +2,8 @@ sylius_twig_hooks:
     hooks:
         'sylius_shop.shared.product.card':
             add_to_wishlist:
-                template: "@SyliusWishlistPlugin/common/add_to_wishlist.html.twig"
+                component: 'sylius_shop:wishlist:button'
+                props:
+                    template: '@SyliusWishlistPlugin/common/wishlist_button.html.twig'
+                    productId: '@=_context.product.getId()'
                 priority: 50

config/twig_hooks/product/show.yaml

@@ -2,8 +2,8 @@ sylius_twig_hooks:
     hooks:
         'sylius_shop.product.show.content.info.summary':
             add_to_wishlist:
-                component: 'sylius_shop:product:add_to_wishlist'
+                component: 'sylius_shop:wishlist:button'
                 props:
-                    product: '@=_context.product'
-                    template: '@SyliusWishlistPlugin/product/show/add_to_wishlist.html.twig'
+                    template: '@SyliusWishlistPlugin/common/wishlist_button.html.twig'
+                    productId: '@=_context.product.getId()'
                 priority: 10

features/adding_product_to_selected_wishlist.feature

@@ -8,7 +8,7 @@ Feature: Adding a product to selected wishlist
     Given the store operates on a single channel in "United States"
     Given I am on "/"
 
-  @ui
+  @ui @javascript
   Scenario: Adding a product to selected wishlist
     And the store has a wishlist named "Wishlist1"
     And the store has a wishlist named "Wishlist2"

features/adding_product_to_wishlist.feature

@@ -7,24 +7,24 @@ Feature: Adding a product to wishlist
   Background:
     Given the store operates on a single channel in "United States"
 
-  @ui
+  @ui @javascript
   Scenario: Adding a product to wishlist
     Given the store has a product "Jack Daniels Gentleman" priced at "$10.00"
     And all store products appear under a main taxonomy
     When I add this product to wishlist
-    Then I should be notified that the product has been successfully added to my wishlist
+    Then the wishlist button should show a filled heart
     And I should have one item in my wishlist
 
-  @ui
+  @ui @javascript
   Scenario: Adding a product variant to wishlist
     Given the store has a product "Some other whiskey" priced at "$25.00"
     And all store products appear under a main taxonomy
     When I view product "Some other whiskey"
     And I add this product to wishlist
-    Then I should be notified that the product has been successfully added to my wishlist
+    Then the wishlist button should show a filled heart
     And I should have one item in my wishlist
 
-  @ui
+  @ui @javascript
   Scenario: Adding a product as anon user and signing in
     Given the store has a product "Jimmy Beammy" priced at "$233.00"
     And the store has a product "Ice ball" priced at "$144.00"