feat: Refactor of module

src/Synolia/Bundle/FavoriteBundle/Controller/Frontend/FavoriteButtonAjaxController.php

@@ -16,7 +16,7 @@
 
 class FavoriteButtonAjaxController extends AbstractController
 {
-    #[Route('/update/{id}', requirements: ['id' => '\d+'], name: 'synolia_favorite_button_ajax_update', methods: ['POST'])]
+    #[Route('/update/{id}', name: 'synolia_favorite_button_ajax_update', requirements: ['id' => '\d+'], methods: ['POST'])]
     public function updateAction(
         Product $product,
         TokenAccessorInterface $tokenAccessor,

src/Synolia/Bundle/FavoriteBundle/Resources/public/default/scss/components/favorite-button-ajax.scss

@@ -1,41 +1,13 @@
 /* @theme: default; */
 
 .favorite-button {
-  border: solid 1px $favorite-button-border-color;
-  border-radius: 50%;
-  background: #FFFFFF;
-  height: $favorite-button-size;
-  width: $favorite-button-size;
-  padding: $favorite-button-padding;
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  transition: transform .2s;
   &--gallery-view, &--list-view {
     position: absolute;
     z-index: 9;
-    bottom: 12px;
-    left: 12px;
+    bottom: $favorite-button-position-bottom;
+    left: $favorite-button-position-left;
   }
-
-  :hover {
-    transform: scale(1.1);
-  }
-
-  &__link {
-    color: $favorite-button-color;
-    :hover {
-      cursor: pointer;
-    }
-
-    height: $favorite-button-icon-wrap-size;
-    width: $favorite-button-icon-wrap-size;
-  }
-
-  &__icon {
-    height: $favorite-button-icon-wrap-size;
-    width: $favorite-button-icon-wrap-size;
-    font-size: $favorite-button-icon-size;
-    line-height: 25px;
+  .isFavorite {
+    fill: currentColor;
   }
 }

src/Synolia/Bundle/FavoriteBundle/Resources/public/default/scss/variables/favorite-button-config.scss

@@ -1,8 +1,4 @@
 /* @theme: default; */
 
-$favorite-button-padding: 0 !default;
-$favorite-button-border-color: transparent;
-$favorite-button-color: get-color('primary', 'base');
-$favorite-button-icon-size: 20px !default;
-$favorite-button-icon-wrap-size: 21px !default;
-$favorite-button-size: 34px !default;
+$favorite-button-position-bottom: spacing('sm');
+$favorite-button-position-left: spacing('sm');

src/Synolia/Bundle/FavoriteBundle/Resources/public/js/app/views/favorite-button-view-ajax.js

@@ -9,8 +9,8 @@ const FAVORITE_PAGE = 'favoritePage';
 const ROUTE_FAVORITE_BUTTON_AJAX_UPDATE = 'synolia_favorite_button_ajax_update';
 const FAVORITE_DATAGRID_NAME = 'synolia-favorite-grid';
 const ICONS = {
-    created: 'fa-heart',
-    removed: 'fa-heart-o'
+    created: 'isFavorite',
+    removed: ''
 };
 
 const FavoriteButtonViewAjax = BaseView.extend({
@@ -19,7 +19,7 @@ const FavoriteButtonViewAjax = BaseView.extend({
     origin: PRODUCT_LISTING,
 
     events: {
-        'click .favorite-button__link': 'setProductToFavorite'
+        'click': 'setProductToFavorite'
     },
 
     constructor: function FavoriteButtonViewAjax(options) {
@@ -84,10 +84,9 @@ const FavoriteButtonViewAjax = BaseView.extend({
         }
 
         $(target)
-            .children('i')
-            .removeClass('fa-heart')
-            .removeClass('fa-heart-o')
-            .addClass(`fa ${ICONS[status]}`);
+            .children('svg')
+            .removeClass('isFavorite')
+            .addClass(`${ICONS[status]}`);
     }
 });
 

src/Synolia/Bundle/FavoriteBundle/Resources/views/layouts/default/oro_product_frontend_product_view/layout.yml

@@ -1,15 +1,16 @@
 layout:
     actions:
         -   '@add':
-                parentId: product_view_media_wrapper
-                id: favorite_button
-                prepend: true
-                blockType: favorite_button
-                options:
-                    visible: '=data["acl"].isGranted("synolia_favorite_frontend_view")'
-                    class_prefix: 'gallery-view'
-                    vars:
-                        isFavorite: '=data["synolia_favorite"].getProductFavorite(data["parentProduct"] 
-                                ? data["parentProduct"] 
-                                : data["oro_product_variant"].getProductVariantOrProduct(data))'
-    conditions: 'context["isFavoriteEnabled"] == true'
+            parentId: product_view_media_wrapper
+            id: favorite_button
+            prepend: true
+            blockType: favorite_button
+            options:
+                visible: '=data["acl"].isGranted("synolia_favorite_frontend_view")'
+                class_prefix: 'gallery-view'
+                vars:
+                    product: '=data["product"]'
+                    isFavorite: '=data["synolia_favorite"].getProductFavorite(data["parentProduct"] 
+                            ? data["parentProduct"] 
+                            : data["oro_product_variant"].getProductVariantOrProduct(data))'
+    conditions: 'context["isFavoriteEnabled"] == true'