diff options
| -rw-r--r-- | views/css/frontend.css | 11 | ||||
| -rw-r--r-- | views/mods/mod_productview/productview.js | 47 | ||||
| -rw-r--r-- | views/mods/mod_productview/productview.phtml | 77 |
3 files changed, 122 insertions, 13 deletions
diff --git a/views/css/frontend.css b/views/css/frontend.css index 5de86cd..68c4685 100644 --- a/views/css/frontend.css +++ b/views/css/frontend.css @@ -317,13 +317,17 @@ input.wpsg_error { border-color:red !important; } /* Modul "Produktansichten" */
.wpsg_productview { position:relative; }
-.wpsg_productview_head { margin-bottom:25px; line-height:25px; margin-top:25px; }
+.wpsg_productview_head { margin-bottom:25px; line-height:25px; margin-top:25px; position:relative; }
.wpsg_productview_head h2.wpsg_productview_title { margin-top:0px; font-size:20px; font-weight:bold; color:#0E2F42; }
+.wpsg_productview_head .wpsg_mod_productview_modeswitch { position:absolute; right:15px; top:0px; font-size:20px; }
+.wpsg_productview_head .wpsg_mod_productview_modeswitch > a { margin-left:5px; text-decoration:none; color:#9E9E9E; }
+.wpsg_productview_head .wpsg_mod_productview_modeswitch > a.active,
+.wpsg_productview_head .wpsg_mod_productview_modeswitch > a:hover { color:#29556E; text-decoration:none; }
.wpsg_mod_productview-info { font-size:14px; color:#9B9B9B; }
.wpsg_mod_productview-info strong { color:#29556E; font-weight:bold; }
.wpsg_mod_productview-order { font-size:14px; color:#9B9B9B; }
.wpsg_mod_productview-order .glyphicon { margin-left:10px; margin-right:5px; }
-.wpsg_mod_productview-order strong { color:#29556E; font-weight:bold; }
+.wpsg_mod_productview-order strong { color:#29556E; font-weight:bold; float:right; }
.wpsg_mod_productview_image { position:relative; }
.wpsg_mod_productview_image img { max-width:100%; height:auto; border:1px solid #E4F3F8; }
.wpsg_productview_pager { width:100%; border-top:1px solid #E4F3F8; border-bottom:1px solid #E4F3F8; margin-bottom:25px; margin-top:10px; padding-top:25px; padding-bottom:25px; text-align:center; }
@@ -338,13 +342,14 @@ input.wpsg_error { border-color:red !important; } .wpsg_productview_product .wpsg_mod_productview_bottom .wpsg_mod_productview_button:hover { text-decoration:none; background-color:#29556E; color:#FFFFFF; }
.wpsg_productview_product .wpsg_mod_productview_bottom .wpsg_mod_productview_button .fa { margin-left:10px; }
.wpsg_productview_product .wpsg_mod_productview_go { display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background-color:rgba(228, 243, 248, 0.75); text-align:center; }
-.wpsg_productview_product .wpsg_mod_productview_go > .wpsg_star_wrap { font-size:22px; color:#0F303F; width:80%; position:absolute; left:50%; margin-left:-40%; top:10%; font-size:18px; font-weight:normal; }
.wpsg_productview_product .wpsg_mod_productview_go .wpsg_mod_productview_price_wrap { color:#0F303F; width:100%; position:absolute; left:50%; margin-left:-50%; top:30%; font-size:20px; line-height:125%; font-weight:bold; }
.wpsg_productview_product .wpsg_mod_productview_go .wpsg_mod_productview_price_wrap .wpsg_mod_productview_oldprice { text-decoration:line-through; }
.wpsg_productview_product .wpsg_mod_productview_go .wpsg_mod_productview_price_wrap .wpsg_mod_productview_current { color:red; }
.wpsg_productview_product .wpsg_mod_productview_go .wpsg_mod_productview_tax_wrap { color:#565656; width:100%; position:absolute; left:50%; margin-left:-50%; top:60%; font-size:14px; line-height:125%; }
.wpsg_productview_product:hover { text-decoration:none; }
.wpsg_productview_product:hover .wpsg_mod_productview_go { display:block; }
+.wpsg_productview_product_grid .wpsg_star_wrap { position:absolute; width:80%; left:50%; top:10%; margin-left:-40%; }
+.wpsg_productview_product_grid .wpsg_mod_productview_name h2 { margin-top:0px; }
.wpsg_mod_productview_loading { width:100%; height:100%; background-color:rgba(249, 252, 253, 0.75); position:absolute; left:0px; top:0px; }
.wpsg_mod_productview_filter #wpsg_mod_productview_filter_price-range { position:relative; margin-right:16px; }
.wpsg_mod_productview_filter #wpsg_mod_productview_filter_price-range .ui-slider-handle { cursor:pointer; width:16px; height:16px; background-color:#787878; position:absolute; }
diff --git a/views/mods/mod_productview/productview.js b/views/mods/mod_productview/productview.js index 7a30c02..1f045c5 100644 --- a/views/mods/mod_productview/productview.js +++ b/views/mods/mod_productview/productview.js @@ -7,7 +7,19 @@ atts.page = page;
if (typeof order !== "undefined") atts.order = order;
- if (typeof mode !== "undefined") atts.mode = mode;
+ if (typeof mode !== "undefined") atts.mode = mode;
+ else
+ {
+
+ if (jQuery('#wpsg_productview_' + index + ' .wpsg_mod_productview_modeswitch > a').length > 0)
+ {
+
+ if (jQuery('#wpsg_productview_' + index + ' .wpsg_mod_productview_modeswitch > a.fa-th').hasClass('active')) atts.mode = 'grid';
+ else atts.mode = 'list';
+
+ }
+
+ }
if (jQuery('#wpsg_mod_productview_filter').length > 0)
{
@@ -40,8 +52,8 @@ function wpsg_correctProductview(index)
{
- var max_height = 0; jQuery('#wpsg_productview_' + index + ' .wpsg_mod_productview_name').each(function() { if (jQuery(this).outerHeight() > max_height) max_height = jQuery(this).outerHeight(); } ).outerHeight(max_height);
- var max_height = 0; jQuery('#wpsg_productview_' + index + ' .wpsg_mod_productview_description').each(function() { if (jQuery(this).outerHeight() > max_height) max_height = jQuery(this).outerHeight(); } ).outerHeight(max_height);
+ var max_height = 0; jQuery('#wpsg_productview_' + index + ' .wpsg_productview_product_grid .wpsg_mod_productview_name').each(function() { if (jQuery(this).outerHeight() > max_height) max_height = jQuery(this).outerHeight(); } ).outerHeight(max_height);
+ var max_height = 0; jQuery('#wpsg_productview_' + index + ' .wpsg_productview_product_grid .wpsg_mod_productview_description').each(function() { if (jQuery(this).outerHeight() > max_height) max_height = jQuery(this).outerHeight(); } ).outerHeight(max_height);
// Sortierungslayer
jQuery('.wpsg_mod_productview-order').bind('click', function(event) {
@@ -74,7 +86,32 @@ return false;
} ).disableSelection();
-
+
+ // Umschalten der List/Grid Ansichten
+ jQuery('.wpsg_mod_productview_modeswitch > a').bind('click', function() {
+
+ if (jQuery(this).hasClass('fa-th') &&!jQuery(this).hasClass('active'))
+ {
+
+ jQuery('.wpsg_productview_product_list').hide(250);
+ jQuery('.wpsg_productview_product_grid').show(250);
+
+ }
+ else if (jQuery(this).hasClass('fa-list') && !jQuery(this).hasClass('active'))
+ {
+
+ jQuery('.wpsg_productview_product_grid').hide(250);
+ jQuery('.wpsg_productview_product_list').show(250);
+
+ }
+
+ jQuery('.wpsg_mod_productview_modeswitch a').removeClass('active');
+ jQuery(this).addClass('active');
+
+ return false;
+
+ } );
+
}
function wpsg_filter_insert(values, set)
@@ -144,6 +181,6 @@ jQuery('.wpsg_mod_productview-order-layer:visible').each(function() { jQuery(this).parent().click(); } );
} );
-
+
} );
\ No newline at end of file diff --git a/views/mods/mod_productview/productview.phtml b/views/mods/mod_productview/productview.phtml index c98b4b3..53c1799 100644 --- a/views/mods/mod_productview/productview.phtml +++ b/views/mods/mod_productview/productview.phtml @@ -44,7 +44,12 @@ <?php echo wpsg_translate(__('von #1# Ergebnissen', 'wpsg'), $this->view['wpsg_mod_productview']['count']); ?>
</div>
<?php } ?>
-
+
+ <div class="wpsg_mod_productview_modeswitch">
+ <a href="#" title="<?php echo __('Schaltet die Produktansicht auf die Grid Ansicht um.', 'wpsg'); ?>" class="fa fa-th <?php echo (($this->view['wpsg_mod_productview']['mode'] == 'grid')?'active':''); ?>"></a>
+ <a href="#" title="<?php echo __('Schaltet die Produktansicht auf die List Ansicht um.', 'wpsg'); ?>" class="fa fa-list <?php echo (($this->view['wpsg_mod_productview']['mode'] == 'list')?'active':''); ?>"></a>
+ </div>
+
</div>
<div class="wpsg_productview_content row">
@@ -52,7 +57,67 @@ <?php if (wpsg_isSizedArray($this->view['wpsg_mod_productview']['products'])) { ?>
<?php $i = 0; foreach ($this->view['wpsg_mod_productview']['products'] as $oProduct) { $i ++; ?>
- <div class="wpsg_productview_product wpsg_productview_product_<?php echo $oProduct->id; ?> <?php echo $this->view['wpsg_mod_productview']['col_class']['product']; ?>">
+
+ <div style="<?php echo (($this->view['wpsg_mod_productview']['mode'] == 'list')?'':'display:none;'); ?>" class="wpsg_productview_product wpsg_productview_product_list wpsg_productview_product_<?php echo $oProduct->id; ?> col-md-12">
+
+ <div class="row">
+
+ <?php $bImage = false; if ($this->hasMod('wpsg_mod_produktbilder')) { ?>
+ <?php $image_url = $this->callMod('wpsg_mod_produktbilder', 'getProductImage', array($oProduct->id, 520, 520, 'sz')); ?>
+ <?php if (wpsg_isSizedString($image_url)) { $bImage = true; ?>
+ <div class="col-md-4 wpsg_mod_productview_image">
+
+ <img src="<?php echo $image_url; ?>" alt="" />
+
+ </div>
+ <?php } ?>
+ <?php } ?>
+
+ <div class="col-md-<?php echo (($bImage)?'8':'12'); ?>">
+
+ <div class="wpsg_mod_productview_name">
+ <h2><?php echo $oProduct->getProductName(); ?></h2>
+ </div>
+
+ <div class="wpsg_star_wrap">
+ <?php $star = rand(0, 5); ?>
+ <?php for ($i = 0; $i < 5; $i ++) { ?><i class="fa fa-star <?php echo (($i >= $star)?'fa-star-active':''); ?>"></i><?php } ?>
+ </div>
+
+ <div class="wpsg_mod_productview_price_wrap">
+ <?php $oldPrice = $oProduct->getOldPrice(); ?>
+ <?php if ($oldPrice !== false && $oldPrice != $oProduct->getPrice()) { ?>
+ <div class="wpsg_mod_productview_current"><?php echo wpsg_ff($oProduct->getPrice(), $this->get_option('wpsg_currency')); ?></div>
+ <div class="wpsg_mod_productview_oldprice"><?php echo wpsg_ff($oldPrice, $this->get_option('wpsg_currency')); ?></div>
+ <?php } else { ?>
+ <div class="wpsg_mod_productview_price"><?php echo wpsg_ff($oProduct->getPrice(), $this->get_option('wpsg_currency')); ?></div>
+ <?php } ?>
+ </div>
+
+ <div class="wpsg_mod_productview_tax_wrap">
+ <?php if ($this->getFrontendTaxview() == WPSG_BRUTTO) { ?>
+ <?php echo wpsg_translate(__('inkl. #1#% MwSt. zzgl. <a href="#2">Versandkosten</a>', 'wpsg'), $oProduct->getFrontendTaxValue(), $this->getUrl(wpsg_ShopController::URL_VERSANDKOSTEN)); ?>
+ <?php } else if ($this->getFrontendTaxview() == WPSG_NETTO) { ?>
+ <?php echo wpsg_translate(__('zzgl. #1#% MwSt. zzgl. <a href="#2">Versandkosten</a>', 'wpsg'), $oProduct->getFrontendTaxValue(), $this->getUrl(wpsg_ShopController::URL_VERSANDKOSTEN)); ?>
+ <?php } ?>
+ </div>
+
+ <?php $shortDescription = $oProduct->getShortDescription(); if (wpsg_isSizedString($shortDescription)) { ?>
+ <div class="wpsg_mod_productview_description theme_color_1">
+ <strong><?php echo __('Produktbeschreibung', 'wpsg'); ?></strong><br />
+ <?php echo wp_trim_words(apply_filters('the_content', $shortDescription), 90); ?>
+ </div>
+ <?php } ?>
+
+ <a class="wpsg_mod_productview_button" href="<?php echo $oProduct->getProductURL(); ?>"><?php echo __('Zum Produkt', 'wpsg'); ?><span class="fa fa-angle-double-right"></span></a>
+
+ </div>
+
+ </div>
+
+ </div>
+
+ <div style="<?php echo (($this->view['wpsg_mod_productview']['mode'] == 'grid')?'':'display:none;'); ?>" class="<?php echo (($this->view['wpsg_mod_productview']['mode'] == 'grid')?'':'hidden'); ?> wpsg_productview_product wpsg_productview_product_grid wpsg_productview_product_<?php echo $oProduct->id; ?> <?php echo $this->view['wpsg_mod_productview']['col_class']['product']; ?>">
<?php if ($this->hasMod('wpsg_mod_produktbilder')) { ?>
<?php $image_url = $this->callMod('wpsg_mod_produktbilder', 'getProductImage', array($oProduct->id, 520, 520, 'sz')); ?>
@@ -62,10 +127,12 @@ <img src="<?php echo $image_url; ?>" alt="" />
<div class="wpsg_mod_productview_go">
+
<div class="wpsg_star_wrap">
- <?php $star = rand(0, 5); ?>
- <?php for ($i = 0; $i < 5; $i ++) { ?><i class="fa fa-star<?php echo (($i >= $star)?'-o':''); ?>"></i><?php } ?>
- </div>
+ <?php $star = rand(0, 5); ?>
+ <?php for ($i = 0; $i < 5; $i ++) { ?><i class="fa fa-star <?php echo (($i >= $star)?'fa-star-active':''); ?>"></i><?php } ?>
+ </div>
+
<div class="wpsg_center">
<div class="wpsg_mod_productview_price_wrap">
|