✨🎁 Get 25% Off on Orders Over $300! ✨ The discount will appear at checkout 🎁✨

Product Image Effects Documentation

A) Installation – top

Uploading

  1. Download the add-on
  2. Go to Admin panel > Add-ons > Manage Add-ons
  3. Click on [+] to open upload modal window
  4. 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
  5. After you selected the zip archive corresponding to your current version of CS-Cart please click Upload & install

Activation

  1. Open add-on settings page Admin panel > Add-ons > Manage Add-ons >
    [TH] Product Image Effects
  2. In Activation tab insert License key
  3. Save the settings and go back to Manage Add-ons page
  4. In same line with the name of the add-on, click Active
  5. 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

  1. Effects – choose one of the effects that will be applied to all product previews. An example of the effects can be found here
  2. Images – there are two display options
    • two_image – two successive images
    • only_one_image – one static image without effect
  3. Speed – animation speed. Set in milliseconds
  4. Hover – choose when trigger the effect
    • Parent – product card
    • Image – product image
  5. Show in mobile – turn on add-on effects for mobile devices. The screen resolution is less than 767px. (Default: Off)
  6. 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

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

E) Change the effect on the Product – top

  1. To change effect for specific block: Go to Admin panel > Products > Products
  2. Choose Products in list
  3. Press tab Add-ons
  4. Select animation in the drop-down list Effect for Two image
  5. 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

  1. Go to Design > Themes
  2. Press Visual Editor in front of the currently active layout
  3. In the new tab, you will see your shop with Theme editor panel
  4. In CUSTOMIZE selector choose Custom CSS
  5. In textarea your can add your styles
  6. 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.

    The following files are used hooks to the change the image output file to image_effects.tpl

  • 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.

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.19 (23 Aug 2024)
- Improved update center
- Script fixes

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

Table of Contents

  1. Installation
  2. Usage
  3. Settings
  4. Change the effect on the product block
  5. Change the effect on the product
  6. CSS Structure
  7. Templates
  8. Other files
  9. Sources and Credits
  10. Add-on update
Product page
2.19 (2024-08-23)