Produktvarianten als Dropdown Auswahl

Hier findest du alle Fragen zu besonderen Anpassungen an den Templates oder Wordpress selber

Moderatoren: maennchen1.de, wpShopGermany Moderator

Antworten
Benutzeravatar
garnett
Beiträge: 295
Registriert: 13.07.2010, 23:02
Lizenz: wpShopGermany Pro
Wohnort: Sachsen

Produktvarianten als Dropdown Auswahl

Beitrag von garnett »

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 8)
garnett mit tt
nicht mit t
nicht mit ttt
;-)
Benutzeravatar
garnett
Beiträge: 295
Registriert: 13.07.2010, 23:02
Lizenz: wpShopGermany Pro
Wohnort: Sachsen

Re: Produktvarianten als Dropdown Auswahl

Beitrag von garnett »

niemand eine idee? :|
garnett mit tt
nicht mit t
nicht mit ttt
;-)
MKJ
Beiträge: 3073
Registriert: 25.08.2010, 16:11

Re: Produktvarianten als Dropdown Auswahl

Beitrag von MKJ »

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
Tipps und Tricks rund um wpShopGermany: www.my-blog-shop.de
Benutzeravatar
garnett
Beiträge: 295
Registriert: 13.07.2010, 23:02
Lizenz: wpShopGermany Pro
Wohnort: Sachsen

Re: Produktvarianten als Dropdown Auswahl

Beitrag von garnett »

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:

Code: Alles auswählen

          var arRadio = jQuery("form[name='produkt_" + p_id + "'] input[type='radio']:checked);

          return arRadio.val();
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.
garnett mit tt
nicht mit t
nicht mit ttt
;-)
dgrrgn
m1.Mitarbeiter
Beiträge: 135
Registriert: 05.04.2011, 16:43

Re: Produktvarianten als Dropdown Auswahl

Beitrag von dgrrgn »

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:
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

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
Benutzeravatar
garnett
Beiträge: 295
Registriert: 13.07.2010, 23:02
Lizenz: wpShopGermany Pro
Wohnort: Sachsen

Re: Produktvarianten als Dropdown Auswahl

Beitrag von garnett »

schaut gut aus, funktioniert soweit bei mir! :)

vielen dank!
garnett mit tt
nicht mit t
nicht mit ttt
;-)
MKJ
Beiträge: 3073
Registriert: 25.08.2010, 16:11

Re: Produktvarianten als Dropdown Auswahl

Beitrag von MKJ »

Herzlich willkommen und BRAVO! :D

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
Benutzeravatar
garnett
Beiträge: 295
Registriert: 13.07.2010, 23:02
Lizenz: wpShopGermany Pro
Wohnort: Sachsen

Re: Produktvarianten als Dropdown Auswahl

Beitrag von garnett »

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
garnett mit tt
nicht mit t
nicht mit ttt
;-)
dgrrgn
m1.Mitarbeiter
Beiträge: 135
Registriert: 05.04.2011, 16:43

Re: Produktvarianten als Dropdown Auswahl

Beitrag von dgrrgn »

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)

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 } ?>
durch den folgenden Code ersetzen

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 } ?>
Hab's auf die Schnelle mal probiert, scheint zu funktionieren... viel Spass

Gruß dgrrgn
Antworten