Warenkorb wie im maennchen1 webshop

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

Moderatoren: ThoGoe, maennchen1.de, wpShopGermany Moderator

Antworten
pdiesler
Beiträge: 26
Registriert: 20.06.2013, 22:29
Lizenz: wpShopGermany Enterprise

Warenkorb wie im maennchen1 webshop

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?
shop_maennchen1_de.jpg
Gruss Peter
http://www.journalismus.com
Peter Diesler
Journalismus.com

Benutzeravatar
daschmi
m1.Mitarbeiter
Beiträge: 2377
Registriert: 04.12.2007, 18:23
Lizenz: keine
Kontaktdaten:

Re: Warenkorb wie im maennchen1 webshop

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
Beiträge: 3073
Registriert: 25.08.2010, 16:11

Re: Warenkorb wie im maennchen1 webshop

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.
Tipps und Tricks rund um wpShopGermany: www.my-blog-shop.de

MKJ
Beiträge: 3073
Registriert: 25.08.2010, 16:11

Re: Warenkorb wie im maennchen1 webshop

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) { ?>  ... }
cart1.jpg
cart2.jpg
Tipps und Tricks rund um wpShopGermany: www.my-blog-shop.de

Antworten