.. include:: _include.rst
.. highlight:: html+jinja
.. _options_ajax:

#####################
AJAX
#####################

.. include:: _include_local_toc.rst

**********************************
Activate AJAX
**********************************

This options activates the AJAX mode globally. Every embedded product be loaded via AJAX to improve page loading speed, if you do not use the :ref:`Repo` or template cache.

.. note::

	It is recommended to use the :ref:`Repo` (with optional server side refreshing) and the template cache instead of the AJAX mode.

***********************************
Container class name
***********************************

.. image:: _static/option_ajax_container_classname.png
    :height: 75px
    :width: 417px
    :scale: 100%
    :alt: Option AJAX container classname

The AJAX mode uses containers to load the product tempalte into via AJAX. The CSS class name of those containers can be customized by using this option. If you leave this option blank, the default container class name is "asa2_ajax_container".

As you can see on the screenshot, every AJAX container also has an individual id property with a "asa2-" prefix.

.. image:: _static/options_ajax_dom.png
    :height: 108px
    :width: 445px
    :scale: 100%
    :alt: Option AJAX custom container class DOM

********************
Container tag
********************

You can decide which kind of HTML tag should be used for the AJAX container.

Options are:

	* div (default)
	* span
	* p

***********************
Custom loading text
***********************

Here you can enter a custom text to be displayed while the AJAX content is being loaded. If you leave this text field blank, the default loading text is "Loading ...". 

If you use the option "CSS3 loading animation" (see below), the loading text will not be shown.

***********************
CSS3 loading animation
***********************

.. image:: _static/options_css_loading_ani.png
    :height: 166px
    :width: 387px
    :scale: 100%
    :alt: AJAX CSS3 loading animations

Instead of a loading text (see option above), |asa2| also supports CSS3 loading animations. 


Options are:

Fading bars
-----------

.. image:: _static/css_loading_fading_bars.png
    :height: 70px
    :width: 140px
    :scale: 100%
    :alt: CSS animation Fading bars

Floating circles
----------------

.. image:: _static/css_loading_floating_circles.png
    :height: 80px
    :width: 80px
    :scale: 100%
    :alt: CSS animation Floating circles

No trespassing
--------------

.. image:: _static/css_loading_no_trespassing.png
    :height: 60px
    :width: 130px
    :scale: 100%
    :alt: CSS animation No trespassing

Circular
--------

.. image:: _static/css_loading_circular.png
    :height: 80px
    :width: 80px
    :scale: 100%
    :alt: CSS animation Circular

Squares wave
------------

.. image:: _static/css_loading_squares_wave.png
    :height: 60px
    :width: 140px
    :scale: 100%
    :alt: CSS animation Squares wave