Restyling and redefining fixtures for homepage, category, product and…

… Q&A pages

src/Resources/assets/shop/scss/_carousel.scss

@@ -1,27 +1,27 @@
 .carousel-wrapper {
     position: relative;
 
-    .carousel {
+    .products-carousel {
         margin: 0 -1em;
     }
 
-    .carousel-nav {
-        .carousel-left {
+    .products-carousel-nav {
+        .products-carousel-left {
             left: 30px;
         }
 
-        .carousel-right {
+        .products-carousel-right {
             right: 30px;
         }
 
-        .carousel-left, .carousel-right {
+        .products-carousel-left, .products-carousel-right {
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
         }
     }
 
-    .carousel-item {
+    .products-carousel-item {
         padding: 5px 1em;
     }
 }

tests/Application/assets/shop/entry.js

@@ -1 +1,2 @@
 import 'sylius/bundle/ShopBundle/Resources/private/entry';
+import './styles.scss';

tests/Application/assets/shop/styles.scss

@@ -0,0 +1,23 @@
+.homepage-logo {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.homepage-sale {
+  img {
+    width: 60% !important;
+    margin: auto !important;
+    border-radius: 20px;
+  }
+}
+
+.cms_content_element__taxons-list {
+  .ui.column {
+    text-align: center;
+
+    a {
+      font-size: 14pt;
+      font-weight: bold;
+    }
+  }
+}

tests/Application/templates/bundles/BitBagSyliusCmsPlugin/Shop/ContentElement/_products_carousel.html.twig

@@ -0,0 +1,33 @@
+{% set tag = random(0, 1000) %}
+<div class="{{ content_element_base_class }}__products-carousel">
+    <div class="carousel-wrapper">
+        <div class="products-carousel products-carousel-{{ tag }}">
+            {% for product in products %}
+                <div class="products-carousel-item">
+                    {% include '@SyliusShop/Product/_box.html.twig' %}
+                </div>
+            {% endfor %}
+        </div>
+
+        <div class="products-carousel-nav">
+            <button class="products-carousel-left products-carousel-left-{{ tag }} ui huge black icon button">
+                <i class="left arrow icon"></i>
+            </button>
+            <button class="products-carousel-right products-carousel-right-{{ tag }} ui huge black icon button">
+                <i class="right arrow icon"></i>
+            </button>
+        </div>
+    </div>
+</div>
+<script type="text/javascript">
+    window.addEventListener('load', function () {
+        $('.products-carousel-{{ tag }}').slick({
+            infinite: true,
+            slidesToShow: 4,
+            slidesToScroll: 1,
+            prevArrow: $('.products-carousel-left-{{ tag }}'),
+            nextArrow: $('.products-carousel-right-{{ tag }}'),
+            appendArrows: false,
+        });
+    })
+</script>

tests/Application/templates/bundles/BitBagSyliusCmsPlugin/Shop/ContentElement/_products_grid.html.twig

@@ -0,0 +1,7 @@
+<div class="{{ content_element_base_class }}__products-grid">
+    <div class="ui four doubling cards">
+        {% for product in products %}
+            {% include '@SyliusShop/Product/_box.html.twig' %}
+        {% endfor %}
+    </div>
+</div>

tests/Application/templates/bundles/BitBagSyliusCmsPlugin/Shop/ContentElement/_single_media.html.twig

@@ -0,0 +1,5 @@
+<div class="{{ content_element_base_class }}__single-media">
+    <div style="border-radius: 4px; overflow: hidden">
+        {{ media.renderedContent }}
+    </div>
+</div>

tests/Application/templates/bundles/SyliusShopBundle/Homepage/index.html.twig

@@ -2,23 +2,18 @@
 
 {% block content %}
     <div class="top one">
-        <div class="ui center aligned segment stackable grid cms-logo">
+        <div class="homepage-logo">
             {{ bitbag_cms_render_media('homepage_logo') }}
         </div>
         {{ bitbag_cms_render_block('homepage_textarea') }}
         {{ bitbag_cms_render_block('homepage_products_carousel') }}
+        <div class="homepage-sale">
+            {{ bitbag_cms_render_block('homepage_sale_banner') }}
+        </div>
         {{ bitbag_cms_render_block('homepage_products_grid') }}
         {{ bitbag_cms_render_block('homepage_taxons_list') }}
+        {{ bitbag_cms_render_block('homepage_sale_banner2') }}
         {{ bitbag_cms_render_block('homepage_products_carousel_by_taxon') }}
         {{ bitbag_cms_render_block('homepage_products_grid_by_taxon') }}
     </div>
-    <div class="ui stackable one column grid">
-        <div class="column intro promo">
-            <div class="ui info message">
-                Like it? We do a lot of Sylius projects & plugins. <br/>
-                Perhaps there is something we can do for you. Visit <a href="https://bitbag.shop/">our website</a> for
-                more information.
-            </div>
-        </div>
-    </div>
 {% endblock %}

tests/Application/templates/bundles/SyliusShopBundle/Product/show.html.twig

@@ -58,7 +58,5 @@
 
     {{ sonata_block_render_event('sylius.shop.product.show.before_associations', {'product': product}) }}
 
-    {% include '@SyliusShop/Product/Show/_associations.html.twig' %}
-
     {{ bitbag_cms_render_block('specified_products_in_taxons', null, product) }}
 {% endblock %}