Wie kann ich die Kopfleiste in Shopware 5 entfernen?

Wir werden die Texte wie „Mein Konto„ und den Preis im Einkaufswagen entfernen. Um die Shopware 5 Topbar in der Kopfzeile zu entfernen, führen Sie die folgenden Schritte aus:

Unsere Topbar sieht wie folgt aus.

Schritt 1: Gehen Sie in das shopware Themenverzeichnis Ihrer Website.

Schritt 2: Erstellen Sie ein neues Unterverzeichnis namens footer.less

Dateistruktur:-

themes/Frontend/Custom/frontend/_public/src/less/_modules/

Hinweis: Das benutzerdefinierte Verzeichnis ist ein Thema, das ich bereits erstellt habe.

Schritt 3: Schreiben Sie diesen Code in die Datei topbar-navigation.tpl.

{extends file='parent:frontend/index/topbar-navigation.tpl'}

{block name="frontend_index_top_bar_main"}
    <div class="top-bar"></div>
{/block}

Schritt 4: Erstellen Sie im gleichen Indexverzeichnis eine neue Datei namens shop-navigation.tpl

themes/Frontend/Custom/frontend/index/shop-navigation.tpl

Und schreiben Sie diesen Code in diese Dateien.

{extends file='parent:frontend/index/shop-navigation.tpl'}

{block name='frontend_index_checkout_actions'}
{$smarty.block.parent}
    {* Top bar navigation *}
    {block name="frontend_index_shop_navigation_nav"}
        <nav class="top-bar--navigation block" role="menubar">

        {action module=widgets controller=index action=shopMenu}
        {* Article Compare *}
        {block name='frontend_index_shop_navigation_inline'}
            {if {config name="compareShow"}}
                <div class="navigation--entry entry--compare is--hidden" role="menuitem" aria-haspopup="true" data-drop-down-menu="true">
                    {block name='frontend_index_shop_navigation_compare'}
                        {action module=widgets controller=compare}
                    {/block}
                </div>
            {/if}
        {/block}

        {* Service / Support drop down *}
        {block name="frontend_index_shop_navigation_checkout_actions_service_menu"}
            <div class="navigation--entry entry--help has--drop-down" role="menuitem" aria-haspopup="true" data-drop-down-menu="true">
                <i class="icon--service"></i>

                {* Include of the widget *}
                {block name="frontend_index_shop_navigation_checkout_actions_service_menu_include"}
                    {action module=widgets controller=index action=menu group=gLeft}
                {/block}
            </div>
        {/block}
    {/block}
{/block}

Schritt 5: Erstellen Sie eine neue Datei namens index.tpl im Verzeichnis compare.

Schritt 6: Schreiben Sie diesen Code in diese Datei.

{extends file='parent:frontend/compare/index.tpl'}

{block name='frontend_top_navigation_menu_entry'}
    <i class="icon--compare"></i> <span class="compare--quantity">({$sComparisons|@count})</span>
{/block}

Schritt 7: Erstellen Sie eine Datei header.less im Verzeichnis _modules.

Schritt 8: Schreiben Sie diesen Code in diese Datei.

.top-bar--navigation{
    display: none;
  }
  
  @media screen and (min-width: @tabletViewportWidth) {
    .container.header--navigation .shop--navigation.block-group .navigation--list.block-group{
      .entry--search{
        left:1%;
      }
      .entry--account .account--link {
        padding: 2px 8px 2px 8px;
        .icon--account {
          font-size: 21px;
          display: inline;
          position: relative;
          vertical-align: middle;
          top: 0;
          left: 0;
        }
        .account--display {
          display: none !important;
        }
      }
      .entry--cart{
        margin-right:5px;
        .cart--link {
          padding: 2px 10px 2px 6px;
          width: 42px;
          .cart--amount {
            display: none;
          }
        }
      }
      .top-bar--navigation{
        display: block;
        margin-left:5px;
        .entry--compare {
          display: block;
          padding:0px;
          margin-right: 5px;
          .icon--compare {
            top: 8px;
            position: relative;
            font-size: 25px;
          }
          .compare--quantity {
            font-size: 15px;
            vertical-align: middle;
            margin-left:0px;
          }
          .compare--list {
            top:45px;
            &:after{
              left: 85%;
            }
            .btn--compare.btn--compare-start {
              width: 100%;
            }
          }
        }
        .entry--help{
          padding:0px;
          .icon--service{
            font-size:30px;
            position: relative;
            top:5px;
          }
          .service--list::after{
            right:1%;
          }
          .service--list{
            top:45px;
          }
        }
      }
    }
  }

  @media screen and (min-width: @desktopViewportWidth) {
    .container.header--navigation .shop--navigation.block-group .navigation--list.block-group{
      .entry--search{
        left:3%;
      }
      .top-bar--navigation{
        .entry--compare {
          margin-right:10px;
          .compare--list {
            &:after {
              left: 80%;
            }
          }
        }
        .entry--help {
          .service--list::after {
            right: 8%;
          }
        }
      }
    }
  }

Schritt 9: Importieren Sie die less-Datei in die Datei all.less.

Schritt 10: Schreiben Sie diesen Code in die Datei all.less.

@import "_modules/header";

Ergebnisse

Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns unter +91-8800519180 an, wenn Sie Unterstützung für Shopware 5 benötigen. Sie können auch die Shopware 5 Entwicklungsseite besuchen, um die von uns angebotenen Dienstleistungen zu überprüfen.