mehrere Produktbilder als Thumbnails

[Draiman]

Hallo,

Version 3.06

Ich habe zu jedem meiner Produkte mehrere Produktbilder hochgeladen. Nun ist es so, dass nur ein Bild im "Produktkästchen" angezeigt wird. Dadurch kann es sein, dass die Besucher des Shops gar nicht bemerken, dass das Bild anklickbar/vergrößerbar ist und mehrere Produktbilder zur Ansicht zur Verfügung stehen.

Dazu ein Paar Fragen:

1) Wie kann ich ein Bildervorschau realisieren wie z.B auf folgender Seite: http://www.leds.de/LED-Lampen-und-Leuch ... weiss.html

2) Gibt es vielleicht einfachere Möglichkeiten dem User zu zeigen, dass es mehrere Bilder gibt?

3) Gibt es die Möglichkeit in der "Großbildansicht", also wenn der User ein Bild einklickt, eine Bilderbeschreibung anzugeben?

4) Kann man in der "Großbildansicht" das Durchblättern der Bilder mit dem Pfeiltasten realisieren?

5) In meiner Produktliste (mit Produktgruppen realisiert, (list.phtml)), also der Seite mit der Gesamtübersicht meiner Produkte, wird als Produktbild bei jedem Neuladen der Seite ein zufälliges Bild dargestellt. Kann ich das irgendwie einstellten, welches Bild gezeigt wird?

Für ein Paar grundsätzliche Tipps wäre ich sehr dankbar. Ich habe bereitz die Suchfunktion benutzt und die Doku ausgiebig gelesen, leider ohne Erfolg. Einen Link zu meiner Seite kann ich leider nicht geben, da sie noch nicht veröffentlicht werden darf.

MfG
Draiman

[daschmi]

Hi,

Das sind aber viele Fragen

1) Du musst das standard.phtml Template anpassen und am besten als neues Template unter user_views/produkttemplates/ ablegen
2) Da kannst du dir auch was einfallen lassen und im Template einbauen.
3) Das kannst du auch in folgendem Template ändern: views/mods/mod_produktbilder/produktbild.phtml (Es müsste der Titel des Links sein)
4) Das kommt auf die verwendete Lightbox an (Kannst du im Template unter 4 genannt) ändern. Standardmäßig wird Thickbox verwendet.
5) Das ist der Bilderblock im standard.phtml / list.phtml

Folgendes Template könnte dir helfen es zeigt ein großes Bild und alle anderen als kleine Bilder zum wechseln an:

Code: Alles auswählen

<?php

	/*
	 * Template für das Produkt im Frontend
	 */

	//Ausgabe der verfügbaren Variablen
	//wpsg_debug($_SESSION);
	//wpsg_debug($this->view['data']['stock']);

	// Damit keine Zubehörprodukte ausgegeben werden
	//$this->noReleatedProducts = true;
	
?>
<style type="text/css">

	.wpsg_theme1 { background-color:#EFEFEF; border:0px; }
	.wpsg_theme1_mainimage a { text-decoration:none; padding:5px; display:table-cell; vertical-align:middle; text-align:center; width:184px; height:184px; background-color:#FFFFFF; }
	.wpsg_theme1_mainimage a img { vertical-align:middle; }
	.wpsg_theme1_previewslider a { margin-right:7px; margin-top:7px; display:block; float:left; text-decoration:none; padding:5px; display:table-cell; vertical-align:middle; text-align:center; width:50; height:50px; background-color:#FFFFFF; }
	.wpsg_theme1_previewslider a img { vertical-align:middle; } 
	.wpsg_theme1_produkt_produktbilder { float:left; width:220px; }
	.wpsg_theme1_produkt_right { width:335px; float:left; }
	
</style>

<script type="text/javascript">

	if (typeof wpsg_theme1_switch !== 'function')
	{

		function wpsg_theme1_switch(htmlEle)
		{
 
			jQuery(htmlEle).parent().parent().find('.wpsg_theme1_image').hide();
			jQuery(htmlEle).parent().parent().find('.' + jQuery(htmlEle).attr("class")).show();
			
			return false;
			
		} // function wpsg_theme1_switch(ele)
		
	}

</script>

<div class="wpsg_produkt_wrapper wpsg_theme1">
	<div itemscope itemtype="http://schema.org/Product" class="wpsg_produkt wpsg_produkt_<?php echo $this->view['data']['id']; ?>">
	
		<?php /* Block für die Produktbilder START */ ?>
		<?php if ($this->hasMod('wpsg_mod_produktbilder')) { ?>	
		<div class="wpsg_theme1_produkt_produktbilder">
			<?php 
			
				$arBilder = $this->callMod('wpsg_mod_produktbilder', 'getProduktBilder', array($this->view['data']['id']));
				 
			?>
			<?php if (sizeof($arBilder) > 0) { ?>
			<div class="wpsg_theme1_mainimage">
				<a class="wpsg_theme1_image_0 wpsg_theme1_image" href="<?php echo $this->callMod('wpsg_mod_produktbilder', 'getPicPath', array($this->view['data']['id'], true)); ?>/<?php echo $arBilder[0]; ?>" class="thickbox" rel="gallery-<?php echo $this->view['data']['id'] ?>">
					<img src="<?php echo $this->callMod('wpsg_mod_produktbilder', 'makeTn', array($this->view['data']['id'], $arBilder[0], 184, 184, 's')); ?>" />
				</a>
				<?php for ($i = 1; $i < sizeof($arBilder); $i ++) { ?>
				<a class="wpsg_theme1_image_<?php echo $i; ?> wpsg_theme1_image" style="display:none;" href="<?php echo $this->callMod('wpsg_mod_produktbilder', 'getPicPath', array($this->view['data']['id'], true)); ?>/<?php echo $arBilder[$i]; ?>" class="thickbox" rel="gallery-<?php echo $this->view['data']['id'] ?>">
					<img src="<?php echo $this->callMod('wpsg_mod_produktbilder', 'makeTn', array($this->view['data']['id'], $arBilder[$i], 184, 184, 's')); ?>" />
				</a>
				<?php } ?>
			</div>
			
			<div class="wpsg_theme1_previewslider">
			<?php if (sizeof($arBilder) > 1) { ?>
				<?php for ($i = 0; $i < sizeof($arBilder); $i ++) { ?>
				<a href="#" onclick="return wpsg_theme1_switch(this);" class="wpsg_theme1_image_<?php echo $i; ?>">
					<img src="<?php echo $this->callMod('wpsg_mod_produktbilder', 'makeTn', array($this->view['data']['id'], $arBilder[$i], 50, 50, 's')); ?>" />
				</a>
				<?php } ?>
			<?php } ?>
			</div>
			
			<?php } ?>	
			 
		</div>
		<?php } ?>
		<?php /* Block für die Produktbilder ENDE */ ?>
	
		<div class="wpsg_theme1_produkt_right">
		
			<h1 itemprop="name"><?php echo wpsg_hspc($this->view['data']['name']); ?></h1>
		
			<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="wpsg_produkt_preis">
				<?php echo __('Stückpreis:', 'wpsg'); ?>
				<meta itemprop="priceCurrency" content="<?php echo $this->get_option('wpsg_currency'); ?>" />
				<span itemprop="price" class="preis_<?php echo $this->view['data']['id']; ?>" id="preis_<?php echo $this->view['data']['id']; ?>"><?php echo wpsg_ff($this->view['data']['preis']); ?></span> <?php echo $this->get_option('wpsg_currency'); ?>
			</div>		
			
			<?php if ($this->get_option('wpsg_kleinunternehmer')) { /* Kleinunternehmerregelung aktiviert START */ ?>		
			
				<div class="wpsg_produkt_preishinweis">
					<?php echo wpsg_translate(__('Preise zzgl. #1#', 'wpsg'), '<a href="'.$this->getURL(wpsg_ShopController::URL_VERSANDKOSTEN).'">'.__('Versandkosten', 'wpsg').'</a>'); ?>
				</div>
			
			<?php } else { /* Kleinunternehmerregelung aktiviert ENDE */ ?>	
	
				<div class="wpsg_produkt_preishinweis">		
					<?php if ($this->get_option('wpsg_preisangaben_frontend') == WPSG_NETTO) { /* Frontend = NETTO Preise */ ?>
					<?php echo wpsg_translate(__('(zzgl. #1#% MwSt. und zzgl. #2#)', 'wpsg'), wpsg_ff($this->view['data']['mwst_value']), '<a href="'.$this->getURL(wpsg_ShopController::URL_VERSANDKOSTEN).'">'.__('Versandkosten', 'wpsg').'</a>'); ?>
					<?php } else { /* Frontend = BRUTTO Preise */ ?>
					<?php echo wpsg_translate(__('(inkl. #1#% MwSt. und zzgl. #2#)', 'wpsg'), wpsg_ff($this->view['data']['mwst_value']), '<a href="'.$this->getURL(wpsg_ShopController::URL_VERSANDKOSTEN).'">'.__('Versandkosten', 'wpsg').'</a>'); ?>
					<?php } ?>
				</div>
				
			<?php } ?>
			
			<?php /* Füllmengenanzeige START */ ?>
			<?php if ($this->hasMod('wpsg_mod_fuellmenge')) { ?>
			
				<div class="wpsg_produkt_fuellmenge">
				<?php echo wpsg_translate(__('Füllmenge: #1# (#2# / #3#)', 'wpsg'), 
					wpsg_ff($this->view['data']['fmenge'], $this->view['data']['feinheit'], true),
					wpsg_ff($this->view['data']['fmenge_preis'], $this->get_option('wpsg_currency')),
					wpsg_ff($this->get_option('wpsg_mod_fuellmenge_bezug'), $this->view['data']['feinheit'])
				); ?>
				</div>
			<?php } ?>		
			<?php /* Füllmengenanzeige ENDE */ ?>
			
			<?php /* Gewichtsanzeige START */ ?>
			<?php if ($this->hasMod('wpsg_mod_weight') && $this->get_option('wpsg_mod_weight_showProduct') === '1') { ?>
			<div class="wpsg_mod_weight_produkt">
				<?php echo wpsg_translate(__('Gewicht: #1# #2#', 'wpsg'), '<span id="weight_'.$this->view['data']['id'].'">'.wpsg_ff($this->view['data']['weight']).'</span>', $this->get_option('wpsg_mod_weight_unit')); ?>
			</div>
			<?php } ?>
			<?php /* Gewichtsanzeige ENDE */ ?>
			
			<?php /* Varianten START */ ?>
			<div class="wpsg_produkt_varianten">
			<?php echo $this->callMod('wpsg_mod_varianten', 'renderTemplate', array($this->view['data']['id'])); ?>
			</div>
			<?php /* Varianten ENDE */ ?>
			
			<div class="wpsg_produkt_add_basket_wrapper">	
				
				<label for="wpsg_menge_<?php echo $this->getTemplateIndex(); ?>"><?php echo __('Anzahl', 'wpsg'); ?>:</label>
				
				<input type="text" value="1" name="wpsg[menge]" class="wpsg_menge" id="wpsg_menge_<?php echo $this->getTemplateIndex(); ?>" />	
				<input class="wpsg_button wpsg_add_basket wpsg_add_basket_<?php echo $this->getTemplateIndex(); ?>" type="submit" value="<?php echo __('In den Warenkorb', 'wpsg'); ?>" name="wpsg[submit]" />
			
				<?php if ($this->get_option('wpsg_afterinsert') == '2') { ?>
				<script type="text/javascript">
			
					jQuery('.wpsg_add_basket_<?php echo $this->getTemplateIndex(); ?>').bind('click', function() {
			 			
						jQuery.ajax( {
							url: '<?php echo $this->getURL(wpsg_ShopController::URL_BASKET); ?>',
							data:
							{
								wpsg_form_data: jQuery('#wpsg_produktform_<?php echo $this->getTemplateIndex(); ?>').serialize(),
								'wpsg[ajax]': '1',
								'wpsg[submit]': '1'					
							},
							success: function(data) 
							{
								tb_show('<?php echo __('Ihr Warenkorb', 'wpsg'); ?>', '<?php echo $this->getURL(wpsg_ShopController::URL_BASKET_AJAX); ?>');
							}
						} );	
						
						return false;
						
					} );
				 
				</script>
				<?php } ?>
				
			</div>
			
		</div>
		
		<div class="wpsg_clear"></div>
		 	
		<?php /* Facebook und Co Integration aus dem Produktartikel Modul */ ?>
		<?php echo $this->callMod('wpsg_mod_produktartikel', 'socialIntegration', array($this->view['data']['id'])); ?>
		<?php /* Facebook und Co Integration ENDE */ ?>
		
	</div>
	
	<div class="wpsg_produkt_additional_information">
	
		<div itemprop="description" class="wpsg_produkt_beschreibung">
			<?php echo $this->view['data']['beschreibung']; ?>
		</div>
		
		<?php $this->callMods('product_bottom', array(&$this->view['data']['id'])); ?>
		
	</div>
</div>

Ich hoffe ich konnte dir helfen. Für die Anpassung der Darstellung sind HTML/CSS und minimale PHP Kenntnisse notwendig, ich kann dir hier nur Hilfestellung liefern.
Alternativ kannst du die Anpassung an deine Layoutvorstellungen auch bei uns beauftragen.

Viel Erfolg

Daschmi

[MKJ]

Hallo Daschmi,
wunderbar. Genau das, was ich hier gesucht habe.

Danke und Gruß, Mike

[Draiman]

Danke, das hilft mir weiter. So weiß ich, welche Datein ich NICHT durchsuchen muss.