Lightedix

Custom modules and extensions

Attention Some modules may not be included into your template package. This section describes configuration of all modules that are used in our templates. Each template pack is provided with a set of modules which is included into the design of this specific template.

JX Category Products 2.0.0

This module displays category products in displayHome and displayHomeTabContent hooks. The module allows displaying single products, products from a category or all products. Moreover, the module comes with a carousel that works, when the module occupies the displayHome position.

JX Category Products Main Panel

The main panel. Here you can set up the module.

Adding a block

This block allows selecting products in displayHome position.

Access the module main panel and press the 'plus' (1) button in the blocks list.
In the appeared form, you'll find the following options:
- Status - this option allows enabling/disabling the block.
- Select category - the category, products of which will be displayed.
- Use name in font - this option allows changing the displayed category name. If enabled, displays the following form:
  - Name - the custom tab name, displayed on the website.
- Select products to display - if disabled, displays the 'Number of products to display' field, which sets the number of products to display. If disabled, displays the 'Add products' button that allows selecting products to display in the tab.
- Use carousel - this option allows enabling/disabling the carousel for block products. After enabling the option, you'll see the following settings:
  - Visible items - the number of visible items.
  - Items scroll - the number of items changed with one carousel scroll.
  - Slide Width - the carousel list item width.
  - Slide Margin - the carousel list item margin.
  - Auto scroll - auto scroll of carousel items.
  - Carousel speed - speed of changing items.
  - Pause - pause between scrolls (if "Auto scroll" is enabled).
  - Random - the carousel starts with a random item.
  - Carousel loop - the loop: when all the carousel items have been displayed, carousel starts from the beginning.
  - Hide control on end - hide control buttons (Next/Prev).
  - Pager - display pagination.
  - Control - display controls (Next/Prev).
  - Auto control - display controls (Play/Pause).
  - Auto hover - carousel pauses, if the user hovers a list item.
After configuring all the needed options, press the 'Save' (2) button.

Blocks Sorting

You can sort the blocks of the module with the help of drag'n'drop. This allows to change blocks positions quickly.

Selecting Products

If you create an item and enable 'Select products to display' option, you can choose the products that you want to display. To do this:

Press the 'Add products' (1) button:
In the appeared pop-up, select the needed products (2) and press the 'Add' (3) button:
Now, you can place the added products wherever you want with the help of drag'n'drop (4):
When all the needed products are added and arranged in the desired order, press the 'Save' button.

Deleting Blocks

To delete items, press the drop-down menu next to the needed block (1) and press delete (2). The item will be deleted.

JX Header Account 2.0.0

This module displays login and registration forms on the website. It can take the following positions: website header, left and right column. The module allows to log in and register using such social networks as Facebook, Google+ and VK, which is convenient for website users. Registration or logging in proceeds without reloading the page.

JX Header Account Main Panel

The main panel. Here you can set up the module.

Settings

There are the following settings in the module:

Display type - this setting allows to select the way to display the registration form. It can take the following values:
- Drop down - the form will display as a drop-down below the button opening it.
- Popup - the form will appear in a pop-up.
- Left side - the form will appear from the left as a sidebar.
- Right side - the form will appear from the right as a sidebar.
Display style after login - this setting allows to change the form view after login/registration. You can use the following values:
- Two columns - the list is divided into two columns.
- One Column - the list of links is displayed as one column.
Default avatar - this field appears only if the 'Display avatar' option is enabled. Here you can select the default user avatar.
Display avatar - this setting allows enabling or disable user avatar. If the user logs in to the account on the website with the help of one of the social networks, the avatar will be taken from the account in this social network, otherwise, the avatar, loaded by the website admin, will be displayed.
Use redirect - if this setting is enabled, user registration and password recovery will take place on the default PrestaShop registration/password recovery page.
Use Facebook Login - this setting allows enabling user registration and login with the help of the Facebook social network. When you enable this option, you will see the following settings:
- App ID - your account App ID from the Facebook developer account.
- App Secret - your app secret from the Facebook developer account.
Use Google Login - this setting allows enabling user login and registration with the help of the Google+ social network. If you enable this option, you will see the following settings:
- App ID - your App id from the Google developer account.
- App Secret - your App secret from the Google developer account.
- Redirect URLs - your online-store url + index.php?fc=module&module=jxheaderaccount&controller=googlelogin
Use VK Login - this setting allows enabling user registration and login with the help of VK social network. If you enable this option, you will see the following settings:
- App ID - your App id from your VK developer account.
- App Secret - App secret from your VK developer account.
- Redirect URLs - your online-store url + index.php?fc=module&module=jxheaderaccount&controller=vk

Registering apps in social networks:

Facebook - to get App ID and App Secret, register your app at https://developers.facebook.com/apps.
You may check the following tutorial in order to learn how to create Facebook developer account and get App ID and App Secret values.
Google+ - to get App ID and App Secret, register your app at https://developers.google.com/accounts/docs/OAuth2/.
VK - to get App ID and App Secret register your app at https://vk.com/dev.

JX Homepage Category Gallery

The module displays a category gallery on your store Homepage.

It should look something like this:

Here are the main parts of the Category Gallery item, which are marked on the screenshot:

1 - HTML content
2 - category name
3 - category description
4 - button

Customization details you can find below in 'Module configuration' section.

Module Installation

The module can be installed and deleted like any other PrestaShop module.

Module configuration

After you have installed JX Homepage Category Gallery module, you can configure it clicking the corresponding button (1).
On the Configuration page you'll see the list of items in this module. You can edit the existing ones (1) or add new item (2).

Adding/Editing item options

Please note: category name, description and image are loaded from the category properties and there's no need to add them manually. To edit these options, go to Admin panel -> Catalog -> Categories -> choose category -> Edit.

When you add a new item to the module (or edit the one from the list of items), you have some options to choose from. The detailed description of options you can see below the screenshot. After all options are set, click the 'Save' button (1).

Select category - here you choose from the drop-down list the category which should be displayed on your page.
Specific class - the specific class can be added to the module item.
Display name - option to show or hide the category name.
Category name length - maximum number of symbols to be displayed in the category name. If the name is longer - the '..' symbol will be added after the number of symbols that has been set.
Display description - option to show or hide the category description.
Description length - maximum number of symbols to be displayed in the description. If the description is longer - the '..' symbol will be added after the number of symbols that has been set.
Sort order - the order of item in the category gallery.
Display button - the option to show or hide the button 'Shop now' (button text can be different depending on the template).
Status - the option to show or hide the category
HTML content - the field where some HTML content can be added.

JX HTML Content

This module allows displaying any content (image, HTML, links, etc.) in the following positions: displayNav, home, top, topColumn, left and right (displayLeftColumn/displayRightColumn), footer. It is used to expand design opportunities and add advertisement/information blocks to your store. It is a multilanguage module and can also work on the multi-store website.

Installation and Deleting

The module can be installed and deleted like any other PrestaShop module.

Module configuration

After the module has been successfully installed, open the configuration page.

To add the content, you should follow the steps below:

Click 'Add new' button.
The list of available languages. You can view the available elements for all languages by switching the language tabs.
The list of elements added for specific position and language.

Adding the element. Click Add item button and fill in the required settings (none of the fields are mandatory).

All elements of one language added to the same position will be displayed as a list at the backend and frontend.

Language

select the required language from the drop-down list.
Title

title of the element.
Use title in front

display the title of the element at the frontend (the title will show up in front of the element).
Hook

position where the element is added.
Specific class

custom class defines item styling (CSS class).
Image

upload the image from your computer.
Image width

image width shown at the frontend.
Image height

image height shown at the frontend.
URL

add the link (the whole block will be wrapped in the link).
Target blank

open link in new tab.
HTML

HTML code (except the link if you have added it in the URL field) or text.
Save

click to save the element.

Editing and removing the element

When you add the element, it shows up in the corresponding list.

The language where the elements were added.
Position where the elements were added.
Edit button with the drop-down list.
Delete button.

Editing

Click Edit button to modify the element.

In the appeared screen change all the required fields.

Enable

display the element at the frontend.
Image title

title of the element.
Use title in front

show up title at the frontend.
Hook to which the image should be attached

position of the element.
Specific class

custom CSS class.
Load your image

image of the element.
Image width

image width at the frontend.
Image height

image height at the frontend.
Target link

assign link to the element.
Open link in a new tab/page

Open link in new tab.
Optional HTML code

edit HTML code.
Save

save changes.

Changing order of elements in the list

To change the order of elements, you should just drag the element to the position you need.

JX Media Parallax 2.0.0

This module is designed to let you add a parallax effect to the DOM items of the page. It allows you to create multi-layered parallax. It also provides a possibility to add a custom background video (you can upload it from your computer to server) or add a YouTube video.

JX Media Parallax Main Panel

Main module panel that allows you to add, edit or remove parallax items.

Creating a new parallax item

In order to create a new parallax item, press 'plus' (1) icon, in the top right corner of the main panel.

Then you will see the following form.

Form options for adding parallax items

Selector - CSS selector of the item with parallax effect applied. For example, '#header .nav'
Item status - item status (parallax will not be displayed if it's disabled)
Speed - digit value from 0 to 2, which defines main parallax block speed
Offset - main layer indent on the Y axis
Inverse - parallax direction
Fade - this option allows to configure main block fade-out on page scroll
Forced full width - forced full width of the parallax block

Press 'Save' after filling in all the required fields.

Parallax layers list

In order to see the list of parallax layers, you should press 'View' (1) near the main parallax item.

Then you'll see a table, in which the layers are displayed after they are added.

Adding new layer

In order to create a new parallax layer, press 'plus' (1) icon in the top right corner of the layers panel.

Then you will see the following form.

Press 'Save' after filling in all the required fields.

Parallax layers types and their fields

Image-background - image used as a parallax background
- Item status - item status (parallax will not be displayed if it's disabled)
- Layout speed - digit value from 0 to 2, which defines main parallax block speed
- Offset - main layer indent on the Y axis
- Inverse - parallax direction
- Fade - this option allows configuring main block fade-out on page scroll
- Image - link to an image, to which parallax effect will be applied
- Sort order - layout position, relative to the rest of items
Video-background - video used as a parallax background
- Item status - item status (parallax will not be displayed if it's disabled)
- Layout speed - digit value from 0 to 2, which defines main parallax block speed
- Offset - main layer indent on the Y axis
- Inverse - parallax direction
- Fade - this option allows configuring main block fade-out on page scroll
- Image - link to an additional image
- Video parallax mp4 - video in mp4 format
- Video parallax webm - video in webm format
- Sort order - layout position, relative to the rest of items
Text - text layer which position can be defined with CSS
- Item status - item status (parallax will not be displayed if it's disabled)
- Layout speed - digit value from 0 to 2, which defines main parallax block speed
- Offset - main layer indent on the Y axis
- Inverse - parallax direction
- Fade - this option allows configuring main block fade-out on page scroll
- Content - layer content
- Specific class - custom CSS class for this layer
- Sort order - layout position, relative to the rest of items
Youtube-background - YouTube video used as a parallax background
- Item status - item status (parallax will not be displayed if it's disabled)
- Layout speed - digit value from 0 to 2, which defines main parallax block speed
- Offset - main layer indent on the Y axis
- Inverse - parallax direction
- Fade - this option allows configuring main block fade-out on page scroll
- Video id - YouTube video ID
- Sort order - layout position, relative to the rest of items
Image - image layer which position can be defined with CSS
- Item status - item status (parallax will not be displayed if it's disabled)
- Layout speed - digit value from 0 to 2, which defines main parallax block speed
- Offset - main layer indent on the Y axis
- Inverse - parallax direction
- Fade - this option allows configuring main block fade-out on page scroll
- Image - link to an image, to which parallax effect will be applied
- Specific class - custom CSS class for this layer
- Sort order - layout position, relative to the rest of items

Uploading video and images to server

In order to upload video or an image to server via File Manager, first you need to press 'file' (1) icon next to the needed field.

In the following window, in the 'actions' line, choose 'upload' (2).

Then you'll see one more pop-up window, to upload image or video file here.

Warnings and recommendations

Mobile devices (smartphones, tablets) have a parallax effect disabled by default, the uppermost block image layer is used as a background instead
The forced full width of the parallax block affects page loading speed more critically than a regular full width block loading
The smaller the size of the uploaded video, the better.

JX Mega Menu

The module is designed to create complex menus. The module provides the ability to display one item (without sub-menu), a menu item with a sub-menu and a menu item with sub-menu by means of a multi-row and multi-column block. The module can be used in different positions, but it will display the same content. Available positions: top (displayTop), left (displayLeftColumn), right (displayRightColumn), footer (displayFooter). You can add categories (with subcategories), CMS categories (with subcategories), manufacturers (one or a list), suppliers (one or a list), stores (if multi-store is used), links to any product, information block about the product, custom links (not limited in quantity), custom HTML blocks (not limited in number) and banners. See below for more details.

The module includes 6 main tabs that allow customizing the menu.

JX Mega Menu Items

JX Mega Menu items are the basic items which appear in the menu.

In order to create a new item, open the JX Mega Menu module and click Add item button from the top menu or click "+" button in the top right of the table.

In the form that appears, fill in the required fields.

Enter item name

the tab title which is mandatory to be filled in for the default language, if the additional languages fields are not filled in, the tab takes its name from the default language.
Active

active/inactive tab.
Link

a link that is assigned to this tab. You can enter a custom link, or choose from existing options (categories, CMS categories). If you leave the field blank, the link of this tab is inactive.
Sort order

the order of tabs to be displayed.
Specific Class

the class which is added to emphasize the item (CSS class).
Enter item badge

is filled in depending on multi-languages.
It is Mega Menu

given tab sub-menu is a Mega Menu. *
Use simple menu

given tab sub-menu is a simple menu. **

* It is Mega Menu. If this option is selected, there will be a form to create a complex menu (Mega Menu).

** Use simple menu. If this option is selected, there will be a form to create a simple menu. This is a menu that displays the selected content in a single column. If the menu has embedded content, the new column is added.

Complex menu consists of rows and columns in rows.

The Row is a part of the Mega Menu structure. It includes the menu columns. The existing row can be removed by clicking the appropriate button. The row will be removed with the content it includes. The rows quantity is not limited.

The Column is a part of the Mega Menu structure, which is placed inside the rows. (The Class) The width of the column cannot be less than 2 and more than 12. In order to make the menu display properly, the total column width cannot exceed 12. The width (class) is a Bootstrap column type, corresponds to the same values.

In order to create the menu, click the 'Add row' button.

In the form appeared, click 'Add column' button.

In the pop up window you need to specify the column class (from 2 to 12). The column itself appears next where you need to set the required settings.

Here you can change the column class, CSS class and the content from the list provided. You can add/remove content by double clicking the item, or by highlighting the items and clicking the corresponding button.

Block can be removed by clicking 'Remove block' button in the footer of the block.

By removing the row, the included columns are also removed.

In order to move the content available in the selected menu, double-click or highlight the desired content and press the corresponding button.

Inactive menu information is saved while switching between menu types and you can always change the type of menu.

JX Mega Menu HTML

In this section we will explain how to create a custom HTML block in the Mega Menu.

The module has a table listing all the available blocks. You can also add a new block by clicking the '+' button in the top right of the table.

In the form that appears, fill in the required fields.

Enter HTML item name

HTML block name, is mandatory to be filled in for the default language.
Specific class

block's CSS class.
HTML content

HTML content.

Added block will appear in the list of blocks, as well as in the list of available content while creating menu blocks.

JX Mega Menu Links

In this section we will show how to create custom links in the Mega Menu.

The module has a table listing all the available links. You can also add a new link by clicking the '+' button in the top right of the table.

In the form that appears, fill in the required fields.

Enter Link name

link name, is mandatory to be filled in for the default language.
Enter Link URL

link URL, is mandatory to be filled in for the default language.
Specific class

block's CSS class.
Open in new window

open link in a new window.

Added link will appear in the list of links, as well as in the list of available content while creating menu blocks.

JX Mega Menu Banners

In this section we will explain how to create banners in the Mega Menu.

The module has a table listing all the available banners. You can also add a new banner by clicking the '+' button in the top right of the table.

In the form that appears, fill in the required fields.

Select a file

select a file, is mandatory to be filled in for the default language.
Enter Banner name

banner title, is mandatory to be filled in for the default language.
Enter Banner URL

link URL, is mandatory to be filled in for the default language.
Specific class

block's CSS class.
Public Title

public banner title.
Description

set the description of the banner.
Open in new window

open link in a new window.

Added banner will appear in the list of banners, as well as in the list of available content while creating menu blocks.

JX Mega Menu Video

In this section we will explain how to add a video in the Mega Menu.

The module has a table listing all the available videos. You can also add a new video by clicking the '+' button in the top right of the table.

In the form that appears, fill in the required fields.

Enter Video Name

video title (the field is required).
Enter Video URL - add video link in the formats described below:
- If this is a YouTube video, click on Embed and copy the code between the quotes for https://www.youtube.com/embed/video_id
- If this is a Vimeo video, click on Share icon and in the Embed section copy the source code between the quotes for http://player.vimeo.com/video/video_id

Added video will appear in the list of videos, as well as in the list of available content while creating menu blocks.

JX Mega Menu Map

In this section we will explain how to add a map in the Mega Menu.

The module has a table listing all the available maps. You can also add a new map by clicking the '+' button in the top right of the table.

In the form that appears, fill in the required fields.

Enter Map item name

the title of the map.
Enter Map latitude

set a latitude value.
Enter Map longitude

set a longitude value.
Marker

adding a custom marker.
Enter Map scale

the scale of the map (used 8 by default).
Map description

set the description of the map.

Added map will appear in the list of maps, as well as in the list of available content while creating menu blocks.

JX Search 1.1.0

This module is an extended search version that allows you to select a specific category for searching within its content. You can also change the category after defining the query. It also provides a possibility to set the additional product information display (description/price/manufacturer, etc.), and define the search results container layout, e.g., you can divide the results into a few sections with the controls (pagination, next/previous/show all). All the module settings are available in the main admin panel.

Installation and Deleting

The module is installed and deleted like any other PrestaShop module.

Module configuration

After module has been installed you can set it up on the module configuration page.

Enable Ajax Search - enables live search in a drop-down.
Minimum query length - number of symbols to start the result display.
Search in children category - enable/disable searching in children categories.
Number of shown results - number of products that shows up in the results section (number of products per page for the "pager" or "navigation" mode).
Display "Show All" button - displays the 'Show all' button below the results section, then click on it displays all found results.
Display pager - divides results into pages (depends on the 'Number of shown results' field value) and displays links to them.
Display navigation - shows the Previous/Next buttons.
Position of navigation - hook(s), to show the navigation (top/both/bottom options are available).
Highlight query result - highlights the text that matches search query.
Display image in Ajax search - shows product images in the results section.
Display description in Ajax search - shows product description in the results section.
Display prices in Ajax search - shows product price in the results section.
Display reference in Ajax search - shows product reference in the results section.
Display manufacturer in Ajax search - shows product manufacturer in the results section.
Display suppliers in Ajax search - shows product suppliers in the results section.
Blog search - enable/disable search by blog posts.

Some parameters might differ depending on the combination used.

JX Wishlist

JX Wishlist module is created to give the ability to the visitors of online store to add products to wishlists and share these wishlists on Facebook.

Module Installation

То install the module navigate to Admin panel -> Modules -> Modules and Services, find the JX Wishlist module and press 'Install' button (1).

Module Configuration

After the module has been installed, the 'Settings' page will appear.
Add the Facebook App Id to the required field (1) and press 'Save' button (2).
The instruction how to get the Facebook App Id can be found here: Creating an App ID.

Using JX Wishlist Module

Adding product to wishlist

Shop visitors should be logged in to be able to add the items to the wishlists.

After the module is installed, the button 'Add to wishlist' appears on each product page. It should look like on the screenshot below (1).
After clicking this button a shop visitor will see a notification: 'The product was successfully added to your wishlist.' It can be closed or skipped to wishlists view by clicking 'My wishlists' button (2).

Browsing Wishlists

On 'My Wishlists' page a client can add the new wishlist (1) or view the list of created ones (2).
Clicking 'View wishlist' button (1) will open the wishlist page, the 'View products' button (2) gives the ability to see the products list of this wishlist on current page.
The title of wishlist can be edited (3) or deleted (4).
To share the wishlist the visitor should press the 'Share' button (5).
While looking through the items in wishlist after clicking 'View products' button, each item can be removed from the list (1).

Sharing Wishlists

To share the wishlist the visitor should press the 'Share' button. There will be a few easy steps to follow before posting the wishlist. During each step, there's an ability to go back and change the sharing options.

First step is to choose the layout for wishlist that will be posted.
Then the products should be added. Each cell with a '+' is a button to add the product image.

Choosing the images of each product:
When all images are added, the visitor should press the 'Share' button (1).
In a small window which is then appeared, there will be some standard posting options to choose and the ability to add some text to the post. After clicking 'Post to Facebook' button, the post will be published.

Statistics

Using this module you can also get the statistics collected while the products are added to wishlists. Thus, you will know which products are currently popular. This information can be very useful for suggesting a discount, for example.
You can view the statistics navigating to Admin panel -> Stats -> Stats -> JX Wishlist.

You can select the period for viewing the statistics from the specified time (1).
In the first column, there's a number of products that were added (2).
The second column is created for your convenience. You can use it to see how many of added products were sold (3).