Merge pull request #209 from BitBagCommerce/OP-153

OP-153 - Fixed 'add to cart' & 'add to wishlist' buttons
BitBagCommerce · Jun 19, 2023 · 7724d97 · 7724d97
2 parents 356ad2a + 75f0054
commit 7724d97
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 19 deletions.
diff --git a/src/Resources/assets/shop/scss/pages/wishlist-button/index.scss b/src/Resources/assets/shop/scss/pages/wishlist-button/index.scss
@@ -1,20 +1,38 @@
-.bb-wishlist-button > span.text{
+.bb-wishlist-button > span.text {
   @media screen and (max-width: $breakpoint-sm) {
     display: none !important;
   }
 }
 
-.bb-wishlist-button{
-  @media screen and (max-width: $breakpoint-sm) {
-    display: flex !important;
-    justify-content: center;
-    width: 20%;
+.bb-wishlist-button {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 24px !important;
+  margin: 0 !important;
+
+  i {
+    width: 35px !important;
   }
 }
 
-.bb-wishlist-button > span > i.heart{
+.bb-wishlist-button > span > i.heart {
   @media screen and (max-width: $breakpoint-sm) {
     margin: unset !important;
   }
 }
 
+.bb-add-to-cart-container {
+  display: flex;
+  gap: 1em;
+  padding: 1em 0;
+
+  > * {
+    margin: 0 !important;
+    width: 100%;
+  }
+
+  @media screen and (max-width: $breakpoint-sm) {
+    flex-direction: column;
+  }
+}
diff --git a/src/Resources/views/Common/_addToWishlist.html.twig b/src/Resources/views/Common/_addToWishlist.html.twig
@@ -2,7 +2,7 @@
     {% if findAllByShopUserAndToken(app.user)|length < 2 %}
         <a
             href="{{ path('bitbag_sylius_wishlist_plugin_shop_wishlist_add_product', {'productId': product.id}) }}"
-            class="bitbag-add-to-wishlist ui icon labeled button blue bb-wishlist-button"
+            class="ui button bb-wishlist-button"
             data-product-name="{{ product.name }}"
             {{ sylius_test_html_attribute('wishlist-add-product') }}
         >
@@ -32,10 +32,10 @@
 {% else %}
     {% if findAllByAnonymousAndChannel(sylius.channel)|length < 2 %}
         <a
-                href="{{ path('bitbag_sylius_wishlist_plugin_shop_wishlist_add_product', {'productId': product.id}) }}"
-                class="bitbag-add-to-wishlist ui icon labeled button blue bb-wishlist-button"
-                data-product-name="{{ product.name }}"
-                {{ sylius_test_html_attribute('wishlist-add-product') }}
+            href="{{ path('bitbag_sylius_wishlist_plugin_shop_wishlist_add_product', {'productId': product.id}) }}"
+            class="ui button bb-wishlist-button"
+            data-product-name="{{ product.name }}"
+            {{ sylius_test_html_attribute('wishlist-add-product') }}
         >
             <span><i class="icon heart"></i></span>
             {{ 'bitbag_sylius_wishlist_plugin.ui.add_to_wishlist'|trans }}

diff --git a/tests/Application/templates/bundles/SyliusShopBundle/Product/Show/_addToCart.html.twig b/tests/Application/templates/bundles/SyliusShopBundle/Product/Show/_addToCart.html.twig
@@ -36,17 +36,17 @@
 
     {{ form_widget(form.wishlists) }}
 
-    <div class="ui two padded column grid stackable ">
-        <button type="submit" class="ui large primary icon labeled button column seven wide">
+    <div class="bb-add-to-cart-container">
+        <button type="submit" class="primary ui icon labeled button bb-wishlist-button">
             <i class="cart icon"></i>
             {{ 'sylius.ui.add_to_cart'|trans }}
         </button>
         <button
-                id="{{ form.addToWishlist.vars.id }}"
-                name="{{ form.addToWishlist.vars.full_name }}"
-                class="{{ form.addToWishlist.vars.attr.class }} right floated column seven wide"
-                data-bb-toggle="wishlist-variant"
-                {{ sylius_test_html_attribute('wishlist-add-variant') }}
+            id="{{ form.addToWishlist.vars.id }}"
+            name="{{ form.addToWishlist.vars.full_name }}"
+            class="{{ form.addToWishlist.vars.attr.class }} ui icon labeled button bb-wishlist-button"
+            data-bb-toggle="wishlist-variant"
+            {{ sylius_test_html_attribute('wishlist-add-variant') }}
         >
             <i class="heart icon"></i>
             {{ form.addToWishlist.vars.label|trans }}