Changed the response for adding and removing items to wishlists

Setono · Nov 26, 2024 · d9230d9 · d9230d9
1 parent 9ba4ea5
commit d9230d9
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 43 deletions.
diff --git a/src/Controller/AddToWishlistAction.php b/src/Controller/AddToWishlistAction.php
@@ -6,14 +6,15 @@
 
 use Doctrine\Persistence\ManagerRegistry;
 use Setono\Doctrine\ORMTrait;
+use Setono\SyliusWishlistPlugin\Controller\DTO\ToggleWishlistResponse;
 use Setono\SyliusWishlistPlugin\Factory\WishlistFactoryInterface;
 use Setono\SyliusWishlistPlugin\Factory\WishlistItemFactoryInterface;
 use Setono\SyliusWishlistPlugin\Provider\WishlistProviderInterface;
 use Sylius\Component\Core\Model\ProductInterface;
 use Sylius\Component\Core\Model\ProductVariantInterface;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
-use Twig\Environment;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
 
 /**
  * This controller action is responsible for adding a product or product variant to the wishlist
@@ -25,9 +26,9 @@ final class AddToWishlistAction
     public function __construct(
         private readonly WishlistProviderInterface $wishlistProvider,
         private readonly WishlistItemFactoryInterface $wishlistItemFactory,
-        private readonly Environment $twig,
         ManagerRegistry $managerRegistry,
         private readonly WishlistFactoryInterface $wishlistFactory,
+        private readonly UrlGeneratorInterface $urlGenerator,
         /** @var class-string<ProductInterface|ProductVariantInterface> $className */
         private readonly string $className,
     ) {
@@ -48,26 +49,23 @@ public function __invoke(int $id): JsonResponse
         if ([] === $preSelectedWishlists) {
             $preSelectedWishlists = [$this->wishlistFactory->createNew()];
         }
+
+        $wishlistItemsCount = 0;
         foreach ($preSelectedWishlists as $wishlist) {
             $manager = $this->getManager($wishlist);
             $manager->persist($wishlist);
 
             $wishlist->addItem($wishlistItem);
+
+            $wishlistItemsCount += $wishlist->getQuantity();
         }
 
         $manager->flush();
 
-        return new JsonResponse([
-            'toggleButton' => $this->twig->render('@SetonoSyliusWishlistPlugin/shop/wishlist/_toggle_button.html.twig', [
-                'product' => $entity instanceof ProductInterface ? $entity : $entity->getProduct(),
-                'productVariant' => $entity instanceof ProductVariantInterface ? $entity : null,
-            ]),
-// Will be added in a later version
-//             'selectWishlistsForm' => $this->twig->render('@SetonoSyliusWishlistPlugin/shop/wishlist/_select_wishlists.html.twig', [
-//                'product' => $entity instanceof ProductInterface ? $entity : $entity->getProduct(),
-//                'productVariant' => $entity instanceof ProductVariantInterface ? $entity : null,
-//                'form' => $form->createView(),
-//            ]),
-        ]);
+        return new JsonResponse(new ToggleWishlistResponse(
+            ToggleWishlistResponse::EVENT_ADDED,
+            $this->urlGenerator->generate($entity instanceof ProductInterface ? 'setono_sylius_wishlist_shop_wishlist_remove_product' : 'setono_sylius_wishlist_shop_wishlist_remove_product_variant', ['id' => $entity->getId()]),
+            $wishlistItemsCount,
+        ));
     }
 }
diff --git a/src/Controller/DTO/ToggleWishlistResponse.php b/src/Controller/DTO/ToggleWishlistResponse.php
@@ -0,0 +1,19 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Setono\SyliusWishlistPlugin\Controller\DTO;
+
+final class ToggleWishlistResponse
+{
+    public const EVENT_ADDED = 'added';
+
+    public const EVENT_REMOVED = 'removed';
+
+    public function __construct(
+        public readonly string $event,
+        public readonly string $toggleUrl,
+        public readonly int $wishlistItemsCount,
+    ) {
+    }
+}
diff --git a/src/Controller/RemoveFromWishlistAction.php b/src/Controller/RemoveFromWishlistAction.php
@@ -6,13 +6,14 @@
 
 use Doctrine\Persistence\ManagerRegistry;
 use Setono\Doctrine\ORMTrait;
+use Setono\SyliusWishlistPlugin\Controller\DTO\ToggleWishlistResponse;
 use Setono\SyliusWishlistPlugin\Provider\WishlistProviderInterface;
 use Sylius\Component\Core\Model\ProductInterface;
 use Sylius\Component\Core\Model\ProductVariantInterface;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
-use Twig\Environment;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
 
 /**
  * This controller action is responsible for removing a product or product variant from the wishlist
@@ -23,8 +24,8 @@ final class RemoveFromWishlistAction
 
     public function __construct(
         private readonly WishlistProviderInterface $wishlistProvider,
-        private readonly Environment $twig,
         ManagerRegistry $managerRegistry,
+        private readonly UrlGeneratorInterface $urlGenerator,
         /** @var class-string<ProductInterface|ProductVariantInterface> $className */
         private readonly string $className,
     ) {
@@ -39,20 +40,19 @@ public function __invoke(Request $request, int $id): JsonResponse
             throw new NotFoundHttpException(sprintf('Product with id %s not found', $id));
         }
 
-        foreach ($this->wishlistProvider->getWishlists() as $wishlistEntity) {
-            $entity instanceof ProductInterface ? $wishlistEntity->removeProduct($entity) : $wishlistEntity->removeProductVariant($entity);
+        $wishlistItemsCount = 0;
+        foreach ($this->wishlistProvider->getWishlists() as $wishlist) {
+            $entity instanceof ProductInterface ? $wishlist->removeProduct($entity) : $wishlist->removeProductVariant($entity);
+
+            $wishlistItemsCount += $wishlist->getQuantity();
         }
 
         $this->getManager($entity)->flush();
 
-        return new JsonResponse([
-            'toggleButton' => $this->twig->render(
-                '@SetonoSyliusWishlistPlugin/shop/wishlist/_toggle_button.html.twig',
-                [
-                    'product' => $entity instanceof ProductInterface ? $entity : $entity->getProduct(),
-                    'productVariant' => $entity instanceof ProductVariantInterface ? $entity : null,
-                ],
-            ),
-        ]);
+        return new JsonResponse(new ToggleWishlistResponse(
+            ToggleWishlistResponse::EVENT_REMOVED,
+            $this->urlGenerator->generate($entity instanceof ProductInterface ? 'setono_sylius_wishlist_shop_wishlist_add_product' : 'setono_sylius_wishlist_shop_wishlist_add_product_variant', ['id' => $entity->getId()]),
+            $wishlistItemsCount,
+        ));
     }
 }
diff --git a/src/Model/Wishlist.php b/src/Model/Wishlist.php
@@ -123,4 +123,14 @@ public function removeProductVariant(ProductVariantInterface $productVariant): v
             }
         }
     }
+
+    public function getQuantity(): int
+    {
+        $quantity = 0;
+        foreach ($this->items as $item) {
+            $quantity += $item->getQuantity();
+        }
+
+        return $quantity;
+    }
 }
diff --git a/src/Model/WishlistInterface.php b/src/Model/WishlistInterface.php
@@ -40,4 +40,6 @@ public function removeProduct(ProductInterface $product): void;
     public function hasProductVariant(ProductVariantInterface $productVariant): bool;
 
     public function removeProductVariant(ProductVariantInterface $productVariant): void;
+
+    public function getQuantity(): int;
 }
diff --git a/src/Resources/config/services/controller.xml b/src/Resources/config/services/controller.xml
@@ -51,9 +51,9 @@
                  class="Setono\SyliusWishlistPlugin\Controller\AddToWishlistAction" public="true" abstract="true">
             <argument type="service" id="Setono\SyliusWishlistPlugin\Provider\WishlistProviderInterface"/>
             <argument type="service" id="Setono\SyliusWishlistPlugin\Factory\WishlistItemFactoryInterface"/>
-            <argument type="service" id="twig"/>
             <argument type="service" id="doctrine"/>
             <argument type="service" id="Setono\SyliusWishlistPlugin\Factory\WishlistFactoryInterface"/>
+            <argument type="service" id="router"/>
         </service>
 
         <service id="setono_sylius_wishlist.controller.add_product_to_wishlist"
@@ -70,8 +70,8 @@
         <service id="setono_sylius_wishlist.controller.remove_from_wishlist"
                  class="Setono\SyliusWishlistPlugin\Controller\RemoveFromWishlistAction" public="true" abstract="true">
             <argument type="service" id="Setono\SyliusWishlistPlugin\Provider\WishlistProviderInterface"/>
-            <argument type="service" id="twig"/>
             <argument type="service" id="doctrine"/>
+            <argument type="service" id="router"/>
         </service>
 
         <service id="setono_sylius_wishlist.controller.remove_product_from_wishlist"

diff --git a/src/Resources/public/js/wishlist-action-handler.js b/src/Resources/public/js/wishlist-action-handler.js
@@ -17,7 +17,7 @@ class WishlistActionHandler {
     constructor(options = {}) {
         this.#options = Object.assign({
                 selector: {
-                    toggle: 'button.wishlist-toggle',
+                    toggle: 'button.ssw-toggle',
                 },
                 callback: {
                     /**
@@ -40,15 +40,14 @@ class WishlistActionHandler {
 
                         /**
                          * @type {Object}
-                         * @property {string} toggleButton - HTML string of the new toggle button
-                         * @property {string|undefined} selectWishlistsForm - HTML string of the select wishlists form
+                         * @property {string} event - Either 'added' or 'removed'
+                         * @property {string} toggleUrl - The new URL to toggle the wishlist
+                         * @property {string} wishlistItemsCount - The number of items in all wishlists
                          */
                         const json = await response.json();
 
-                        const tmp = document.createElement('div');
-                        tmp.innerHTML = json.toggleButton;
-
-                        element.replaceWith(...tmp.childNodes);
+                        element.dataset.url = json.toggleUrl;
+                        element.classList.toggle('ssw-added', json.event === 'added');
                     },
                 }
             },

diff --git a/src/Resources/views/shop/_styles.html.twig b/src/Resources/views/shop/_styles.html.twig
@@ -1,5 +1,5 @@
 <style>
-    button.wishlist-toggle {
+    .ssw-toggle {
         border: none;
         margin: 0;
         padding: 0;
@@ -14,4 +14,12 @@
         line-height: 30px;
         cursor: pointer;
     }
+
+    .ssw-toggle:not(.ssw-added) i.heart:not(.outline) {
+        display: none;
+    }
+
+    .ssw-added i.heart.outline {
+        display: none;
+    }
 </style>
diff --git a/src/Resources/views/shop/wishlist/_toggle_button.html.twig b/src/Resources/views/shop/wishlist/_toggle_button.html.twig
@@ -9,10 +9,7 @@
     {%- set wishlistPath = onWishlist ? path('setono_sylius_wishlist_shop_wishlist_remove_product', { 'id': product.id }) : path('setono_sylius_wishlist_shop_wishlist_add_product', { 'id': product.id }) -%}
 {%- endif -%}
 
-<button data-url="{{ wishlistPath }}" class="wishlist-toggle">
-    {%- if onWishlist -%}
-        <i class="heart icon"></i>
-    {%- else -%}
-        <i class="heart outline icon"></i>
-    {%- endif -%}
+<button data-url="{{ wishlistPath }}" class="ssw-toggle{{ onWishlist ? ' ssw-added' : '' }}">
+    <i class="heart icon"></i>
+    <i class="heart outline icon"></i>
 </button>