Artikelbeschreibung in Tabs

[andpa87]

Hallo,

ich befasse mich seit kurzem mit dem xt-commerce Shop in der aktuellen Version und möchte nun für meine Artikel weitere Beschreibungen hinzufügen.

Beispielsweise: Artikelbeschreibung, Technische Daten, Anleitungen ... also 3 verschiedene Tabs.

Ähnlich ist das hier gelöst.

Tunturi Bodyshaper B60 inkl. Butterfly - günstig kaufen bei Fitstore24.com

Gefunden habe ich dann (dank der Suchfunktion hier und google)
"Erweiterte Produktbeschreibungen und Register Tab Browsing in der Product Info"

und eine Anleitung auf: xt Commerce Online Shop xtCommerce Module, Templates und Erweiterungen - xt:Commerce Module für xt:Commerce, commerce:SEO, Gambio und xtcModified

Jedoch ist die dort angebotene Lösung nicht für Version VEYTON Version 4.

Über die Datenbank via "products_description" kopieren und eine weitere einfügen (wie ichs hier im Forum gelesen habe) funktioniert auch gut, dann habe ich im Admin-Bereich ein weiteres Feld ...

jedoch fehlt mir nachwievor die Möglichkeite im Shop dann zwischen den Bereichen zu "switchen"

Ich wäre dankbar wenns bereits eine Möglichkeit geben würde dieses nach einem Tutorial (ähnlich wie bei der oben angegeben Seite) umzusetzen - oder es bereits möglich ist im Shop - ich jedoch etwas übersehen habe.

Viele Grüße

Andreas


PS: Ich hoffe man möge es mir nachsehen wenn dies nicht der richtige Bereich für diese Frage ist.

[andpa87]

leider habe ich bisher selbstständig keine Lösung bisher gefunden.

Hat den niemand einen Tipp?

Viele Grüße
andpa87

[newby5]

Hallo andpa87,
hast du inzwischen eine Lösung gefunden? Ich stehe vor dem gleichen Problem, dass ich nicht weiß wie ich anfangen soll. Ich werde es mal mit dem Tutorial versuchen, dass du gepostet hast, aber du hast ja geschrieben, dass es mit diesem nicht 100%-ig funktioniert.
Lg

[wirverbindenwelten.de]

Wie bereits beschrieben müsst ihr in der Datenbank entsprechend die Produkttabelle um die gewünschten Spalten erweitern und dann im Template beispielsweise per jQuery Tabs integrieren und in den entsprechenden Tabs könnt ihr dann die selbst angelegten Produktfelder per Variable ansprechen.

[newby5]

Zitat von wirverbindenwelten.de

Wie bereits beschrieben müsst ihr in der Datenbank entsprechend die Produkttabelle um die gewünschten Spalten erweitern und dann im Template beispielsweise per jQuery Tabs integrieren und in den entsprechenden Tabs könnt ihr dann die selbst angelegten Produktfelder per Variable ansprechen.

Angenommen, die Tabellen existieren schon, wie z.B. "Empfohlenes Zubehör", dann muss ich es ja nicht mehr anlegen, sondern ich müsste es ja in die Tabs (mittels jQuery erstellt) integrieren können, oder?

[wirverbindenwelten.de]

Ja, hier ein Beispiel wie ich es in einem Projekt gelöst habe:

		{if $products_extra_description !=''}
			<div id="tabs">
				<ul>
					<li><a href="#productinfo_desc">Artikelbeschreibung</a></li>
					<li><a href="#productinfo_extra_desc">Zusatzinformationen</a></li>
				</ul>
		{/if}
		
				{if $products_description !=''}
					<div id="productinfo_desc">
			
							{*<h2>{txt key=TEXT_PRODUCTS_DESCRIPTION}</h2>*}
							{$products_description}
			
					</div>
				{/if}
				{if $products_extra_description !=''}
					<div id="productinfo_extra_desc">
			
							{*<h2>{txt key=TEXT_PRODUCTS_EXTRA_DESCRIPTION}</h2>*}
							{$products_extra_description}
			
					</div>
				{/if}
		
		{if $products_extra_description !=''}	
			</div>
		{/if}

[newby5]

Vielen Dank, ich werde es später (oder evt erst morgen) mal ausprobieren. Bin gerade an einem weiteren Problem

[newby5]

So, nun bin ich endlich bei den Tabs angekommen

Kann mir bitte jemand sagen, in welche Datei der jQuery-Code gehört? Ich habe (meines Erachtens nach) alle Dateien nun ausprobiert, aber nichts funktioniert.

Vielen Dank schon mal im Voraus
Lg, newby5


Nachtrag: Habe es inzwischen selbst herausgefunden.

[wirverbindenwelten.de]

würd mir mal die js.php und die css.php des Templates ansehen

[newby5]

Hier mal ein Beispiel, das in der product.html steht und dann noch angepasst werden muss.

PHP-Code:

<!-- TABS -->

<script type="text/javascript" src="/xtFramework/library/jquery/jquery.tabs.js"></script>
{literal}
<script type="text/javascript">
$(document).ready(function(){
    $('ul.menu li').click(function(){
        var current = $(this);
        var content_box = $('#'+current.attr('data-container'));
        $('ul.menu li').removeClass('active');
        current.addClass('active');
        $('.content').hide();
        content_box.show();
    });
});
</script>
{/literal}

    <div id="container">  
        <ul class="menu">  
            <li id="news" data-container="news_container" class="active">News</li>  
            <li id="tutorials" data-container="tutorials_container">Tutorials</li>  
            <li id="links" data-container="links_container">Links</li>  
        </ul>  
        <span class="clear"></span>  
     </div>
    
        <div class="content news" id="news_container">  
      
                <h1>Neuigkeiten</h1>  
                <div style="height:100px;">  
                     Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum  
                </div>  
            </div>  
            <div class="content tutorials" id="tutorials_container">  
                <h1>Tutorials</h1>  
                <div style="height:100px;color:darkblue;">  
                     Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum  
                </div>  
            </div>  
            <div class="content links" id="links_container">  
                <h1>Links</h1>  
                <div style="height:100px;color:orange;">  
                     Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum  
                </div>  
            </div>  
            
        
            
<!-- TABS ENDE -->