Global variable Shop contains class MooTools is extended by (implementing) service events.
Class contains the minimum amount of strict selectors, classes, tags, etc. Its functionality is mostly abstract and must be specified by the script visual style.
Within the class of closed Shop are also in-class to a specific features (e.g. vote for a product or service variants of), so it also has the function namespace.
Attributes, methods
In Shop class declaration has been placed the minimum amount of necessary attributes and functions. The rest are assigned to same variable (function).
Methods and attributes of the class.
-
version - string version of the class.
-
urls{}
-
skin - absolute address (beginning with/) to the visual style file
-
base - an absolute address for the store
-
-
selectorFunctions{} - mapping the selector → function
-
perBrowserFix{} - mapping browser → function
-
options{}
-
debug - boolean, debugging
-
profile - boolean, use the FireBug Profiler
-
-
status{}
-
domready - boolean, Specifies whether the event has already occurred /window.domready/
-
load - boolean, Specifies whether the event has already occurred /window.load/
-
-
url() - supplementary function addresses URL
The remaining functions are to use internal. In order to add/modify the above use implement().
Shop.
implement({
perBrowserFix
:
{
chrome
:
function()
{
....
}
}
});
Methods and attributes of a variable (function)
For reasons of transparency, the Declaration of class, most of the functionality has been pulling the beyond-to separate functions.
Features:
-
urlParser() - a value Shop. on the basis of a urls tags <link> w <head>
-
runPerBrowserFix() - to run the selected features from the map perBrowserFix{}
-
runSelectorFunctions() - to run the selected features from the map selectorFunctions{} for the event /window.domready/
-
addeventSelectorFunctions - to run the selected features from the map selectorFunctions{} for the event /Shop.element.add/
-
galleryInit() - initialization of the Milkbox Gallery
-
preinit() - function (default empty) to call at the beginning of the class initialization Shop
-
postinit() - function (default empty) to call at the end of the class initialization Shop
Attributes:
-
Shop.lang{} - phrases in the language of the site
-
values{} - map of the value derived from the templates (inside the code HTML)
-
useroptions{} - map to store the options for the administrator (e.g. modification fast user.js)
Class declaration vs. function
To all attributes and functions of class instance Shop gets through the auxiliary function
get
(name)
First searched is an instance of class, then the function. This makes it possible to quickly override by implement (). For example, maps of phrases:
Shop.
implement({
lang
:
{
basket
:
{
address_request_error
:
"Error retrieving the address."
}
}
});
If get () contain a period, it is split into parts and each queried separately.
var
s
=
new
Shop
();
s.
get('lang.basket.address_request_error');
In this way, by implement () you can override only a part of the attributes, and the remaining will be traced in the attributes of functions for example.
var
s
=
new
Shop
();
s.
get('lang.common.product_select_stock');
//= Shop.lang.common.product_select_stock
In-class.
Greater functionality of the Shop were grouped in the class declared as attributes of functions, for example.
Shop.
productVoter
=
new
Class({
....
});
All are initialized with an instance of the Shop using
subclass
(_class)
Access their instance can be obtained by object classes {}
var
s
=
new
Shop
();
s.
classes.productVoter
Each sub-class has only one active instance of the object in the Shop.
Conditional initialization of pod-classes
Each sub class, if you want to set, it must be as an argument to the function condition (), which returns a true. The lack of this feature, or other return will cause skipping. Sample declaration of script visual style:
Shop.
productVoter.condition
=
function()
{
var
span
=
$$
('span.votestars')[0]
;
return
!!($chk(span)
&&
span.
get('id'));
}
This function checks if there is at least one <span> with a votestarts and a non-empty id, which is necessary to act for theproductVoter.
List
-
basketHandler - shopping cart support (supply, payments, addresses)
-
fadingText - fill <input> the default value until you enter the content by the user
-
imageSlider - scroll through photo thumbnails under the main picture of the product
-
imageZoom - enlarged product images in place
-
productVoter - a vote on the product
-
skinPreviewBox - close the preview graphic style [induced Administrative Panel]
-
stockDownloader - get information about variants of products
-
stockHandler - support for variants of products [dynamic fields <select>]
Initialization
Shop class requires that all elements of the DOM existed at the time of the creation of the instance, so you should call it early in the event /window.domready/. By default, the style application consists of only one instance and assign it to the global variable ShopInstance.
window.
addEvent('domready',
function
()
{
window.
ShopInstance
=
new
Shop
();
});
In the course of initialisation are caused by:
-
this.status.domready = true
-
urlParser()
-
preinit()
-
runSelectorFunctions() - domready event
-
controlled and all the subclasses of
-
galleryInit()
-
postinit()
selectorFunctions
Inside selector Functions {} class must place objects containing selector DOM and a function on objects.
Shop.
implement({
selectorFunctions
:
{
popup
:
{
selector
:
'.popup',
domready
:
function(el)
{
el.
removeEvents('click').addEvent
(
'click',
function(e)
{
new
Event
(e).stop();
$
(this).blur()
;
window.
open(this.href);
}
);
},
addElement
:
'domready'
load
:
false
}
}
});
In the above example, for each object containing the class „popup” will be added the onClick event. In During the initialization Shop for each element function is called domready (). In addition, you can declare addElement - Called for the event /Shop.element.add/ and load - for /window.load/. If instead the function addElement will include string 'domready' function is called domready ().
perBrowserFix
Inside per Browser Fix {} class should be placed mapping browser –> function. Only by appropriate functions.
Shop.
implement({
perBrowserFix
:
{
ie6
:
function()
{
document.
body.style.behaviour
=
'url("'
+
this.urls.base
+
'styles/csshover3.htc")';
},
chrome
:
function()
{
$$
('.centercol input',
'.centercol button').each(function
(
el
)
{
if(el.get('value'
)
.
length
>
0
&&
el.
get('name').match
(
/(mail|pass|login)/))
{
el.
focus();
el.
blur();
}
});
}
}
});
As attributes, you can use all the browsers recognized by MooTools and ie67 for IE6 and IE7.
Options
It Shop. useroptions {} is used to store the options that modify the behavior of the Shop. Available options:
-
milkbox {}-options object passed to the constructor, you can own Milkbox to supplement the options in accordance with thedocumentation. For example:
Shop.
useroptions.milkbox.autoSize
=
false;
//Disable matching large images to window
