Интерпретация кода

Имеем код html:

На его основании имеем обработку

Вопрос - как заставить корректно работать js, если в html я поменяю select на a href?

 

Имеем страницу категорий (Опенкарт 1.5.5.1)
http://test.verose.ru/shkatulki/
В штатном опене сортировка и количество элементов задается выпадающими списками



Я хочу сделать вот так

Все вроде бы получилось, НО косячит вывод фильтр про, а именно "Показано с 1 по 30" (выводит надпись, что показано 30, даже если 60 выбрано и на странице отображается 60 элементов) и страница перезагружается, хотя при активном фильтре должны перезагружаться только элементы.

Исходный код списка:

Я пробовал заменить в js
$val = $(".sort select").val();
на:
$val = $(".sort a").val();

И все подобные строки с .sort и .limit,
но эффекта не возымело (((

 

$iD, прописал в итоге так:

HTML:

if($(".sort a").length){
$(".sort a").get(0).onchange = null;
$(".sort a").click(function () {
var d = $(this).val();
var a = gUV(d, "sort");
var b = gUV(d, "order");
$("#filterpro_sort").val(a);
$("#filterpro_order").val(b);
iF()
});
}

if ($(".limit a").length) {
$(".limit a").get(0).onchange = null;
$(".limit a").click(function () {
$("#filterpro_limit").val(gUV($(this).innerHTML, "limit"));
iF()
});

и ниже

HTML:

if ($(".sort a").length) {
if ($("#filterpro_sort").val()) {
$(".sort a").each(function(i, e) {
if (gUV($(this).val(), "sort") == $("#filterpro_sort").val() && gUV($(this).val(), "order") == $("#filterpro_order").val()) {
$(".sort a").val($(this).innerHTML);
return;
}
});
} else {
$val = $(".sort a").val();
$("#filterpro_sort").val(gUV($val, "sort"));
$("#filterpro_order").val(gUV($val, "order"))
}
}
if ($("#filterpro_limit").length) {
if ($("#filterpro_limit").val()) {
$(".limit a").val($("#filterpro_limit").innerHTML);
} else {
$("#filterpro_limit").val(gUV($(this).innerHTML, "limit"));
}
}

В итоге вопрос с перезагрузкой улучшился, но все равно не решен - странице передается правильный параметр для фильтра с # в урл, но потом страница обновляется и грузится адрес http://test.verose.ru/shkatulki/?sort=p.date_added&order=DESC
Также не решен вопрос с количеством элементов на странице, выбираешь 60, страница обновляется, а на фильтре пишет
Показано с 1 по 30 из 76 (всего 3 страниц), хотя на самом деле их 60 отображает.

Всю голову уже сломал, в яве я не силен (((
Был бы очень признателен, если бы у вас нашлось время написать решенный вариант.

На всякий случай полный код (исходный) filterpro.min.js

HTML:

var fIID = 0;
var interval = 1;
var $cookie = false;
var container = ".product-{view}";
/**
* fixs for IE
*/
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(obj, start) {
for (var i = (start || 0), j = this.length; i < j; i++) {
if (this[i] === obj) {
return i;
}
}
return -1;
}
}

function escapeHtml(text) {
return text
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;");
}

String.prototype.hashCode = function(){
var hash = 0, i, ch;
if (this.length == 0) return hash;
for (i = 0; i < this.length; i++) {
ch = this.charCodeAt(i);
hash = ((hash<<5)-hash)+ch;
hash = hash & hash; // Convert to 32bit integer
}
return hash;
};

var tag_tmpl = $.template(null, '<tr><td><input id="tag_${tag}" class="filtered" type="checkbox" name="tags[]" value="${tag}" {{if checked}} checked="checked" {{/if}}></td>' +
'<td><label for="tag_${tag}">${name}</label></td></tr>');
var cat_tmpl = $.template(null, '<tr><td><input id="cat_${category_id}" class="filtered" type="checkbox" name="categories[]" value="${category_id}" {{if checked}} checked="checked" {{/if}}></td>'+
'<td><label for="cat_${category_id}">${name}</label></td></tr>');
$(".price_limit").live("change", (function () {
var b = parseInt($("#min_price").val());
var a = parseInt($("#max_price").val());
$("#slider-range").slider("values", [b, a]);
iF()
}));
function synchronizeImgCheckboxes() {
$("#filterpro input.filtered[type=\"checkbox\"]").each(function() {
var $img = $(this).next('img');
if ($img.length) {
if ($(this).is(":checked")) {
$img.addClass("selected");
} else {
$img.removeClass("selected");
}
}
});
}
$("#filterpro .filtered").live("change", (function () {
iF();
}));
$(function () {
$("#slider-range").slider({range:true, min:0, max:0, values:[0, 0], stop:function (a, b) {
iF()
}, slide:function (a, b) {
$("#min_price").val(b.values[0]);
$("#max_price").val(b.values[1])
}});
$("#min_price").val($("#slider-range").slider("values", 0));
$("#max_price").val($("#slider-range").slider("values", 1))
});
function iF() {
clearTimeout(fIID);
$("#filterpro_page").val(0);
fIID = setTimeout("doFilter(false)", interval)
}

function success(g, b) {

if ($cookie){
var view = $cookie("display");
}
if (!view) {
view = "list";
}
var cont = container.replace('{view}', view);

var hash = window.location.hash.substr(1);
if (g.result_html && hash) {
$(cont).html(g.result_html);
afterload();
}
$(".pagination").html(g.pagination);
if (b && g.min_price == g.max_price) {
$('.price_slider').hide();
}
var d = parseInt(g.min_price);
var c = Math.ceil(parseFloat(g.max_price));

if (typeof(display) != "undefined") {
view ? display(view) : display("list");
}
if (b) {
$("#slider-range").slider("option", {min:d, max:c});
if ($("#max_price").val() >= 1) {
d = parseInt($("#min_price").val());
c = parseInt($("#max_price").val())
}
$("#slider-range").slider("option", {values:[d, c]});
$("#min_price").val(d);
$("#max_price").val(c)
}
if (g.totals_data) {
if (g.totals_data.tags.length) {
$('#filter_tags').html('');
$.tmpl(tag_tmpl, g.totals_data.tags).appendTo('#filter_tags');
$('#filter_tags').parents('.option_box').show();
} else {
$('#filter_tags').parents('.option_box').hide();
}

$('#filter_categories').html('');
if (g.totals_data.categories.length) {
$.tmpl(cat_tmpl, g.totals_data.categories).appendTo('#filter_categories');
$('#filter_categories').parents('.option_box').show();
} else {
$('#filter_categories').parents('.option_box').hide();
}

var atts = {};
$.each(g.totals_data.attributes, function(k, v) {
atts[(v.id + "_" + v.text).replace(/\s/g, '_')] = v.t;
});

$('.a_name').each(function (k, v) {
var at_v_i = $(v).attr('at_v_i').replace(/\s/g, '_');
var at_v_i_e = escapeHtml(at_v_i);
if (atts[at_v_i]) {
$('[at_v_t="' + at_v_i_e + '"]').text($('[at_v_t="' + at_v_i_e + '"]').attr('data-value') + " (" + atts[at_v_i] + ")");
$(v).removeAttr("disabled");
} else {
$('[at_v_t="' + at_v_i_e + '"]').text($('[at_v_t="' + at_v_i_e + '"]').attr('data-value'));
$(v).attr("disabled", "disabled");
$(v).removeAttr('checked');
$(v).removeAttr(':selected');
}
});

var h = [];
$.each(g.totals_data.manufacturers, function (f, k) {
if (k.id) {
h[h.length] = k.id;
var j = $("#manufacturer_" + k.id);
j.removeAttr("disabled");
if (j.get(0).tagName == "OPTION") {
j.text($("#m_" + k.id).val() + " (" + k.t + ")")
} else {
$('label[for="manufacturer_' + k.id + '"]').text($("#m_" + k.id).val() + " (" + k.t + ")")
}
}
});
$(".manufacturer_value").each(function (f, k) {
var j = $(this);
var l = j.attr("id").match(/manufacturer_(\d+)/);
if ($.inArray(l[1], h) < 0) {
j.attr("disabled", "disabled");
if (this.tagName == "OPTION") {
j.text($("#m_" + l[1]).val());
j.prop("selected", false)
} else {
$('label[for="manufacturer_' + l[1] + '"]').text($("#m_" + l[1]).val());
j.prop("checked", false)
}
}
});
var e = [];
$.each(g.totals_data.options, function (j, k) {
if (k.id) {
e[e.length] = k.id;
var f = $("#option_value_" + k.id);
if (f.length) {
f.removeAttr("disabled");
if (f.get(0).tagName == "OPTION") {
f.text($("#o_" + k.id).val() + " (" + k.t + ")")
} else {
$('label[for="option_value_' + k.id + '"]').text($("#o_" + k.id).val() + " (" + k.t + ")")
}
}
}
});
$(".option_value").each(function (j, k) {
var f = $(this);
var l = f.attr("id").match(/option_value_(\d+)/);
if ($.inArray(l[1], e) < 0) {
f.attr("disabled", "disabled");
if (this.tagName == "OPTION") {
f.text($("#o_" + l[1]).val());
f.attr("selected", false)
} else {
$('label[for="option_value_' + l[1] + '"]').text($("#o_" + l[1]).val());
f.attr("checked", false)
}
}
})
}
}
var cache = [];
function doFilter(b) {
var a = $("#filterpro").serialize().replace(/[^&]+=\.?(?:&|$)/g, "").replace(/&+$/, "");
if (!b) {
window.location.hash = a
}
var h = a.hashCode();
if (cache[h]){
success(cache[h]);
} else {
if ($cookie){
var view = $cookie("display");
}
if (!view) {
view = "list";
}
var cont = container.replace('{view}', view);

$(cont).mask();
$(".filterpro").mask();

$.ajax({url:"index.php?route=module/filterpro/getproducts", type:"POST", data:a + (b ? "&getPriceLimits=true" : ""), dataType:"json",
success:function (g) {
success(g, b);
cache[h] = g;
$(cont).unmask();
$(".filterpro").unmask();
}});
}
}
$(document).ready(function () {
container = $('#filterpro_container').val();
if ($.totalStorage!=undefined){
$cookie = $.totalStorage;
} else if ($.cookie != undefined){
$cookie = $.cookie;
}

$(".option_box .option_name").click(function () {
$(this).siblings(".collapsible").toggle();
$(this).toggleClass("hided")
});
$(".option_box .attribute_group_name").click(function () {
$(this).siblings(".attribute_box").toggle();
$(this).toggleClass("hided")
});
$(".clear_filter").click(function () {
$("#filterpro img").removeClass("selected");
$("#filterpro select").val("");
$("#filterpro :input").each(function () {
if ($(this).is(":checked")) {
$(this).attr("checked", false)
}
});
var b = $("#slider-range").slider("option", "min");
var a = $("#slider-range").slider("option", "max");
$("#slider-range").slider("option", {values:[b, a]});
$("#min_price").val(b);
$("#max_price").val(a);
$("div[id^=slider-range-]").each(function(index, element) {
var id = this.id.replace(/[^\d]/g, '');

var b = $(element).slider("option", "min");
var a = $(element).slider("option", "max");

hs = $(element).slider();
hs.slider("option", {values:[b, a]});
hs.slider("option","slide").call(hs, null, { handle: $(".ui-slider-handle", hs), values:[b, a] });

$("#attribute_value_"+id+"_min").val('');
$("#attribute_value_"+id+"_max").val('');

});
iF()
});
$(".pagination .links a").live("click", (function () {
var a = $(this).attr("href");
var b = a.match(/page=(\d+)/);
$("#filterpro_page").val(b[1]);
doFilter(false);
$('html, body').animate({ scrollTop: $('.product-filter').offset().top }, 'slow');
return false;
}));

if($(".sort select").length){
$(".sort select").get(0).onchange = null;
$(".sort select").change(function () {
var d = $(this).val();
var a = gUV(d, "sort");
var b = gUV(d, "order");
$("#filterpro_sort").val(a);
$("#filterpro_order").val(b);
iF()
});
}

if ($(".limit select").length) {
$(".limit select").get(0).onchange = null;
$(".limit select").change(function () {
$("#filterpro_limit").val(gUV($(this).val(), "limit"));
iF()
});
}

// deserialize
var hash = window.location.hash.substr(1);
if (hash && $('instock').is(':visible') && $('instock').is(':checked')) {
$('instock').attr("checked", false);
}
$("#filterpro").deserialize(hash);

synchronizeImgCheckboxes();

$("#filterpro img").bind("click", function() {
var $input = $(this).prev("input");
if ($input.attr("disabled")) {
return;
}
$(this).toggleClass("selected");
$input.prop('checked', !$input.prop('checked'));
iF();
});


$("div[id^=slider-range-]").each(function(index, element) {
var id = this.id.replace(/[^\d]/g, '');
var arr = window['attr_arr_'+id];

var b = parseInt($("#attribute_value_"+id+"_min").val());
var a = parseInt($("#attribute_value_"+id+"_max").val());
b = arr.indexOf(b);
a = arr.indexOf(a);
if (a >= 0 && b >= 0){
hs = $(element).slider();
hs.slider("option", {values:[b, a]});
hs.slider("option","slide").call(hs, null, { handle: $(".ui-slider-handle", hs), values:[b, a] });
}
});

if ($(".sort select").length) {
if ($("#filterpro_sort").val()) {
$(".sort select").each(function(i, e) {
if (gUV($(this).val(), "sort") == $("#filterpro_sort").val() && gUV($(this).val(), "order") == $("#filterpro_order").val()) {
$(".sort select").val($(this).val());
return;
}
});
} else {
$val = $(".sort select").val();
$("#filterpro_sort").val(gUV($val, "sort"));
$("#filterpro_order").val(gUV($val, "order"))
}
}
if ($("#filterpro_limit").length) {
if ($("#filterpro_limit").val()) {
$(".limit select").val($("#filterpro_limit").val());
} else {
$("#filterpro_limit").val(gUV($(".limit select").val(), "limit"));
}
}
doFilter(true)
});
function gUV(e,f){var c=String(e).split("?");var a="";if(c[1]){var b=c[1].split("&");for(var g=0;g<=(b.length);g++){if(b[g]){var d=b[g].split("=");if(d[0]&&d[0]==f){a=d[1]}}}}return a}