Product Image Effects Documentation

A) Installation – top

Uploading

Download the add-on
Go to Admin panel > Add-ons > Manage Add-ons
Click on [+] to open upload modal window
Please choose whatever is comfortable to you:
– Local: zip archive is saved on your computer
– Server: zip archive is uploaded on your server
– URL: you have a direct link to the zip archive
After you selected the zip archive corresponding to your current version of CS-Cart please click Upload & install

Activation

Open add-on settings page Admin panel > Add-ons > Manage Add-ons >
[TH] Product Image Effects
In Activation tab insert License key
Save the settings and go back to Manage Add-ons page
In same line with the name of the add-on, click Active
Clear cache, choose Administration > Storage > Clear cache

Make sure that the add-on status is Active

That’s all, the add-on is installed

B) Usage – top

After installation and activation add-on begins to work immediately

It is important to understand that the add-on is designed to work with standard Responsive theme and theme based on it. For all others custom themes contact us

The images that are displayed in product block is the main image of the product and the first of the additional images

C) Settings – top

To change add-on settings: Go to Admin panel > Add-ons > Manage Add-ons
Press [gear] and choose Global Settings

Effects – choose one of the effects that will be applied to all product previews. An example of the effects can be found here
Images – there are two display options
- two_image – two successive images
- only_one_image – one static image without effect
Speed – animation speed. Set in milliseconds
Hover – choose when trigger the effect
- Parent – product card
- Image – product image
Show in mobile – turn on add-on effects for mobile devices. The screen resolution is less than 767px. (Default: Off)
Global Scope – for these areas it’s possible to disable the add-on
- Grid
- List without options
- Compact list
- Template Products
- Template Links thumb
- Template Scroller
- Template Small items
- Detail page

Just select the animation in blocks and individually for the product

The priority of the display goes from Global Scope to Product > Block and lower priority Global Settings

D) Change the effect on the block – top

To change effect for specific block: Go to Admin panel > Design > Layouts
Choose location of this block
Press [gear] to open modal window with block options
Press Settings
Select animation in the drop-down list Effect for Two image
Press Save to save changes

E) Change the effect on the Product – top

To change effect for specific block: Go to Admin panel > Products > Products
Choose Products in list
Press tab Add-ons
Select animation in the drop-down list Effect for Two image
Press Save to save changes

F) CSS Structure – top

After installing the add-on style files are located in design/themes/[theme_name]/css/addons/ath_prod_image_effects/. All files in the format .less (Read more about this format here)

styles.less – main file, where the basic add-on styles
mixins.less – additional mixins and functions used in other files
In the effects folder located effects files

Change styles

Style files add-on should not be changed, this can lead to incorrect work of the add-on. If there was a need to redefine or add styles, please use Theme editor for this

Go to Design > Themes
Press Visual Editor in front of the currently active layout
In the new tab, you will see your shop with Theme editor panel
In CUSTOMIZE selector choose Custom CSS
In textarea your can add your styles
After editing save your changes by pressing Save and press [X] to close editor

G) Templates – top

After installing the add-on templates are located in design/themes/[theme_name]/templates/addons/ath_prod_image_effects/

common/

image_effects.tpl – display product images with different effects according to add-on settings

hooks/

index/
- styles.post.tpl – includes style files and initializes some .less variables
products/
- product_block_image.override.tpl
- product_scroller_list.override.tpl
- product_icon.override.tpl
Files above are used hooks to change method of displaying images
For example: hook products:product_block_image code

{include
            file="common/image.tpl"
            image_width=$settings.Thumbnails.product_lists_thumbnail_width
            obj_id=$obj_id_prefix
            images=$product.main_pair
            image_height=$settings.Thumbnails.product_lists_thumbnail_height
}

changed on

{include
      file="addons/ath_prod_image_effects/common/image_effects.tpl"
      ath_image_width=$settings.Thumbnails.product_lists_thumbnail_width
      ath_image_height=$settings.Thumbnails.product_lists_thumbnail_height
      include_from="list"
}

product_compact_list.override.tpl
product_small_item.override.tpl
product_thumbnail_list.override.tpl
image_wrap.override.tpl

Files above are used hooks to change place where images are displayed
For example: hook products:product_compact_list code

<div class="ty-compact-list__image">
          <a href="{"products.view?product_id=`$product.product_id`"|fn_url}">
              {include file="common/image.tpl"
                      image_width=$image_width
                      image_height=$image_height
                      images=$product.main_pair
                      obj_id=$obj_id_prefix}
          </a>
          {assign var="discount_label" value="discount_label_`$obj_prefix``$obj_id`"}
          {$smarty.capture.$discount_label nofilter}
</div>

changed on

<div class="ty-compact-list__image">

    {hook name="products:product_compact_list__image"}
    <a href="{"products.view?product_id=`$product.product_id`"|fn_url}">
        {include file="common/image.tpl"
                image_width=$image_width
                image_height=$image_height
                images=$product.main_pair
                obj_id=$obj_id_prefix}
    </a>
    {/hook}

    {assign var="discount_label" value="discount_label_`$obj_prefix``$obj_id`"}
    {$smarty.capture.$discount_label nofilter}
</div>

If necessary, all above files can be edited to better suit your theme. The main thing don’t break logic.

product_compact_list__image.override.tpl
product_small_item__image.override.tpl
product_thumbnail_list__image.override.tpl

H) Other files – top

App folder

In this folder are located add-on settings and the basic logic

app/addons/ath_prod_image_effects/addon.xml – main file for all add-ons. Here are the parameters and settings of the add-on. File Format Scheme 3.0 CS-Cart

app/addons/ath_prod_image_effects/schemas/block_manager/templates.post.php – adds option for additional images

For example this block of code is connecting additional product images for scroller products when selecting the appropriate settings

if ( $addons['ath_prod_image_effects']['blocks_products_scroller_tpl'] == 'Y' ) {
    $schema['blocks/products/products_scroller.tpl']['bulk_modifier']
                   ['fn_gather_additional_products_data']['params']['get_additional'] = true;
}

Language files

Language packs are located at var/langs. The values are taken from there when you install the add-on
To add new values or change the current: Go to Admin panel > Administration > Languages > Translations

I) Sources and Credits – top

I’ve used the following images, icons or other files as listed.

Image Effects icon by dsathiyaraj
Vector Browser Outline Presentation by The Pixeden Team

Add-on Update – top

Starting from version 2.16, updates are installed through the Upgrade center

Administration > Upgrade center

To upgrade to 2.16, follow these steps:

make a full backup of the store
close the store
install the add-on over the old version without removing the previous one
clear the cache
if necessary, make changes that can be erased during the upgrade if you changed the add-on files directly
check that everything is successfully updated
open the store

To update language variables and add-on settings:

Go to developer mode
For this file local_conf.php add define(‘DEVELOPMENT’, true);
If you do not have a file, create one.
Clear the cache
On the add-ons page in the drop-down list next to the add-on select “Update”
Return to normal store mode

Changelog

2.18 (10 Dec 2023)
Updated the license system
Small fixes

2.17 (29 Oct 2021)
Improved Untheme2 compatibility
Fixes in styles
Icon updated

2.16 (10 Mar 2021)
Integrated the update system through the Upgrade center

2.15 (07 Dec 2020)
Updated the add-on for compatibility with CS-Cart 4.12.1
You need to reinstall the add-on

2.14 (16 Apr 2020)
Fixes for UniTheme2

2.13 (20 Feb 2020)
Fixing labels (free shipping)
Fixes for ThinTheme
Updated the license system
Updated language variables

2.12 (18 Jul 2019)
Fix labels for 4.10.x
Add support UniTheme2

Installation
Usage
Settings
Change the effect on the product block
Change the effect on the product
CSS Structure
Templates
Other files
Sources and Credits
Add-on update

Product page

Product release: 2.18 (2023-12-10)