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
Im Array "delete" speichere ich dann die Farbe und Grösse die ausverkauft sind (Zahlen Wert 0 haben)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";
}
?>
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:
Danach habe ich eine "delete" funktion erstellt, die alle Optionen der Selects ausblendet, welche nicht mehr vorhanden sind.Code:var ar = <?php echo json_encode($delete) ?>;
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)
Wenn nun die oberste Option ausgeblendet ist, so soll die 2. oberste als "selected" gewählt werdenCode: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 der Select geändert wird, so muss die Funktion erneut ausgeführt werdenCode:// 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();
Damit nun nicht bestellt werden kann, blende ich den Button aus wenn die Farben aller Grössen ausverkauft sind.Code:s_color.change(function() { delete_stock(); });
Ich hoffe es ist einigermassen verständlich und Hilft irgendjemandem weiterPHP-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; ?>
---------------------------------------------------------------------------------------------------------------
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

)
Zitieren

