Wow Animation For Blocks 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 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 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. 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) Settings – top

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) JavaScript – top

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 Structure – top

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) Templates – top

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 files – top

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 Credits – top

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

• Impressed icon by icon 54
• Vector Browser Outline Presentation by The Pixeden Team
• Vector Browser Outline Presentation by The Pixeden Team
• Animate.css by Daniel Eden
• WOW.js by Peter Sorensen

Changelog

1.8 (21 Dec 2020)
Updated the add-on for compatibility with CS-Cart 4.12.1
You need to reinstall the add-on for CS-Cart Multivendor Ultimate
Added support for CS-Cart Multivendor Ultimate