Falcon theme

Name: Falcon theme
Brand: Igor Stępień
SKU: falcon

Prestashop starter theme that provides great development experience.

Sources

Stars: 290 Forks: 64 Last commit: Nov 23, 2024

Type: Theme

Info checked: Mar 2, 2026

<h1 align="center"> Falcon theme </h1>

🚀 super fast
💡 feature rich
🪶 lightweight
⭐️ up to date
🐧 prestashop theme

About The Theme

Falcon theme is made with the latest tools such as Webpack 5, Webpack dev server with HMR :fire::fire:, and Bootstrap 4.6. This theme was created to deliver a starter theme with the latest developers' tools and frameworks. You can create an enterprise-level PrestaShop theme that is easy to maintain.

Made for developers, and if you are a merchant, you shouldn'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 5 from 2.2.1 with a whole new Webpack config. 3. Removed tether - not used anymore with Bootstrap 4.6 - popper.js added instead. 4. Removed velocity-animate, jquery.scrollbox.js and jquery-touchswipe - replaced with Swiper. 5. Removed bootstrap-filestyle.js - replaced with Bootstrap custom file input 6. Removed jquery.ui from <code>ps_searchbar</code>, a new module <code>is_searchbar</code> included. 7. Removed jquery.ui from <code>ps_facetedsearch</code> - replaced with nouislider. (<code>ps_facetedsearch</code> assets are unregistered inside <code>is_themecore</code> module that is required for the theme to work properly).

Main features:

1. Webpack config works properly with Webpack Dev server and HMR. Its watcher also observes changes on <code>.tpl</code> templates, and modules <code>.css/.js/.tpl</code> files and makes the page complete reload if needed. You don't need to refresh your webpage manually anymore to inspect results. 2. Module <code>is_themecore</code> adds structured data with proper <code>JSON-LD</code> format for WebPage, Product, Organization and BreadcrumbList. Also supports OpenGraph and Twitter:card. It adds missing breadcrumbs for pages: cart, 404, stores, sitemap. 3. Dynamic importing of the Boostrap components. You can load <code>.js/.css</code> file dynamically with DynamicImportHandler class. There is no documentation yet, only an example of use available in <code>_dev/js/components/dynamic-bootstrap-components.js</code>. 4. Lazyload added for images that are below the fold. 5. Modified version of <code>ps_imageslider</code> included. You can upload images for mobile and desktop separately. 6. Multiple entry points for Webpack, files separated per view. There are 4 output <code>js/css</code> files theme, product, checkout, listing and you are able to add more with ease. If you need rich CMS pages with many styles, you don't have to include them everywhere with the theme output file. You can create another entry e.g. cms and modify the <code>assets.yml</code> file to include the new assets file. 7. List/grid switcher on the list. You are able to choose the default listing display type with only a few lines of <code>.js</code> code. All template changes are handled in <code>.tpl</code> file. It is also easy to add another list type. 8. Specific <code>.scss</code> file structure that helps you maintain your code over time. 9. Automatically generated preload links for theme fonts. You don't have to care about manually preloading fonts inside the template. Webpack generates <code>.html</code> file that is included inside the head. Fonts fileNames are <code>contentHashed</code> so client-side caching problems after fonts changes are resolved (especially useful for <code>icomoon</code> generated icon fonts.). 10. High DPI images support. With just a simple call of the Smarty function (<code>generateImageSources</code>), you are able to handle whole image sources logic - <code>srcset</code> for the High DPI images option enabled. 11. <code>SwiperSlider</code> wrapper class for <code>swiper.js</code> to fetch needed swiper modules lazily based on provided config. 12. WebP image format generated automatically on demand via <code>is_themcore</code> module. 13. <code>Early hints (103)</code> support via Cloudflare for css/image file.

Online demo

Want to check it online in action before downloading? Demo available here (page might not be avaliable on release date).<br> Demo hosted by our technical partner Wrapnet.

Performance

Performance results based on PageSpeed Insights:

Desktop

Mobile

Getting started

Prerequisites

Modules required

Optional modules

is_favoriteproducts

System requirements:

Prestashop requirements,
vhost setup, to work with Falcon theme it is required to setup your shop domain with vhost e.g. <code>falcon.test</code>,

Support table

Falcon version | PS version | node version ------------- | ----------- | ------------- v 1.X | 1.7.7.X | >= 10 v 2.X | 1.7.8.X | >= 14 v 3.0.X | 8.0.X | >= 14 v 3.1.X | 8.0.X | >= 15

Module requirements

<code>is_themecore</code> version | Theme version ------------- | ------------- 1.X.X | 1.X.X 2.X.X | 2.X.X 3.X.X | 3.0.X 4.X.X | >= 3.1.X

<code>is_imageslider</code> version | Theme version ------------- | ------------- 1.X.X | <= 2.X.X 2.X.X | 3.1.X 3.X.X | >= 3.1.X

<code>is_searchbar</code> version | Theme version ------------- | ------------- 1.X.X | <= 2.X.X 2.X.X | 3.0.X 3.X.X | >= 3.1.X

<code>is_shoppingcart</code> version | Theme version ------------- | ------------- 1.X.X | <= 2.X.X 2.X.X | 3.1.X 3.X.X | >= 3.1.X

<code>is_favoriteproducts</code> version | Theme version ------------- | ------------- 1.X.X | >= 3.1.X

Installation

1. Go to releases and download latest version <code>falcon.zip</code> file not source code.

2. Download required modules via github releases and place them into <code>{shop_dir}/modules/</code> folder. Make sure that you are downloading release package not source code of module. DON'T clone module repository. If you clone module repository, you will have to run <code>composer install</code> in root dir of downloaded module.

3. Unzip theme file and place it inside <code>{shop_dir}/themes/</code>.

4. If you want to change theme name unzip file. Change folder name e.g. <code>your-theme-name</code> then go to <code>config/theme.yml</code> and change:

name: falcon

display_name: Falcon theme

to:

name: your-theme-name

display_name: my theme display name

Name in <code>theme.yml</code> must be equal folder name.

5. Open in terminal directory <code>your-theme-name/_dev</code> and run:

for <code>npm</code> :

npm install

for <code>yarn</code> :

yarn install

6. Creating your <code>.env</code> file. You can setup you project by running <code>project-init</code> script.

7. If you didn't build your theme in step 6. Just run:

for <code>npm</code> :

npm run build

for <code>yarn</code> :

yarn build

8. Go in BO to Design->Theme & Logo and turn on theme. Now theme should be displayed correctly in FO and modules should be installed.

9. Now try to run:

for <code>npm</code> :

npm run dev

for <code>yarn</code> :

yarn dev

If your <code>.env</code> file is correctly setup. Your browser will open FO of your store.

Usage

Working with webpack

Webpack config is available in <code>_dev/webpack</code> folder. Files are structured by their functions:

file | description ------------- | ------------- <code>webpack.vars.js</code> | Webpack dev server config that comes from <code>.env</code> file and entry point, output file setup. To add new entry just run <code>add-entry</code> script. <code>webpack.parts.js</code> | Contains loaders and plugins setup. <code>webpack.commons.js</code> | Config that runs on both production and development. <code>webpack.development.js</code> | Config that runs on development. <code>webpack.production.js</code> | Config that runs on production. <code>purge-safelist.js</code> | Falcon theme comes with support for purgecss, but safelist is not included.

Working with npm/yarn

script | description ------------- | ------------- <code>build</code> | Script run production config with assets optimization and chunks names hashing, silent console output. <code>build-analyze</code> | Script run production config with assets optimization and chunks names hashing also display bundle-analyzer. <code>build-purge</code> | Script run production config with assets optimization, chunks hashing also runs <code>purgecss</code> to remove not used styles. Not recomended to use yet, create safelist before use. <code>build-ci</code> | Script used for github actions CI. <code>watch</code> | good old watch option good if you struggle to setup <code>webpack-dev-server</code> . Assets optimization not included. <code>dev</code> | Script that run <code>webpack dev server</code> 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. <code>scss-lint</code> | Script that run <code>stylelint</code>. It finds issues in code. <code>scss-lint-fix</code> | Script that run <code>stylelint</code>. It finds issues in code and fix minor issues in code. <code>js-lint</code> | Script that run <code>eslint</code>. It finds issues in code. <code>js-lint-fix</code> | Script that run <code>eslint</code>. It finds issues in code and fix minor issues in code.

Falcon CLI

Falcon CLI is simple tool to improve your development experience and speed you your work. We are lunching this tool with only two scripts.

Project init script

After installing your <code>node_modules</code> you are able to init you project without creating <code>.env</code> file by yourself. You can run script <code>project-init</code> and answer few question to create <code>.env</code> file and build assets.

for <code>npm</code> :

npm run project-init

for <code>yarn</code> :

yarn project-init

Add entry script

New script <code>add-entry</code> simplify your process of adding new entry point to webpack configuration. You can just run script and after inserting entry name, new entry point will be added to project. Just remember to register your new entry in <code>/config/assets.yml</code> file.

for <code>npm</code> :

npm run add-entry

for <code>yarn</code> :

yarn add-entry

Smarty functions

GenerateImagesSources

Function created to simplify adding images src with support for high DPI images.

parameter | required | description ------------- | ------------- | ------------- <code>image</code> | <code>true</code> | Parameter must be a product image array for example <code>$product.default_image</code>. <code>size</code> | <code>true</code> | Size of image defined in <code>theme.yml</code> file for example <code>home_default</code>. <code>lazyload</code> | <code>false</code> | Optional parameter, default value is equal <code>true</code>. If <code>lazyload</code> is set to true it replace image <code>src</code> parameter to <code>data-src</code> (or <code>srcset</code> if high DPI images are turned on). To lazyload working properly it is required to add <code>lazyload</code> class to that img.

Example of usage:

  <img

class="rounded img-fluid lazyload" {generateImagesSources image=$product.default_image size='home_default' lazyload=true} width="{$product.default_image.bySize.home_default.width}" height="{$product.default_image.bySize.home_default.height}" />

It will output:

  <img

class="img-fluid rounded lazyload" data-srcset="http://domain.com/{id}-home_default/{product_name}.jpg, http://domain.com/{id}-home_default2x/{product_name}.jpg 2x" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 1 1'%3E%3C/svg%3E" width="250" height="250" />

generateImageSvgPlaceholder

Function created to return simple svg placeholder with given sizes.

parameter | required | description ------------- | ------------- | ------------- <code>width</code> | <code>true</code> | Width of an image. <code>height</code> | <code>true</code> | Height of an image.

Example of usage:

  <img

src="{generateImageSvgPlaceholder width=100 height=150}" />

It will output:

    <img

src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='150' viewBox='0 0 1 1'%3E%3C/svg%3E" />

appendParamToUrl

Function created to append param to url.

parameter | required | description ------------- | ------------- | ------------- <code>url</code> | <code>true</code> | URL addres. <code>key</code> | <code>true</code> | Parameter variable <code>value</code> | <code>true</code> | Parameter value, can by string or array <code>replace</code> | <code>false</code> | Replace param with the same key (default false)

Example of usage 1:

  {appendParamToUrl url='https://example.com?page=1' key='variable' value='value'}

It will output:

    https://example.com?page=1&variable=value

Example of usage 2:

  {appendParamToUrl url='https://example.com?var=value1' key='var' value='value2' replace=true}

It will output:

    https://example.com?var=value2

Example of usage 3:

  {appendParamToUrl url='https://example.com?family=font1' key='family' value=['font2', 'font3']}

It will output:

    https://example.com?family=font1&family=font2&family=font3

Smarty blocks

images_block

Smarty block that modify <code><img></code> tags inside block to picture tag with <code>webp</code> <code><source></code> that if webp option is enabled inside <code>is_themecore</code> module. Module check if image extension is <code>png</code>, <code>jpeg</code>, <code>jpg</code>, <code>svg</code> or <code>gif</code> will be omitted.<br> This block don't check if image is external resource, don't use it for external resource.

Example of usage:

  {images_block webpEnabled=$webpEnabled}

<img class="rounded img-fluid" {generateImagesSources image=$product.default_image size='large_default' lazyload=false} width="{$product.default_image.bySize.large_default.width}" height="{$product.default_image.bySize.large_default.height}" {if !empty($product.default_image.legend)} alt="{$product.default_image.legend}" {else} alt="{$product.name}" {/if} > {/images_block}

It will output:

  <picture>

<source type="image/webp" srcset="http://domain.com/2-large_default/hummingbird-printed-t-shirt.webp"> <img class="rounded img-fluid" src="http://domain.com/2-large_default/hummingbird-printed-t-shirt.jpg" width="800" height="800" alt="Hummingbird printed t-shirt"> </picture>

<code>$webpEnabled</code> is global variable provided from <code>is_themecore</code> module, this parameter isn't required. Block can also contains multiple images inside and every image will be modified to <code><picture></code> tag.

cms_images_block

This smarty block is working the same like <code>images_block</code> but it will check if files are containing internal urls or cdn urls. Every external image will be omitted.

Example of usage:

  {cms_images_block webpEnabled=$webpEnabled}

<img src="http://domain.com/img/cms/image.jpg"/>

<h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor porta nulla, nec elementum orci. Ut pellentesque lacus felis, non vestibulum nunc fermentum eget. Pellentesque gravida ante sed gravida ultricies.</p>

<img src="http://externalurl.com/image.jpg"/> {/images_block}

It will output:

  <picture>

<source type="image/webp" srcset="http://domain.com/img/cms/image.webp"> <img src="http://domain.com/img/cms/image.jpg"/> </picture>

<img src="http://externalurl.com/image.jpg"/>

Use this block instead of <code>images_block</code> only if you want to processed html content that can contains external urls for example cms pages/product description. This block is a bit slower that <code>images_block</code> so make sure that you are using it properly.

display_mobile

Simple smarty block to display content only for mobile devices.

Example of usage:

  {display_mobile}

<p> It will be displayed only for mobile device (not existing in DOM for destkop devices) </p> {/display_mobile}

display_desktop

Simple smarty block to display content only for destkop devices.

Example of usage:

  {display_desktop}

<p> It will be displayed only for desktop (not existing in DOM for mobile devices) </p> {/display_desktop}

Register assets

Since version 2.1.0 new <code>assets.yml</code> file has been added to theme config directory. It is completely new way of registering assets inside theme w/o writing any of php code, fully based on <code>.yml</code> file. You can find new file inside <code>main_shop_directory/themes/theme_name/config/assets.yml</code>.

Working with <code>assets.yml</code>.

1. Css files:

css:

product: # Asset id fileName: product.css # File name inside assets/css media: all # Media attribute, allowed you can find inside StylesheetManagerCore $valid_media priority: 200 # Priority (lower > higher inside document) include: # List of page names that assets will be included, if you don't add to it will be the same as * (everywhere)


product

2. Js files:

js:

product: # Asset id fileName: product.js # File name inside assets/js priority: 200 # Priority (lower > higher inside document) include: # List of page names that assets will be included, if you don't add to it will be the same as * (everywhere)


product

3. Working with include:

You are able to use wildcard inside <code>include</code>, making it easy to register assets for multiple module pages

css:

blog: fileName: blog.css media: all priority: 200 include:


module_blog_name*

4. Remote files:

You are able to register remote files.

css:

example_remote_bootstrap: fileName: //cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css server: remote # required to set server: remote for remote file priority: 200

js: example_remote_bootstrap: fileName: //cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js server: remote # required to set server: remote for remote file priority: 200

Preloading fonts

Fonts are preloaded automaticlly via <code>webpack-font-preload-plugin</code>. To preload selected font you have to add font file name to plugin configuration. You can find function resposible for it in <code>_dev/webpack/webpack.parts.js</code>. Function is called <code>preloadFonts</code>.

exports.preloadFonts = () => ({

plugins: [ new HtmlWebpackPlugin({ filename: 'preload.html', templateContent: '{{{preloadLinks}}}', inject: false, }), new FontPreloadPlugin({ index: 'preload.html', extensions: ['woff2'], filter: /(materialicons|roboto-v20-latin-ext_latin-regular|roboto-v20-latin-ext_latin-700|roboto-v20-latin-ext_latin-500|icomoon)/i, replaceCallback: ({ indexSource, linksAsString }) => { return indexSource.replace('{{{preloadLinks}}}', linksAsString); }, }), ] })

To preload font with name for example <code>my-font-name</code>. You have to modyfiy value of <code>filter</code> field:

  filter: /(materialicons|roboto-v20-latin-ext_latin-regular|roboto-v20-latin-ext_latin-700|roboto-v20-latin-ext_latin-500|icomoon|my-font-name)/i,

You are able to create more advanced matching test with regex, thats just simple example.

Javascript Components

PageSLider

PageSlider automatically initialize sliders that are visible in viewport. PageSlider instance is exposed with <code>prestashop</code> global object, you can access it with <code>prestashop.pageSlider</code>.

##### Excluding from automatic initialization To exclude slider from automatic initialization, your slider <code>.swiper</code> element have to contain <code>swiper-custom</code> class.

##### Dynamic added sliders If you add new sliders element for example via ajax, you can refresh <code>pageSlider</code> observer to include newly included sliders with calling <code>prestashop.pageSlider.refresh()</code>.

##### Example of template

PageSlider will automatically initialize that slider with config passed to <code>data-swiper</code> attribute.

  {$sliderConfig = [

'speed' => 500, 'slidesPerView' => 2 ]}

<div class="swiper" data-swiper="{$sliderConfig|json_encode}"> <div class="swiper-wrapper"> <div class="swiper-slide"> SLIDE 1 </div> <div class="swiper-slide"> SLIDE 2 </div> <div class="swiper-slide"> SLIDE 3 </div> </div> </div>

##### Automatic handling navigation, pagination

PageSlider automatic handles navigation and pagination if they are available. PageSlider is searching one node element above <code>.swiper</code> that why it is important to adds wrapper to swiper to prevent bugs.

  {$sliderConfig = [

'speed' => 500, 'slidesPerView' => 2 ]}

<div class="example-wrapper">

<div class="swiper-button-prev"> PREV </div> <div class="swiper-button-next"> NEXT </div>

<div class="swiper-pagination"> </div>

</div>

##### Custom navigation, pagination

If pagination or navigation config exists inside swiper config automatic handling isn't executed. Classed for navigation and slider are just examples it is important that this selectors are unique. You can also make use of <code>id</code> or just any valid querySelector.

  {$sliderConfig = [

'speed' => 500, 'slidesPerView' => 2, 'navigation' => [ 'nextEl' => '.js-unique-button-next', 'prevEl' => '.js-unique-button-prev', ], 'pagination' => [ 'el' => '.js-unique-swiper-pagination', 'type' => 'bullets', ] ]}

<div class="example-wrapper">

<div class="js-unique-button-prev swiper-button-prev"> PREV </div> <div class="js-unique-button-next swiper-button-next"> NEXT </div>

<div class="js-unique-swiper-pagination swiper-pagination"> </div>

</div>

SwiperSlider

Swiper is splitted to multiple modules that are not included in initial javascript/css files. We don't have to include every module to make sure that needed module just for one slider will be available for us. <code>SwiperSlider</code> is wrapper to <code>Swiper</code> that handles dynamic imports for modules. It reads passed config and looking for modules that have to be fetched.

Default modules

We have some modules that are commonly used and we are not fetching them dynamically <code>Navigation, Pagination, Lazy, Autoplay</code>.

How it is working

Example, passed config:

slidesPerView: 1, spaceBetween: 10, freeMode: { enabled: true, sticky: true, }, }

When we initialize this slider with <code>SwiperSlider</code> class it will search for needed module to fetch. It finds <code>freeMode</code> in config and fetch <code>freeMode</code> module and include this module it to parameters.

Working with SwiperSlider

<code>SwiperSlider</code> constructor accepts two parameters just like <code>Swiper</code>. First argument is selector or node element that contains <code>swiper</code> class. Second argument is swiper config, you can read more about it in swiper API documentation

  const exampleSlider = new prestashop.SwiperSlider('.js-slider', {

slidesPerView: 1, spaceBetween: 10, });

const exampleSliderSwiperInstance = exampleSlider.initSwiper();

<code>SwiperSlider</code> constructor returns <code>SwiperSlider</code> object. If you want to access swiper instance it will be available for (example above) via <code>exampleSlider.swiperInstance</code> or <code>exampleSliderSwiperInstance</code>.

Asynchronous nature of SwiperSlider

We know that <code>SwiperSlider</code> isn't initialize <code>Swiper</code> immediately since it is fetching needed modules asynchronous. <code>exampleSlider.swiperInstance</code> might not be available right after we create new <code>SwiperSlider</code> instance. To solve this problem <code>initSwiper</code> is returning promise that resolved is returning us SwiperSlider instance.

Example with usage of <code>async/await</code> (recommended way, cleaner):

  const exampleSlider = new prestashop.SwiperSlider('.js-slider', {

slidesPerView: 1, spaceBetween: 10, });

const exampleSliderSwiperInstance = await exampleSlider.initSwiper();

// exampleSliderSwiperInstance is Swiper instance created with SwiperSlider class exampleSliderSwiperInstance

Example with usage of <code>then</code>:

    const exampleSlider = new prestashop.SwiperSlider('.js-slider', {

slidesPerView: 1, spaceBetween: 10, });

exampleSlider.initSwiper().then(swiperInstance => { // swiperInstance is Swiper instance created with SwiperSlider class swiperInstance });

Features

Preloads/early hints

Preload css

Preload css option inside <code>is_themecore</code> is only working when <code>CCC option for css</code> is enabled. Switching this option on will automatically add <code>preload</code> <code><link></code> to head with css file.

Early hints

Enabled early hints option inside <code>is_themecore</code> module will append every image/style preload link to response head as <code>Link</code> header. This option is requiring cloudflare and Early hints option enabled in your cloudflare dashboard. <br> This option is still in beta stage, to read more about it click here

Webp

In version <code>2.3.0</code> of <code>is_themecore</code> webp image format has been added.<br> You are able to simply add webp image format by changing image extenstion to <code>.webp</code> from for example <code>.jpg</code> or <code>.png</code>. Module will automaticly find source file and convert it to <code>webp</code>.<br> You don't have to create <code><picture></code> tag and change image src extenstion to <code>webp</code>. Two new smarty blocks has been added to handle needed template modyfication <code>images_block</code> and <code>cms_images_block</code>, you can read more about it in smarty blocks section. <br> Module is adding specific rules to <code>.htaccess</code> file to handle <code>webp</code> files. To enable <code>webp</code> image format you have to enable it in <code>is_themecore</code> module configuration. You are also able to set <code>quality</code> and <code>converter</code> that will be used to convert files to <code>webp</code> format. <br>

Webp nginx

If you are using <code>nginx</code> you have to add manually some rules to your nginx configuration file.<br> Configuration that is being used for <code>falcon-theme.dev</code>:

location ~ ^/(\d)(-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ {

try_files /img/p/$1/$1$2$3.webp /img/p/$1/$1$2$3.webp /modules/is_themecore/webp.php?source=$document_root/img/p/$1/$1$2$3.webp; }

location ~ ^/(\d)(\d)(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ { try_files /img/p/$1/$2/$1$2$3$4.webp /img/p/$1/$2/$1$2$3$4.webp /modules/is_themecore/webp.php?source=$document_root/img/p/$1/$2/$1$2$3$4.webp; }

location ~ ^/(\d)(\d)(\d)(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ { try_files /img/p/$1/$2/$3/$1$2$3$4$5.webp /img/p/$1/$2/$3/$1$2$3$4$5.webp /modules/is_themecore/webp.php?source=$document_root/img/p/$1/$2/$3/$1$2$3$4$5.webp; }

location ~ ^/(\d)(\d)(\d)(\d)(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ { try_files /img/p/$1/$2/$3/$4/$1$2$3$4$5$6.webp /img/p/$1/$2/$3/$4/$1$2$3$4$5$6.webp /modules/is_themecore/webp.php?source=$document_root/img/p/$1/$2/$3/$4/$1$2$3$4$5$6.webp; }

location ~ ^/(\d)(\d)(\d)(\d)(\d)(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ { try_files /img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.webp /img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.webp /modules/is_themecore/webp.php?source=$document_root/img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.webp; }

location ~ ^/(\d)(\d)(\d)(\d)(\d)(\d)(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ { try_files /img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.webp /img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.webp /modules/is_themecore/webp.php?source=$document_root/img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.webp; }

location ~ ^/(\d)(\d)(\d)(\d)(\d)(\d)(\d)(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ { try_files /img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.webp /img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.webp /modules/is_themecore/webp.php?source=$document_root/img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.webp; }

location ~ ^/c/([0-9]+)(\-[\._a-zA-Z0-9-])(-[0-9]+)?/.+\.webp$ { try_files /img/c/$1$2$3.webp /img/c/$1$2$3.webp /modules/is_themecore/webp.php?source=$document_root/img/c/$1$2$3.webp; }

location ~ ^/c/([0-9]+)(\-[\._a-zA-Z0-9-])(-[0-9]+)?/.+\.webp$ { try_files /img/c/$1$2.webp /img/c/$1$2.webp /modules/is_themecore/webp.php?source=$document_root/img/c/$1$2.webp; }

location ~ ^/(.*)\.webp$ { try_files /$1.webp /$1.webp /modules/is_themecore/webp.php?source=$document_root/$1.webp; }

Workspace Aware Webpack

In version <code>3.1.0</code> we introduced Workspace Aware Webpack. It means that you can compile for example your module files using only workspace and specific files structure. Theme <code>package.json</code> file right now is using workspaces. You can find more information about workspaces here: https://classic.yarnpkg.com/en/docs/workspaces/ or here: https://docs.npmjs.com/cli/v7/using-npm/workspaces. Our basic workspace:

  "workspaces": [

"../../../modules/*/_theme_dev/" ]

You can add more workspaces to your <code>package.json</code> file. For example if you want to compile your other module files you can add:

  "workspaces": [

"../../../modules/*/_theme_dev/", "../../../modules/*/_dev/" ]

It will install your module dependencies for workspace to your <code>node_modules</code> folder in you theme root directory. At the same time it will compile your js/scss files from module <code>_theme_dev</code> directory based on specific files structure.

Webpack is looking for files in your workspace directory for module. For example <code>is_shoppingcart</code>:

  is_shoppingcart

└── _theme_dev └── src ├── js │ └── theme │ └── index.js └── css └── theme └── index.scss

Webpack is looking for <code>/js/{entry_name}/index.js</code> and <code>/css/{entry_name}/index.scss</code> files in your module <code>_theme_dev</code> directory. If you want to compile your module files and append it automatically to your theme entrypoint. If you want for example add an extra js or scss from <code>is_shoppingcart</code> module to <code>listing</code> entry, all you have to do is to create another <code>index.js/index.scss</code> file in your module <code>/src/js|css/listing</code> directory.

  is_shoppingcart

└── _theme_dev └── src ├── js │ ├── theme │ │ └── index.js │ └── listing │ └── index.js └── css ├── theme │ └── index.scss └── listing └── index.scss

This approach have one big downside - you have to take core of not used modules in your theme. If your module is not being used but exists in modules directory with this specific structure it will be automatically compiled and appended to specific entry point. Webpack isn't aware what kind of module is being used by your store. It will be your responsibility to take care of it.

Troubleshooting

Sass performance issue

In version <code>2.4.0</code> <code>node-sass</code> has been replaced with dart implementation of <code>sass</code>. Your build times will surely increased since <code>sass</code> is slower that <code>node-sass</code> used in older version of theme. There is alterative package https://github.com/sass/embedded-host-node that will solve your performance issue. <br> You are asking yourself. Why we are still using <code>sass</code> packages instead of <code>sass-embedded</code>? Well, not every linux distro is supporting <code>dart-lang</code> at this moment that's you have to implement it on your own. Falcon theme have to be versatile and we should support as much OS versions as possible.<br>

1. First run:

  npm i sass-embedded --save

  yarn add sass-embedded

2. Go to <code>themes/theme_name/_dev/webpack/webpack.parts.js</code> and find <code>sass-loader</code> and replace:

loader: 'sass-loader', options: { implementation: require('sass'), }, },

with:

loader: 'sass-loader', options: { implementation: require('sass-embedded'), }, },

3. Run your <code>dev</code> script and you should right now feel like your theme is building much faster.

Support project

If you like this project, buy me a cup of coffee. Become a sponsor

Contribution

Any kind of contribution is welcome. Make pull request on develop branch but make sure to create an issue before submitting.

Riferimento

falcon

License

GPL-3.0
PS Compatibility

8.x
9.x
Status

Active

Commenti (0)

Ancora nessuna recensione da parte degli utenti.

Falcon theme

Sources

Descrizione

Sponsors

Table of Contents

About The Theme

List of changes compared to classic theme:

Main features:

Online demo

Performance

Desktop

Mobile

Getting started

Prerequisites

Modules required

Optional modules

System requirements:

Support table

Module requirements

Installation

Usage

Working with webpack

Working with npm/yarn

Falcon CLI

Project init script

Add entry script

Smarty functions

GenerateImagesSources

generateImageSvgPlaceholder

appendParamToUrl

Example of usage 1:

Example of usage 2:

Example of usage 3:

Smarty blocks

images_block

cms_images_block

display_mobile

display_desktop

Register assets

1. Css files:

2. Js files:

3. Working with include:

4. Remote files:

Preloading fonts

Javascript Components

PageSLider

SwiperSlider

Default modules

How it is working

Working with SwiperSlider

Asynchronous nature of SwiperSlider

Features

Preloads/early hints

Preload css

Early hints

Webp

Webp nginx

Workspace Aware Webpack

Troubleshooting

Sass performance issue

Support project

Contribution

Dettagli del prodotto

Scheda tecnica

Commenti (0)