Description
HikaShop Wall enhances your online store with multiple product displays to improve sales, stock rotation and more while giving your customers a better shopping experience.
Use pre-made templates or building your own with custom HTML and CSS, specify which bit of product information you want to show and set the selection criteria. The module will then build a display for your custom product layouts, Top sellers lists, Featured products, Product banners and more. Product can be shown in rows, columns and grids with one or more pages as well as special animation effects for page transitions.
Among its features are:
- Unlimited products support
- Supports multiple module copies with different configurations
- Arrange products in columns, rows and grids with one or more pages
- 86 button sets included
- 30 pre-made templates to get you started!
- 38 data tags to display information including image, price, Add-to-cart form and more
- Configurable date/time and size displays
- Filter products by brand or category
- Optional filter for specific products
- Optional filter products from current category only
- Display current or future available products
- Optional "minimum stock" product filter
- Custom product description lengths
- Minimum and Maximum price filtering
- 7 sort options with ascending and descending modes including Most recent, Top Sales, Rating score, etc
- MooTools showcase Library for Sliders, Tooltips, Pop-ups and more animation effects.
- 100% Joomla-compatible visual effects.
- Fully customizable Main and More Area HTML/CSS templates
Installation
Install the module using the regular Joomla! extension installer.
Configuration
The module can be customized using the standard Joomla! Module Manager.
Parameters are divided in two main sections: The Module Parameters section defines what data will be shown and how it should be presented. The Advanced Parameters allows you to configure the special effects and animations, if any were used. These parameters won't affect the data, but they can affect their display form.
To access these parameters, go to the module manager and select the Hikashop Product Wall Module.Module Parameters
Use these parameters to customize the standard presentation of the module.
Selection Parameters
These parameters select which articles to show:
Field Description Categories Use this parameter to select which product categories to use. Current category only? Use this parameter to display products from the category being shown Manufacturers Use this parameter to filter the products by manufacturer Products Selecting specific products to show (works along the other filters) Availability Filter according to the availability of the product Minimum stock Select the minimum number of products on stock Minimum price Select the minimum price of products Maximum price Select the maximum price of products Product show order Sorting criteria to display products. Display Parameters
These parameters define the layout properties of the module box. The layout consists of a grid with one or more pages of Joomla! articles organized in rows and/or columns.
Field Description Columns Number of columns to show. Rows Number of rows to show. Pages Number of pages to show. Transition effects are enabled between page changes. Display Style Special effects applied to the layout. Window modes work with one page only; all others require multiple pages of content to perform transitions between them. Window Width Width (in pixels) of the window frame when using a Window special effect. Window Height Height (in pixels) of the window frame when using a Window special effect. Transition pause Pause time between page transitions in milliseconds. A value of -1 disables automatic transitions. Default value is: 4000. Transition duration Page transition effect duration in milliseconds (default: 1500). Slide orientation Slide transition orientation. Transition type Transition animation type. Button Style Button graphic set to use when buttons tags are enabled. Template To select one of our predesigned template. NOTE: Select "None" if you want to use Module HTML template and Product HTML template fields. Tag Description {leftbutton} Draws a "Left/Back/Previous" button. {mainarea} This tag draws the main layout area block, including the special effects. {morearea} This tag draws the articles more area blocks. {pages} Displays a numbered page list for quick browsing. {rightbutton} Draws a "Right/Forward/Next" button. Main Content HTML template HTML/CSS code to display each item. You can embed any of the following tags to display article information:
Tag Description {addtocart} This tag will show an "Add to cart button" for the product. {base_price} Displays the base price of the product. {brand} Displays the brand of the product. {category_description} The description of the product category {category_image} Category image URL {category_name} The name of the product category {category_url} URL to the product category page {categoryid} Category Id {create_date d-m-Y} Use this tag to show the creation date of the product in format d-m-Y, notice that you can change d-m-Y for the format that you want {create_date} Use this tag to show the creation date of the product. {description} This tag will show the description of the product as you set it on HikaShop {end_date d-m-Y} This tag will show the product end date in format d-m-Y, notice that you can change d-m-Y for the format that you want {end_date} This tag will show the product end date. {id} Product Id {image_url} This tag will return the URL to the product image. {image} This tag will return an IMG tag for the product image. {index} A consecutive number for the product in the display, useful for numbered lists. {original_image_url} This tag will return the URL to the product original image. {original_image} This tag will return an IMG tag for the product original image. {product_code} The unique code/ID of the product {product_height} Shows the product height. {product_id} Product number on HikaShop system, useful for custom links. {product_image_url} This tag will return the URL to the product image. {product_image} This tag will return an IMG tag for the product image. {product_length} Shows the product length. {product_name} Use this tag to show the name of the product {product_page} URL to the product's page. {product_price} The price of the product. {product_quantity} Display the product's quantity {product_score} Rating score for the product. {product_url} This tag will show the URL that you set on the product details {product_votes} Amount of votes for product. {product_weight} Shows the product weight. {product_width} Shows the product width. {raw_category_description} This tag will show the unfiltered description of the category as you set it on HikaShop {raw_description} This tag will show only the unfiltered description of the product that you set it on HikaShop {start_date d-m-Y} This tag will show the start date of the product in format d-m-Y, notice that you can change d-m-Y for the format that you want. {start_date} This tag will show the start date of the product. {thumbnail_image_url} This tag will return the URL to the thumbnail image. {thumbnail_image} This tag will return an IMG tag for the thumbnail image. {weight_unit} The unit of measure for weight. Description length Maximum length of {description} tag. Empty = no limit. Category Description length Maximum length of {category_description} tag. Empty = no limit. Date format Date format (using PHP date function). Default is: Y-m-d 'More' Area Configuration
Use these parameters to customize the 'more' area block in the module.
Field Description 'More' Content HTML template The HTML/CSS markup for products in this area. More items Number of items to show in this area. Clone from main? If enabled, products shown will be same as in main area. More columns How many products to show per column. More legend An optional text legend to show above this area. More legend color Text color for the legend text. Advanced Parameters
These parameters control the behavior of special content effects, please read the next section for more information about content effects and how to apply them.
Field Description Z layer Define the z-index layer to use for the special effect content. Custom CSS Any optional custom CSS code needed for the module markup. Tooltip / Pop-Up FX Settings
Use these parameters to customize the Tooltip and Pop-Up effects:
Field Description In Opacity The opacity of the tooltip/pop-up when the mouse enters the trigger zone. A value of 0 will make the display transparent while a value of 1 will make it opaque, values range from 0 to 1 in decimal increments. Out Opacity The opacity of the tooltip/pop-up when the mouse leaves the trigger zone. A value of 0 will make the display transparent while a value of 1 will make it opaque, values range from 0 to 1 in decimal increments. In Animation Vertical The distance the tooltip/pop-up will move vertically (in pixels) when the mouse enters the trigger zone. Out Animation Vertical The distance the tooltip/pop-up will move vertically (in pixels) when the mouse leaves the trigger zone. In Animation Horizontal The distance the tooltip/pop-up will move horizontally (in pixels) when the mouse enters the trigger zone. Out Animation Horizontal The distance the tooltip/pop-up will move horizontally (in pixels) when the mouse leaves the trigger zone. Fade-in Duration The duration of the "In" animation when the mouse pointer enters the trigger zone (in milliseconds). Fade-Out duration The duration of the "Out" animation when mouse pointer leaves the trigger zone (in milliseconds). Pause The time the tooltip/pop-up will be shown between the "In" animation and the "Out" animation (in milliseconds). Tooltip animation mode Select one of the many Moo functions to perform animations. Tooltip / Popup ease mode The transition type. All transitions, except for "linear" transition, can be combined with a "Transition Ease". Centered Popup Set this to "Yes" if you want pop-up effect displays to appear centered in the browser window. Slide FX Settings
These parameters control the "Slide" content effect:
Field Description Sliding Panels Settings Choose an animation style from the list. Note: The following Settings are used ONLY when Slide Panels Settings is set to CUSTOM: Slide Panel X in The distance (in pixels) from the left trigger zone border that the slide panel will go to when the mouse enters the trigger zone. Slide Panel X out The distance (in pixels) from the left trigger zone border that the slide panel will go to when the mouse leaves the trigger zone. Slide Panel Y in The distance (in pixels) from the top trigger zone border that the slide panel will go to when the mouse enters the trigger zone. Slide Panel Y out The distance (in pixels) from the top trigger zone border that the slide panel will go to when the mouse leaves the trigger zone. Slide animation mode Select one of the many Moo functions to animate the slide effects. Slide ease mode Choose how to apply the animation effect. This setting is not used when "Slide Animation Mode" is set to Linear. Frames per Second The frames per second used to animate the effect. Note: Using a high value in a heavy site could decrease the video performance. Combine this setting with "Frame Duration" to get a smooth effect. Fame Duration The time (in milliseconds) the duration will last. Hover FX Settings
These Parameters Control the Hover Effect:
Field Description Hover Effect in Color The background color that will fade in when mouse enter the element with class="js_hover". Hover Effect Out Color The background color that will fade out when mouse leaves the element with class="js_hover". Module Settings
These parameters are standard for all Joomla modules. Please read Joomla! documentation for more information on their use.
Special Effects
Besides the page transition effects, you can also include additional effects that apply to the content of each item. By adding certain CSS tags to your HTML code and organizing the layout of content, these effects allow you to build fully customizable tooltips, pop-ups and slide effects. Since all the content data tags are available on these effects as well, you can elaborate the display of your content as much as you want!
Keep in mind however, that with great power comes great responsibility: the HTML of both zones is still part of the HTML code of your page; if your HTML/CSS code has a bug, it may affect how other parts of your site look and work.
Content effects are activated by the user's mouse pointer but with subtle differences. How you can implement each effect and how they are activated is explained below:Tooltips
A Tooltip will appear automatically when the mouse pointer hovers over a specific "trigger zone", this example code explains better how to use the necessary tags:
<div class="jxtctooltip"> This is the tooltip trigger zone <div class="tip"> This is the tooltip content </div> </div>
Upon display, this code will show the "This is the tooltip trigger zone" legend by itself, but if you move the mouse pointer over it, a tooltip will come up displaying the "This is the tooltip content" legend. Each zone is wrapped within a tag, you must use the CSS tags "jxtctooltip" and "tip" as shown to make the effect work.Pop-ups
A pop-up will appear when the user clicks on the "trigger zone", the Pop-up zone has its own Close and Drag buttons. This example code shows the necessary CSS tags in use:
<div class="popuphover"> This is the pop-up trigger zone <div class="pop"> This is the pop-up content </div> </div>
The trigger zone is made with the contents of the div with class "popuphover", and the pop-up content is hidden in the div with class "pop", it will be shown when the user clicks on the trigger zone.Slides
Slides are useful to display content in different layers, for example imagine a picture with a footnote that expands to show a full description. Different than Tooltips or Pop-ups, Slides do not use a trigger zone, they react to mouse pointer over their own zones. This is an example code:
<div class="slidebox"> This is the content zone <div class="slidepanel"> This is the slide content zone </div> </div>
Again, the container zone inside the div with CSS class "slidebox" will be shown first, and the contents of the slide on div "slidepanel" will be shown when the mouse hovers its zone.Hover
The Hover is useful when you want to focus on specific zone of the content, for example a "clickable" zone that looks similar to other content, an image or name that want to highlight. Similar to Slides, they react to mouse pointer over their own zones and does not need a trigger zone. This is an example code:
This is the content zone <div class="js_hover"> The content with highlight </div> This is the rest of content zone
Once the mouse is over the js_hover zone the color will change automatically. As you can see this is the easier effect but provide you the power to catch the attention of your visitors.Styling
As previously explained, the content is rendered in a grid fashion with one or more rows and columns on one or more pages, each page represents a single grid. Each cell in a grid contains the template code for one item with the placeholder tags translated to their corresponding data element such as titles, descriptions, images, etc.
In order to ease the visual styling of the grids, there are certain common CSS classes added to the HTML code for your convenience. You can put hard-coded CSS styling in the XTS template fields directly, but you may find using your template's CSS file a better option.
If you can't or don't want to alter your main CSS file, you can put any CSS code needed in the module's own file: css/wall.css. This file is located inside the module folder however, it will be overwritten if you reinstall or update the module.
This is a brief explanation on how the HTML and classes are applied:
You can have a common set of CSS styling code for these tags in your template's CSS file to maintain a consistent appearance on any modules being shown, or you can use them in combination with the module CSS class parameter to define specific styling for a particular module.CSS selector Description firstpage The first page. centerpage Applied to pages between the first and the last. lastpage The last page. singlepage Page class when only one page is shown evenpage Used on even pages. oddpage Used on odd pages. page-X Numbered class applied to each page, eg: page-1, page-2, etc. firstrow The first row in a page. centerrow Rows between the first and the last. lastrow Last row in a page. singlerow Only row in a page. evenrow Used on even rows. oddrow Used on odd rows. row-X Numbered class applied to each row, eg: row-1, row-2, etc. firstcol The first column in a page. centercol columns between the first and the last. lastcol Last column in a page. singlecol Only column in a row. evencol Used on even columns. oddcol Used on odd columns. col-X Numbered class applied to each column, eg: col-1, col-2, etc. prevbutton Previous/Backward icon button. nextbutton Next/Forward icon button. pagebutton Page buttons. firstbutton First page button. centerbutton Page buttons between the first and the last. lastbutton Last page button. singlebutton A single page button is shown. pag-X Numbered class applied to each page button, eg: pag-1, pag-2, etc.
These optionsprovide total control of how the content will be shown in your site.Layout Options
A feature available on Joomla! 2.5.x and 3.x versions of the module is the option to choose among different layout models. These can be specified in the Advanced Options of the module parameters and render the wall contents using different HTML markup and Javascript. While the end results might look similar in all of them, their unique HTML markup offers different Styling options depending on your needs. These are the options:
Layout Description default The standard method uses HTML tables to align items horizontally and vertically. float Wall elements are placed using floating blocks and are suitable for custom styling for Responsive and other layout needs. bootstrap Elements are arranged using standard Bootstrap classes. semantic Layout is built with blocks styled as "CSS tables" similar in behavior as HTML ones.
Keep in mind the layout methods other than Default use a different javascript for page effects. Copyright 2016 Monev Software LLC www.joomlaxtc.com
