"Sidebar" hinzufügen

Hi, ich suche nach einer Möglichkeit eine art “Sidebar” hinzuzufügen. In welche tpl müsste ich die

packen? So in der Art soll es aussehen: Vielen Dank schonmal.

Habe leider immer noch nicht raus wie das geht. Push.

Hi, ich wäre da auch an einer Idee wie das geht interessiert Peter

Hallo, wo möchtest du diese Sidebar denn überall anzeigen? Wenn du Sie immer anzeigen willst, würde ich das in die index.tpl packen. Per CSS/LESS dann positionieren und als “fixed” setzen. Viele Grüße.

1 Like

Stell mich wahrscheinlich nur dumm an, aber an welche Stelle in der index.tpl würdest Du die sidebar denn packen damit sie links neben dem content-Bereich angezeigt wird (wie in meinem screenshot)? Bei mir wird Sie zwar angezeigt, aber wo ich es auch probiere ist es falsch. Entweder landet sie im content-Bereich, unter dem footer oder sonst wo. :confused:

Komm hier leider immer noch nicht weiter. Kann mir bitte jemand weiterhelfen? :slight_smile:

Hey an sich wurde alles schon gesagt, du hast nur eines vergessen: [quote=“Neoxx”] …Per CSS/LESS dann positionieren und als “fixed” setzen… [/quote] Die Stelle an der du es einsetzt ist grundsetzlich egal, sie sollte natürlich innherhalb des Body-Tags liegen.

1 Like

Manchmal sieht man den Wald ja vor lauter Bäumen nicht: Welcher ist denn der Body-Tag?

HTML Basics http://wiki.selfhtml.org/wiki/Startseite

1 Like

Damit kenn ich mich schon aus. Fehler war ganz simpel: „class“ war schon vergeben und auf „display: none“ gesetzt… da kann ich ja auch lange probieren! :wink: Besten Dank an alle!

Hallo Kann das Plugin empfehlen: http://store.shopware.com/reihen00446/s … ttons.html Dort hast du auch den “Mail” resp. “Kontakt” Button. Gruss Cyril

Problem ist leider nicht gelöst. Es ist nicht egal, an welcher stelle innerhalb des "body-tags man das objekt (div) packt. Ich poste hier mal den ganzen Inhalt meiner „index.tpl“ Datei, vlt mag mir ja jemand helfen und sagt mir, an welcher Stelle er es eingefügt hätte, bzw. wie er es positioniert hätte. Wär echt nett! Ich habe es hier direkt nach dem

<body…> eingefügt.

[code]

{block name=„frontend_index_start“}{/block}
{block name=„frontend_index_doctype“}

{/block}

{block name=‚frontend_index_html‘}

{/block}

{block name=‚frontend_index_header‘}
{include file=‚frontend/index/header.tpl‘}
{/block}

	{* Message if javascript is disabled *}
	{block name="frontend_index_no_script_message"}
		<noscript class="noscript-main">
            {include file="frontend/_includes/messages.tpl" type="warning" content="{s name="IndexNoscriptNotice"}{/s}" borderRadius=false}
		</noscript>
	{/block}

	{block name='frontend_index_before_page'}{/block}

	{* Shop header *}
	{block name='frontend_index_navigation'}
		<header class="header-main">
			{* Include the top bar navigation *}
			{block name='frontend_index_top_bar_container'}
			
			{/block}

			<div class="container header--navigation">

				{* Logo container *}
				{block name='frontend_index_logo_container'}
					{include file="frontend/index/logo-container.tpl"}
				{/block}

				{* Shop navigation *}
				{block name='frontend_index_shop_navigation'}
		{include file="frontend/index/shop-navigation.tpl"}			
				{/block}

                <div class="container--ajax-cart" data-collapse-cart="true" data-displaymode="offcanvas"></div>
			</div>
		</header>

		{* Maincategories navigation top *}
		{block name='frontend_index_navigation_categories_top'}
			<nav class="navigation-main">
                <div class="container" data-menu-scroller="true" data-listselector=".navigation--list.container" data-viewportselector=".navigation--list-wrapper">
                    {block name="frontend_index_navigation_categories_top_include"}
                        {include file='frontend/index/main-navigation.tpl'}
                    {/block}
                </div>
			</nav>
		{/block}
	{/block}

    {block name='frontend_index_emotion_loading_overlay'}
        {if $hasEmotion &amp;&amp; !$hasEscapedFragment}
            <div class="emotion--overlay">
                <i class="emotion--loading-indicator"></i>
            </div>
        {/if}
    {/block}

	<section class="content-main container block-group">

{* Breadcrumb *}
{block name=‚frontend_index_breadcrumb‘}
{if count($sBreadcrumb)}

{block name=‚frontend_index_breadcrumb_inner‘}
{include file=‚frontend/index/breadcrumb.tpl‘}
{/block}

{/if}
{/block}

		{* Content top container *}
		{block name="frontend_index_content_top"}{/block}

		<div class="content-main--inner">
			{* Sidebar left *}
			{block name='frontend_index_content_left'}
				{include file='frontend/index/sidebar.tpl'}
			{/block}

			{* Main content *}
			{block name='frontend_index_content_wrapper'}
                <div class="content--wrapper">
                    {block name='frontend_index_content'}{/block}
                </div>
			{/block}

			{* Sidebar right *}
			{block name='frontend_index_content_right'}{/block}

			{* Last seen products *}
			{block name='frontend_index_left_last_articles'}
				{if $sLastArticlesShow &amp;&amp; !$isEmotionLandingPage}
                    {* Last seen products *}
                    <div class="last-seen-products is--hidden" data-last-seen-products="true">
                        <div class="last-seen-products--title">
                            {s namespace="frontend/plugins/index/viewlast" name='WidgetsRecentlyViewedHeadline'}{/s}
                        </div>
                        <div class="last-seen-products--slider product-slider" data-product-slider="true">
                            <div class="last-seen-products--container product-slider--container"></div>
                        </div>
                    </div>
				{/if}
			{/block}
		</div>
	</section>

	{* Footer *}
	{block name="frontend_index_footer"}
		<footer class="footer-main">
			<div class="container">
				{block name="frontend_index_footer_container"}
					{include file='frontend/index/footer.tpl'}
				{/block}
			</div>
		</footer>
	{/block}

	{block name='frontend_index_body_inline'}{/block}
</div>

{* Include jQuery and all other javascript files at the bottom of the page *}
{block name=„frontend_index_header_javascript_jquery_lib“}
{compileJavascript timestamp={themeTimestamp} output=„javascriptFiles“}
{foreach $javascriptFiles as $file}

{/foreach}
{/block}

{block name=„frontend_index_header_javascript“}

//<![CDATA[
{block name=„frontend_index_header_javascript_inline“}
var timeNow = {time() nocache};

        jQuery.controller = {ldelim}
            'vat_check_enabled': '{config name='vatcheckendabled'}',
            'vat_check_required': '{config name='vatcheckrequired'}',
            'ajax_cart': '{url controller='checkout' action='ajaxCart'}',
            'ajax_search': '{url controller="ajax_search"}',
            'ajax_login': '{url controller="account" action="ajax_login"}',
            'register': '{url controller="register"}',
            'checkout': '{url controller="checkout"}',
            'ajax_logout': '{url controller="account" action="ajax_logout"}',
            'ajax_validate': '{url controller="register"}',
            'ajax_add_article': '{url controller="checkout" action="addArticle"}',
            'ajax_listing': '{url module="widgets" controller="Listing" action="ajaxListing"}',
            'ajax_cart_refresh': '{url controller="checkout" action="ajaxAmount"}'
        {rdelim};

        jQuery.themeConfig = {ldelim}
            'offcanvasOverlayPage': '{$theme.offcanvasOverlayPage}'
        {rdelim};

        var lastSeenProductsConfig = lastSeenProductsConfig || {ldelim}
            'baseUrl': '{$Shop->getBaseUrl()}',
            'shopId': '{$Shop->getId()}',
            'noPicture': '{link file="frontend/_public/src/img/no-picture.jpg"}',
            'productLimit': ~~('{config name="lastarticlestoshow"}'),
            'currentArticle': {ldelim}{if $sArticle}
                {foreach $sLastArticlesConfig as $key => $value}
                    '{$key}': '{$value}',
                {/foreach}
                'articleId': ~~('{$sArticle.articleID}'),
                'linkDetailsRewritten': '{$sArticle.linkDetailsRewrited}',
                'articleName': '{$sArticle.articleName|escape:"javascript"}',
                'images': {ldelim}
					{foreach $sArticle.image.thumbnails as $key => $image}
						'{$key}': {ldelim}
                            'source': '{$image.source}',
                            'retinaSource': '{$image.retinaSource}',
                            'sourceSet': '{$image.sourceSet}'
                        {rdelim},
					{/foreach}
				{rdelim}
            {/if}{rdelim}
        {rdelim};
    {/block}
    //]]>
</script>

{block name="frontend_index_header_javascript_jquery"}
	{* Add the partner statistics widget, if configured *}
	{if !{config name=disableShopwareStatistics} }
		{include file='widgets/index/statistic_include.tpl'}
	{/if}
{/block}

{if $theme.additionalJsLibraries}
    {$theme.additionalJsLibraries}
{/if}

{/block}

[/code]</body…>

Hallo Jonas, wir haben eine einfache und schnelle Lösung für Dich und für die anderen Lösungssuchenden. Die Widget Sidebar Unlimited sollte genau dieses Problem lösen. Über den integrierten Backend Editor lassen sich schnell & einfach Widgets anlegen. Diese könnt ihr auch einfach mit HTML selbst gestalten. Am besten die kostenlose Testversion ausprobieren. Widget Sidebar Unlimited im Store Demo Umgebung

Viele Grüße und viel Spaß mit dem Plugin wünscht euch euer Shop-Templates.com Team! :slight_smile:

Danke, aber ich möchte lieber selbst die Lösung finden. Bin ja auch kurz davor, es geht ja eigentlich nur um Kleinigkeiten noch. Hier nochmal mein Code. Wenn jemand mir sagen könnte an welcher stelle er die

gesetzt hätte, wäre super! Ich habs wie gesagt direkt nach dem öffnenden body-tag probiert, das setzt die sidebar allerdings nur über den gesamten Rest des Shops und ich wüsste auch nicht, wie ich das positionieren sollte. Wenn ich „margin“ verwende schiebt sich einfach alles runter. Hier nochmal der Code: [code]{block name=„frontend_index_start“}{/block} {block name=„frontend_index_doctype“} {/block} {block name=‚frontend_index_html‘} {/block} {block name=‚frontend_index_header‘} {include file=‚frontend/index/header.tpl‘} {/block}

{* Message if javascript is disabled *} {block name=„frontend_index_no_script_message“}
{include file=„frontend/_includes/messages.tpl“ type=„warning“ content="{s name=„IndexNoscriptNotice“}{/s}" borderRadius=false}
{/block} {block name=‚frontend_index_before_page‘}{/block} {* Shop header *} {block name=‚frontend_index_navigation‘}
{* Include the top bar navigation *}
{block name=‚frontend_index_top_bar_container‘}

        {/block}

        <div class="container header--navigation">

           {* Logo container *}
           {block name='frontend_index_logo_container'}
              {include file="frontend/index/logo-container.tpl"}
           {/block}

           {* Shop navigation *}
           {block name='frontend_index_shop_navigation'}
     {include file="frontend/index/shop-navigation.tpl"}         
           {/block}

                <div class="container--ajax-cart" data-collapse-cart="true" data-displaymode="offcanvas"></div>
        </div>
     </header> {\* Maincategories navigation top \*} {block name='frontend\_index\_navigation\_categories\_top'} <nav class="navigation-main">
                <div class="container" data-menu-scroller="true" data-listselector=".navigation--list.container" data-viewportselector=".navigation--list-wrapper">
                    {block name="frontend_index_navigation_categories_top_include"}
                        {include file='frontend/index/main-navigation.tpl'}
                    {/block}
                </div>
        </nav> {/block} {/block} {block name='frontend\_index\_emotion\_loading\_overlay'} {if $hasEmotion && !$hasEscapedFragment} 

{/if} {/block}

{* Breadcrumb *}
{block name=‚frontend_index_breadcrumb‘}
{if count($sBreadcrumb)}

{block name=‚frontend_index_breadcrumb_inner‘}
{include file=‚frontend/index/breadcrumb.tpl‘}
{/block}

{/if}
{/block}

     {* Content top container *}
     {block name="frontend_index_content_top"}{/block}

     <div class="content-main--inner">
        {* Sidebar left *}
        {block name='frontend_index_content_left'}
           {include file='frontend/index/sidebar.tpl'}
        {/block}

        {* Main content *}
        {block name='frontend_index_content_wrapper'}
                <div class="content--wrapper">
                    {block name='frontend_index_content'}{/block}
                </div>
        {/block}



        {* Sidebar right *}
        {block name='frontend_index_content_right'}{/block}

        {* Last seen products *}
        {block name='frontend_index_left_last_articles'}
           {if $sLastArticlesShow &amp;&amp; !$isEmotionLandingPage}
                    {* Last seen products *}
                    <div class="last-seen-products is--hidden" data-last-seen-products="true">
                        <div class="last-seen-products--title">
                            {s namespace="frontend/plugins/index/viewlast" name='WidgetsRecentlyViewedHeadline'}{/s}
                        </div>
                        <div class="last-seen-products--slider product-slider" data-product-slider="true">
                            <div class="last-seen-products--container product-slider--container"></div>
                        </div>
                    </div>
           {/if}
        {/block}
     </div>
  </section> {\* Footer \*} {block name="frontend\_index\_footer"} <footer class="footer-main">
        <div class="container">
           {block name="frontend_index_footer_container"}
              {include file='frontend/index/footer.tpl'}
           {/block}
        </div>
     </footer> {/block} {block name='frontend\_index\_body\_inline'}{/block} 

{* Include jQuery and all other javascript files at the bottom of the page *} {block name=„frontend_index_header_javascript_jquery_lib“} {compileJavascript timestamp={themeTimestamp} output=„javascriptFiles“} {foreach $javascriptFiles as $file} {/foreach} {/block} {block name=„frontend_index_header_javascript“} {block name=„frontend_index_header_javascript_jquery“} {* Add the partner statistics widget, if configured *} {if !{config name=disableShopwareStatistics} } {include file=‚widgets/index/statistic_include.tpl‘} {/if} {/block} {if $theme.additionalJsLibraries} {$theme.additionalJsLibraries} {/if} {/block} [/code]

Hallo Jonas, im Prinzip kannst du deine index.tpl so lassen. Wie du aus den vorherigen Beiträgen entnehmen kannst, ist position das Zauberwort. Anbei mal ein Beispiel für deine „kontakt“ Less Klasse. Grundsätzlich würde ich dir empfehlen immer englische Klassenbezeichnungen zu verwenden. .kontakt { .unitize(top, 210); /\* top: 210px \*/ .unitize(padding, 25); /\* padding: 25px \*/ position: fixed; left: 0; background: #fff; z-index: 2000; }

Weitere hilfreiche Informationen: » Shopware Designer’s Guide » Shopware Styletile

1 Like

Danke, danke, danke, danke!!! :slight_smile: Jetzt klappt es endlich wie gewünscht!

Dankeschön, dass konnte ich natürlich auch perfekt gebrauchen :slight_smile: Besteht die Möglichkeit diese Icons vorübergehen auf allen Mobilen Geräten auszublenden? Liebe Grüße, Michael

Dafür kannst du die media queries benutzen. @media (min-width: xx_em/px/rem) { /* Breite beträgt mindestens xx em/px/rem */ } für kleiner kannst du dann visible: none; setzen. Am besten mal nach googlen :wink: Beispielcode… /\* Desktop version \*/ @media (min-width: 960px) { .kontakt { .unitize(top, 210); /\* top: 210px \*/ .unitize(padding, 25); /\* padding: 25px \*/ position: fixed; left: 0; background: #fff; z-index: 2000; } } @media (max-width: 959px) { .kontakt { visible: none; } }

Danke für deine schnelle Antwort. Für den PC/Desktop-Version kann ich den oberen Codeschnipsel jedoch kopieren oder verstehe ich das falsch? Das mit den Mobile hab ich noch nicht ganz geschafft, jedoch um ehrlich zu sein, hab ich dies auch einfach kopiert. Also wenn sie komplett weg sind nehme ich “none” wie bei deinem Beispiel, verstehe ich das richtig?

Du kannst bei den media queries frei definieren ab wieviel px was vom css genutzt wird, sollte übrigens display: none; sein oder visibility: hidden; … visible: none; war eher ein Wink mit dem Zaunpfahl^^ Und ja kannst du so kopieren, halt im 2. Teil die px anpassen und display: none; setzten anstatt visible: none

1 Like