1:
/*
2:
* Chained - jQuery non AJAX(J) chained selects plugin
3:
*
4:
* Copyright (c) 2010-2011 Mika Tuupola
5:
*
6:
* Licensed under the MIT license:
7:
* http://www.opensource.org/licenses/mit-license.php
8:
*
9:
*/
10:
11:
(function($) {
12:
$.fn.chained = function(parent_selector, options) {
13:
14:
return this.each(function() {
15:
16:
/* Save this to self because this changes when scope changes. */
17:
var self = this;
18:
var backup = $(self).clone();
19:
20:
/* Handles maximum two parents now. */
21:
$(parent_selector).each(function() {
22:
23:
$(this).bind("change", function() {
24:
$(self).html(backup.html());
25:
26:
/* If multiple parents build classname like foo\bar. */
27:
var selected = "";
28:
$(parent_selector).each(function() {
29:
selected += "\\" + $(":selected", this).val();
30:
});
31:
selected = selected.substr(1);
32:
33:
/* Also check for first parent without subclassing. */
34:
/* TODO: This should be dynamic and check for each parent */
35:
/* without subclassing. */
36:
var first = $(parent_selector).first();
37:
var selected_first = $(":selected", first).val();
38:
39:
$("option", self).each(function() {
40:
/* Remove unneeded items but save the default value. */
41:
if (!$(this).hasClass(selected) &&
42:
!$(this).hasClass(selected_first) && $(this).val() !== "") {
43:
$(this).remove();
44:
}
45:
});
46:
47:
/* If we have only the default value disable select. */
48:
if (1 == $("option", self).size() && $(self).val() === "") {
49:
$(self).attr("disabled", "disabled");
50:
} else {
51:
$(self).removeAttr("disabled");
52:
}
53:
$(self).trigger("change");
54:
55:
/* Dependent Options / Option Boost compatibility */
56:
$(':input[name^="option"]', self).change(function(){
57:
obUpdate($(this), useSwatch);
58:
});
59:
});
60:
61:
/* Force IE to see something selected on first page load, */
62:
/* unless something is already selected */
63:
if ( !$("option:selected", this).length ) {
64:
$("option", this).first().attr("selected", "selected");
65:
}
66:
67:
/* Force updating the children. */
68:
$(this).trigger("change");
69:
70:
});
71:
});
72:
};
73:
74:
/* Alias for those who like to use more English like syntax. */
75:
$.fn.chainedTo = $.fn.chained;
76:
77:
})(jQuery);
78:
/* configurable settings */
79:
//(useSwatch NOT YET IMPLEMENTED yet. Leave false for now. WIll be updated in next release)
80:
var useSwatch = false; // Set to true if you want to use smaller image for option image swapping. False to swap main image.
81:
82:
/* Theme Settings */
83:
var img = '#image'; // The main image id
84:
85:
var origSrc = '';
86:
var origTitle = '';
87:
var origAlt = '';
88:
var origPopup = '';
89:
90:
$(document).ready(function(){
91:
// Store original image source
92:
origSrc = $(img).attr('src');
93:
origTitle = $(img).attr('title');
94:
origAlt = $(img).attr('alt');
95:
origPopup = $(img).parent().attr('href');
96:
97:
$(':input[name^="option"]').change(function(){
98:
obUpdate($(this), useSwatch);
99:
});
100:
});
101:
102:
103:
function obUpdate($this, $swatch) {
104:
105:
// Set default
106:
$swatch = typeof($swatch) != 'undefined' ? $swatch : false;
107:
108:
// Get Type for determining checked/unchecked for checkbox
109:
$checked = true;
110:
if ($this.is('input:checkbox') && !$this.is(':checked')) {
111:
$checked = false;
112:
}
113:
114:
// Set variables...
115:
var option_id = $this.attr('id');
116:
var option_name = $this.attr('name');
117:
var option_val = $this.val();
118:
119:
// Remove existing option info
120:
$('#option_info').remove();
121:
$('.ob_ajax_error').remove();
122:
123:
//if ($(option).val()) {
124:
if (option_val && $checked) {
125:
126:
// ajax lookup
127:
$.ajax({
128:
type: 'post',
129:
url: 'index.php?route=product/product/updateImage',
130:
dataType: 'json',
131:
data: $(':input[name^="option"][type=\'checkbox\']:checked, :input[type=\'hidden\'], :input[name^="option"][type=\'radio\']:checked, select[name^="option"]').serialize() + '&option_value_id='+option_val,
132:
beforeSend: function() {
133:
if (!useSwatch) {
134:
$this.after('<img class="ob_loading" src="catalog/view/javascript/ajax_load_sm.gif" alt=""/>');
135:
}
136:
},
137:
success: function (data) {
138:
139:
// Update the main image with the new image.
140:
var swatch = data.swatch;
141:
var thumb = data.thumb;
142:
var popup = data.popup;
143:
var info = data.ob_info;
144:
var stock = data.quantity;
145:
var name = data.name;
146:
147:
// Swap Image if exists...
148:
if (swatch && useSwatch) {
149:
// Remove existing image
150:
$('#option_image_'+select_id).parent().parent().remove();
151:
$(option).parent().parent().after('<td><a title=
"'+title+'" href=
"'+popup+'" class=
"thickbox_option"><img id=
"option_image_'+select_id+'" src=
"'+swatch+'" alt=
"'+alt+'" title=
"'+title+'" /></a></td>');
152:
tb_init('.thickbox_option');
153:
} else if (thumb) {
154:
$(img).attr('src', thumb);
155:
$(img).attr('title', name);
156:
$(img).attr('alt', name);
157:
$(img).parent().attr('href', popup);
158:
}
159:
160:
// Add under main image or popup
161:
if (info) {
162:
xinfo = info.replace("~~", "");
163:
if (info.indexOf("~~") != -1) { alert(xinfo); }
164:
$(img).parent().after('<p id="option_info">'+xinfo+'</p>');
165:
166:
}
167:
168:
},
169:
error: function (html) {
170:
// Create an error element that gets shown only on error, removed on success
171:
$('body').append('<span class="ob_ajax_error" style="font-size:8px;">Ajax Lookup Error. Please try again.</span>');
172:
},
173:
complete: function() {
174:
$('.ob_loading').remove();
175:
}
176:
});
177:
178:
} else {
179:
$(img).attr('src', origSrc);
180:
$(img).attr('title', origTitle);
181:
$(img).attr('title', origAlt);
182:
$(img).parent().attr('href', origPopup);
183:
}
184:
}
