Forums
Andrew found this code on the product pages of a fairly popular automotive e-commerce website. It's called whenever an 'attribute' of a product (size, color, etc.) is selected or changed by the user.
The main focus of this code is to update a concatenation of the values of all currently selected attributes which are stored in a hidden form input field. Once it has done that, it hands off to another function to make an AJAX request with this concatenated value as a parameter.
Sounds simple, right? Well, it is, assuming you've ever heard of basic JavaScript concepts like arrays, loops and accessing an object's properties as if it were a keyed array. However, if you haven't, your code might take the long way around.
var ao0, ao1, ao2, ao3, ao4, ao5, ao6, ao7, ao8, ao9; function updateAttrib(node, pg, index){
var j;
var aa = document.ProductForm.attribs.value;
var attribs = aa.split("@");
if(index == 0){
var a = document.ProductForm.attrib0.value;
var as = a.split("~");
if(a == 'select'){
var io = aa.indexOf(ao0);
if(io != -1)
aa = aa.replace(ao0 + "@", '');
}else{
var found = false;
for(j = 0; j < attribs.length; j++){
var split = attribs[j].split("~");
if(split[0] == as[0]){
aa = aa.replace(ao0 + "@", a + "@");
found = true;
break;
}
}
if(!found)
aa = aa + a + "@";
ao0 = a;
}
}else if(index == 1){
a = document.ProductForm.attrib1.value;
as = a.split("~");
if(a == 'select'){
io = aa.indexOf(ao1);
if(io != -1)
aa = aa.replace(ao1 + "@", '');
}else{
found = false;
for(j = 0; j < attribs.length; j++){
split = attribs[j].split("~");
if(split[0] == as[0]){
aa = aa.replace(ao1 + "@", a + "@");
found = true;
break;
}
}
if(!found)
aa = aa + a + "@";
ao1 = a;
}
}else if(index == 2){
a = document.ProductForm.attrib2.value;
as = a.split("~");
if(a == 'select'){
io = aa.indexOf(ao2);
if(io != -1)
aa = aa.replace(ao2 + "@", '');
}else{
found = false;
for(j = 0; j < attribs.length; j++){
split = attribs[j].split("~");
if(split[0] == as[0]){
aa = aa.replace(ao2 + "@", a + "@");
found = true;
break;
}
}
if(!found)
aa = aa + a + "@";
ao2 = a;
}
}else if(index == 3){
a = document.ProductForm.attrib3.value;
as = a.split("~");
if(a == 'select'){
io = aa.indexOf(ao3);
if(io != -1)
aa = aa.replace(ao3 + "@", '');
}else{
found = false;
for(j = 0; j < attribs.length; j++){
split = attribs[j].split("~");
if(split[0] == as[0]){
aa = aa.replace(ao3 + "@", a + "@");
found = true;
break;
}
}
if(!found)
aa = aa + a + "@";
ao3 = a;
}
}else if(index == 4){
a = document.ProductForm.attrib4.value;
as = a.split("~");
if(a == 'select'){
io = aa.indexOf(ao4);
if(io != -1)
aa = aa.replace(ao4 + "@", '');
}else{
found = false;
for(j = 0; j < attribs.length; j++){
split = attribs[j].split("~");
if(split[0] == as[0]){
aa = aa.replace(ao4 + "@", a + "@");
found = true;
break;
}
}
if(!found)
aa = aa + a + "@";
ao4 = a;
}
}else if(index == 5){
a = document.ProductForm.attrib5.value;
as = a.split("~");
if(a == 'select'){
io = aa.indexOf(ao5);
if(io != -1)
aa = aa.replace(ao5 + "@", '');
}else{
found = false;
for(j = 0; j < attribs.length; j++){
split = attribs[j].split("~");
if(split[0] == as[0]){
aa = aa.replace(ao5 + "@", a + "@");
found = true;
break;
}
}
if(!found)
aa = aa + a + "@";
ao5 = a;
}
}else if(index == 6){
a = document.ProductForm.attrib6.value;
as = a.split("~");
if(a == 'select'){
io = aa.indexOf(ao6);
if(io != -1)
aa = aa.replace(ao6 + "@", '');
}else{
found = false;
for(j = 0; j < attribs.length; j++){
split = attribs[j].split("~");
if(split[0] == as[0]){
aa = aa.replace(ao6 + "@", a + "@");
found = true;
break;
}
}
if(!found)
aa = aa + a + "@";
ao6 = a;
}
}else if(index == 7){
a = document.ProductForm.attrib7.value;
as = a.split("~");
if(a == 'select'){
io = aa.indexOf(ao7);
if(io != -1)
aa = aa.replace(ao7 + "@", '');
}else{
found = false;
for(j = 0; j < attribs.length; j++){
split = attribs[j].split("~");
if(split[0] == as[0]){
aa = aa.replace(ao7 + "@", a + "@");
found = true;
break;
}
}
if(!found)
aa = aa + a + "@";
ao7 = a;
}
}else if(index == 8){
a = document.ProductForm.attrib8.value;
as = a.split("~");
if(a == 'select'){
io = aa.indexOf(ao8);
if(io != -1)
aa = aa.replace(ao8 + "@", '');
}else{
found = false;
for(j = 0; j < attribs.length; j++){
split = attribs[j].split("~");
if(split[0] == as[0]){
aa = aa.replace(ao8 + "@", a + "@");
found = true;
break;
}
}
if(!found)
aa = aa + a + "@";
ao8 = a;
}
}else if(index == 9){
a = document.ProductForm.attrib9.value;
as = a.split("~");
if(a == 'select'){
io = aa.indexOf(ao9);
if(io != -1)
aa = aa.replace(ao9 + "@", '');
}else{
found = false;
for(j = 0; j < attribs.length; j++){
split = attribs[j].split("~");
if(split[0] == as[0]){
aa = aa.replace(ao9 + "@", a + "@");
found = true;
break;
}
}
if(!found)
aa = aa + a + "@";
ao9 = a;
}
}
document.ProductForm.attribs.value = aa;
var image = document.ProductForm.iid.value;
var q = document.ProductForm.quantity.value;
doAjax("/Product.do?method=prodAttrib&n=" + node + "&g=" + pg + "&a=" + aa + "&i=" + image + "&q=" + q + "&uid=" + new Date().getTime(), setProdAttrib); }
Here's to hoping that at least their server-side stuff isn't hard-coded to 10 attributes per product...
[Advertisement]
BuildMaster allows you to create a self-service release management platform that allows different teams to manage their applications. Explore how!