Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: MODUL: Umschalten zwischen Galerie- und Listenansicht in product_listing

    mantis

    • Viel Schreiber
    • Beiträge: 1.188
    • Geschlecht:
    @JoEy
    Der Button kann ganz einfach mit einem Sprite integriert werden, dazu das Bild in die jeweiligen Ordner laden, die Anweisung  

    Code: Javascript  [Auswählen]
    $('.prod_toggledisplay')
    muss dann ergänzt werden genau wie die css

    IE hat Probleme in der V6 und V7 mit den Bildern diese werden doppelt angezeigt darum hatte ich mich noch nicht gekümmert.
    Das andere Problem ist mit dem Dreieck beim Hover dieses kann ganz einfach in der css gestrichen werden wird eh Überflüssig wenn mit Imagebuttons gearbeitet wird.

    Gruss
    mantis

    Sailor

    • Mitglied
    • Beiträge: 126
    • Geschlecht:
    IE hat Probleme in der V6 und V7 mit den Bildern diese werden doppelt angezeigt darum hatte ich mich noch nicht gekümmert.

    Das könnte daran liegen, dass nur die Classes removed werden (nur die CSS-Klassen gelöscht werden), aber nicht das eigentliche Bild versteckt wird.

    Sieht gut aus das Teil! Schöner Ansatz für eine Weiterentwicklung.

    Danke!

    DJ-Ready

    • Mitglied
    • Beiträge: 218
    • Geschlecht:
    Also wer will kann gern dran rumbasteln. Ich kann noch nicht genau sagen wann ich wieder Zeit finde was dran zu machen hab einfach zu viele Projekte am laufen im Moment :(

    Haina

    • Fördermitglied
    • Beiträge: 217
    Hallo DJ,
    sieht wirklich gut aus in Deinem Demoshop.

    Die gewählte Einstellung behält er aber nicht bei beim Kategoriewechsel oder Rücksprung zur Startseite, oder?

    Denke mal der Ansatz ist auch recht interessant für Shopbetreiber die sowohl Endkunden wie auch Wiederverkäufer beliefern, denn die beiden Gruppen haben unterschiedliche Vorstellungen davon ob Sie mehr Bilder sehen möchten und erst auf der Detailseite den Warenkorb-Button benötigen oder schon in der Liste um ein Beispiel zu nennen.

    Gruß an Dich

    swolfram [templatix]

    • Fördermitglied
    • Beiträge: 1.169
    • Geschlecht:
    Die Erweiterung ist wirklich saugeil... aber hat leider ein großes Manko:
    Beim wechseln der Kategorien wird die Einstellung nicht beibehalten. :`(

    DJ-Ready

    • Mitglied
    • Beiträge: 218
    • Geschlecht:
    Man könnte z.B. Cookies nutzen um die Einstellungen zu speichern oder das in der Session mit eintrage oder so.

    swolfram [templatix]

    • Fördermitglied
    • Beiträge: 1.169
    • Geschlecht:
    Ja, in der Session speichern wäre die beste Lösung, wenn mir jemand verrät wie das geht!? ;)

    luckybaron

    • Mitglied
    • Beiträge: 168
    Ich wäre auch einer Session Lösung interessiert, schon jemand eine Lösung dafür gefunden?

    Tomcraft

    • modified Team
    • Gravatar
    • Beiträge: 46.373
    • Geschlecht:
    Das wäre wirklich der letzte Schliff für das ohnehin schon schöne Modul! :B

    Vielleicht gibt sich ja jemand einen Ruck. ;-)

    Grüße

    Torsten

    Mikn

    • Neu im Forum
    • Beiträge: 19
    Hier mein angepasstes Modul. Müsst nur die Zeilen entfernen, die ihr nicht braucht und die Farben anpassen ... ;)

    Code: PHP  [Auswählen]

    $(document).ready(function(){
        $(".prod_wrapper").mouseenter(function () {
            $(this).css("background-color","#fafafa");
        });
        $(".prod_wrapper").mouseleave(function () {
            $(this).css("background-color","#eaeaea");
        });

        $(".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_title2').removeClass('prod_title_box2');
                    $('.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_ampel').removeClass('prod_ampel_box');
                                    $('.prod_rabatt').removeClass('prod_rabatt_box');
                                    $('.prod_special').removeClass('prod_special_box');
                    $('.prod_toggledisplay').html("Ansicht: Galerie");
                    $('.prod_wrapper').fadeIn("fast");
                });

                // Store Users
                createCookie("listView", "gallerie", 7);
            }
            else    {
                //add stuff
                $('.prod_wrapper').fadeOut('fast', function() {
                    // Animation complete.
                    $('.prod_wrapper').addClass('prod_wrapper_box');
                    $('.prod_title').addClass('prod_title_box');
                                    $('.prod_title2').addClass('prod_title_box2');
                    $('.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_ampel').addClass('prod_ampel_box');
                                    $('.prod_rabatt').addClass('prod_rabatt_box');
                                    $('.prod_special').addClass('prod_special_box');
                    $('.prod_toggledisplay').html("Ansicht: Liste");
                    $('.prod_wrapper').fadeIn("fast");
                });

                createCookie("listView", "liste", 7);
            }

        });

        // Use Stored Cookie Value
        if (readCookie("listView") == "liste") {
          $(".prod_toggledisplay").click();
        }

    });
     

    EDIT: Ihr müsst evtl. bei "createCookie" noch "liste" gegen "gallerie" tauschen, je nachdem wie Ihr es haben wollt. Bin da selber gerade noch bisschen am rumspielen.

    Tomcraft

    • modified Team
    • Gravatar
    • Beiträge: 46.373
    • Geschlecht:
    Okay, Cookie ist auch eine Möglichkeit, aber über die Session wäre doch noch einen Tick schicker. ;-)

    Grüße

    Torsten

    techway

    • Experte
    • Beiträge: 163
    Hallo Zusammen,

    ich möchte dieses Feature auch bei uns im Shop verwenden.
    Und zwar habe ich das Skript soweit erweitert, dass die aktuelle Ansicht in der PHP-Session gespeichert wird.

    meine js-Datei sieht nun so aus:

    Code: Javascript  [Auswählen]

    $(document).ready(function(){
        $(".prod_wrapper").mouseenter(function () {
            $(this).css("background-color","#fafafa");
        });
        $(".prod_wrapper").mouseleave(function () {
            $(this).css("background-color","#eaeaea");
        });

        $(".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_title2').removeClass('prod_title_box2');
                    $('.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_ampel').removeClass('prod_ampel_box');
                    $('.prod_rabatt').removeClass('prod_rabatt_box');
                    $('.prod_special').removeClass('prod_special_box');
                    $('.prod_toggledisplay').html("Ansicht: Galerie");
                    $('.prod_wrapper').fadeIn("fast");
                });

                // Store Value
                            $.post("jq_session.php", {action: "write", listView: "0"}, function(data){   });
            }
            else    {
                //add stuff
                $('.prod_wrapper').fadeOut('fast', function() {
                    // Animation complete.
                    $('.prod_wrapper').addClass('prod_wrapper_box');
                    $('.prod_title').addClass('prod_title_box');
                    $('.prod_title2').addClass('prod_title_box2');
                    $('.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_ampel').addClass('prod_ampel_box');
                    $('.prod_rabatt').addClass('prod_rabatt_box');
                    $('.prod_special').addClass('prod_special_box');
                    $('.prod_toggledisplay').html("Ansicht: Liste");
                    $('.prod_wrapper').fadeIn("fast");
                });

                 // Store Value
                            $.post("jq_session.php", {action: "write", listView: "1"}, function(data){   });
            }

        });

        // Use Stored Value
            $.post("jq_session.php", {action: "read"}, function(data){
                    if(data == "1")
                    {
                            $(".prod_toggledisplay").click()
                    }
            });
    });
     

    und die neue jq_session.php (im shop-root) dann so:

    Code: PHP  [Auswählen]

    <?php
    session_start();
    if (isset($_POST['action'])){
            if ($_POST['action'] == 'read') {
                    if (isset($_SESSION['listView'])) {
                            echo $_SESSION['listView'];
                    } else {
                            echo "0";
                    }
            } else if ($_POST['action'] == 'write') {
                    $_SESSION['listView'] = $_POST['listView'];
            } else {
                    echo "0";
            }
    } else {
            echo "0";
    }

    ?>
     

    Das ganze klappt auch schon, nur einen unschönen Effekt hat es noch und zwar nehmen wir an der Shop-Benutzer hat die Galerie-Ansicht gewählt und wählt jetzt eine andere Kategorie, dann sieht man kurz vorher noch die Listenansicht und danach wird erst auf die Galerie-Ansicht geswitcht.

    Hat jemand eine Idee wie man es hinbekommt dass die Kategorie sofort in der Galerie-Ansicht geladen wird oder dass der Benutzer es zumindest nicht sieht?

    EDIT: Ich hab's hingekriegt, die Lösung poste ich etwas später.

    Viele Grüße
    TechWay

    techway

    • Experte
    • Beiträge: 163
    Hier nun meine Version:

    im Vergleich zu der Version aus dem ersten Beitrag wird hier die aktuelle Einstellung der Ansicht in den Sessions gespeichert und beim nächsten Aufruf einer anderer Kategorie verwendet. Dann werden noch die Icons für die Ansicht angezeigt (siehe Screenshot):

    [ Für Gäste sind keine Dateianhänge sichtbar ]

    die Javascript Datei:

    Code: PHP  [Auswählen]
    $(document).ready(function(){
        $(".prod_wrapper").mouseenter(function () {
            $(this).css("background-color","#fafafa");
        });
        $(".prod_wrapper").mouseleave(function () {
            $(this).css("background-color","#eaeaea");
        });

        $(".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_title2').removeClass('prod_title_box2');
                    $('.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_ampel').removeClass('prod_ampel_box');
                    $('.prod_rabatt').removeClass('prod_rabatt_box');
                    $('.prod_special').removeClass('prod_special_box');
                    $('.prod_toggledisplay').html('<img src="templates/xtc5/img/list-on.png" /> <img src="templates/xtc5/img/gallery-off.png" />');
                    $('.prod_wrapper').fadeIn("fast");
                });

                // Store Value
            $.post("jq_session.php", {action: "write", listView: "0"}, function(data){   });
            }
            else    {
                //add stuff
                $('.prod_wrapper').fadeOut('fast', function() {
                    // Animation complete.
                    $('.prod_wrapper').addClass('prod_wrapper_box');
                    $('.prod_title').addClass('prod_title_box');
                    $('.prod_title2').addClass('prod_title_box2');
                    $('.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_ampel').addClass('prod_ampel_box');
                    $('.prod_rabatt').addClass('prod_rabatt_box');
                    $('.prod_special').addClass('prod_special_box');
                    $('.prod_toggledisplay').html('<img src="templates/xtc5/img/list-off.png" /> <img src="templates/xtc5/img/gallery-on.png" />');
                    $('.prod_wrapper').fadeIn("fast");
                });

                 // Store Value
                            $.post("jq_session.php", {action: "write", listView: "1"}, function(data){   });
            }
        });
    });

    die "jq_session.php":

    Code: PHP  [Auswählen]
    <?php

    include('includes/application_top.php');

    if (isset($_POST['action'])){
            if ($_POST['action'] == 'read') {
                    if (isset($_SESSION['listView'])) {
                            echo $_SESSION['listView'];
                    } else {
                            echo "0";
                    }
            } else if ($_POST['action'] == 'write') {
                    $_SESSION['listView'] = $_POST['listView'];
            } else {
                    echo "0";
            }
    } else {
            echo "0";
    }

    ?>

    die "product_listing_v1.html":

    Code: PHP  [Auswählen]
    {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 || $SORTING_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}<div style="float:left; margin-bottom:10px">{$MANUFACTURER_DROPDOWN}</div>{/if}
    {/if}

    <div style="float:right; margin-left: 10px; margin-bottom:10px; height:23px; line-height:23px">
    Ansicht wählen:
    {if $smarty.session.listView==1}
            <div class="prod_toggledisplay"> <img src="{$tpl_path}img/list-off.png" /> <img src="{$tpl_path}img/gallery-on.png" /> </div>
    {else}
            <div class="prod_toggledisplay"> <img src="{$tpl_path}img/list-on.png" /> <img src="{$tpl_path}img/gallery-off.png" /> </div>
    {/if}
    </div>

    {$NAVIGATION}

    {if $smarty.session.listView==1}
            <!-- GalerieAnsicht -->
            <div class="prod_hrproductpreview prod_hrproductpreview_box"></div>
            {foreach name=aussen item=module_data from=$module_content}
            <div class="prod_wrapper prod_wrapper_box">
                    <p class="prod_title prod_title_box"><a href="{$module_data.PRODUCTS_LINK}">{$module_data.PRODUCTS_NAME}</a></p>
                    {if $module_data.PRODUCTS_SHIPPING_NAME}<p class="prod_shippingtime prod_shippingtime_box">{#text_shippingtime#}{$module_data.PRODUCTS_SHIPPING_NAME}</p>{/if}
                    <div class="prod_image_border prod_out prod_image_border_box prod_out_box">{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 prod_image_box prod_out_box" /></a>{else}<div class="prod_noimage prod_noimage_box"> <br />No Image </div>{/if}</div>
                    <div class="prod_shortdesc prod_shortdesc_box">
                            <div class="prod_image_border prod_image_border_box">{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_image_box" /></a>{else}<div class="prod_noimage prod_noimage_box"> <br />No Image</div>{/if}</div>
                            <div style="padding-top: 10px;">
                            {$module_data.PRODUCTS_SHORT_DESCRIPTION}
                            </div>
                    </div>
                            <div class="prod_break prod_break_box">
                                    <div class="prod_price prod_price_box">{$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 prod_tax_vpe_box">
                                            {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 prod_buttons_box"><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 prod_buynow_box">{$module_data.PRODUCTS_BUTTON_BUY_NOW}</div>
                            </div>
                    <!--p class="prod_break" /></p-->
            </div>
            {/foreach}
            <div class="prod_hrproductpreview prod_hrproductpreview_box"></div>
    {else}

            <!-- ListenAnsicht -->
            <div class="prod_hrproductpreview"></div>

            {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>
                            <div style="padding-top: 10px;">
                            {$module_data.PRODUCTS_SHORT_DESCRIPTION}
                            </div>
                    </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>
    {/if}

    {$NAVIGATION}

    und die "stylesheets.css":

    Code: CSS  [Auswählen]
    /* 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;}
    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; 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:14px; 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:18px; 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:160px; 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: 227px; float:left; height:220px; left:0px; margin:2px;}
    .prod_title_box         { min-height:25px; height:25px; display:inline; width:200px; 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       { text-align:center; width: 227px; height:auto; float: left; line-height:normal; /*display:none; */}
    .prod_buttons_box       { width:235px; float:left; margin-bottom:10px; clear:left; text-align:center;}
    .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*/

    [EDIT Tomcraft 19.05.2011: Fehler in Anleitung korrigiert, Danke an ThYpHoOn für den Hinweis.]

    speedy

    • Viel Schreiber
    • Beiträge: 3.214
    Sehr schön gemacht die ganze Zeile mit den Filtern.
    Das ist schon nahe an diesem Ergebnis, was ich bislang am sinnvollsten fand für z.B. modified eCommerce Shopsoftware:

    Habe hier eine Seite gefunden, dort ist das finde ich perfekt umgesetzt:
    http://www.preisgigant.de/pc-bundles-aufruestsets/tuning-kit-intel?p=1&sTemplate=list

    Beinhaltet zumindest funktionell u.a. folgende Module:
    MODUL: Artikel-Sortierung mehrsprachig
    MODUL: Umschalten zwischen Galerie- und Listenansicht in product_listing
    Länge der Produktliste einstellbar

    Darunter ggf. noch Volkers Modul, wenn's fertig ist:
    MODUL: Artikelfilter für Attribute im Frontend

    und es sollten keine Wünsche mehr offen sein bei den Kunden. Alles ist damit möglich bzw. zu finden ;)


    Quelle: Gesucht: Anzahl Produkte pro Seite

    Tomcraft

    • modified Team
    • Gravatar
    • Beiträge: 46.373
    • Geschlecht:
    Hi Steffen,

    das gefällt mir richtig gut! :B

    Das würde ich gerne in den Trunk mit einbauen. Könntest du fertige Dateien auf Basis des Trunks erstellen, die ich nur ins SVN noch einfügen muss? :?

    Grüße

    Torsten

    1 Antworten
    1517 Aufrufe
    04. Dezember 2017, 08:20:49 von awids
    4 Antworten
    4799 Aufrufe
    08. September 2010, 17:38:25 von franky_n
    1 Antworten
    2798 Aufrufe
    13. März 2010, 09:15:15 von jannemann