Content Slider

Time to read: 3 minutes


Introduction

Simply present products, linked images (e.g. actions) or HTML code directly in a modern slider.

With this external PepperShop module, you can place different content prominently on the front page with a dynamic slider. All contents to be displayed are scrolled through automatically.

Module installation

After copying the files you can go to the shop administration and switch to the menu ‘Modules’. On the left side, at the not yet installed modules, you can see the Content-Slider module listed.

Now select the Content-Slider module and click on the ‘Install’ button. If the installation routine runs without problems, this will be communicated on the following page. The module is now installed. We now click on the button ‘Back to module administration’. We now see the button for managing the content slider module.

Figure 1: The content slider module is listed (displayed modules may vary)

The installation of the content slider module is now complete. In order for the module to be used, it must now be adapted to the specific configuration of the shop operator, see the next chapter ‘Module configuration’ below.

Figure 2: Installed modules

Module configuration

First go to the Content-Slider module administration: Main menu of the shop administration ‘Module’ > ‘Content-Slider’.

Figure 3: Content-Slider Module Configuration Dialog
In the Content-Slider Module Administration there are the following setting options:

  • Activation: Should the module be active?

Content slider positions

Here you define the individual positions (images, articles or HTML code).

  • Position: Where should the position appear? (Number e.g.: 1)
  • Type: What type is the position? When you change the content and link columns, they are adjusted accordingly.

Content:

  • The type ‘Image’ displays an uploader for the image file. (Image width: 945px)
  • The type ‘HTML’ has a large field for the HTML code.
  • With the type ‘product’ one can search in the field the product name, or product number for a product. The product ID is displayed in the field after the selection.
  • Link: This field is only visible for images. The link will be opened when you click on the image.
  • Language: In which language should the position be visible?
  • Active from: When should the position be visible?
  • Active until: When should the position no longer be visible?

Advanced configuration in CSS and Javascript (e.g. speed):

See file: {shop_directory}/shop/language/html_templates/content_slider.tpl.html

If you have javascript skills, you can use the options pause (in ms) and speed (in ms) to set the speed of the slider.

Customer side presentation in the web shop

The content slider is displayed on the start page below the header when the module is activated. The images should be uploaded in the correct format.

Figure 4: Example based on a newly installed standard shop (design may vary).

As an example you see here the article “Pepper” defined as content of the content slider.

Installation

System requirements

To use the Content-Slider module, at least PepperShop v.3.0 Professional or Enterprise is required.

Copy and upload files

The Content-Slider module consists of several files and two directories, which you have to copy into your installed PepperShop. First unpack the supplied ZIP or TAR.GZ archive. The following files are included, here with their target directories:

{shopdir}/shop/Admin/module/content_slider
{shopdir}/shop/module/content_slider/
{shopdir}/shop/resources/content_slider
{shopdir}/shop/language/html_templates/content_slider.tpl.html

The files can easily be uploaded to the web server via FTP1 or SCP. The placeholder {shopdir} stands for the shop directory on the web server, where you can find the file index.php together with README.txt.

Customize file permissions

The following section is very important. The module will not work as intended if this step is required but not (correctly) performed due to the server configuration.

When using PHP on UNIX/Linux as server module, the file content_slider.tpl.html must still be assigned the file access right 666 so that the web server has write access to it. The resources/content_slider folder should exist and have 777 permissions, if not, please adjust it.

Appendix: Examples



  1. E.g. with the free program FileZilla Client: http://filezilla-project.org/
🌶️
🔥
🌶️