Homepage rework

MatthieuCutin · Dec 5, 2019 · f3e5661 · f3e5661
1 parent 1a813dc
commit f3e5661
Show file tree

Hide file tree

Showing 13 changed files with 220 additions and 11 deletions.
diff --git a/UPGRADE-1.7.md b/UPGRADE-1.7.md
@@ -6,6 +6,22 @@ Require upgraded Sylius version using Composer:
 composer require sylius/sylius:~1.7.0
 ```
 
+Update your `package.json` in order to add `slick-carousel` : 
+
+```diff
+{
+  "dependencies": {
+    "babel-polyfill": "^6.26.0",
+    "jquery": "^3.4.0",
+    "jquery.dirtyforms": "^2.0.0",
+    "lightbox2": "^2.9.0",
+    "semantic-ui-css": "^2.2.0",
++   "slick-carousel": "^1.8.1"
+  },
+  ...
+}
+```
+
 # Breaking changes
 
 Those are excluded from our BC promise:

diff --git a/package.json b/package.json
@@ -4,7 +4,8 @@
     "jquery": "^3.4.0",
     "jquery.dirtyforms": "^2.0.0",
     "lightbox2": "^2.9.0",
-    "semantic-ui-css": "^2.2.0"
+    "semantic-ui-css": "^2.2.0",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@symfony/webpack-encore": "^0.28.0",

diff --git a/src/Sylius/Bundle/ShopBundle/Resources/private/img/homepage-banner.jpg b/src/Sylius/Bundle/ShopBundle/Resources/private/img/homepage-banner.jpg
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/private/img/sylius-plus-banner.png b/src/Sylius/Bundle/ShopBundle/Resources/private/img/sylius-plus-banner.png
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/private/js/app.js b/src/Sylius/Bundle/ShopBundle/Resources/private/js/app.js
@@ -10,6 +10,7 @@
 import 'semantic-ui-css/components/popup';
 import 'semantic-ui-css/components/rating';
 import $ from 'jquery';
+import 'slick-carousel';
 
 import 'sylius/ui/app';
 import 'sylius/ui/sylius-api-login';
@@ -77,4 +78,13 @@ $(document).ready(() => {
   $(document).variantImages();
 
   $('body').find('input[autocomplete="off"]').prop('autocomplete', 'disable');
+
+  $('.carousel').slick({
+    infinite: true,
+    slidesToShow: 2,
+    slidesToScroll: 1,
+    prevArrow: $('.carousel-left'),
+    nextArrow: $('.carousel-right'),
+    appendArrows: false
+  });
 });
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/private/scss/style.scss b/src/Sylius/Bundle/ShopBundle/Resources/private/scss/style.scss
@@ -54,3 +54,62 @@ body {
 .tax-disabled {
     color: #a0a0a0;
 }
+
+.homepage .carousel-wrapper {
+    position: relative;
+}
+
+.homepage .carousel-nav {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    width: 96%;
+    height: 100%;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.homepage .carousel {
+    margin: 0 -1em;
+}
+
+.homepage .carousel-item {
+    padding: 5px 1em;
+}
+
+@media (min-width: 992px) {
+    .homepage .featured.column .card .content {
+        text-align: center;
+        padding-top: 41px;
+    }
+
+    .homepage .featured.column .card .content .header {
+        font-size: 26px;
+    }
+
+    .homepage .featured.column .cards,
+    .homepage .featured.column .cards .ui.fluid.card {
+        height: 100%;
+    }
+}
+
+@media (max-width: 991px) {
+    .homepage .odd.doubling > .card:first-child {
+        width: calc(100% - 2em) !important;
+    }
+}
+
+.newsletter .ui.form {
+    display: flex !important;
+}
+
+.newsletter .ui.form .newsletter-input,
+.newsletter .ui.form .newsletter-button {
+    margin: 5px;
+}
+
+.newsletter .ui.form .newsletter-input {
+    flex-grow: 1;
+}
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/translations/messages.en.yml b/src/Sylius/Bundle/ShopBundle/Resources/translations/messages.en.yml
@@ -2,6 +2,13 @@
 # (c) Paweł Jędrzejewski
 
 sylius:
+    homepage:
+        about_us: 'About Us'
+        about_us_content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad adipisci aperiam consectetur cum dicta dolores ducimus, eveniet ex exercitationem harum in iure labore libero magnam minima neque, numquam officiis possimus quasi reiciendis rem repellat repellendus rerum ut vel veniam vitae? Beatae consectetur culpa debitis ex laudantium porro unde? Modi.'
+        brace_yoursel_winter_is_coming: 'Brace yourself! Winter is coming'
+        newsletter: 'Newsletter'
+        newsletter_description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda atque dolorum iusto labore, minima minus quas quidem ratione recusandae?'
+        subscribe: 'Subscribe'
     lightbox:
         image_album_label: 'Image %1 of %2'
     menu:

diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Homepage/_carousel.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Homepage/_carousel.html.twig
@@ -0,0 +1,18 @@
+<div class="carousel-wrapper">
+    <div class="carousel">
+        {% for product in products %}
+            <div class="carousel-item">
+                {% include '@SyliusShop/Product/_box.html.twig' %}
+            </div>
+        {% endfor %}
+    </div>
+
+    <div class="carousel-nav">
+        <button class="carousel-left ui huge black icon button">
+            <i class="left arrow icon"></i>
+        </button>
+        <button class="carousel-right ui huge black icon button">
+            <i class="right arrow icon"></i>
+        </button>
+    </div>
+</div>
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Homepage/_list.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Homepage/_list.html.twig
@@ -0,0 +1,12 @@
+{% if products|length == 4 %}
+    {% set columns = "two" %}
+{% endif %}
+{% if products|length == 3 %}
+    {% set columns = "three odd doubling" %}
+{% endif %}
+
+<div class="ui {{ columns|default('') }} cards">
+    {% for product in products %}
+        {% include '@SyliusShop/Product/_box.html.twig' %}
+    {% endfor %}
+</div>
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Homepage/index.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Homepage/index.html.twig
@@ -1,8 +1,70 @@
 {% extends '@SyliusShop/layout.html.twig' %}
 
 {% block content %}
-<h2 class="ui horizontal section divider header">
-    {{ 'sylius.ui.latest_products'|trans }}
-</h2>
-{{ render(url('sylius_shop_partial_product_index_latest', {'count': 4, 'template': '@SyliusShop/Product/_horizontalList.html.twig'})) }}
+    <div class="homepage">
+        <div class="ui hidden divider"></div>
+        <img class="ui fluid image" src="{{ asset('assets/shop/img/homepage-banner.jpg') }}" alt="Sylius">
+        <div class="ui hidden divider"></div>
+
+        <h2 class="ui center aligned huge header">{{ 'sylius.ui.latest_products'|trans }}</h2>
+        <div class="ui hidden divider"></div>
+
+        {{ render(url('sylius_shop_partial_product_index_latest', {'count': 3, 'template': '@SyliusShop/Homepage/_list.html.twig'})) }}
+        <div class="ui hidden divider"></div>
+
+        <h2 class="ui center aligned huge header">{{ 'sylius.homepage.brace_yoursel_winter_is_coming'|trans }}</h2>
+        <div class="ui hidden divider"></div>
+
+        {{ render(url('sylius_shop_partial_product_index_latest', {'count': 4, 'template': '@SyliusShop/Homepage/_carousel.html.twig'})) }}
+
+        <div class="ui very padded secondary segment newsletter">
+            <div class="ui bottom aligned grid">
+                <div class="doubling two column row">
+                    <div class="column">
+                        <h2 class="ui huge header">
+                            {{ 'sylius.homepage.newsletter'|trans }}
+                        </h2>
+                        <p>
+                            {{ 'sylius.homepage.newsletter_description'|trans }}
+                        </p>
+                    </div>
+                    <div class="column">
+                        <form class="ui form">
+                            <div class="newsletter-input">
+                                <input type="text" placeholder="{{ 'sylius.ui.email'|trans }}">
+                            </div>
+                            <div class="newsletter-button">
+                                <button class="ui button">{{ 'sylius.homepage.subscribe'|trans }}
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="ui hidden divider"></div>
+
+        <div class="ui grid">
+            <div class="sixteen wide tablet eight wide computer featured column">
+                {{ render(url('sylius_shop_partial_product_index_latest', {'count': 1, 'template': '@SyliusShop/Homepage/_list.html.twig'})) }}
+            </div>
+            <div class="sixteen wide tablet eight wide computer column">
+                {{ render(url('sylius_shop_partial_product_index_latest', {'count': 4, 'template': '@SyliusShop/Homepage/_list.html.twig'})) }}
+            </div>
+        </div>
+        <div class="ui hidden divider"></div>
+
+        <div class="ui very padded center aligned secondary segment">
+            <div class="ui centered grid">
+                <div class="sixteen wide tablet twelve wide computer center aligned column">
+                    <h2 class="ui huge header">
+                        {{ 'sylius.homepage.about_us'|trans }}
+                    </h2>
+                    <p>
+                        {{ 'sylius.homepage.about_us_content'|trans }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
 {% endblock %}
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/_footer.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/_footer.html.twig
@@ -3,7 +3,12 @@
         <div class="ui inverted divided equal height stackable grid">
             {{ sonata_block_render_event('sylius.shop.layout.before_footer') }}
 
-            <div class="three wide column">
+            <div class="four wide column">
+                <a href="//sylius.com/plus" target="_blank">
+                    <img class="ui fluid image" style="max-width: 170px;" src="{{ asset('assets/shop/img/sylius-plus-banner.png') }}" alt="Sylius Plus">
+                </a>
+            </div>
+            <div class="four wide column">
                 <h4 class="ui inverted header">{{ 'sylius.ui.your_store'|trans }}</h4>
                 <div class="ui inverted link list">
                     <a href="#" class="item">{{ 'sylius.ui.about'|trans }}</a>
@@ -12,7 +17,7 @@
                     <a href="{{ path('sylius_shop_contact_request') }}" class="item">{{ 'sylius.ui.contact_us'|trans }}</a>
                 </div>
             </div>
-            <div class="three wide column">
+            <div class="four wide column">
                 <h4 class="ui inverted header">{{ 'sylius.ui.customer_care'|trans  }}</h4>
                 <div class="ui inverted link list">
                     <a href="{{ path('sylius_shop_contact_request') }}" class="item">{{ 'sylius.ui.contact_us'|trans  }}</a>
@@ -21,12 +26,25 @@
                     <a href="#" class="item">{{ 'sylius.ui.returns_policy'|trans  }}</a>
                 </div>
             </div>
-            <div class="eight wide column">
-                <h4 class="ui inverted header">&copy; {{ 'sylius.ui.your_store'|trans }}</h4>
-                <p>{{ 'sylius.ui.powered_by'|trans }} <a href="http://sylius.com" target="_blank" style="color: #1abb9c;">Sylius</a>.</p>
+            <div class="four wide column">
+                <h4 class="ui inverted header">{{ 'sylius.ui.payment_methods'|trans  }}</h4>
+                <div>
+                    <i class="huge inverted cc mastercard icon"></i>
+                    <i class="huge inverted cc visa icon"></i>
+                    <i class="huge inverted cc paypal card icon"></i>
+                </div>
             </div>
+        </div>
 
-            {{ sonata_block_render_event('sylius.shop.layout.after_footer') }}
+        <div class="ui hidden divider"></div>
+
+        <div class="ui center aligned inverted basic segment">
+            <p>&copy; {{ 'sylius.ui.your_store'|trans }}, {{ 'sylius.ui.powered_by'|trans }} <a href="http://sylius.com" target="_blank" style="color: #1abb9c;">Sylius</a>.</p>
+            <a target="_blank" href="//facebook.com/SyliusEcommerce/"><i class="big grey facebook icon"></i></a>
+            <a target="_blank" href="//instagram.com/sylius.team/"><i class="big grey instagram icon"></i></a>
+            <a target="_blank" href="//twitter.com/sylius"><i class="big grey twitter card icon"></i></a>
         </div>
+
+        {{ sonata_block_render_event('sylius.shop.layout.after_footer') }}
     </div>
 </footer>
diff --git a/src/Sylius/Bundle/ShopBundle/gulpfile.babel.js b/src/Sylius/Bundle/ShopBundle/gulpfile.babel.js
@@ -65,6 +65,7 @@ const paths = {
     css: [
       upath.joinSafe(nodeModulesPath, 'semantic-ui-css/semantic.min.css'),
       upath.joinSafe(nodeModulesPath, 'lightbox2/dist/css/lightbox.min.css'),
+      upath.joinSafe(nodeModulesPath, 'slick-carousel/slick/slick.css'),
       upath.joinSafe(vendorUiPath, 'Resources/private/css/**'),
       upath.joinSafe(vendorShopPath, 'Resources/private/css/**'),
       upath.joinSafe(vendorShopPath, 'Resources/private/scss/**'),

diff --git a/yarn.lock b/yarn.lock
@@ -8226,6 +8226,11 @@ [email protected]:
   dependencies:
     is-fullwidth-code-point "^2.0.0"
 
+slick-carousel@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
+  integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"