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..b6f2973 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,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; } } 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.yml b/src/Synolia/Bundle/FavoriteBundle/Resources/views/layouts/default/oro_product_frontend_product_view/layout.yml index 3b3169a..7356fec 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,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' \ No newline at end of file