<p align="center"> <img width="300" alt="logo" src="https://user-images.githubusercontent.com/25306716/203443689-3a466ddb-c78c-4a13-9525-bd7265a08c74.png"> </p> <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:

Bootstrap updated to 4.6 from 4.0.0-alpha.5 - backwards compatibility included.
Updated Webpack to 5 from 2.2.1 with a whole new Webpack config.
Removed tether - not used anymore with Bootstrap 4.6 - popper.js added instead.
Removed velocity-animate, jquery.scrollbox.js and jquery-touchswipe - replaced with Swiper.
Removed bootstrap-filestyle.js - replaced with Bootstrap custom file input
Removed jquery.ui from ps_searchbar, a new module is_searchbar included.
Removed jquery.ui from ps_facetedsearch - replaced with nouislider. (ps_facetedsearch assets are unregistered inside is_themecore module that is required for the theme to work properly).

Main features:

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

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

is_themecore 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

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

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

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

is_favoriteproducts version | Theme version ------------- | ------------- 1.X.X | >= 3.1.X

Installation

Go to releases and download latest version falcon.zip file not source code.
Download required modules via github releases and place them into {shop_dir}/modules/ 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 composer install in root dir of downloaded module.
Unzip theme file and place it inside {shop_dir}/themes/.
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:

name: falcon
display_name: Falcon theme

to:

name: your-theme-name
display_name: my theme display name

Name in theme.yml must be equal folder name.

Open in terminal directory your-theme-name/_dev and run:

for npm :

npm install

for yarn :

yarn install

Creating your .env file. You can setup you project by running project-init script.

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

for npm :

npm run build

for yarn :

yarn build

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

for npm :

np

Falcon

Install / Use

README

Sponsors

Table of Contents