| 42 |
lars |
1 |
<link rel="stylesheet" href="/styles/jquery-ui.css" type="text/css" media="screen" />
|
|
|
2 |
<style>
|
|
|
3 |
.dd-selected-image{
|
|
|
4 |
height:27px;
|
|
|
5 |
}
|
|
|
6 |
.dd-selected-text{
|
|
|
7 |
line-height:0px;
|
|
|
8 |
}
|
|
|
9 |
.filter_elem_range {
|
|
|
10 |
border: 1px solid #ccc;
|
|
|
11 |
float: left;
|
|
|
12 |
margin: 5px;
|
|
|
13 |
min-height: 55px;
|
|
|
14 |
padding: 8px !important;
|
|
|
15 |
width: 20%;
|
|
|
16 |
}
|
|
|
17 |
|
|
|
18 |
.divh{
|
|
|
19 |
width: 100%;
|
|
|
20 |
padding-bottom: 1px;
|
|
|
21 |
float:left;
|
|
|
22 |
|
|
|
23 |
}
|
|
|
24 |
.brandbox {
|
|
|
25 |
border-right: 1px solid #a0a0a0;
|
|
|
26 |
border-left: 1px solid #a0a0a0;
|
|
|
27 |
border-top: 1px solid #a0a0a0;
|
|
|
28 |
border-bottom: 1px solid #a0a0a0;
|
|
|
29 |
float: left;
|
|
|
30 |
margin: 0;
|
|
|
31 |
min-height: 108px;
|
|
|
32 |
padding: 6px 4px;
|
|
|
33 |
|
|
|
34 |
width: 106px;
|
|
|
35 |
margin: 10px 0 0 10px;
|
|
|
36 |
}
|
|
|
37 |
.brandlogo {
|
|
|
38 |
min-height: 88px;
|
|
|
39 |
text-align: center;
|
|
|
40 |
}
|
|
|
41 |
.brandlogo img {
|
|
|
42 |
cursor: pointer;
|
|
|
43 |
max-height: 85px;
|
|
|
44 |
max-width: 100px;
|
|
|
45 |
}
|
|
|
46 |
.brandbox input {
|
|
|
47 |
height: 14px;
|
|
|
48 |
line-height: 14px;
|
|
|
49 |
margin: 2px 5px 0 0;
|
|
|
50 |
padding: 0;
|
|
|
51 |
float:left;
|
|
|
52 |
}
|
|
|
53 |
.brandbox span.amount {
|
|
|
54 |
width:30px;
|
|
|
55 |
float:left;
|
|
|
56 |
}
|
|
|
57 |
</style>
|
|
|
58 |
|
|
|
59 |
<input type="button" id="atoggle" value="weitere Filter" class="resetbutton ui-button ui-widget ui-state-default ui-corner-all" />
|
|
|
60 |
<input type="reset" value="Felder zurücksetzen" class="resetbutton ui-button ui-widget ui-state-default ui-corner-all" />
|
|
|
61 |
<input type="hidden" value="0" name="filterstatus" id="filterstatus"/>
|
|
|
62 |
|
|
|
63 |
<div class="divh">
|
|
|
64 |
{foreach $herstellercheckbox as $row}
|
|
|
65 |
<div title="{$row['Name']}" class="brandbox">
|
|
|
66 |
<div class="brandlogo">
|
|
|
67 |
<img data-labelfor="hersteller_{$row['ID']}" src="{$row['Logo1_href']}{$row['Logo1']}">
|
|
|
68 |
</div>
|
|
|
69 |
<input id="hersteller_{$row['ID']}" type="checkbox" name="hersteller[]" value="{$row['ID']}" {if $row['selected'] == 1}checked{/if}/>
|
|
|
70 |
<span class="amount left fs11">({$row['anzahlItems']})</span>
|
|
|
71 |
</div>
|
|
|
72 |
{/foreach}
|
|
|
73 |
<input type="hidden" name="chkboxhersteller" id="chkboxhersteller" value="1">
|
|
|
74 |
</div>
|
|
|
75 |
|
|
|
76 |
<div class="options_select" >
|
|
|
77 |
<div style="float:none;padding-bottom:13px;">
|
|
|
78 |
<label style="float:left"><b>Preis:</b></label>
|
|
|
79 |
<b style="float:left"><span id="preise"></span></b><span><b> €</b></span>
|
|
|
80 |
</div>
|
|
|
81 |
<input type="hidden" id="hpreise" name="hpreise">
|
|
|
82 |
<div id="hpreise-slider-range"></div>
|
|
|
83 |
</div>
|
|
|
84 |
{if isset($preisslider) }
|
|
|
85 |
{$pmax = $preisslider[1]}
|
|
|
86 |
{$pmin = $preisslider[0]}
|
|
|
87 |
{else}
|
|
|
88 |
{$pmax = $maxpreis}
|
|
|
89 |
{$pmin = 1}
|
|
|
90 |
{/if}
|
|
|
91 |
<script>
|
|
|
92 |
$(document).ready(function () {
|
|
|
93 |
$(function () {
|
|
|
94 |
$("#hpreise-slider-range").slider({
|
|
|
95 |
range: true,
|
|
|
96 |
min: 1,
|
|
|
97 |
max: {$maxpreis},
|
|
|
98 |
values: [{$pmin}, {$pmax}],
|
|
|
99 |
async: false,
|
|
|
100 |
slide: function (event, ui) {
|
|
|
101 |
$("#hpreise").val("preis_" + ui.values[ 0 ] + "_" + ui.values[ 1 ]);
|
|
|
102 |
$("#preise").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
|
|
|
103 |
},
|
|
|
104 |
stop: function (event, ui) {
|
|
|
105 |
showSubdirFilterResult("result");
|
|
|
106 |
refreshSubdirFilterFilter("select");
|
|
|
107 |
}
|
|
|
108 |
});
|
|
|
109 |
$("#hpreise").val("preis_" + $("#hpreise-slider-range").slider("values", 0) +
|
|
|
110 |
"_" + $("#hpreise-slider-range").slider("values", 1));
|
|
|
111 |
$("#preise").html($("#hpreise-slider-range").slider("values", 0) +
|
|
|
112 |
" - " + $("#hpreise-slider-range").slider("values", 1));
|
|
|
113 |
});
|
|
|
114 |
});
|
|
|
115 |
</script>
|
|
|
116 |
|
|
|
117 |
<div id="divtoggle" class="divtoggle">
|
|
|
118 |
|
|
|
119 |
{foreach $dropdown_opts as $index => $data}
|
|
|
120 |
|
|
|
121 |
{foreach $data["options"] as $key => $values}
|
|
|
122 |
{$val = explode("_",$key)}
|
|
|
123 |
{$aus = $val[0]}
|
|
|
124 |
{$max = $val[2]}
|
|
|
125 |
{$min = $val[1]}
|
|
|
126 |
{/foreach}
|
|
|
127 |
|
|
|
128 |
{if (int)$min}
|
|
|
129 |
{if (int)$max}
|
|
|
130 |
|
|
|
131 |
{if isset($data["selected"]) }
|
|
|
132 |
{$sval = explode("_",$data["selected"])}
|
|
|
133 |
{$saus = $sval[0]}
|
|
|
134 |
{$max = $sval[2]}
|
|
|
135 |
{$min = $sval[1]}
|
|
|
136 |
{else}
|
|
|
137 |
|
|
|
138 |
{/if}
|
|
|
139 |
<div class="options_select">
|
|
|
140 |
<div style="float:none;padding-bottom:30px;">
|
|
|
141 |
<label style="float:left"><b>{$data["label"]}:</b></label>
|
|
|
142 |
{$res = str_replace(" ","",$data["label"])}
|
|
|
143 |
<b style="float:left"><span id="s{$res}"></span></b><span><b></b></span>
|
|
|
144 |
</div>
|
|
|
145 |
<input type="hidden" id="{$res}" name="{$data["label"]}">
|
|
|
146 |
<div id="{$res}-slider-range"></div>
|
|
|
147 |
</div>
|
|
|
148 |
<script>
|
|
|
149 |
$(document).ready(function () {
|
|
|
150 |
$(function () {
|
|
|
151 |
$("#{$res}-slider-range").slider({
|
|
|
152 |
range: true,
|
|
|
153 |
min: {0},
|
|
|
154 |
max: {50},
|
|
|
155 |
async: false,
|
|
|
156 |
values: [{$min}, {$max}],
|
|
|
157 |
slide: function (event, ui) {
|
|
|
158 |
$("#{$res}").val({$aus} + "_" + +ui.values[ 0 ] + "_" + ui.values[ 1 ]);
|
|
|
159 |
$("#s{$res}").html("" + ui.values[ 0 ] + " - " + ui.values[ 1 ]);
|
|
|
160 |
},
|
|
|
161 |
stop: function (event, ui) {
|
|
|
162 |
|
|
|
163 |
showSubdirFilterResult("result");
|
|
|
164 |
refreshSubdirFilterFilter("select");
|
|
|
165 |
}
|
|
|
166 |
});
|
|
|
167 |
$("#{$res}").val({$aus} + "_" + $("#{$res}-slider-range").slider("values", 0) +
|
|
|
168 |
"_" + $("#{$res}-slider-range").slider("values", 1));
|
|
|
169 |
$("#s{$res}").html("" + $("#{$res}-slider-range").slider("values", 0) +
|
|
|
170 |
" - " + $("#{$res}-slider-range").slider("values", 1));
|
|
|
171 |
});
|
|
|
172 |
});
|
|
|
173 |
</script>
|
|
|
174 |
{else}
|
|
|
175 |
{if isset($data["selected"]) }
|
|
|
176 |
{$sval = explode("_",$data["selected"])}
|
|
|
177 |
{$saus = $sval[0]}
|
|
|
178 |
{$max = $sval[2]}
|
|
|
179 |
{$amin = $sval[1]}
|
|
|
180 |
{$amax = $sval[1]}
|
|
|
181 |
{else}
|
|
|
182 |
{$amin = $min}
|
|
|
183 |
{$amax = $data['maxval']}
|
|
|
184 |
{/if}
|
|
|
185 |
{if $max == 'g'}
|
|
|
186 |
<div class="options_select">
|
|
|
187 |
<div style="float:none;padding-bottom:30px;">
|
|
|
188 |
<label style="float:left"><b>{$data["label"]}:</b></label>
|
|
|
189 |
{$res = str_replace(" ","",$data["label"])}
|
|
|
190 |
<b><span style="float:left" id="s{$res}"></span></b><span><b></b></span>
|
|
|
191 |
</div>
|
|
|
192 |
<input type="hidden" id="{$res}" name="{$data["label"]}">
|
|
|
193 |
<div id="{$res}-slider-range-min"></div>
|
|
|
194 |
</div>
|
|
|
195 |
<script>
|
|
|
196 |
$(function () {
|
|
|
197 |
$("#{$res}-slider-range-min").slider({
|
|
|
198 |
range: "min",
|
|
|
199 |
min: 0,
|
|
|
200 |
max: {$data['maxval']},
|
|
|
201 |
value: {$amax},
|
|
|
202 |
slide: function (event, ui) {
|
|
|
203 |
$("#{$res}").val({$aus} + '_' + ui.value + '_g');
|
|
|
204 |
$("#s{$res}").html(ui.value);
|
|
|
205 |
},
|
|
|
206 |
stop: function (event, ui) {
|
|
|
207 |
|
|
|
208 |
showSubdirFilterResult("result");
|
|
|
209 |
refreshSubdirFilterFilter("select");
|
|
|
210 |
}
|
|
|
211 |
});
|
|
|
212 |
$("#{$res}").val({$aus} + '_' + $("#{$res}-slider-range-min").slider("value") + '_g');
|
|
|
213 |
$("#s{$res}").html($("#{$res}-slider-range-min").slider("value"));
|
|
|
214 |
});
|
|
|
215 |
</script>
|
|
|
216 |
{else}
|
|
|
217 |
<div class="options_select">
|
|
|
218 |
<div style="float:none;padding-bottom:30px;">
|
|
|
219 |
<label style="float:left"><b>{$data["label"]}:</b></label>
|
|
|
220 |
{$res = str_replace(" ","",$data["label"])}
|
|
|
221 |
<b><span style="float:left" id="s{$res}"></span></b><span><b></b></span>
|
|
|
222 |
</div>
|
|
|
223 |
<input type="hidden" id="{$res}" name="{$data["label"]}">
|
|
|
224 |
<div id="{$res}-slider-range-max"></div>
|
|
|
225 |
</div>
|
|
|
226 |
<script>
|
|
|
227 |
$(function () {
|
|
|
228 |
$("#{$res}-slider-range-max").slider({
|
|
|
229 |
range: "max",
|
|
|
230 |
min: {$min},
|
|
|
231 |
max: 140,
|
|
|
232 |
value: {$amin},
|
|
|
233 |
slide: function (event, ui) {
|
|
|
234 |
$("#{$res}").val({$aus} + '_' + ui.value + '_l');
|
|
|
235 |
$("#s{$res}").html(ui.value);
|
|
|
236 |
},
|
|
|
237 |
stop: function (event, ui) {
|
|
|
238 |
|
|
|
239 |
showSubdirFilterResult("result");
|
|
|
240 |
refreshSubdirFilterFilter("select");
|
|
|
241 |
}
|
|
|
242 |
});
|
|
|
243 |
$("#{$res}").val({$aus} + '_' + $("#{$res}-slider-range-max").slider("value") + '_l');
|
|
|
244 |
$("#s{$res}").html($("#{$res}-slider-range-max").slider("value"));
|
|
|
245 |
});
|
|
|
246 |
</script>
|
|
|
247 |
{/if}
|
|
|
248 |
{/if}
|
|
|
249 |
{else}
|
|
|
250 |
{/if}
|
|
|
251 |
{/foreach}
|
|
|
252 |
{foreach $checkboxlist as $label => $value}
|
|
|
253 |
<div class="options_select">
|
|
|
254 |
<b>{$label}</b>
|
|
|
255 |
<div>
|
|
|
256 |
<div class="mehrFilter" style="display: block;">
|
|
|
257 |
{foreach $value as $row}
|
|
|
258 |
<div class="auspraegungsfilter">
|
|
|
259 |
<input id="{$row[0]}" type="checkbox" name="{$row[0]}" value="{$row[0]}" {if $row[2] == 1}checked{/if}/>
|
|
|
260 |
<label data-labelfor="{$row[0]}">{$row[1]}</label>
|
|
|
261 |
</div>
|
|
|
262 |
{/foreach}
|
|
|
263 |
</div>
|
|
|
264 |
</div>
|
|
|
265 |
</div>
|
|
|
266 |
{/foreach}
|
|
|
267 |
|
|
|
268 |
|
|
|
269 |
<script>
|
|
|
270 |
$(document).ready(function () {
|
|
|
271 |
var wWidth = $(window).width();
|
|
|
272 |
var dWidth = wWidth * 0.1;
|
|
|
273 |
var wHeight = $(window).height();
|
|
|
274 |
var dHeight = wHeight * 0.17;
|
|
|
275 |
$("#loading").dialog({
|
|
|
276 |
autoOpen: false,
|
|
|
277 |
width: 150,
|
|
|
278 |
height: 150
|
|
|
279 |
});
|
|
|
280 |
$(".ui-dialog-titlebar").hide();
|
|
|
281 |
var maxH = 0;
|
|
|
282 |
$('.optionsReload .options_select').each(function () {
|
|
|
283 |
var h = $(this).height();
|
|
|
284 |
if (h > maxH) {
|
|
|
285 |
maxH = h;
|
|
|
286 |
}
|
|
|
287 |
});
|
|
|
288 |
|
|
|
289 |
$('.optionsReload .options_select').css("min-height", "73px");
|
|
|
290 |
$('.optionsReload .options_select').css("height", maxH + "px");
|
|
|
291 |
/* $('#hersteller_dr').ddslick({
|
|
|
292 |
width: 200,
|
|
|
293 |
imagePosition: "right",
|
|
|
294 |
imageHeight: 20,
|
|
|
295 |
onSelected: function (selectedData) {
|
|
|
296 |
var al = $(".dd-selected-value").val();
|
|
|
297 |
$("#hersteller").val(al);
|
|
|
298 |
var mode = "result";
|
|
|
299 |
daten = $('#modellForm').serializeArray();
|
|
|
300 |
$.ajax({
|
|
|
301 |
type: "POST",
|
|
|
302 |
url: "/module/artikelmodell.php?mode=" + mode,
|
|
|
303 |
data: daten,
|
|
|
304 |
async: false,
|
|
|
305 |
success: function (html) {
|
|
|
306 |
if (mode == "result") {
|
|
|
307 |
$(".pagination_container").css("display", "none");
|
|
|
308 |
$('.subdir_artikel').html(html);
|
|
|
309 |
$(".subdir_artikel").css("background-color", "transparent");
|
|
|
310 |
$(".loader").hide();
|
|
|
311 |
$(".newsorting").css("display", "block");
|
|
|
312 |
}
|
|
|
313 |
}
|
|
|
314 |
})
|
|
|
315 |
}
|
|
|
316 |
});*/
|
|
|
317 |
$("#atoggle").click(function () {
|
|
|
318 |
$("#divtoggle").toggle();
|
|
|
319 |
if (!$("#divtoggle").is(':visible')) {
|
|
|
320 |
$(this).val("weitere Filter");
|
|
|
321 |
$("#filterstatus").val(0);
|
|
|
322 |
} else {
|
|
|
323 |
$(this).val("weniger Filter");
|
|
|
324 |
$("#filterstatus").val(1);
|
|
|
325 |
}
|
|
|
326 |
return false;
|
|
|
327 |
})
|
|
|
328 |
|
|
|
329 |
{if isset($filterstatus) && $filterstatus == 1}
|
|
|
330 |
$("#divtoggle").show();
|
|
|
331 |
$("#filterstatus").val(1);
|
|
|
332 |
$("#atoggle").val("weniger Filter");
|
|
|
333 |
|
|
|
334 |
{else}
|
|
|
335 |
|
|
|
336 |
$("#divtoggle").hide();
|
|
|
337 |
$("#filterstatus").val(0);
|
|
|
338 |
$("#atoggle").val("weitere Filter");
|
|
|
339 |
{/if}
|
|
|
340 |
|
|
|
341 |
$("[data-labelfor]").click(function () {
|
|
|
342 |
$('#' + $(this).attr("data-labelfor")).prop('checked',
|
|
|
343 |
function (i, oldVal) {
|
|
|
344 |
return !oldVal;
|
|
|
345 |
});
|
|
|
346 |
showSubdirFilterResult("result");
|
|
|
347 |
refreshSubdirFilterFilter("select");
|
|
|
348 |
});
|
|
|
349 |
|
|
|
350 |
|
|
|
351 |
});
|
|
|
352 |
function showSubdirFilterResult(mode)
|
|
|
353 |
{
|
|
|
354 |
$("#loading").dialog('open');
|
|
|
355 |
daten = $('#modellForm').serializeArray();
|
|
|
356 |
setTimeout(function () {
|
|
|
357 |
$.ajax({
|
|
|
358 |
type: "POST",
|
|
|
359 |
url: "/module/artikelmodell.php?mode=" + mode,
|
|
|
360 |
data: daten,
|
|
|
361 |
async: false,
|
|
|
362 |
success: function (html) {
|
|
|
363 |
if (mode == "result") {
|
|
|
364 |
$(".pagination_container").css("display", "none");
|
|
|
365 |
$('.subdir_artikel').html(html);
|
|
|
366 |
$(".subdir_artikel").css("background-color", "transparent");
|
|
|
367 |
|
|
|
368 |
$(".newsorting").css("display", "block");
|
|
|
369 |
}
|
|
|
370 |
}
|
|
|
371 |
})
|
|
|
372 |
}, 1);
|
|
|
373 |
}
|
|
|
374 |
|
|
|
375 |
function refreshSubdirFilterFilter(mode) {
|
|
|
376 |
|
|
|
377 |
daten = $('#modellForm').serializeArray();
|
|
|
378 |
$.ajax({
|
|
|
379 |
type: "POST",
|
|
|
380 |
url: "/module/updateSearchFilterSubdir.php?mode=" + mode,
|
|
|
381 |
data: daten,
|
|
|
382 |
async: false,
|
|
|
383 |
beforeSend: function () {
|
|
|
384 |
$(".box_2").css("background-color", "transparent");
|
|
|
385 |
$(".subdir_artikel").css("background-color", "#ccc");
|
|
|
386 |
|
|
|
387 |
},
|
|
|
388 |
success: function (html) {
|
|
|
389 |
|
|
|
390 |
setTimeout(function () {
|
|
|
391 |
$('#loading').dialog('close');
|
|
|
392 |
}, 1);
|
|
|
393 |
|
|
|
394 |
}
|
|
|
395 |
})
|
|
|
396 |
return true;
|
|
|
397 |
}
|
|
|
398 |
</script>
|
|
|
399 |
<div id="loading" title="">
|
|
|
400 |
<img src="/images/webelemente/loading.gif" />
|
|
|
401 |
</div>
|