diff --git a/src/Synolia/Bundle/FavoriteBundle/Controller/Frontend/FavoriteButtonAjaxController.php b/src/Synolia/Bundle/FavoriteBundle/Controller/Frontend/FavoriteButtonAjaxController.php
index af47697..003967d 100644
--- a/src/Synolia/Bundle/FavoriteBundle/Controller/Frontend/FavoriteButtonAjaxController.php
+++ b/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,
diff --git a/src/Synolia/Bundle/FavoriteBundle/Resources/public/default/scss/components/favorite-button-ajax.scss b/src/Synolia/Bundle/FavoriteBundle/Resources/public/default/scss/components/favorite-button-ajax.scss
index f41c05f..0ab055b 100644
--- a/src/Synolia/Bundle/FavoriteBundle/Resources/public/default/scss/components/favorite-button-ajax.scss
+++ b/src/Synolia/Bundle/FavoriteBundle/Resources/public/default/scss/components/favorite-button-ajax.scss
@@ -1,41 +1,17 @@
/* @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;
+ fill: transparent;
+ stroke: currentColor;
+ &.isFavorite {
+ fill: currentColor;
+ }
}
}
diff --git a/src/Synolia/Bundle/FavoriteBundle/Resources/public/default/scss/variables/favorite-button-config.scss b/src/Synolia/Bundle/FavoriteBundle/Resources/public/default/scss/variables/favorite-button-config.scss
index a12ab5c..6c8be02 100644
--- a/src/Synolia/Bundle/FavoriteBundle/Resources/public/default/scss/variables/favorite-button-config.scss
+++ b/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');
\ No newline at end of file
diff --git a/src/Synolia/Bundle/FavoriteBundle/Resources/public/default/svg-icons/heart.svg b/src/Synolia/Bundle/FavoriteBundle/Resources/public/default/svg-icons/heart.svg
new file mode 100644
index 0000000..805bd19
--- /dev/null
+++ b/src/Synolia/Bundle/FavoriteBundle/Resources/public/default/svg-icons/heart.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/Synolia/Bundle/FavoriteBundle/Resources/public/js/app/views/favorite-button-view-ajax.js b/src/Synolia/Bundle/FavoriteBundle/Resources/public/js/app/views/favorite-button-view-ajax.js
index fc93b73..db4413b 100644
--- a/src/Synolia/Bundle/FavoriteBundle/Resources/public/js/app/views/favorite-button-view-ajax.js
+++ b/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]}`);
}
});
diff --git a/src/Synolia/Bundle/FavoriteBundle/Resources/views/layouts/default/oro_product_frontend_product_view/layout.html.twig b/src/Synolia/Bundle/FavoriteBundle/Resources/views/layouts/default/oro_product_frontend_product_view/layout.html.twig
deleted file mode 100644
index f553f80..0000000
--- a/src/Synolia/Bundle/FavoriteBundle/Resources/views/layouts/default/oro_product_frontend_product_view/layout.html.twig
+++ /dev/null
@@ -1,19 +0,0 @@
-{% block _favorite_media_container_widget %}
-
- {% set attr = layout_attr_defaults(attr, {
- 'data-page-component-view': 'synoliafavorite/js/app/views/favorite-button-ajax',
- 'data-page-component-options': { 'product': product }|json_encode,
- '~class': 'favorite-button'
- }) %}
-
-
-
- {{ block_widget(block) }}
- {% set heartSvg = is_favorite_product(product) ? 'heart' : 'heart-o' %}
-
-
-
-
-{% endblock %}
diff --git a/src/Synolia/Bundle/FavoriteBundle/Resources/views/layouts/default/oro_product_frontend_product_view/layout.yml b/src/Synolia/Bundle/FavoriteBundle/Resources/views/layouts/default/oro_product_frontend_product_view/layout.yml
index 3b3169a..4410d7b 100644
--- a/src/Synolia/Bundle/FavoriteBundle/Resources/views/layouts/default/oro_product_frontend_product_view/layout.yml
+++ b/src/Synolia/Bundle/FavoriteBundle/Resources/views/layouts/default/oro_product_frontend_product_view/layout.yml
@@ -1,15 +1,15 @@
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))'
+ - '@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'
diff --git a/src/Synolia/Bundle/FavoriteBundle/Resources/views/layouts/default/page/layout.html.twig b/src/Synolia/Bundle/FavoriteBundle/Resources/views/layouts/default/page/layout.html.twig
index d086e06..6f70fff 100644
--- a/src/Synolia/Bundle/FavoriteBundle/Resources/views/layouts/default/page/layout.html.twig
+++ b/src/Synolia/Bundle/FavoriteBundle/Resources/views/layouts/default/page/layout.html.twig
@@ -7,19 +7,16 @@
{% set options = {} %}
{% endif %}
- {% set heartSvg = isFavorite ? 'heart' : 'heart-o' %}
+ {% set heartSvgClass = isFavorite ? ' isFavorite' : '' %}
{% set attr = layout_attr_defaults(attr, {
'data-page-component-init-on': 'asap',
'data-page-component-view': 'synoliafavorite/js/app/views/favorite-button-view-ajax',
'data-page-component-options': options|json_encode,
- '~class': ' favorite-button favorite-button--' ~ class_prefix
+ '~class': ' btn btn--plain btn--no-padding favorite-button favorite-button--' ~ class_prefix
}) %}
-
-
- {{ block_widget(block) }}
-
-
-
-