Image slider (ps_imageslider)
Description
This module enables an image slider at the front-office of the shop, in the back-office it's possible to configure the slider.
QA
Common components
Bell icon (todo link).
Text Editing Tools list (todo link) - Buttons Toolbar UI Kit.
Settings
The table starts with the title Settings and a gear-type icon nearby. Below there are 3 components in this settings box.
Speed
| Description | Value | Error message |
|---|---|---|
Mandatory | NO | Invalid values |
Allowed/Forbidden values | - | Invalid values |
Default value | 5000 | Invalid values |
Help text | The duration of the transition between two slides. | - |
Tool tips | - | - |
Lower limit | - | Invalid values |
Upper limit | - | Invalid values |
Behavior | - |
Pause On hover
| Description | Value | Error message |
|---|---|---|
Mandatory | NO | - |
Allowed/Forbidden values | - | - |
Default value | Enabled | - |
Help text | Stop sliding when the mouse cursor is over the slideshow. | - |
Tool tips | - | - |
Lower limit | - | - |
Upper limit | - | - |
Behavior | - |
Loop forever
| Description | Value | Error message |
|---|---|---|
Mandatory | NO | - |
Allowed/Forbidden values | - | - |
Default value | Enabled | - |
Help text | Loop or stop after the last slide. | - |
Tool tips | - | - |
Lower limit | - | - |
Upper limit | - | - |
Behavior | - |
Slide list block
This block starts with a title Slides list and a list-type icon nearby. Also, there is a Buttons Toolbar UI Kit plus element, which initiates a new slide adding.
This section has the slides list in it, by default the 3 of them are located there. All of them have their own settings.
Call-to-action button - add new is located at the top of this section, when pressed, redirects to the Slide Information tab.
There are the drag and drop indicator arrows, so slides can be dragged up or down, by the desired arrangement.
Every slide has 3 buttons:
Enabled/Disabled - can be clicked, when the slide is Enabled, it will turn the CTA to red, the slide will be Disabled, the Alerts Basics UI Kit message Configuration updated will notice about that. And that's vice versa.
Edit - redirects to the Slide Information page.
Delete - when clicked, deletes the slide, shows an Alerts Basics UI Kit message Successful deletion.
Slide information
This section can only be accessed when editing a slide or when you click on Add a new slide plus icon.
The section starts with a title Slide information and a gear-type icon nearby.
The following components are listed:
Image
| Description | Value | Error message |
|---|---|---|
Mandatory | YES | The image is not set. |
Allowed/Forbidden values | - | - |
Default value | Empty or thumbnail of the Image already uploaded | - |
Help text | Maximum image size: 20M. | - |
Tool tips | - | - |
Lower limit | - | - |
Upper limit | - | - |
Behavior | - |
Title
| Description | Value | Error message |
|---|---|---|
Mandatory | NO | - |
Allowed/Forbidden values | Text, numeric values allowed | - |
Default value | Empty of already filled value | - |
Help text | - | - |
Tool tips | - | - |
Lower limit | - | - |
Upper limit | - | The title is too long. |
Behavior | - |
Target URL
| Description | Value | Error message |
|---|---|---|
Mandatory | YES | The URL is not set. |
Allowed/Forbidden values | Letters and numbers allowed | The URL format is not correct. |
Default value | Empty of filled value | - |
Help text | - | - |
Tool tips | - | - |
Lower limit | - | - |
Upper limit | - | The URL is too long. |
Behavior | - |
Caption
| Description | Value | Error message |
|---|---|---|
Mandatory | NO | - |
Allowed/Forbidden values | All the numeric and letter values allowed | - |
Default value | Empty or filled value | - |
Help text | - | - |
Tool tips | - | - |
Lower limit | - | - |
Upper limit | - | The caption is too long. |
Behavior | - |
Description
| Description | Value | Error message |
|---|---|---|
Mandatory | NO | - |
Allowed/Forbidden values | All numeric and letter values allowed | - |
Default value | Empty or filled values | - |
Help text | Help text | - |
Tool tips | Tool tips text | - |
Lower limit | 0 | - |
Upper limit | 3993 characters | The description is too long. |
Behavior | - |
Enabled
| Description | Value | Error message |
|---|---|---|
Mandatory | NO | - |
Allowed/Forbidden values | - | - |
Default value | Enabled | - |
Help text | - | - |
Tool tips | - | - |
Lower limit | - | - |
Upper limit | - | - |
Behavior | - |
Behaviors descriptions
Speed behavior
A Forms Input Group UI Kit component. Specifies the duration time of the transition between the slides.
Pause On hover behavior
A Forms Switch UI Kit component. Enables or disables the pause action when mouse cursor hovers the slide in Front-Office.
Loop forever behavior
A Forms Switch UI Kit component. Enables or disables the looping forever, or stopping the transition after the last slide.
Image behavior
This section displays the current image, a new one can be uploaded with a call to action button (Forms Files UI Kit) - Choose a file, when pressed it opens a new tab to select an image to upload. The component is multi language, and can be translated to other existing languages in the back-office.
Title behavior
A Form Normal UI Kit component. Has the title input of the slide, the field is multi language, can be translated to any other language that is installed on the shop.
Target URL behavior
A Form Normal UI Kit component. There can be a particular URL link that can be defined for the certain image. The visitors can click on the link.
Caption behavior
A Form Normal UI Kit component. A small description of the image. The caption of the slide, the field is multi language, can be translated to any other language that is installed on the shop.
Description behavior
A Form Normal UI Kit component. The text area starts with Text Editing Tools list (todo link) common component.
Enabled behavior
A Forms Switch UI Kit component. A toggle switch, by default, is set at "Yes" or "No" depending on if the slide is activated. Enables or Disables the Slide visibility in Front-Office UI.
Multistores functionality
Multistores independent page. After the changes take effect on separate Multistore, the UI will return a notification from Alerts Basics UI Kit - The modifications will be applied to shop: {shop name}.
Last updated
