Produktdetailseite -> Artikeldetails statt Beschreibung zuerst anzeigen

[SMSgmbh]

Nabend in die Runde,

ich würde gerne auf der Produktdetailseite als erstes die Artikeldetails aktiviert haben, statt der Beschreibung.
Kann mir jemand helfen, wo ich das anpassen kann?

Reihenfolge also Artikeldetails | Beschreibung | Anhänge etc.

Vielen Dank im Voraus!

Nils

[NSN]

Du kannst die Reihenfolge in der product.tpl des Themes (ich denke mal es ist das Standard) ändern.

[SMSgmbh]

Danke, hast Du da noch detailliertere Infos, wo genau was zumändern ist?

Edited January 26, 2021 by SMSgmbh (see edit history)

[NSN]

Hab grad keinen Zugriff auf die Dateien, schau dir aber wenn ich wieder im Büro bin.

Übrigens, sprechen wir von 1.6.x.x oder 1.7.x.x
Nur damit ich weiß wo ich schauen muss.

[SMSgmbh]

Läuft alles unter 1.7.x.x

 

Danke im Voraus!!!

[NSN]

Die Datei findest du unter

/themes/classic/templates/catalog/product.tpl

Ab Zeile 142 sieht es folgendermaßen aus:

            {block name='product_tabs'}
              <div class="tabs">
                <ul class="nav nav-tabs" role="tablist">
                  {if $product.description}
                    <li class="nav-item">
                       <a
                         class="nav-link{if $product.description} active{/if}"
                         data-toggle="tab"
                         href="#description"
                         role="tab"
                         aria-controls="description"
                         {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a>
                    </li>
                  {/if}
                  <li class="nav-item">
                    <a
                      class="nav-link{if !$product.description} active{/if}"
                      data-toggle="tab"
                      href="#product-details"
                      role="tab"
                      aria-controls="product-details"
                      {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a>
                  </li>
                  {if $product.attachments}
                    <li class="nav-item">
                      <a
                        class="nav-link"
                        data-toggle="tab"
                        href="#attachments"
                        role="tab"
                        aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a>
                    </li>
                  {/if}

Du tauscht dann einfach den Teil mit der "description" und "product-details" damit es dann so aussieht:

            {block name='product_tabs'}
              <div class="tabs">
                <ul class="nav nav-tabs" role="tablist">
                  {if $product.description}
                  <li class="nav-item">
                    <a                       
                      class="nav-link{if !$product.description} active{/if}"
                      data-toggle="tab"
                      href="#product-details"
                      role="tab"
                      aria-controls="product-details"
                      {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a>
                  </li>
                  {/if}
                    <li class="nav-item">
                       <a
                         class="nav-link{if $product.description} active{/if}"
                         data-toggle="tab"
                         href="#description"
                         role="tab"
                         aria-controls="description"
                         {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a>
                    </li>                       
                  {if $product.attachments}
                    <li class="nav-item">
                      <a
                        class="nav-link"
                        data-toggle="tab"
                        href="#attachments"
                        role="tab"
                        aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a>
                    </li>
                  {/if}

 

[SMSgmbh]

Wow! 
NSN vielen Dank - werde es heute Abend testen und berichten. Aber schon mal vielen Dank für die Mühe...darf ich ggf noch mit ein, zwei kleineren Fragen per PN auf Dich zukommen???

[NSN]

Du darfst mich natürlich auch per PN kontaktieren, aber für alles was keine Geschäftsinterna oder persönliche Informationen enthält würde ich dich bitten öffentlich im Forum zu fragen.

Ein Forum lebt von Fragen und Antworten, von denen die Hilfe suchen und denen die helfen. Außerdem könnte ein Anderer ein gleiches oder ähnliches Problem haben und so hier fündig werden und auch Andere können zu der Problemlösung beitragen.

[SMSgmbh]

Hey NSN, 

das hat schon sehr gut geklappt - vielen vielen Dank!

Einzige Kleinigkeit: wo kann ich einstellen, dass auch die Artikeldetails automatisch bei Aufruf aktiviert und somit angezeigt werden...
Aktuell wird nach wie vor die Beschreibung als erstes angezeigt...

 

 

Vielen Dank im Voraus!

 

 

[JBW]

12 hours ago, SMSgmbh said:

Einzige Kleinigkeit: wo kann ich einstellen, dass auch die Artikeldetails automatisch bei Aufruf aktiviert und somit angezeigt werden...

Über die CSS Klasse "active"

[SMSgmbh]

Hi JBW,

 

danke für den Hinweis, aber ich muss leider gestehen, dass ich es zwar versucht habe, aber meine CSS-Kenntnisse sich da doch recht in Grenzen halten.

Kannst Du mir das genauer erklären? Würde mich freuen!

Danke im Voraus!

[JBW]

In dem Teil

Quote

class="nav-link{if $product.description} active{/if}"

entferne jeweils die if abfrage und nur bei dem Block mit den Artikeldetail füge die Klasse active hinzu so dass es so aussieht:

Quote

class="nav-link active"

 

[SMSgmbh]

Morgen JBW,

möchte hier niemanden mit meiner Unwissenheit überstrapazieren, aber so richtig, hat das nicht geklappt.

Hier mein aktueller Code aus der product.tpl

 

{block name='product_tabs'}
              <div class="tabs">
                <ul class="nav nav-tabs" role="tablist">
                  {if $product.description}
                  <li class="nav-item">
                    <a                       
                      class="nav-link{if !$product.details} active{/if}"
                      data-toggle="tab"
                      href="#product-details"
                      role="tab"
                      aria-controls="product-details"
                      {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a>
                  </li>
                  {/if}
                    <li class="nav-item">
                       <a
                         class="nav-link active"
                         data-toggle="tab"
                         href="#description"
                         role="tab"
                         aria-controls="description"
                         {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a>
                    </li>    
                  {if $product.attachments}
                    <li class="nav-item">
                      <a
                        class="nav-link"
                        data-toggle="tab"
                        href="#attachments"
                        role="tab"
                        aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a>
                    </li>
                  {/if}
                  {foreach from=$product.extraContent item=extra key=extraKey}
                    <li class="nav-item">
                      <a
                        class="nav-link"
                        data-toggle="tab"
                        href="#extra-{$extraKey}"
                        role="tab"
                        aria-controls="extra-{$extraKey}">{$extra.title}</a>
                    </li>
                  {/foreach}
                </ul>

                <div class="tab-content" id="tab-content">
                 <div class="tab-pane fade in{if $product.description} active{/if}" id="description" role="tabpanel">
                   {block name='product_description'}
                     <div class="product-description">{$product.description nofilter}</div>
                   {/block}
                 </div>

                 {block name='product_details'}
                   {include file='catalog/_partials/product-details.tpl'}
                 {/block}

Das Ergebnis ist aktuell wie folgt:

 

 

Was mach ich verkehrt?

Vielen Dank im Voraus - weiß ich zu schätzen!

 

[JBW]

Du hast das active bei der Beschreibung rein gemacht und bei den Details ist noch das if und active drin. Active nur bei dem Tab den du aktiv haben willst also bei den Details

[SMSgmbh]

ok probiere ich

Edited January 29, 2021 by SMSgmbh (see edit history)

[JBW]

Das schließende if muss natürlich auch  raus.

Sehe auch gerade das du dasselbe vermutlich auch noch für das aria-selected machen musst

 

[SMSgmbh]

<li class="nav-item">
                    <a                       
                      class="nav-link active"
                      data-toggle="tab"
                      href="#product-details"
                      role="tab"
                      aria-controls="product-details"
                      {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a>
                  </li>
                  {/if}
                    <li class="nav-item">
                       <a
                         class="nav-link {if !$product.description} active{/if}"
                         data-toggle="tab"
                         href="#description"
                         role="tab"
                         aria-controls="description"
                         {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a>
                    </li>    

Funktioniert auch nicht... 😞

 

[SMSgmbh]

Könntest Du den Code nicht kurz entsprechend anpassen? Bütte

[JBW]

Immer noch if in der class drin...

Und das hier hast du gelesen oder? Ist auch noch drin...

32 minutes ago, JBW said:

Sehe auch gerade das du dasselbe vermutlich auch noch für das aria-selected machen musst

 

[SMSgmbh]

Also, der Code sieht nun wie folgt aus:

      {block name='product_tabs'}
              <div class="tabs">
                <ul class="nav nav-tabs" role="tablist">
                  {if $product.description}
                  <li class="nav-item">
                    <a                       
                      class="nav-link active"
                      data-toggle="tab"
                      href="#product-details"
                      role="tab"
                      aria-controls="product-details"
                      aria-selected="true">{l s='Product Details' d='Shop.Theme.Catalog'}</a>
                  </li>
                  {/if}
                    <li class="nav-item">
                       <a
                         class="nav-link active"
                         data-toggle="tab"
                         href="#description"
                         role="tab"
                         aria-controls="description"
                         aria-selected="true">{l s='Description' d='Shop.Theme.Catalog'}</a>
                    </li>    
                  {if $product.attachments}
                    <li class="nav-item">
                      <a
                        class="nav-link"
                        data-toggle="tab"
                        href="#attachments"
                        role="tab"
                        aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a>
                    </li>
                  {/if}
                  {foreach from=$product.extraContent item=extra key=extraKey}
                    <li class="nav-item">
                      <a
                        class="nav-link"
                        data-toggle="tab"
                        href="#extra-{$extraKey}"
                        role="tab"
                        aria-controls="extra-{$extraKey}">{$extra.title}</a>
                    </li>
                  {/foreach}
                </ul>

                <div class="tab-content" id="tab-content">
                 <div class="tab-pane fade in{if $product.description} active{/if}" id="description" role="tabpanel">
                   {block name='product_description'}
                     <div class="product-description">{$product.description nofilter}</div>
                   {/block}
                 </div>

                 {block name='product_details'}
                   {include file='catalog/_partials/product-details.tpl'}
                 {/block}

Leider ändert sich nichts.
Gefühlt (bin kein Experte wie man sicher schon gemerkt hat) würde ich sagen, dass es eher was mit dem div tab-content zu tun hat.

   <div class="tab-content" id="tab-content">
                 <div class="tab-pane fade in{if $product.description} active{/if}" id="description" role="tabpanel">
                   {block name='product_description'}
                     <div class="product-description">{$product.description nofilter}</div>
                   {/block}
                 </div>

Steuert der nicht den Inhalt?

 

[JBW]

Du hast noch zweimal aria-selected="true" drin

3 minutes ago, SMSgmbh said:

her was mit dem div tab-content zu tun hat.

Da musst du das mit dem active auch noch machen

[SMSgmbh]

 Bin wahrscheinlich zu doof für das, aber funktionieren tut das alles nicht 😭

            {block name='product_tabs'}
              <div class="tabs">
                <ul class="nav nav-tabs" role="tablist">
                  {if $product.description}
                  <li class="nav-item">
                    <a                       
                      class="nav-link active"
                      data-toggle="tab"
                      href="#product-details"
                      role="tab"
                      aria-controls="product-details"
                      >{l s='Product Details' d='Shop.Theme.Catalog'}</a>
                  </li>
                  {/if}
                    <li class="nav-item">
                       <a
                         class="nav-link active"
                         data-toggle="tab"
                         href="#description"
                         role="tab"
                         aria-controls="description"
                        >{l s='Description' d='Shop.Theme.Catalog'}</a>
                    </li>    
                  {if $product.attachments}
                    <li class="nav-item">
                      <a
                        class="nav-link"
                        data-toggle="tab"
                        href="#attachments"
                        role="tab"
                        aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a>
                    </li>
                  {/if}
                  {foreach from=$product.extraContent item=extra key=extraKey}
                    <li class="nav-item">
                      <a
                        class="nav-link"
                        data-toggle="tab"
                        href="#extra-{$extraKey}"
                        role="tab"
                        aria-controls="extra-{$extraKey}">{$extra.title}</a>
                    </li>
                  {/foreach}
                </ul>

                <div class="tab-content" id="tab-content">
                 <div class="tab-pane fade in active" id="description" role="tabpanel">
                   {block name='product_description'}
                     <div class="product-description">{$product.description nofilter}</div>
                   {/block}

Ergebnis

???

[JBW]

Active ist immer noch bei beiden Tabs drin und unten beim Content bei der description auch.

 

[SMSgmbh]

Wir nähern uns dem Ziel ;-)

Also nun sieht es wie folgt aus:

Artikeldetails ist aktiv aber leider darunter nicht angezeigt...

Hier der Code:

 {block name='product_tabs'}
              <div class="tabs">
                <ul class="nav nav-tabs" role="tablist">
                  {if $product.description}
                  <li class="nav-item">
                    <a                       
                      class="nav-link active"
                      data-toggle="tab"
                      href="#product-details"
                      role="tab"
                      aria-controls="product-details"
                      >{l s='Product Details' d='Shop.Theme.Catalog'}</a>
                  </li>
                  {/if}
                    <li class="nav-item">
                       <a
                         class="nav-link"
                         data-toggle="tab"
                         href="#description"
                         role="tab"
                         aria-controls="description"
                        >{l s='Description' d='Shop.Theme.Catalog'}</a>
                    </li>    
                  {if $product.attachments}
                    <li class="nav-item">
                      <a
                        class="nav-link"
                        data-toggle="tab"
                        href="#attachments"
                        role="tab"
                        aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a>
                    </li>
                  {/if}
                  {foreach from=$product.extraContent item=extra key=extraKey}
                    <li class="nav-item">
                      <a
                        class="nav-link"
                        data-toggle="tab"
                        href="#extra-{$extraKey}"
                        role="tab"
                        aria-controls="extra-{$extraKey}">{$extra.title}</a>
                    </li>
                  {/foreach}
                </ul>

                <div class="tab-content" id="tab-content">
                 <div class="tab-pane fade in" id="description" role="tabpanel">
                   {block name='product_description'}
                     <div class="product-description">{$product.description nofilter}</div>
                   {/block}

 

[JBW]

Dein Code endet unten mit dem Content für die Description, da müsste eigentlich noch ein Block für die Details kommen (die mit active dann

[SMSgmbh]

Ha!,

der ist aber selbst in der Originaldatei nicht enthalten!?!?
Hier ist der unbearbeitete Code...

 

{block name='content'}

  <section id="main" itemscope itemtype="https://schema.org/Product">
    <meta itemprop="url" content="{$product.url}">

    <div class="row product-container">
      <div class="col-md-6">
        {block name='page_content_container'}
          <section class="page-content" id="content">
            {block name='page_content'}
              <!-- @todo: use include file='catalog/_partials/product-flags.tpl'} -->
              {block name='product_flags'}
                <ul class="product-flags">
                  {foreach from=$product.flags item=flag}
                    <li class="product-flag {$flag.type}">{$flag.label}</li>
                  {/foreach}
                </ul>
              {/block}

              {block name='product_cover_thumbnails'}
                {include file='catalog/_partials/product-cover-thumbnails.tpl'}
              {/block}
              <div class="scroll-box-arrows">
                <i class="material-icons left">&#xE314;</i>
                <i class="material-icons right">&#xE315;</i>
              </div>

            {/block}
          </section>
        {/block}
        </div>
        <div class="col-md-6">
          {block name='page_header_container'}
            {block name='page_header'}
              <h1 class="h1" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
            {/block}
          {/block}
          {block name='product_prices'}
            {include file='catalog/_partials/product-prices.tpl'}
          {/block}

          <div class="product-information">
            {block name='product_description_short'}
              <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div>
            {/block}

            {if $product.is_customizable && count($product.customizations.fields)}
              {block name='product_customization'}
                {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations}
              {/block}
            {/if}

            <div class="product-actions">
              {block name='product_buy'}
                <form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
                  <input type="hidden" name="token" value="{$static_token}">
                  <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
                  <input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id">

                  {block name='product_variants'}
                    {include file='catalog/_partials/product-variants.tpl'}
                  {/block}

                  {block name='product_pack'}
                    {if $packItems}
                      <section class="product-pack">
                        <p class="h4">{l s='This pack contains' d='Shop.Theme.Catalog'}</p>
                        {foreach from=$packItems item="product_pack"}
                          {block name='product_miniature'}
                            {include file='catalog/_partials/miniatures/pack-product.tpl' product=$product_pack}
                          {/block}
                        {/foreach}
                    </section>
                    {/if}
                  {/block}

                  {block name='product_discounts'}
                    {include file='catalog/_partials/product-discounts.tpl'}
                  {/block}

                  {block name='product_add_to_cart'}
                    {include file='catalog/_partials/product-add-to-cart.tpl'}
                  {/block}

                  {block name='product_additional_info'}
                    {include file='catalog/_partials/product-additional-info.tpl'}
                  {/block}

                  {* Input to refresh product HTML removed, block kept for compatibility with themes *}
                  {block name='product_refresh'}{/block}
                </form>
              {/block}

            </div>

            {block name='hook_display_reassurance'}
              {hook h='displayReassurance'}
            {/block}

            {block name='product_tabs'}
              <div class="tabs">
                <ul class="nav nav-tabs" role="tablist">
                  {if $product.description}
                    <li class="nav-item">
                       <a
                         class="nav-link{if $product.description} active{/if}"
                         data-toggle="tab"
                         href="#description"
                         role="tab"
                         aria-controls="description"
                         {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a>
                    </li>
                  {/if}
                  <li class="nav-item">
                    <a
                      class="nav-link{if !$product.description} active{/if}"
                      data-toggle="tab"
                      href="#product-details"
                      role="tab"
                      aria-controls="product-details"
                      {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a>
                  </li>
                  {if $product.attachments}
                    <li class="nav-item">
                      <a
                        class="nav-link"
                        data-toggle="tab"
                        href="#attachments"
                        role="tab"
                        aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a>
                    </li>
                  {/if}
                  {foreach from=$product.extraContent item=extra key=extraKey}
                    <li class="nav-item">
                      <a
                        class="nav-link"
                        data-toggle="tab"
                        href="#extra-{$extraKey}"
                        role="tab"
                        aria-controls="extra-{$extraKey}">{$extra.title}</a>
                    </li>
                  {/foreach}
                </ul>

                <div class="tab-content" id="tab-content">
                 <div class="tab-pane fade in{if $product.description} active{/if}" id="description" role="tabpanel">
                   {block name='product_description'}
                     <div class="product-description">{$product.description nofilter}</div>
                   {/block}
                 </div>

                 {block name='product_details'}
                   {include file='catalog/_partials/product-details.tpl'}
                 {/block}

                 {block name='product_attachments'}
                   {if $product.attachments}
                    <div class="tab-pane fade in" id="attachments" role="tabpanel">
                       <section class="product-attachments">
                         <p class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</p>
                         {foreach from=$product.attachments item=attachment}
                           <div class="attachment">
                             <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
                             <p>{$attachment.description}</p
                             <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
                               {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
                             </a>
                           </div>
                         {/foreach}
                       </section>
                     </div>
                   {/if}
                 {/block}

                 {foreach from=$product.extraContent item=extra key=extraKey}
                 <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" role="tabpanel" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
                   {$extra.content nofilter}
                 </div>
                 {/foreach}
              </div>  
            </div>
          {/block}
        </div>
      </div>
    </div>

    {block name='product_accessories'}
      {if $accessories}
        <section class="product-accessories clearfix">
          <p class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</p>
          <div class="products">
            {foreach from=$accessories item="product_accessory"}
              {block name='product_miniature'}
                {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
              {/block}
            {/foreach}
          </div>
        </section>
      {/if}
    {/block}

    {block name='product_footer'}
      {hook h='displayFooterProduct' product=$product category=$category}
    {/block}

    {block name='product_images_modal'}
      {include file='catalog/_partials/product-images-modal.tpl'}
    {/block}

    {block name='page_footer_container'}
      <footer class="page-footer">
        {block name='page_footer'}
          <!-- Footer content -->
        {/block}
      </footer>
    {/block}

 

Kann ich den Block dann einfach kopieren und ändern?

 

[JBW]

Öffne die Datei catalog/_partials/product-details.tpl und setze dort das active und entferne es hier bei der description

[SMSgmbh]

Das war es!!!!!

in der product-details.tpl von 

<div class="tab-pane fade{if !$product.description} in active{/if}"
     id="product-details"
     data-product="{$product.embedded_attributes|json_encode}"
     role="tabpanel"

in 

<div class="tab-pane fade in active"
     id="product-details"
     data-product="{$product.embedded_attributes|json_encode}"
     role="tabpanel"

geändert und es gibt das gewünschte Ergebnis!!!!

Sehr sehr geil! Meinen fetten DANK!