Anpassung von Button und Artikeldetails

[dgrrgn]

Hallo,

hab mich der Sache mit dem Warenkorbbutton mal angenommen. Meine Lösung sieht so aus:

- neues Produkttemplate anlegen
- Grafikelemente des Buttons in das Dateisystem von WordPress "hochladen" (Bsp: ../wp-content/plugins/wpshopgermany/gfx/...), diese sind im Anhang mit dabei
- umschreiben des neu angelegeten Produktemplates (siehe Code- Anhang)
- zuweisen des Templates zu den Produkten

Die Anleitung soll lediglich eine mögliche Lösung für einen Warenkorbbutton aufzeigen, alle anderen Einstellungen der Produktpräsentation werden nicht beieinflusst.

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="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="beschreibung">###beschreibung###</div>
	  
	  <div class="weight">Gewicht: ###mod_weight### ###mod_weight_unit###</div>
	  <div class="wpshopgermany_vari">###mod_vari###</div>
	  
      <div class="clear"></div>
	  ###menge_start###
	  <div class="amount">Menge: <input type="text" name="menge" value="1" size="5"/></div>	
	  ###menge_end###
						
			<!-- Block für grafischer Butten als Warenkorb -->

			<div style="float:right;">
				<a class="submitlink" href="/" onclick="jQuery('form[name*=produkt_###p_id###]').submit(); return false;">
					<span style="display: block; height: 46px; float:left; background: url(/wp-content/plugins/wpshopgermany/gfx/busket_left.png) no-repeat;">
						<span style="display:block;  height: 46px; margin-left:46px; background: url(/wp-content/plugins/wpshopgermany/gfx/busket_continue.png) repeat-x;">
							<span style="display:block; padding-top:14px; color: #ffffff; font-size: 16px; font-weight: bold;">in den Warenkorb</span>
						</span>
					</span>
					<span style="display: block;  height: 46px; float:left; width: 10px; background: url(/wp-content/plugins/wpshopgermany/gfx/busket_right.png) no-repeat;"></span>
					<span style="clear:both;"></span>				
				</a>
			</div>

			<!-- Ende -->
		
			<input name="submit_basket" type="hidden" value="1" />
		
  	</div>
</span>

###varianten_start###
<label>
	<input style="margin-bottom:2px;" ###checked### onclick="switchVari(###p_id###, ###var_id###);" type="radio" name="vari" 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###
	)
</label><br />
<script type="text/javascript">
  if(typeof switchVari == 'function') { 
    switchVari(###p_id###, ###var_id###);
  }
</script>
###varianten_end###

Hinweis: getestet mit der shopversion 1.5.6

Viel Spaß beim nachbauen...

[snap]

Hat prima funktioniert... danke für die detaillierte Anleitung! Jetzt muss ich nur noch an der Design-Zuordnung "rumdoktorn"
Gruß, snap

[MKJ]

So langsam wird's rekordverdächtig. Das ist der 3. Beitrag von dgrrgn und die 3. fertige Anpassung von ihm (oder ihr). Super!

[garnett]

ich hab das bei mir wie folgt gelöst:

* die global.css in wpshopgermany/user_views kopieren
* folgende neue klasse einfügen:

Code: Alles auswählen

.wpshopgermany_produkt .buttonwarenkorb {

        /*basic styles*/
        width: 170px;  height: 40px;  color: white; background-color: #99CF00;
        text-align: center;  font-size: 20px;  line-height: 50px;
        position: absolute;
        bottom: 5px;
        right: 3px;
        margin: 0px;

        /*gradient styles*/
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#99CF00), to(#6DB700));
        background: -moz-linear-gradient(19% 75% 90deg,#6DB700, #99CF00);

        /*border styles*/
        border-left: solid 1px #c3f83a;
        border-top: solid 1px #c3f83a;
        border-right: solid 1px #82a528;
        border-bottom: solid 1px #58701b;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#99CF00), to(#6DB700))

}


a {
        text-decoration: none;
        color: fff;
}

.wpshopgermany_produkt .buttonwarenkorb:hover {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6DB700), to(#99CF00));
        background: -moz-linear-gradient(19% 75% 90deg,#99CF00, #6DB700);
}

* ein neues produkttemplate anlegen, dann den bereich

Code: Alles auswählen

<input class="wpshopgermany_submit_basket" type="submit" name="submit_basket" value="Zum Warenkorb hinzufügen"/>

einfach durch

Code: Alles auswählen

<input class="buttonwarenkorb" type="submit" name="submit_basket" value="In den Warenkorb"/>

ersetzen


das verändert den warenkorbbutton auf css basis und schaut bei mir jetzt wie folgt aus:

normal


hover