Product Image Effects Documentation

A) Installationtop

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) Usagetop

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) Settingstop

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 blocktop

  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 Producttop

  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 Structuretop

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) Templatestop

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 filestop

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 Creditstop

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


5% Discount
No prize
Next time
Almost!
10% Discount
15% Discount
No Prize
No luck today
Almost!
50% Discount
No prize
Unlucky
Get your chance to win a price!
Enter your email address and spin the wheel. This is your chance to win amazing discounts!
Our in-house rules:
  • One game per user
  • Cheaters will be disqualified.