Hier noch mal auf Wunsch mein mini Modul/Beitrag aus dem Thema "
Galerie oder Listen Ansicht" als eigenes Thema, damit es nicht komplett untergeht hier im Forum.
Soooo ... ich hab da mal was vorbereitet
Neue "product_listing" Template mit einem "Toggle view" Knopf um schön mit jQuery zwischen zwei Ansichten hin und her zu schalten (fast so wie auf dem Bild im ersten Post). Das ganze dann noch mit einem netten kleinen Fade Effekt vor jedem toggle.
Das ganze wurde mit einer frischen modified eCommerce Shopsoftware 1.05 Installation mit dem xtc5 Template gemacht
In
templates/xtc5/stylesheet.css ganz unten einfügen:
/* BOF - DJ-Ready - jQuery toggle list and box view in article listing*/
.prod_toggledisplay { cursor:pointer; display:block; float:right; font-weight:bold; font-size:14px;}
.prod_toggledisplay:hover {color:#893769;}
.prod_toggledisplay:hover:before { content:"\25B6020"; }
div.prod_hrproductpreview { clear:both; padding-top:1px; height:0; overflow:hidden; margin:12px 0px; display:inline; height:0px; line-height:0px; display:block; background-image:url(img/hr_productpreview.gif);}
/* base classes */
.prod_wrapper { border:1px solid #ccc; padding: 0px 10px; width:505px; min-height:155px; background-color:#EDEDED; margin:5px 5px 15px 5px; left:-5px; position:relative; }
.prod_title { border:0px solid #0ff; font-weight:bold; font-size:16px; line-height:24px; width:390px; margin:0 auto;text-align:left; float:left;}
.prod_shippingtime { border:0px solid #ff0; line-height:24px; margin:0 auto;text-align:right; float:right; color:#888;}
.prod_image_border { width:120px; height:80px; float:left; position:relative; margin:0px; margin-top:5px; margin-right:5px; margin-bottom:5px;}
.prod_image { border:1px solid #ccc; }
.prod_shortdesc { border:0px solid #0f0; display:block; border-bottom:1px dotted #ccc; margin-bottom:10px; min-height:90px; clear:both;}
.prod_price { border:0px solid #00f; width:225px; min-height:60px; float:left; font-weight:bold; font-size:24px; display:inline; line-height:21px; font-variant:small-caps;}
.prod_price span { color:#f00; font-size:14px;}
.prod_price small { font-size:14px;}
.prod_tax_vpe { border:0px solid #f00; width:269px; float:right; height:35px; vertical-align:bottom; line-height:6px; text-align:right; color:#888;}
.prod_tax { border:0px solid #00f; width:230px; height:24px; min-height:24px; clear:both; float:left; text-align:right; font-weight:bold; font-size:16px;}
.prod_buttons { border:0px solid #00f; width:90px; height:24px; min-height:24px; float:right; text-align:right; clear:right;}
.prod_buynow { border:0px solid #00f; width:177px; height:24px; min-height:24px; float:right; text-align:right;}
.prod_out { display:none; }
.prod_break { height:70px;}
.prod_noimage { width:120px; height:80px; color:#666; font-weight:bold; text-align:center; background-color:#ECECEC; border:1px solid #ccc;}
/* additional classes which ADD to the base classes */
.prod_wrapper_box { width: 236px; float:left; height:170px; left:0px; margin:2px;}
.prod_title_box { min-height:25px; height:25px; display:inline; width:240px; overflow:hidden; }
.prod_shippingtime_box { display:none; }
.prod_image_border_box { width:100%; text-align:center;}
.prod_image_box { margin-left: auto; margin-right: auto; }
.prod_shortdesc_box { display:none; }
.prod_price_box { width:235px; float:left; text-align:center; color:#666; min-height:25px; height:25px; overflow:hidden;}
.prod_price_box br { display:none; clear:both; overflow:hidden; padding:0px; margin:0px; display:inline; height:0px; line-height:0px; display:block;}
.prod_price_box span { color:#0f0; font-size:14px; display:none; clear:both; overflow:hidden; padding:0px; margin:0px; display:inline; height:0px; line-height:0px; display:block;}
.prod_price_box small { font-size:14px; display:none; clear:both; overflow:hidden; padding:0px; margin:0px; display:inline; height:0px; line-height:0px; display:block;}
.prod_tax_vpe_box { display:none; }
.prod_buttons_box { width:235px; float:left; margin-bottom:10px; clear:left;}
.prod_buynow_box { display:none; }
.prod_out_box { display:block; }
.prod_break_box { float:left; }
.prod_noimage_box { width:120px; height:80px; margin-left: auto; margin-right: auto; }
/* EOF - DJ-Ready - jQuery toggle list and box view in article listing*/
In
templates/xtc5/module/product_listing/product_listing_v1.html den Originalcode mit folgendem ersetzen (oder neue product_listing Template machen und für die jeweilige kategorie auswählen, ist egal):
{config_load
file="$language/lang_$language.conf" section
="index"} {if $CATEGORIES_HEADING_TITLE} <h1
>{$CATEGORIES_HEADING_TITLE}</h1
> {else} <h1
>{$CATEGORIES_NAME}</h1
> {/if} {if $CATEGORIES_DESCRIPTION || $CATEGORIES_IMAGE || $MANUFACTURER_DROPDOWN} {if $CATEGORIES_IMAGE}<img src
="{$CATEGORIES_IMAGE}" alt
="{$CATEGORIES_NAME}" class="imgLeft" /><br
/>{/if} {if $CATEGORIES_DESCRIPTION}{$CATEGORIES_DESCRIPTION}<br
/>{/if} {if $MANUFACTURER_DROPDOWN}{$MANUFACTURER_DROPDOWN}<br
/>{/if} {/if} {$NAVIGATION} <div
class="prod_hrproductpreview"></div
> <span
class="prod_toggledisplay">Ansicht
: Galerie
</span
><br
/> {foreach name
=aussen item
=module_data from
=$module_content} <div
class="prod_wrapper"> <p
class="prod_title"><a href
="{$module_data.PRODUCTS_LINK}">{$module_data.PRODUCTS_NAME
}</a
></p
> {if $module_data.PRODUCTS_SHIPPING_NAME
}<p
class="prod_shippingtime">{#text_shippingtime#}{$module_data.PRODUCTS_SHIPPING_NAME}</p>{/if}
<div
class="prod_image_border prod_out">{if $module_data.PRODUCTS_IMAGE
!=''}<a href
="{$module_data.PRODUCTS_LINK}"><img src
="{$module_data.PRODUCTS_IMAGE}" alt
="{$module_data.PRODUCTS_NAME}" class="prod_image prod_out" /></a
>{else}<div
class="prod_noimage"> <br
/>No Image
</div
>{/if}</div
> <div
class="prod_shortdesc"> <div
class="prod_image_border">{if $module_data.PRODUCTS_IMAGE
!=''}<a href
="{$module_data.PRODUCTS_LINK}"><img src
="{$module_data.PRODUCTS_IMAGE}" alt
="{$module_data.PRODUCTS_NAME}" class="prod_image" /></a
>{else}<div
class="prod_noimage"> <br
/>No Image
</div
>{/if}</div
> {$module_data.PRODUCTS_SHORT_DESCRIPTION
} </div
> <div
class="prod_break"> <div
class="prod_price">{$module_data.PRODUCTS_PRICE
}</div
> <!--strong
><span
class="productOldPrice"><small
>Statt
</small
><del
> 11,90 EUR
</del
></span
><br
/> Nur
9,52 EUR
<br
/><small
>Sie sparen
20 % / 2,38 EUR
</small
></strong
><br
/--> <div
class="prod_tax_vpe"> {if $module_data.PRODUCTS_VPE
}<p
class="vpe">{$module_data.PRODUCTS_VPE
}</p
>{/if} <p
class="taxandshippinginfo">( {$module_data.PRODUCTS_TAX_INFO
}{$module_data.PRODUCTS_SHIPPING_LINK
} )</p
> </div
> <div
class="prod_buttons"><a href
="{$module_data.PRODUCTS_LINK}"><img src
="{$tpl_path}buttons/{$language}/button_product_more.gif" alt
="Details" border
="0" /></a
></div
> <div
class="prod_buynow">{$module_data.PRODUCTS_BUTTON_BUY_NOW
}</div
> </div
> <!--p
class="prod_break" /></p
--> </div
> {/foreach} <div
class="prod_hrproductpreview"></div
> {$NAVIGATION} In
templates/xtc5/javascript/general.js.php ganz unten einfügen:
<!-- BOF - DJ-Ready - jQuery toggle list and box view in article listing -->
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/ready.listboxviewtoggle.js" type="text/javascript"></script>
<!-- BOF - DJ-Ready - jQuery toggle list and box view in article listing -->
Im Ordner
templates/xtc5/javascript eine neue Datei erstellen mit dem Namen
ready.listboxviewtoggle.js und folgendem Inhalt:
$(document).ready(function(){
$(".prod_wrapper").mouseenter(function () {
$(this).css("background-color","#e8e4e7");
});
$(".prod_wrapper").mouseleave(function () {
$(this).css("background-color","#EDEDED");
});
$(".prod_toggledisplay").click(function () {
if ($('.prod_wrapper').is('.prod_wrapper_box')) {
//remove stuff
$('.prod_wrapper').fadeOut('fast', function() {
// Animation complete.
$('.prod_wrapper').removeClass('prod_wrapper_box');
$('.prod_title').removeClass('prod_title_box');
$('.prod_shippingtime').removeClass('prod_shippingtime_box');
$('.prod_image_border').removeClass('prod_image_border_box');
$('.prod_image').removeClass('prod_image_box');
$('.prod_shortdesc').removeClass('prod_shortdesc_box');
$('.prod_price').removeClass('prod_price_box');
$('.prod_tax_vpe').removeClass('prod_tax_vpe_box');
$('.prod_buttons').removeClass('prod_buttons_box');
$('.prod_buynow').removeClass('prod_buynow_box');
$('.prod_out').removeClass('prod_out_box');
$('.prod_break').removeClass('prod_break_box');
$('.prod_noimage').removeClass('prod_noimage_box');
$('.prod_toggledisplay').html("Ansicht: Galerie");
$('.prod_wrapper').fadeIn("fast");
});
}
else {
//add stuff
$('.prod_wrapper').fadeOut('fast', function() {
// Animation complete.
$('.prod_wrapper').addClass('prod_wrapper_box');
$('.prod_title').addClass('prod_title_box');
$('.prod_shippingtime').addClass('prod_shippingtime_box');
$('.prod_image_border').addClass('prod_image_border_box');
$('.prod_image').addClass('prod_image_box');
$('.prod_shortdesc').addClass('prod_shortdesc_box');
$('.prod_price').addClass('prod_price_box');
$('.prod_tax_vpe').addClass('prod_tax_vpe_box');
$('.prod_buttons').addClass('prod_buttons_box');
$('.prod_buynow').addClass('prod_buynow_box');
$('.prod_out').addClass('prod_out_box');
$('.prod_break').addClass('prod_break_box');
$('.prod_noimage').addClass('prod_noimage_box');
$('.prod_toggledisplay').html("Ansicht: Liste");
$('.prod_wrapper').fadeIn("fast");
});
}
});
});
Nun hat man eine Gallery und List View so in etwa wie auf JoEys Bildern. Ist zwar noch nicht ganz perfekt aber sollte reichen um es selber zum laufen zu bringen.
Hab leider keine Shop online den ich für Demo Zwecke missbrauchen könnte also muss es der nackte Code hier erstmal tun.
Viel Spass damit
Es gibt aber noch ein paar kleine Probleme mit der Darstellung in MSIE (wie immer halt) die aber ohne weiteres behoben werden können. Habe im Moment nur keine Zeit dafür ... vielleicht morgen.
Und hier noch 2 Bilder der verschiedenen Ansichten
Die sind bewusst mehr oder weniger nach dem Beispiel aus dem anderen Thread gestaltet. Ich denke das werde ich aber noch ändern so dass z.B. der "in den Warenkorb" Button auch noch mit drin ist und MwSt Infos auch noch vllt als floatbox/bubble mit drin sind.
Schauts euch erstma an und schlagt Verbesseungen vor.
Listenansicht: [ Für Gäste sind keine Dateianhänge sichtbar ]
Galerieansicht: [ Für Gäste sind keine Dateianhänge sichtbar ]
[
EDIT Tomcraft 17.04.2011: Eine erweiterte Version, die die Ansicht in der Session speichert, findet ihr
hier von techway.]
Linkback: https://www.modified-shop.org/forum/index.php?topic=7058.0 
