Produktvarianten als Dropdown Auswahl
Moderatoren: maennchen1.de, wpShopGermany Moderator
Produktvarianten als Dropdown Auswahl
Hallo zusammen!
Ich bin gerade am erstellen eines Shops für Schmuck. Nun gibt es für Ringe ja verschiedene Größen.
Hier würde ich gern die Produktvarianten (also die verschiedenen Größen) als eine Dropdown-Auswahlliste darstellen und nicht mit Radiobuttons.
Nun habe ich im Produkttemplate schon den type geändert auf "select" bzw. "checkbox" zum testen. Leider ohne großen Erfolg.
Wäre mein Vorhaben überhaupt möglich, wenn ja wie und wo?
Sonnige Grüße,
Kevin
Ich bin gerade am erstellen eines Shops für Schmuck. Nun gibt es für Ringe ja verschiedene Größen.
Hier würde ich gern die Produktvarianten (also die verschiedenen Größen) als eine Dropdown-Auswahlliste darstellen und nicht mit Radiobuttons.
Nun habe ich im Produkttemplate schon den type geändert auf "select" bzw. "checkbox" zum testen. Leider ohne großen Erfolg.
Wäre mein Vorhaben überhaupt möglich, wenn ja wie und wo?
Sonnige Grüße,
Kevin
garnett mit tt
nicht mit t
nicht mit ttt
nicht mit t
nicht mit ttt
Re: Produktvarianten als Dropdown Auswahl
niemand eine idee?
garnett mit tt
nicht mit t
nicht mit ttt
nicht mit t
nicht mit ttt
Re: Produktvarianten als Dropdown Auswahl
Hinter dem Produkttemplate hängt ja noch Javascript. Daher reicht es nicht aus, wenn Du nur das Template änderst. Im Ordner js müsste eigentlich die Funktion liegen. Kannst es ja mal versuchen. Ich finde eine Box als Alternative auch interessant. Wäre jedenfalls eine schöne Anpassung.
Gruß, Mike
Gruß, Mike
Tipps und Tricks rund um wpShopGermany: www.my-blog-shop.de
Re: Produktvarianten als Dropdown Auswahl
also ich habe mal in den js-ordner geschaut und denke das wpshopgermany.js die richtige datei ist.
darin dürfte uns wohl dieser abschnitt interessieren:
habe schon etwas rumgeprobiert, allerdings komm ich nicht zum gewünschten ergebnis, mir fehlen einfach die js-kenntnisse
zudem scheint es nicht zu reichen, die änderungen in der wpshopgermany.js datei durchzuführen. damit allein passiert noch gar nichts. man muss wohl noch zusätzlich im template-editor hand anlegen.
darin dürfte uns wohl dieser abschnitt interessieren:
Code: Alles auswählen
var arRadio = jQuery("form[name='produkt_" + p_id + "'] input[type='radio']:checked);
return arRadio.val();
zudem scheint es nicht zu reichen, die änderungen in der wpshopgermany.js datei durchzuführen. damit allein passiert noch gar nichts. man muss wohl noch zusätzlich im template-editor hand anlegen.
garnett mit tt
nicht mit t
nicht mit ttt
nicht mit t
nicht mit ttt
Re: Produktvarianten als Dropdown Auswahl
Hallo,
ich habe hier mal eine Lösung die meiner Meineung nach funktioniert. In der wpshopgermany.js müsst ihr eine neue Funktion zum Vari switchen einfügen, meine sieht so aus:
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
anschließend kopiert ihr das Standard- Produkttemplate unter einem neuen Namen und fügt den folgenden Inhalt ein
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
zum Schluss müsst ihr natürlich des neue Template den Produkten noch zuordnen, fertig
Gruß dgrrgn
ich habe hier mal eine Lösung die meiner Meineung nach funktioniert. In der wpshopgermany.js müsst ihr eine neue Funktion zum Vari switchen einfügen, meine sieht so aus:
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Code: Alles auswählen
newswitchVari = function(p_id, v_id) {
if (jQuery("#preis_" + p_id) == null) return;
var var_class = jQuery("#select_" + p_id + " option:selected").attr("class");
var var_preis = var_class.split("|")[0];
var var_weight = var_class.split("|")[1];
var var_stock = var_class.split("|")[2];
jQuery("#preis_" + p_id).html( number_format(getFloat(jQuery("#gp_" + p_id).html()) + getFloat(jQuery("#select_" + p_id + " option:selected").attr("class")), 2, ',', '.') );
if (jQuery("#stock_" + p_id) != null)
{
jQuery("#stock_" + p_id).html(var_stock);
}
if (jQuery("#weight_" + p_id) != null && var_weight != null)
{
jQuery("#weight_" + p_id).html( number_format(getFloat(jQuery("#weight_gp_" + p_id).html()) + getFloat(jQuery("#var_weight_" + v_id).html()), 2, ',', '.') );
}
}
anschließend kopiert ihr das Standard- Produkttemplate unter einem neuen Namen und fügt den folgenden Inhalt ein
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Code: Alles auswählen
<span class="wpshopgermany">
<div class="wpshopgermany_produkt">
<!-- Versteckter Grundpreis für die Javascript Berechnung des Variantenpreises -->
<span style="display:none;" id="weight_gp_###p_id###">###mod_weight###</span>
<div class="name">###name###</div>
<div class="beschreibung">###beschreibung###</div>
<div class="price">
Stückpreis: <span style="font-weight:bold;"><span id="preis_###p_id###">###preis###</span> ###wahrung###</span><br />
###gp_start###Grundpreis: <span id="gp_###p_id###">###preis###</span> ###wahrung###<br />###gp_end###
###mod_stock_start###Lagerbestand: <span id="stock_###p_id###">###mod_stock###</span><br />###mod_stock_end###
###weight_start###Gewicht: <span id="weight_###p_id###">###mod_weight###</span>###mod_weight_unit###<br />###weight_end###
###fmenge_start###Füllmenge: ###fmenge######feinheit### (###gpreis######wahrung###/###fbasis######feinheit###) <br />###fmenge_end###
<span class="zusatz">(inkl. ###mwst_value###% Mwst. und zzgl. <a href="###link_vk###">Versandkosten</a>)</span>
</div>
<div class="weight">Gewicht: ###mod_weight### ###mod_weight_unit###</div>
<div class="wpshopgermany_vari"><select id="select_###p_id###" name="vari">###mod_vari###</select>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("select").each(function()
{
if(jQuery(this).find("option").length < 1)
{
jQuery(this).remove();
}
});
//schaltet die Var. Preise um
if(typeof newswitchVari == 'function')
{
newswitchVari(###p_id###, jQuery("#select_###p_id####").val());
}
});
</script>
</div>
<div class="image">###bild###</div>
###menge_start###
<div class="amount">Menge: <input type="text" name="menge" value="1" size="5"/></div>
###menge_end###
<input class="wpshopgermany_submit_basket" type="submit" name="submit_basket" value="Zum Warenkorb hinzufügen"/>
<div class="clear"></div>
</div>
</span>
###varianten_start###
<option class="###var_preis###|###var_weight###|###var_stock###" style="margin-bottom:2px;" onclick="newswitchVari(###p_id###, ###var_id###);" value="###var_id###">
###var_name###
(
<span id="var_preis_###var_id###">###var_preis###</span>###wahrung###
###weight_start###/ <span id="var_weight_###var_id###">###var_weight###</span>###mod_weight_unit### ###weight_end###
###mod_stock_start###/ Lagerbestand: <span id="var_stock_###var_id###">###var_stock###</span>###mod_stock_end###
)
</option>
###varianten_end###
zum Schluss müsst ihr natürlich des neue Template den Produkten noch zuordnen, fertig
Gruß dgrrgn
Re: Produktvarianten als Dropdown Auswahl
schaut gut aus, funktioniert soweit bei mir!
vielen dank!
vielen dank!
garnett mit tt
nicht mit t
nicht mit ttt
nicht mit t
nicht mit ttt
Re: Produktvarianten als Dropdown Auswahl
Herzlich willkommen und BRAVO!
Der erste Beitrag und gleich eine fertige Anpassung! Ich hab's grob getestet, scheint alles zu funktionieren. Weiter so! Wir brauchen mehr von Deiner Sorte!
Gruß, Mike
Der erste Beitrag und gleich eine fertige Anpassung! Ich hab's grob getestet, scheint alles zu funktionieren. Weiter so! Wir brauchen mehr von Deiner Sorte!
Gruß, Mike
Tipps und Tricks rund um wpShopGermany: www.my-blog-shop.de
Re: Produktvarianten als Dropdown Auswahl
ehm, da ich jetzt version 2.0.1 einsetze funktioniert natürlich die tolle auswahlbox nicht mehr
habe mich zwar gerade daran versucht, das ganze anzupassen aber ich scheitere kläglich.
könnte mich das jemand machen?
oder was auch möglich wäre.
das die varianten in blöcke mit jeweils 3 auswahlfeldern aufgeteilt werden und die blöcke nebeneinander stehen. sollte wohl reines css sein aber ich bekomms ums verrecken nicht hin ;(
bsp:
Vari 1 vari 4
vari 2 vari 5
vari 3 vari 6
mein ansatz wäre, zwei div container anlegen und die mit float:left nebeneinander bringen. dann werden aber immernoch in beiden containern alle vari-möglichkeiten aufgelistet.
vielen dank für hilfe
gruß garnett
habe mich zwar gerade daran versucht, das ganze anzupassen aber ich scheitere kläglich.
könnte mich das jemand machen?
oder was auch möglich wäre.
das die varianten in blöcke mit jeweils 3 auswahlfeldern aufgeteilt werden und die blöcke nebeneinander stehen. sollte wohl reines css sein aber ich bekomms ums verrecken nicht hin ;(
bsp:
Vari 1 vari 4
vari 2 vari 5
vari 3 vari 6
mein ansatz wäre, zwei div container anlegen und die mit float:left nebeneinander bringen. dann werden aber immernoch in beiden containern alle vari-möglichkeiten aufgelistet.
vielen dank für hilfe
gruß garnett
garnett mit tt
nicht mit t
nicht mit ttt
nicht mit t
nicht mit ttt
Re: Produktvarianten als Dropdown Auswahl
Hallo, hier eine mögliche Version zum Darstellen der Produktvarianten als Drop-Down Menü ab "wpshopversion 2.0.0" (neues Templatesystem)
Ihr solltet dazu das orginal Template "standard.phtml" in den Ordner "user_views/templates/produkt/standard.phtml" kopieren. (Ordner bei Bedarf anlegen) Auf diese Art und Weise bleiben die Orginaltemplates unverändert als "Rettungsanker" vorhanden.
anschließend den Bereich (ab ca Zeile 59 bis ca Zeile 71)
durch den folgenden Code ersetzen
Hab's auf die Schnelle mal probiert, scheint zu funktionieren... viel Spass
Gruß dgrrgn
Ihr solltet dazu das orginal Template "standard.phtml" in den Ordner "user_views/templates/produkt/standard.phtml" kopieren. (Ordner bei Bedarf anlegen) Auf diese Art und Weise bleiben die Orginaltemplates unverändert als "Rettungsanker" vorhanden.
anschließend den Bereich (ab ca Zeile 59 bis ca Zeile 71)
Code: Alles auswählen
<?php if (is_array($this->data["mod_varianten"]) && sizeof($this->data["mod_varianten"]) > 0) { ?>
<div class="wpshopgermany_vari">
<?php $iv = 0; foreach ($this->data["mod_varianten"] as $v_id => $v) { $iv ++; ?>
<label class="wpsg_vari_label">
<input <?php echo (($iv == 1)?"checked='checked'":""); ?> onclick="switchVari(<?php echo $this->data['p_id']; ?>, <?php echo $v_id; ?>);" type="radio" name="vari" value="<?php echo $v_id; ?>" /><?php echo $v["name"]; ?>
/ <span id="var_preis_<?php echo $v_id; ?>"><?php echo number_format($v["preis"], 2, ',', '.'); ?> <?php echo $this->data["wahrung"]; ?></span>
<?php if (array_key_exists("mod_weight", $this->mods)) { ?>/ <span id="var_weight_<?php echo $v_id; ?>"><?php echo $v["weight"]; ?></span><?php echo $this->data["mod_weight"]["unit"]; ?><?php } ?>
<?php if (array_key_exists("mod_stock", $this->mods)) { ?><?php echo __("Lagerbestand", "wpsg"); ?>: <span id="var_stock_<?php echo $v_id; ?>"><?php echo $v["stock"]; ?></span><?php } ?>
</label><br />
<?php if ($iv == 1) { ?><script type="text/javascript"> switchVari(<?php echo $this->data["p_id"]; ?>, <?php echo $v_id; ?>); </script><?php } ?>
<?php } ?>
</div>
<?php } ?>
Code: Alles auswählen
<?php if (is_array($this->data["mod_varianten"]) && sizeof($this->data["mod_varianten"]) > 0) { ?>
<div class="wpshopgermany_vari">
<label class="wpsg_vari_label">
<select name="vari">
<?php $iv = 0; foreach ($this->data["mod_varianten"] as $v_id => $v) { $iv ++; ?>
<option value="<?php echo $v_id; ?>"><?php echo $v["name"].' - Preis '.$v["preis"].' - Bestand '.$v["stock"]; ?></option>
<?php } ?>
</select>
</label><br />
</div>
<?php } ?>
Gruß dgrrgn