Stocklist / Lagerverwaltung bei Isotope
Hallo zusammen,
Da ich bei Isotope keine Möglichkeit gefunden habe, um die Anzahl vorhandener Produkte hinzuzufügen, versuche ich eine alternative zu finden.
Damit es vorübergehend möglich ist Stückzahlen anzugeben, habe ich versucht das Problem mit Javascript folgendermassen zu lösen:
Die Stückzahl wird bei den Produkten im Teaser eingetragen.
Dazu habe ich für Farbe: schwarz, Grösse: L , Anzahl:10 die abkürzung bl10
Die einzelnen Farben und Grössen habe ich mit "," getrennt z.B.: bs6,bm8,bl10
Nun lese ich im Template den Teaser aus und merke in $farbe welche Farbe betroffen ist
PHP-Code:
<!-- Stock List -->
<?php $array = explode(",",$this->teaser);
$global_stock_counter = 0;
$delete = array();
$count_sold_out = 0; //zählt die Anzahl der sold outs
foreach ($array as $el) {
$zahlen = strpbrk($el, '0123456789');
$attr = substr($el, 0,-strlen($zahlen));
$farbe = substr($attr,0,1);
$groesse = substr($attr, 1);
$global_stock_counter += $zahlen;
if ($farbe == "w") {
$farbe = "white";
} else if ($farbe == "g") {
$farbe = "grey";
} else if ($farbe == "b"){
$farbe = "black";
} else if ($farbe == "r") {
$farbe = "red";
} else if ($farbe == "g") {
$farbe = "green";
} else if ($farbe == "b") {
$farbe = "blue";
} else if ($farbe == "n") {
$farbe = "none";
}
?>
Im Array "delete" speichere ich dann die Farbe und Grösse die ausverkauft sind (Zahlen Wert 0 haben)
PHP-Code:
if ($zahlen <= 0) {
//array für javascript füllen
$delete[$count_sold_out][color] = array($farbe);
$delete[$count_sold_out][size] = array($groesse);
$count_sold_out++;
}
}
Danach greife ich per jQuery auf den Array zu:
Code:
var ar = <?php echo json_encode($delete) ?>;
Danach habe ich eine "delete" funktion erstellt, die alle Optionen der Selects ausblendet, welche nicht mehr vorhanden sind.
Wenn für eine Grösse keine Farben mehr vorhanden sind soll die Grösse auch nicht mehr angezeigt werden.
Das ganze ist mit "display:none" gelöst.. (wahrscheinlich verbesserungswürdig :D )
Code:
var anzahl_sold_out = ar.length; // not shure why i need this but i think i do
var select = J('select'); //select the selects and its options
var s_color = J(select[0]);
var s_size = J(select[1]);
var o_color = s_color.find('option');
var o_size = s_size.find('option');
var deleteded = false;
//create the function to "delete" sizes which are not in stock
function delete_stock() {
jQuery.each(o_size, function() {
J(this).css('display','block');
});
var x = 0;
while(x!=anzahl_sold_out) {
jQuery.each(s_color, function() {
//option farbe = delte farbe
//durchlaufe color
if(J(this).val().toLowerCase() == ar[x]['color']) {
var options_in_select = 0;
var not_displayed = 0;
jQuery.each(o_size, function() {
options_in_select++
//option groesse = delete groesse
if(J(this).val().toLowerCase() == ar[x]['size']) {
J(this).css('display','none');
not_displayed++;
}
// color löschen wenn keine elemente
if((options_in_select - not_displayed) == 0) {
console.log("all deleted: "+ar[x]['color']);
jQuery.each(o_color, function() {
if (J(this).val().toLowerCase() == ar[x]['color']) {
J(this).css('display','none');
}
});
} /*else { // sonst wieder anzeigen
jQuery.each(o_color, function() {
if (J(this).val().toLowerCase() == ar[x]['color']) {
J(this).css('display','block');
}
});
}*/
});
}
x++;
});
}
Wenn nun die oberste Option ausgeblendet ist, so soll die 2. oberste als "selected" gewählt werden
Code:
// wenn farbe zu oberst, selectiere nächste
jQuery.each(o_color, function() {
if (J(this).css('display')=='none') {
J(this).removeAttr('selected');
J(this).next().prop('selected','true');
}
if(deleteded == false) {
deleteded = true;
//first time, call the function
delete_stock();
}
});
//wenn size zu oberst, selectiere nächste
jQuery.each(o_size, function() {
if (J(this).css('display')=='none') {
J(this).removeAttr('selected');
J(this).next().prop('selected',true);
}
});
}
//funktion ausführen
delete_stock();
Wenn der Select geändert wird, so muss die Funktion erneut ausgeführt werden
Code:
s_color.change(function() {
delete_stock();
});
Damit nun nicht bestellt werden kann, blende ich den Button aus wenn die Farben aller Grössen ausverkauft sind.
PHP-Code:
<?php if($global_stock_counter <= 0): ?>
<span class="quantity sold-out">product sold out</span><br />
<?php else: ?>
<?php foreach( $this->buttons as $name => $button ): ?>
<input type="submit" class="submit <?php echo $name; ?>" name="<?php echo $name; ?>" value="<?php echo $button['label']; ?>">
<?php endforeach; ?>
<?php endif; ?>
Ich hoffe es ist einigermassen verständlich und Hilft irgendjemandem weiter :D
---------------------------------------------------------------------------------------------------------------
Nun aber noch eine Fragen an alle die sich mit jQuery und Smartphones auskennen..
Die oben gezeigte Funktion funktioniert auf dem Desktop PC. Auf dem Smartphone werden die optionen der Selects jedoch nicht ausgeblendet..
Hat jemand eine Idee wieso dies sein könnte? Ist es vielleicht wegen dem "display:none"?
Vielen Dank und FG
Kajetan
