new: pkg: SWC-89 new version released !skipChangelog

CHANGELOG.md

@@ -1,6 +1,29 @@
 # Changelog
 
 
+## v1.4.0 (2023-02-23)
+
+### Changes
+
+* SWC-89 remove the image from the header and add bigger image to PDP gallery. [Lang]
+
+
+## v1.3.0 (2023-02-23)
+
+### Changes
+
+* SWC-89 change the theme as the customer requested. [Lang]
+
+* SWC-89 change the documentation for easy copy-paste. [Lang]
+
+
+## v1.2.0 (2023-02-21)
+
+### Changes
+
+* SVC-89 pixel cosmetics on checkout page. [Lang]
+
+
 ## v1.1.0 (2023-02-21)
 
 ### Changes

README.md

@@ -11,10 +11,14 @@ This plugin was made for the eTail conference to show a Shopware w/ special them
 2. Install and activate the plugin
    ```bash
    $ bin/console plugin:refresh
-   $ bin/console plugin:install --activate EtailConferenceTheme
-   $ bin/console theme:change
-      > EtailConferenceTheme
    ```
+   ```bash
+   $ bin/console plugin:install --activate EtailConferenceTheme
+   ```
+   ```bash
+   $ bin/console theme:change
+   ```
+   > EtailConferenceTheme
 3. On administration area some setting you have to set
    1. **Disable reviews** (The docs are [here](https://docs.shopware.com/en/shopware-6-en/catalogues/reviews#disable-reviews).) - `Admin | Settings | Shop | Products | Show reviews`
       > False

composer.json

@@ -2,6 +2,7 @@
   "name": "itg-theme/etail-west-plugin",
   "description": "eTail West theme plugin for presentation",
   "type": "shopware-platform-plugin",
+  "version": "1.4.0",
   "license": "MIT",
   "autoload": {
     "psr-4": {

src/Resources/app/storefront/dist/storefront/js/etail-conference-theme.js

@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([["etail-conference-theme"],{AZcZ:function(e,n,o){(function(e){e((function(){setTimeout((function(){e(".shopware-overlay").addClass("fade-out"),e(".header-main, .footer-main, .content-main").removeClass("d-none"),setTimeout((function(){e(".shopware-overlay").addClass("d-none")}),500)}),500),e(".card.product-box").each((function(){e(this).find(".btn").append(e(this).find(".product-price"))}))})),window.addEventListener("beforeunload",(function(n){e(".shopware-overlay").removeClass("d-none").removeClass("fade-out")}))}).call(this,o("UoTJ"))}},[["AZcZ","runtime","vendor-node"]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([["etail-conference-theme"],{AZcZ:function(e,n,t){(function(e){e((function(){setTimeout((function(){e(".shopware-overlay").addClass("fade-out"),e(".header-main, .footer-main, .content-main").removeClass("d-none"),setTimeout((function(){e(".shopware-overlay").addClass("d-none")}),500)}),500),e(".card.product-box").each((function(){e(this).find(".btn").append(e(this).find(".product-price"))}))}));var n,t,o=(n=document.documentElement,t=n.clientHeight,function(e,o){var i,a=[];for(e&&"resize"===e.type&&(t=n.clientHeight),i=o.elements.length;i--;)if(!a.includes(i)){var d=o.elements[i],r=d.getBoundingClientRect(),s=(r.top/t*100+r.bottom/t*100)/2,c=s>o.zone[1]&&s<100-o.zone[1];d.classList.toggle(o.markedClass,c),c&&a.push(d)}});function i(e){o(e,{elements:document.querySelectorAll("div.product-image-wrapper"),markedClass:"highlight--1",zone:[20,20]}),o(e,{elements:document.querySelectorAll("div.product-image-wrapper"),markedClass:"highlight--2",zone:[40,40]})}window.addEventListener("scroll",i),window.addEventListener("resize",i)}).call(this,t("UoTJ"))}},[["AZcZ","runtime","vendor-node"]]]);

src/Resources/app/storefront/src/main.js

@@ -16,3 +16,53 @@ $(function () {
       );
   });
 });
+
+/** Run animation on product list only when they are in the middle of screen */
+var getElementsInArea = (function (docElm) {
+  var viewportHeight = docElm.clientHeight;
+
+  return function (e, opts) {
+    var found = [], i;
+
+    if (e && e.type === 'resize') {
+      viewportHeight = docElm.clientHeight;
+    }
+
+    for (i = opts.elements.length; i--;) {
+      if (found.includes(i)) {
+        continue;
+      }
+
+      var elm = opts.elements[ i ],
+        pos = elm.getBoundingClientRect(),
+        topPerc = pos.top / viewportHeight * 100,
+        bottomPerc = pos.bottom / viewportHeight * 100,
+        middle = (topPerc + bottomPerc) / 2,
+        inViewport = middle > opts.zone[ 1 ] &&
+          middle < (100 - opts.zone[ 1 ]);
+
+      elm.classList.toggle(opts.markedClass, inViewport);
+
+      if (inViewport) {
+        found.push(elm);
+      }
+    }
+  };
+})(document.documentElement);
+
+window.addEventListener('scroll', f)
+window.addEventListener('resize', f)
+
+function f(e) {
+  getElementsInArea(e, {
+    elements: document.querySelectorAll('div.product-image-wrapper'),
+    markedClass: 'highlight--1',
+    zone: [20, 20]
+  });
+
+  getElementsInArea(e, {
+    elements: document.querySelectorAll('div.product-image-wrapper'),
+    markedClass: 'highlight--2',
+    zone: [40, 40]
+  });
+}

src/Resources/app/storefront/src/scss/base.scss

@@ -109,7 +109,8 @@ header {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 500px;
+  text-align: center;
+  margin: 1.5em 0;
 
   @media screen and (max-width: 500px) {
     min-height: 20em;
@@ -118,11 +119,10 @@ header {
   h1 {
     font: bold 4em 'Brandon Text', sans-serif;
     line-height: 1em;
-    color: #000;
+    color: #1674b7;
 
-    @media screen and (max-width: 500px) {
-      text-align: center;
-      color: #fff !important;
+    @media screen and (max-width: 870px) {
+      color: #fff;
     }
   }
 
@@ -131,9 +131,8 @@ header {
     line-height: 1em;
     color: #7d7d7d;
 
-    @media screen and (max-width: 500px) {
-      text-align: center;
-      color: #fff !important;
+    @media screen and (max-width: 870px) {
+      color: #1674b7;
     }
   }
 
@@ -148,7 +147,7 @@ header {
   }
 
   img {
-    max-height: 25vw;
+    max-height: 35vw;
 
     animation-name: gently-scale;
     animation-timing-function: ease-in-out;
@@ -176,6 +175,10 @@ header {
   }
 }
 
+.gallery-slider-image {
+  width: 100%;
+}
+
 /** basket offcanvas */
 
 .offcanvas-cart {
@@ -288,22 +291,30 @@ header {
         z-index: -1;
 
         border-radius: 50%;
-        box-shadow: 0 3.125rem 1.5rem rgba(0, 0, 0, 0.24);
         animation-name: bounce-shadow;
         animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
         animation-duration: 3s;
-        animation-iteration-count: infinite;
+        animation-play-state: paused;
+        box-shadow: 0 3.125rem 1.5rem rgba(0, 0, 0, 0.24);
       }
 
       .product-image-link {
         animation-name: bounce;
         animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
         animation-duration: 3s;
-        animation-iteration-count: infinite;
+        animation-play-state: paused;
         transform-origin: bottom;
       }
     }
 
+    .product-image-wrapper.highlight--1,
+    .product-image-wrapper.highlight--2 {
+      &:after,
+      .product-image-link {
+        animation-play-state: running;
+      }
+    }
+
     .product-name {
       text-transform: uppercase;
       color: #000;
@@ -325,6 +336,7 @@ header {
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3478d1', endColorstr='#308bf4', GradientType=1);
         display: flex;
         justify-content: space-between;
+        align-items: center;
         border: 0;
         font-weight: 600;
         white-space: nowrap;
@@ -356,13 +368,13 @@ header {
     transform: scale(1.1, .9) translateY(0);
   }
   30% {
-    transform: scale(.9, 1.1) translateY(-65px);
+    transform: scale(.9, 1.1) translateY(-20px);
   }
   50% {
     transform: scale(1.05, .95) translateY(0);
   }
   57% {
-    transform: scale(1, 1) translateY(-7px);
+    transform: scale(1, 1) translateY(-3px);
   }
   64% {
     transform: scale(1, 1) translateY(0);
@@ -523,11 +535,11 @@ header {
 }
 
 .footer-main {
-  background: #313131;
+  background: #50b6ff;
 }
 
 .footer-shopware {
-  background: #313131;
+  background: #50b6ff;
   padding: 3em;
 
   h1 {

src/Resources/views/storefront/component/product/card/box-standard.html.twig

@@ -0,0 +1,3 @@
+{% extends '@Storefront/storefront/component/product/card/box-standard.html.twig' %}
+
+{% block component_product_box_description %}{% endblock %}

src/Resources/views/storefront/layout/header/header.html.twig

@@ -20,10 +20,10 @@
                     <h1>Shopware ecommerce platform</h1>
                     <h2>Build the exceptional</h2>
                 </div>
-                <div class="col text-center">
-                    <img src="{{ asset('bundles/etailconferencetheme/assets/shopware-phone.png') }}"
-                         alt="Shopware phone">
-                </div>
+{#                <div class="col text-center">#}
+{#                    <img src="{{ asset('bundles/etailconferencetheme/assets/shopware-phone.png') }}"#}
+{#                         alt="Shopware phone">#}
+{#                </div>#}
             </div>
         </div>
     {% endif %}