Warenkorb wie im maennchen1 webshop

pdiesler · Beitrag von **pdiesler** » 20.06.2013, 22:36

Hallo,
ich beschäftige mich erst ein paar Tage mit dem Shop. Deshalb ist meine Frage vielleicht ein bisschen blöd. Aber ich würde gerne auch so einen stets sichtbaren Warenkorb haben, wie er im mmaennchen1 Onlineshop zu sehen ist. Wie geht so etwas? Habe ich eine Einstellung übersehen oder muss das extra programmiert werden?

Gruss Peter
http://www.journalismus.com

Beitrag von **daschmi** » 21.06.2013, 07:38

Hi,

das ist eine kleine Modifikation von uns.

In der header.php des Themes haben wir folgenden Block eingebunden:

Code: Alles auswählen

<div id="basketajax"><?php m1shop_callback(); ?></div>

Zusätzlich haben wir in der functions.php noch folgenden Code:

Code: Alles auswählen

function m1shop_callback() {
 
	$GLOBALS['wpsg_sc']->basket->initFromSession();
	$basket = $GLOBALS['wpsg_sc']->basket->toArray();
	$produkte = 0;
	
	if (is_array($basket) && count($basket) > 0)
	{
		foreach ($basket['produkte'] as $item)
		{
			$produkte += $item['menge'];
		}
	}
	
	?>
	
	<div id="basketinfo">
		<a class="basket_link" href="<?php echo $GLOBALS['wpsg_sc']->getURL(wpsg_ShopController::URL_BASKET); ?>">
					<?php if ($produkte > 0) { ?>
					<span class="wpsg_product_count"><?php echo $produkte; ?></span>
					<?php } else { ?>
					<div class="wpsg_product_count">0</div>
					<?php } ?>
					<span class="wpsg_article_text">Produkte im Warenkorb</span>
					<span class="wpsg_article_sum">Summe <?php echo wpsg_ff($basket['sum']['preis_gesamt_brutto'], '€'); ?></span>
					<span class="clearer"></span>
		</a>
		<a class="trigger_basketdetails">&nbsp;</a>
		<div class="clearer"></div>
	</div>
	<div id="basketdetails">
		<div class="text">
			<hr/>
			<?php if ($produkte > 0) { ?>
				<table>
					<tr>
						<th><?php echo __('Produkt', 'wpsg'); ?></th>
						<th><?php echo __("Menge", "wpsg"); ?></th>
						<th><?php echo __("Summe", "wpsg"); ?></th>
					</tr>
					<?php $i = 0; foreach ($basket['produkte'] as $produkt_key => $p) { $i ++; ?>
					<tr>
						<td>
							<?php echo htmlspecialchars($p['name']); ?>
						</td>
						<td class="wpsg_amount"><?php echo htmlspecialchars($p['menge']); ?></td>
						<td class="wpsg_sum"><?php echo wpsg_ff($p['menge'] * $p['preis']); ?> <?php echo $GLOBALS['wpsg_sc']->get_option('wpsg_currency'); ?></td>
					</tr>
					<?php } ?>
				</table>
				<table width="100%">
					<?php foreach ($basket['mwst'] as $mwst_id => $mwst) { ?>
					<tr>
						<td style="width:85px; border:0 none;">&nbsp;</td>
						<td style="white-space:nowrap; text-align:right;">
							<?php if ($GLOBALS['wpsg_sc']->get_option('wpsg_preisangaben_frontend') == WPSG_NETTO) { ?>
							<?php echo wpsg_translate(__('zzgl. #1# Mwst.', 'wpsg'), $mwst['name']); ?>
							<?php } else { ?>
							<?php echo wpsg_translate(__('inkl. #1# Mwst.', 'wpsg'), $mwst['name']); ?>
							<?php } ?>
						</td>
						<td class="wpsg_sum">
							<?php echo wpsg_ff($mwst['sum']); ?> <?php echo $GLOBALS['wpsg_sc']->get_option('wpsg_currency'); ?>
						</td>
					</tr>
					<?php } ?>
					<tr class="wpsg_row_gesamt">
						<td style="width:85px; border:0 none;">&nbsp;</td>
						<td style="text-align:right;">
							<?php echo __('Gesamtpreis', 'wpsg'); ?>
						</td>
						<td class="wpsg_sum">
							<?php echo wpsg_ff($basket['sum']['preis_gesamt_brutto']); ?> <?php echo $GLOBALS['wpsg_sc']->get_option('wpsg_currency'); ?>
						</td>
					</tr>	
				</table>
				
				<a class="wpsg_button_link" href="<?php echo $GLOBALS['wpsg_sc']->getURL(wpsg_ShopController::URL_BASKET); ?>" title="zum Warenkorb">zum Warenkorb</a>
				<div class="clearer"></div>
			<?php } else { ?>
				Es wurden noch keine Produkte im Warenkorb hinterlegt.
			<?php } ?>
		</div>
		<div class="shadow"></div>	
	</div>
	
	<script type="text/javascript">
	/* <![CDATA[ */
	jQuery(document).ready( function($) {
		
		var trigger_basketdetails = jQuery('.trigger_basketdetails');
		
		trigger_basketdetails.click(function() {
	  	
	  	if (trigger_basketdetails.hasClass('bgr_trigger_basketdetails'))
   				trigger_basketdetails.removeClass('bgr_trigger_basketdetails');
   		else
   				trigger_basketdetails.addClass('bgr_trigger_basketdetails');
	  	
	  	jQuery('#basketdetails .text').slideToggle('slow', function() {
	   			
	  	});
	  	
		});
		
	} );
	/* ]]> */
	</script>
	
	<?php	
	
	if($_REQUEST['action'] == 'm1shop-request') die();

}

wp_enqueue_script('m1shop-request', '/wp-content/themes/m1shoptheme/js/ajax.js', array('jquery'));
wp_localize_script('m1shop-request', 'm1shop', array('postID' => '1', 'ajaxurl' => admin_url('admin-ajax.php')));

add_action('wp_ajax_nopriv_m1shop-request', 'm1shop_callback');
add_action('wp_ajax_m1shop-request', 'm1shop_callback');

In den Produkttemplates haben wir dann noch folgenden Code, damit sich der Warenkorb aktualisiert ohne die Seite zu laden:

Code: Alles auswählen

<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) 
				{
					
					jQuery('html,body').animate( { scrollTop: jQuery(this).offset() }, 500);
					
					jQuery.ajax( {
		 				url: m1shop.ajaxurl,
		 				data: {
		 					'action': 'm1shop-request',
		 					'postID': m1shop.postID
		 				}, 
		 				success: function(data) {
		 					jQuery('#basketajax').html(data);
		 					
		 					jQuery('.trigger_basketdetails').click();
		 						
		 				} 
		 			
		 			} );
 			
				}
			} );	 	
			
			return false;
			
		} );
	
	</script>

Viele Grüße

Daschmi

MKJ · Beitrag von **MKJ** » 10.07.2013, 15:51

Und hier noch der Rest:

Man ersetzt im Produkttemplate:

Code: Alles auswählen

<?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); ?>&height=450');
							}
						} );	
						
						return false;
						
					} );
				 
				</script>
				<?php } ?>

mit

Code: Alles auswählen

 <?php if (true) { ?>  
   <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) 
            {
               
               jQuery('html,body').animate( { scrollTop: jQuery(this).offset() }, 500);
               
               jQuery.ajax( {
                   url: m1shop.ajaxurl,
                   data: {
                      'action': 'm1shop-request',
                      'postID': m1shop.postID
                   }, 
                   success: function(data) {
                      jQuery('#basketajax').html(data);
                      
                      jQuery('.trigger_basketdetails').click();
                         
                   } 
                
                } );
          
            }
         } );       
         
         return false;
         
      } );
   
   </script>
   <?php } ?>

Für die functions.php muss man noch den Pfad zur ajax.js anpassen. Diese Datei ist leer. Anschließend formatiert man nach Belieben. Das CSS von Maennchen1 sieht so aus:

Code: Alles auswählen

#basketinfo {
	position:fixed;
	z-index:1000;
	top:0px;
	width:240px;
	height:46px;
	background-color:#003b69;
	right:0px;
	color:#bfcbd6;
	background-image:url(images/bgr_basketinfo.gif);
	background-repeat:no-repeat;
	background-position:left bottom;
}

#basketinfo .basket_link {
	color:#bfcbd6;	
	text-decoration:none;
	height:46px;
	width:189px;
	float:left;
}

#basketinfo .trigger_basketdetails {
	display:block;	
	height:46px;
	width:51px;
	float:left;
	text-decoration:none;
	cursor:pointer;
}

.bgr_trigger_basketdetails {
	background-image:url(images/bgr_trigger_basketdetails.gif);
	background-repeat:no-repeat;
}

#basketdetails{
	position:fixed;
	z-index:1000;
	right:0px;
	top:46px;
	width:240px;
	z-index:20;
}

#basketdetails .text {
	display:none;
	background-color:#003b69;
	color:#bfcbd6;
	padding-left:12px;
	padding-right:12px;
	padding-bottom:10px;
	font-size:11px;
}

#basketdetails .text hr {
	border:0 none;
	display:block;
	height:1px;
	margin-bottom:5px;
	border-bottom:1px dotted #bfcbd6;
	width:100%;
}

#basketdetails .text table th {
	color:#FFFFFF;
	font-weight:bold;
	border-bottom:1px dotted #bfcbd6;
  padding-top:5px;
  padding-bottom:5px;
  padding-right:5px;	
}

#basketdetails .text .wpsg_amount {
	text-align:center;
}

#basketdetails .text .wpsg_sum {
	white-space:nowrap;
	text-align:right;
}

#basketdetails .text .wpsg_row_gesamt {
	color:#FFFFFF;
	font-weight:bold;
}

#basketdetails .text .wpsg_row_gesamt td {
	border:0 none !important;
}

#basketdetails .wpsg_button_link {
	display:block;
	float:right;
	height:26px;
	margin-top:5px;
	width:120px;
	line-height:26px;
	border:1px solid #003056;
	color:#FFFFFF;
	padding:0px;
	font-size:12px;
	padding-left:20px;
	text-decoration:none;
	font-weight:bold;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
	background-image:url(images/bgr_wpsg_buttonlink.gif);
	background-repeat:no-repeat;
	background-position:95% 50%;
	background-color:#7F9DB2;
}

#basketdetails .shadow {
	height:11px;
	width:100%;
	position:relative;
	background-image:url(images/bgr_basketdetails.png);
	background-repeat:no-repeat;
}
.wpsg_product_count {
	display:block;
	float:left;
	width:35px;
	height:46px;
	font-size:32px;
	line-height:46px;
	margin-left:35px;
	text-align:center;
}

.wpsg_article_text, .wpsg_article_sum {
	font-size:10px;
	display:block;
}

.wpsg_article_text {
	padding-top:8px;
}

.clearer {
	clear:both;
	display:block;
	height:0px;
	width:0px;
	float:none;
}

Bitte beachten, dass nach dieser Mod der Warenkorb im Fenster (Lightbox) nicht mehr funktioniert. Diese Funktion wird vollständig ersetzt durch den neuen Warenkorb im Header.

MKJ · Beitrag von **MKJ** » 11.07.2013, 17:40

Die Sache wird noch eleganter, wenn man den Warenkorb nur anzeigt, wenn auch wirklich Produkte drin sind:

Code: Alles auswählen

 <?php if ($produkte > 0) { ?>  ... }

Forum / FAQ / Produktunterstützung

Warenkorb wie im maennchen1 webshop

Warenkorb wie im maennchen1 webshop

Re: Warenkorb wie im maennchen1 webshop

Re: Warenkorb wie im maennchen1 webshop

Re: Warenkorb wie im maennchen1 webshop