Merge pull request #13 from Oksydan/develop

Various fixes before release

.gitignore

@@ -1,5 +1,5 @@
 node_modules
 .DS_Store
 assets
-!assets/js/custom.js
 .env
+dependencies

README.md

@@ -8,26 +8,192 @@
   * [Prerequisites](#prerequisites)
   * [Installation](#installation)
 * [Usage](#usage)
-
+  * [Working with webpack](#working-with-webpack)
+  * [Working with npm/yarn](#working-with-npm/yarn)
+* [Instructions](#instructions)
+  * [ps_facetedsearch modification](#ps_facetedsearch-modification)
 
 ## About The Theme
 
-Theme is made with modern tools such as webpack 4.4, webpack dev server with HMR :fire::fire: and latest bootstrap 4.5.
-
-
+**Modern prestashop starter theme** is made with modern tools such as webpack 4.4, webpack dev server with HMR :fire::fire: and latest bootstrap 4.6.
+This theme was created to deliver starter theme with latest developers tools and frameworks. You are able to create enterprise level prestashop theme that is easy to maintain. Made for developers, **if you are merchant don't download it!**
+
+#### List of changes compared to classic theme:
+1. Bootstrap updated to **4.6** from **4.0.0-alpha.5** - backwards compatibility included.
+2. Updated webpack to **4.46** from **2.2.1** with whole new webpack config.
+3. Removed **tether** - not used anymore with bootstrap 4.6 - **popper.js** added.
+4. Removed **velocity-animate**, **jquery.scrollbox.js** and **jquery-touchswipe** - replaced with **swiper**.
+5. Removed **bootstrap-filestyle.js** - replaced with bootstrap [custom file input](https://getbootstrap.com/docs/4.6/components/input-group/#custom-file-input)
+6. Removed **jquery.ui** from `ps_searchbar`, new module `is_searchbar` included.
+7. Removed **jquery.ui** from `ps_facetedsearch` - replaced with **nouislider**. (requires `ps_facetedsearch` module modification to make it work properly, [instruction included](#ps_facetedsearch-modification)).
+8. Added **jquery-nice-select** to make selects looks better.
+
+#### Main features:
+1. Webpack config working properly with webpack dev server and HMR. Watcher also observe changes on `.tpl` templates files and module `.css/.js/.tpl` files and make page full reload. You don't need to refresh your webpage anymore to inspect results.
+2. Module `is_themecore` adds structured data with proper `JSON-LD` format for **WebPage**, **Product**, **Organization** and **BreadcrumbList**. Also support **OpenGraph** and **Twitter:card**. Module add missing breadcrumbs for pages: **cart**, **404**, **stores**, **sitemap**.
+3. Dynamic importing boostrap components. You are able to load `.js/.css` file dynamicly with **DynamicImportHandler** class. There is no docs yet, example of use available in `_dev/js/components/dynamic-bootstrap-components.js`.
+4. [Lazyload](https://github.com/verlok/vanilla-lazyload) for images added.
+5. Modified version of `ps_imageslider` included. You are able to upload different images for mobile and desktop.
+6. Multiple entry point for webpack, files separated per view. There are 4 output `js/css` files **theme**, **product**, **checkout**, **listing** and you are able to add more with ease. If you need rich cms pages with a lot of styles included in it. You don't have to include them everywhere with **theme** output file. You are able to create another entry e.g. **cms** and just include it in `ThemeAssets` class in module `is_themecore` that handle theme assets.
+7. List/grid listing display. You are able to choose default listing display type. With only few lines of `.js` code. All template changes are handle in `.tpl` file. It is also easy to add another list type.
+8. Specific `.scss` file structure that help you maintain your code.
 
 ## Getting started
 
-TODO
-
 ### Prerequisites
 
-TODO
+#### System requirements:
+- [Prestashop requirements](https://devdocs.prestashop.com/1.7/basics/installation/system-requirements/),
+- vhost setup, to work with starter theme it is required to setup your shop domain with vhost e.g. `starter.test`,
+- node >= 15v,
+- starter tested only on macOS, create an issue if it isn't working with your system.
 
 ### Installation
 
-TODO
+1. Clone repository or download. There is `starter.zip` file included that contains dependency modules.
+2. If you want to change theme name unzip file. Change folder name e.g. `your-theme-name` then go to `config/theme.yml` and change:
+```yml
+name: starter
+display_name: display
+```
+to:
+
+```yml
+name: your-theme-name
+display_name: my theme display name
+```
+Name in `theme.yml` must be equal folder name. Zip theme folder and install theme from prestashop BO.
+
+3. If you changed theme name you have to go to `is_themecore` module. Find `hookActionFrontControllerSetMedia` method and change:
+```php
+$themeAssetsObject  = new ThemeAssets($pageName, 'starter', $this->context);
+```
+to:
+```php
+$themeAssetsObject  = new ThemeAssets($pageName, 'your-theme-name', $this->context);
+```
+
+4. Open in terminal directory `your-theme-name/_dev` and run:
+- for `npm` :
+```
+npm install
+```
+- for `yarn` :
+```
+yarn install
+```
+5. Go to `your-theme-name/_dev/webpack` and find `.env-example`. Copy file and rename it with `.env`. Replace example value with proper one based on your setup.
+6. Now try to run:
+- for `npm` :
+```
+npm run dev
+```
+- for `yarn` :
+```
+yarn dev
+```
+If your `.env` file is correctly setup. Your browser will open front office of your store.
 
 ## Usage
 
-TODO
+### Working with webpack
+Webpack config is available in `_dev/webpack` folder. Files are structured by their functions:
+
+file  | description
+------------- | -------------
+`webpack.vars.js`  | Webpack dev server config that comes from `.env` file and entry point, output file setup. To add another entry point just add another element to `entriesArray`, remember to add files `/js/{entry_name}.js` and `/css/{entry_name}.scss`.
+`webpack.parts.js`  | Contains loaders and plugins setup.
+`webpack.commons.js`  | Config that runs on both production and development.
+`webpack.development.js`  | Config that runs on development.
+`webpack.production.js`  | Config that runs on production.
+`purge-safelist.js`  | Starter theme comes with support for [purgecss](https://purgecss.com/), but safelist is not included.
+
+### Working with npm/yarn
+
+script  | description
+------------- | -------------
+`build`  | Script run production config with assets optimization and chunks names hashing.
+`build-purge`  | Script run production config with assets optimization, chunks hashing also runs `purgecss` to remove not used styles. **Not recomended to use yet, create safelist before use**.
+`watch`  | Good old watch command that watch your files and compile them. Not `HRM` and `webpack dev server` included. **Assets optimization not included**.
+`dev`  | Script that run `webpack dev server` that watch for changes in files and loading them w/o page reload. Script will open your store in browser with port in url, you have to remove it and refresh page. **Assets optimization not included**.
+`scss-fix`  | Script that run `stylelint` and fix minor issues in code.
+`eslint-fix`  | Script that run `eslint` and fix minor issues in code.
+
+## Instructions
+
+### ps_facetedsearch modification
+
+To remove not used `jquery.ui` and other `.css/.js` files module you have to modify module file.
+Go to main shop directory, find `modules/ps_facetedsearch/src/Hook/ProductSearch.php` and replace:
+
+```php
+public function productSearchProvider(array $params)
+{
+    $query = $params['query'];
+    // do something with query,
+    // e.g. use $query->getIdCategory()
+    // to choose a template for filters.
+    // Query is an instance of:
+    // PrestaShop\PrestaShop\Core\Product\Search\ProductSearchQuery
+    if ($query->getIdCategory()) {
+        $this->context->controller->addJqueryUi('slider');
+        $this->context->controller->registerStylesheet(
+            'facetedsearch_front',
+            '/modules/ps_facetedsearch/views/dist/front.css'
+        );
+        $this->context->controller->registerJavascript(
+            'facetedsearch_front',
+            '/modules/ps_facetedsearch/views/dist/front.js',
+            ['position' => 'bottom', 'priority' => 100]
+        );
+
+        $urlSerializer = new URLSerializer();
+        $dataAccessor = new DataAccessor($this->module->getDatabase());
+
+        return new SearchProvider(
+            $this->module,
+            new Converter(
+                $this->module->getContext(),
+                $this->module->getDatabase(),
+                $urlSerializer,
+                $dataAccessor
+            ),
+            $urlSerializer,
+            $dataAccessor
+        );
+    }
+
+    return null;
+}
+```
+
+width:
+```php
+public function productSearchProvider(array $params)
+{
+    $query = $params['query'];
+    // do something with query,
+    // e.g. use $query->getIdCategory()
+    // to choose a template for filters.
+    // Query is an instance of:
+    // PrestaShop\PrestaShop\Core\Product\Search\ProductSearchQuery
+    if ($query->getIdCategory()) {
+        $urlSerializer = new URLSerializer();
+        $dataAccessor = new DataAccessor($this->module->getDatabase());
+
+        return new SearchProvider(
+            $this->module,
+            new Converter(
+                $this->module->getContext(),
+                $this->module->getDatabase(),
+                $urlSerializer,
+                $dataAccessor
+            ),
+            $urlSerializer,
+            $dataAccessor
+        );
+    }
+
+    return null;
+}
+```

_dev/.eslintignore

@@ -1,2 +1,5 @@
+/node_modules/
+/webpack/
 postcss.config.js
 webpack.config.js
+demo.js

_dev/css/abstracts/mixins/_custom-col.scss

@@ -1,8 +1,8 @@
-@mixin custom-col-padded($width, $padding: $grid-gutter-width/2) {
+@mixin custom-col-padded($width, $padding: $grid-gutter-width / 2) {
   flex: 0 0 $width;
   max-width: $width;
-  padding-left: $padding;
   padding-right: $padding;
+  padding-left: $padding;
 }
 
 @mixin custom-col($width) {

_dev/css/abstracts/variables/bootstrap/_badge.scss

@@ -0,0 +1,2 @@
+$badge-padding-y: 0.3em;
+$badge-padding-x: 0.55em;

_dev/css/abstracts/variables/bootstrap/_index.scss

@@ -10,3 +10,4 @@
 @import "card";
 @import "rfs";
 @import "forms";
+@import "badge";

_dev/css/abstracts/variables/custom/_search.scss

@@ -1,2 +1,2 @@
 
-$search_input-height: rem-calc(46px);
+$search-input-height: rem-calc(46px);

_dev/css/checkout/components/checkout/_checkout-content.scss

@@ -3,68 +3,84 @@
   &:not(:first-child) {
     border-top: $card-border-width solid $card-border-color;
   }
+
   &__header {
     border-bottom: 0;
   }
+
   .content {
     border-top: $card-border-width solid $card-border-color;
   }
+
   .not-allowed {
     cursor: not-allowed;
     opacity: 0.5;
   }
+
   .content,
   .done,
   .step-edit {
     display: none;
   }
+
   &.-unreachable {
     .step-title {
       cursor: not-allowed;
       opacity: 0.5;
     }
   }
+
   &.-current {
     .step-title {
       cursor: default;
     }
+
     .content {
       display: block;
     }
   }
+
   &.-current.-reachable.-complete {
     .done,
     .step-edit {
       display: none;
     }
+
     .step-number {
       display: inline-block;
     }
+
     .content {
       display: block;
     }
   }
+
   &.-reachable.-complete {
     .done {
       display: inline-block;
     }
+
     .content {
       display: none;
     }
   }
+
   .step-number {
     display: inline-block;
   }
 }
 
 .js-payment-binary {
   display: none;
+
   .accept-cgv {
     display: none;
   }
+
   &.disabled {
     cursor: not-allowed;
     opacity: 0.6;
+
     &::before {
       position: absolute;
       top: 0;
@@ -74,6 +90,7 @@
       pointer-events: none;
       content: "";
     }
+
     .accept-cgv {
       display: block;
     }

_dev/css/checkout/components/checkout/_checkout-option-block.scss

@@ -1,6 +1,7 @@
 
 .checkout-option-block {
   position: relative;
+
   > input {
     position: absolute;
     left: -99999em;