"Sidebar" hinzufügen

regentanker · 13. Mai 2015 um 02:43

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.

regentanker · 15. Mai 2015 um 00:17

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

Peter_Hufnagel · 15. Mai 2015 um 09:20

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

Neox · 15. Mai 2015 um 09:29

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.

regentanker · 15. Mai 2015 um 16:19

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.

regentanker · 18. Mai 2015 um 10:56

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

shopper1 · 18. Mai 2015 um 11:15

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.

regentanker · 18. Mai 2015 um 11:52

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

benblub · 18. Mai 2015 um 16:46

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

regentanker · 19. Mai 2015 um 09:44

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! Besten Dank an alle!

janico · 19. Mai 2015 um 10:51

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

regentanker · 19. Mai 2015 um 10:58

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…>

shoptemplates · 19. Mai 2015 um 11:03

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!

regentanker · 19. Mai 2015 um 11:19

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]

Linus_Holtstiege · 19. Mai 2015 um 16:16

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

regentanker · 19. Mai 2015 um 19:28

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

holzkult · 19. Mai 2015 um 21:28

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

benblub · 19. Mai 2015 um 21:41

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 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; } }

holzkult · 19. Mai 2015 um 21:59

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?

benblub · 19. Mai 2015 um 22:35

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

Thema		Antworten	Aufrufe
Sidebar in Einkaufswelt ausblenden Themes & Design	5	2071	12. September 2016
Sidebar bei Shopseiten deaktivieren - wie Kategorieseiten Themes & Design	15	9436	5. August 2017
[gelöst] Sidebar right nur auf Unterseiten Shopware 3.5 templates--design	2	622	12. November 2011
"Sidebar" oder "Nicht Sidebar" Themes & Design	1	429	14. Juli 2015
Sidebar (linke Spalte Themes & Design	11	1388	16. November 2016

&quot;Sidebar&quot; hinzufügen

Verwandte Themen

"Sidebar" hinzufügen