How To Create Featured Products Slider in Prestashop 1.7

After the article Slider for home featured products in Prestashop 1.6 was released, people usually ask how to create a slider for featured products in Prestashop 1.7. This article will describe all the steps of creating a slider and will help you perform it easily.

First, let’s decide which slider plugin we will use to implement into featured product list. There are many slider plugins and you are able to implement any in Prestashop 1.7. I like Swiper and I’ll show how to implement it into the product list. Let’s start.

First, we need to include Swiper files into our theme. There are several ways to do that. General information about how to include Swiper files listed here. The ways to include Swiper into Prestashop 1.7 theme are following.

1. Using NPM:

1

npminstallswiper

In the downloaded package, we need files from the dist/ folder. Style files should be included into theme.scss file:

@import “~swiper/dist/swiper.min.css”;

Java Script files should be included into theme.js file:

import ‘swiper/dist/swiper.jquery.min’;

2. Include files into _dev theme folder. Download actual Swiper files. Place style files into _dev/css/components folder and call them into theme.scss file:

@import “components/swiper.min”;

Place Java Script files into _dev/js/lib folder and call them into theme.js file:

import ‘./lib/swiper.jquery.min’;

These two ways described above are expected that you are using theme compilation with Webpack. Those our blog reader who found it’s hard to compile theme, may use custom.css (classic/assets/css/custom.css) and custom.js(classic/assets/css/custom.js) files in order to include Swiper files.

Next step we’ll create a HTML markup. Open ps_featuredproducts.tpl file. Here is a full path to this file:themes/classic/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl. When we open file we see the following code:

Let’s modify this code in order to implement slider. Wrap product.tpl inclusion into “swiper-slide” container. Then wrap “swiper-slide” into “swiper-wrapper” container and add class “swiper-container” to “products” container. This is a base markup of Swiper Slider. This markup listed at Swiper API. Also let’s add “swiper-pagination” and “swiper-button” containers that are being slider controls. Below is a final markup:

Lena is our ingenious front-end developer and designer. Lena graduated from the Academy of Art and her fine art school very much peeps out in her design works. She has drawn designs for more than 50 sites and web interfaces. Lena is moving forward to make her own modern art exposition.

You ever wondered why the estimates that the developers give you rarely match the real timeframe 100%?

Sometimes the answer might be simple “greed” or incompetence. But let’s assume for a second that you work with a competent and straightforward developer. Does it mean he’ll always commit to his deadline? Maybe. But the reality tells us that no, even the most honest and competent developer can fail the deadline. (more…)

Hi Prasanna!
Unfortunately, it’s not possible to provide you with individual consultance services via the blog. But you are kindly welcome to request the help from our certified developers: https://belvg.com/contact

Hello, JDW!
There are plenty of possible causes :) Unfortunately, it’s hard to say why it goes this way without any investigation.
To order code-review, please, contact our support department: store@belvg.com.