Wow Animation For Blocks 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 please click Upload & install

Activation

  1. Open add-on settings page Admin panel > Add-ons > Manage Add-ons >
    [TH] Wow Animation For Blocks
  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) 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. Select animation in the drop-down list Animated effect
  5. Advanced Options:
    • Duration – change the animation duration. Example: 0.25s
    • Delay – Delay before the animation starts. Example: 300ms
    • Offset – Distance to start the animation (related to the browser bottom). Example: 100
    • Iteration – number of times the animation is repeated. Example: 3 or infinite
  6. Press Save to save changes

C) Settingstop

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

  1. Show on mobile – Turn on/off add-on on mobile devices
  2. Grid – Animations products for “Grid” view
  3. List without options – Animations products for “List without options” view
  4. Compact list – Animations products for “Compact list” view

D) JavaScripttop

After installing the add-on javascript files are located in js/addons/ath_animate/

  • wow.min.js – JavaScript parallax plugins (read more here)

E) CSS Structuretop

After installing the add-on style files are located in design/themes/[theme_name]/css/addons/ath_animate/

  • animate.min.css – CSS animation library (read more here)

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

F) Templatestop

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

views/block_manager/render

  • animate_wrapper.tpl – html wrapper for animated blocks

hooks/index/

  • styles.post.tpl – includes style files
  • scripts.post.tpl – includes js files and init scripts

hooks/products/

  • product_multicolumns_list.pre.tpl – open product wrapper animation for “Grid” view
  • product_multicolumns_list.post.tpl – close product wrapper animation for “Grid” view
  • product_block.pre.tpl – open product wrapper animation for “List without options” view
  • product_block.post.tpl – close product wrapper animation for “List without options” view
  • product_compact_list.pre.tpl – open product wrapper animation for “Compact list” view
  • product_compact_list.post.tpl – close product wrapper animation for “Compact list” view

G) Other filestop

App folder

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

app/addons/ath_animate/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_animate/animate-config.json – the list of available animations

app/addons/ath_animate/init.php – connect to the hook ‘render_block_register_cache’, ‘render_block_content_after’

app/addons/ath_animate/func.php – contain the actual function to be embedded to the hook

app/addons/ath_animate/controllers/backend/block_manager.pre.php – passes an array of available animation to the admin panel

design/backend/templates/addons/ath_animate/hooks/block_manager/settings.post.tpl – block settings

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


H) 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.