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: Sliding-Tabs oder Accordion-Tabs auf der Produktdetailseite

    Sick

    • Fördermitglied
    • Beiträge: 570
    • Geschlecht:
    Ich hab mal ne grundsätzliche Frage zu den Tabs.

    Sind die Standardmäßig animiert?
    Also wie z.B. hier zu sehen: http://www.chris-christensen.de/Shampoo/Chris-Christensen-Day-To-Day-Moisturizing-Shampoo::1.html

    Oder ist da zusätzlich was gemacht worden?

    Bei einem neu installierten Shop und auch im Demoshop schalten die Tabs ohne Animation um.
    Sieht aus wie CSS.
    Oder habe ich vielleicht Einstellungen nicht richtig getroffen?

    Gruß

    Tomcraft

    • modified Team
    • Gravatar
    • Beiträge: 46.369
    • Geschlecht:
    Schau doch einfach mal im Quelltext des Shops. ;-)

    Suche in der "/templates/<dein-template>/javascript/general.js.php":

    Code: PHP  [Auswählen]
                    $('#tabbed_product_info').tabs();

    und ersetze mit:

    Code: PHP  [Auswählen]
                    $('#tabbed_product_info').tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 15000);

    Weil ich das ganz sinnvoll finde, habe ich es in r2107 in den Trunk übernommen.

    Hatten wir übrigens auch schon hier als Anleitung: ANLEITUNG: Fading für die Tabs in der product_info_tabs_v1.html

    Grüße

    Torsten

    Sick

    • Fördermitglied
    • Beiträge: 570
    • Geschlecht:
    Jepp, läuft jetzt animiert.

    Vielen Dank Torsten.

    Gruß

    sowas

    • Neu im Forum
    • Beiträge: 33
    Hallo,

    ich habe modified eCommerce Shopsoftware v1.05 dated: 2010-07-18 SP1b mit eigenem Template.
    Habe keine Tab funktion.
    Wenn ich auf xtc5 Template schalte geht es.

    Wer kann mir helfen?

    Danke an die die versuchen
    & Grauß

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.988
    • Geschlecht:
    Dann vergleiche mal folgende Dateien in deinem Template mit denen aus dem xtc5-Template:
    /javascript/general.js.php
    /module/product_info/product_info_tabs_v1.html

    Gruß,
    noRiddle

    sowas

    • Neu im Forum
    • Beiträge: 33
    Hallo und danke für deine schnelle Antwort,

    ich habe verglichen aber leider nicht wirklich den durchblick! Leider noch nicht.

    aber ich bin um jede Hilfe dankbar die ich bekomme:-)
    Wenn es dir nicht´s ausmacht einen Blick auf die von dir genannten Dateien zu werfen?

    Dankeschön und Gruß

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.988
    • Geschlecht:
    Der zip-Ordner ist leer.

    sowas

    • Neu im Forum
    • Beiträge: 33
    Hab Ihn zwei mal runtergeladen.

    Beide mal war was drin:

    Gruß

    sowas

    • Neu im Forum
    • Beiträge: 33
    Hier die general.js.php

    Code: PHP  [Auswählen]
    <?php
    /* -----------------------------------------------------------------------------------------
       $Id: general.js.php 1262 2005-09-30 10:00:32Z mz $

       XT-Commerce - community made shopping
       http://www.(( Wir dulden keine kommerziellen Werbelinks - Bitte <a href="index.php?topic=3013.0">Forenregeln</a> beachten! ))

       Copyright (c) 2003 XT-Commerce
       -----------------------------------------------------------------------------------------
       Released under the GNU General Public License
       ---------------------------------------------------------------------------------------*/



       // this javascriptfile get includes at the BOTTOM of every template page in shop
       // you can add your template specific js scripts here
    ?>
    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.tools.scrollable.min.js" type="text/javascript"></script>
    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/articleSlider.js" type="text/javascript"></script>
    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>
    <!-- Products-Treadmill (c)2008 by Hetfield - www.MerZ-IT-SerVice.de - Begin -->
            <link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/treadmill.css" type="text/css" media="screen" />
            <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.easing.1.3.js" type="text/javascript"></script>
            <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jcarousellite_1.0.1.pack.js" type="text/javascript"></script>
            <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/products_treadmill.js" type="text/javascript"></script>
            <?php
                    if (SHOW_PRODUCTS_TREADMILL_POSITION == 'box') {
                            require(DIR_WS_MODULES . FILENAME_PRODUCTS_TREADMILL);
                    }      
            ?>
            <!-- Products-Treadmill (c)2008 by Hetfield - www.MerZ-IT-SerVice.de - End -->




    <!-- Imageslider (c)2008 by Hetfield - www.MerZ-IT-SerVice.de - Begin -->
    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.innerfade.js" type="text/javascript"></script>
    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/imageslider.js" type="text/javascript"></script>
    <!-- Imageslider (c)2008 by Hetfield - www.MerZ-IT-SerVice.de - End -->
    <script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/superfish.js"></script>
    <script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/supersubs.js"></script>
    <script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/hoverIntent.js"></script>
    <script type='text/javascript'>
        $(document).ready(function(){
            $("ul.sf-menu").supersubs({
                minWidth:    12,   // minimum width of sub-menus in em units
                maxWidth:    27,   // maximum width of sub-menus in em units
                extraWidth:  1     // extra width can ensure lines don't sometimes turn over
                                   // due to slight rounding differences and font-family                    
            }).superfish();  // call supersubs first, then superfish, so that subs are
                             // not display:none when measuring. Call before initialising
                             // containing tabs for same reason.
        });
    </script>
    <?php// BOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>
    <?php
    if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO )) {
    ?>
    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript">
            $(function() {
                    $("#tabbed_product_info").tabs();
                    $("#accordion_product_info").accordion({ autoHeight: false });
            });    
    </script>
    <noscript>
            <link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/no_javascript.css" type="text/css" media="screen" />
    </noscript>
    <?php
    }
    ?>
    <?php// EOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>

    und die product_info_tabs_v1.html:

    Code: XML  [Auswählen]
    {config_load file="$language/lang_$language.conf" section="product_info"}
    {$FORM_ACTION}
    <h1>{$PRODUCTS_NAME}</h1>

    <div id="productinfowrap">
    <table><tr><td style="padding-right:20px;">
            {if $PRODUCTS_IMAGE!=''}

                    <a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" />{if $PRODUCTS_POPUP_LINK!=''}<br/>{#text_zoom#}{/if}</a>

            {/if}</td><td>
            <div id="productinfoprice">
                   
                            <p class="productprice"><strong>{$PRODUCTS_PRICE}</strong></p>
                            <p class="taxandshippinginfo" style="white-space:nowrap">{$PRODUCTS_TAX_INFO}{if $PRODUCTS_SHIPPING_LINK}{$PRODUCTS_SHIPPING_LINK}{/if}</p>
                            {if $SHIPPING_NAME}<p class="shippingtime"><strong>{#text_shippingtime#}</strong>{if $SHIPPING_IMAGE}<img src="{$SHIPPING_IMAGE}" alt="{$SHIPPING_NAME}" />{/if} {$SHIPPING_NAME}</p>
                            {/if}
                            {if $PRODUCTS_VPE}
                            <div class="hrlightgrey"></div>{$PRODUCTS_VPE}{/if}
                            {if $MODULE_graduated_price !=''}<div class="hrlightgrey"></div>{$MODULE_graduated_price}{/if}
                            {if $PRODUCTS_DISCOUNT!=''}<div class="hrlightgrey"></div>{$PRODUCTS_DISCOUNT}{/if}
                            {if $PRODUCTS_FSK18=='true'}<div class="hrlightgrey"></div><img src="{$tpl_path}img/fsk18.gif" alt="" style="cursor:default" />{/if}
                            {if $PRODUCTS_MODEL!=''}<div class="hrlightgrey"></div>
                            <strong>{#model#}</strong> {$PRODUCTS_MODEL}{/if}
                            {if $PRODUCTS_URL != ''}
                            <div class="hrlightgrey"></div><div style="padding-top:5px;">{$PRODUCTS_URL}</div>
                            {/if} <br />
                            <div style="margin-top:10px"></div>
                            {$PRODUCTS_PRINT}

                    {if $PRODUCTS_DATE_AVIABLE != ''}<p>{$PRODUCTS_DATE_AVIABLE}</p>{/if}
            </div> 
            <div style="clear:both;"></div>
        </td></tr></table>
            {if $MODULE_product_options !=''}
            <div class="productoptions">{$MODULE_product_options}</div>{/if}
    <!-- BOF - Tomcraft - 2009-11-28 - Included xs:booster //-->
            {if $XTB_REDIRECT_USER_TO=='product'}<div style='width:400px;padding:10px;color:white;background-color:green;'><strong>Sie haben die eBay Auktion gewonnen!</strong><br/>Bitte w&auml;hlen Sie nun noch die gew&uuml;nschten Produkteigenschaften und legen Sie den Artikel danach in den Warenkorb, um mit der Zahlung fortzufahren und das Produkt versandfertig zu machen!</div>{/if}
    <!-- EOF - Tomcraft - 2009-11-28 - Included xs:booster //-->
            <div class="addtobasket">
            <table border="0" cellspacing="0" cellpadding="2">
                    <tr>
                    <td style="width:100%; padding-right:5px;">{$ADD_QTY}</td>
                    <td>{$ADD_CART_BUTTON}</td>
                    </tr>
            </table>
            </div> 
    </div>

    {$FORM_END}

    {*BEGIN TABS*}
    <div id="tabbed_product_info">

    <ul>
            {if $PRODUCTS_DESCRIPTION !=''}<li><a href="#tab_description">{#description#}</a></li>{/if}
            {if $MODULE_cross_selling != '' || $MODULE_reverse_cross_selling != ''}<li><a href="#tab_cross_selling">{#cross_selling#}</a></li>{/if}
            {if $MODULE_also_purchased != ''}<li><a href="#tab_also_purchased">{#also_purchased#}</a></li>{/if}
            {if $MODULE_products_reviews != ''}<li><a href="#tab_reviews">{#products_reviews#}</a></li>{/if}
            {if $MODULE_products_media != ''}<li><a href="#tab_media">{#products_media#}</a></li>{/if}
            {if $more_images|@count > 0}<li><a href="#tab_more_images">{#more_images#}</a></li>{/if}
    </ul>

    {if $PRODUCTS_DESCRIPTION !=''}<div id="tab_description">{$PRODUCTS_DESCRIPTION}</div>{/if}
    {if $more_images|@count > 0}<div id="tab_more_images">
            <!-- More Pictures -->
            <div class="morepics">
            {foreach item=more_images_data from=$more_images}
                    <a class="thickbox" rel="{$PRODUCTS_ID}" title="{$PRODUCTS_NAME}" href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>                          
            {/foreach}
            </div>
            <div style="clear:both;"></div>
            </div>
    {/if}
    {if $MODULE_products_media != ''}<div id="tab_media">{$MODULE_products_media}</div>{/if}
    {if $MODULE_products_reviews != ''}<div id="tab_reviews">{$MODULE_products_reviews}</div>{/if}
    {if $MODULE_cross_selling != '' || $MODULE_reverse_cross_selling != ''}<div id="tab_cross_selling">{$MODULE_cross_selling}{if $MODULE_reverse_cross_selling != ''}{$MODULE_reverse_cross_selling}{/if}</div>{/if}
    {if $MODULE_also_purchased != ''}<div id="tab_also_purchased">{$MODULE_also_purchased}</div>{/if}

    </div>
    {*END TABS*}

    {if $PRODUCTS_ADDED != ''}<p class="productinfoproductadded">{$PRODUCTS_ADDED}</p>{/if}
    {$PRODUCT_NAVIGATOR}
     

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.988
    • Geschlecht:
    Bei der Menge an Javascript-Dateien die du implementiert hast, sind Konflikte der diversen Plugins fast vorprogrammiert.
    Soweit ich weiß ist die jquery.tools.*.js nicht ohne weiteres kompatibel zur jquery-ui.js.
    Was sagt denn die Firebug-Konsole ?

    Ich tippe ja darauf, daß ein jQuery.noConflict(); nötig ist.
    Solltest mal die Suchmaschine deines Vertauens bemühen.

    Gruß,
    noRiddle

    Ingo_G

    • Neu im Forum
    • Beiträge: 4
    Re: MODUL: Sliding-Tabs oder Accordion-Tabs auf der Produktdetailseite
    Antwort #100 am: 20. Dezember 2012, 21:37:30
    Hallo,

    da ich mich sehr für das Thema interessiere, eine Frage hierzu. Besteht die Möglichkeit oder gibt es ein Modul, wo ich im Backend die Tabs selbst definieren kann und ich dann pro Tab zum Beispiel ein Textfeld zur Eingabe zur Verfügung gestellt bekomme. Im Frontend sollte dann der neue Tab in der Produkt Info Tabs erscheinen und der dazu im Backend gespeicherte Text.

    Da ich mich ein wenig auskenne, würde mir auch eine Hardcore-Version mit Schreibarbeit genügen.

    Recht herzlichen Dank

    Gruß
    Ingo

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.988
    • Geschlecht:
    Re: MODUL: Sliding-Tabs oder Accordion-Tabs auf der Produktdetailseite
    Antwort #101 am: 20. Dezember 2012, 21:48:54
    Wenn du ein günstiges Modul möchtest mit welchem man einfach über den Editor beliebig viele Tabs generieren kann, bitte PM an mich.

    Gruß,
    noRiddle
    Trade Republic - Provisionsfrei Aktien handeln
    3 Antworten
    2868 Aufrufe
    04. August 2010, 08:25:37 von herrkuless
    14 Antworten
    8150 Aufrufe
    10. April 2012, 14:35:14 von Thomas K.
    4 Antworten
    3139 Aufrufe
    21. Dezember 2012, 23:27:50 von Dato
    1 Antworten
    3177 Aufrufe
    20. Mai 2012, 11:17:55 von elpego
               
    anything