U365U365 MemberComments: 67 Received thanks: 2 Member since: November 2015 edited December 2015
Hello community, :shopware:

I tried this tutorial https://blog.hostianer.de/shopware-scro ... op-button/
have done all the steps correctly (controlled as well)

Created all.less in mytheme/frontend/_public/src/less
Created scroll.less in mytheme/frontend/_public/src/less/_modules
index.tpl added line in mytheme/frontend/index/
Created scroll.js inmytheme/frontend/_public/src/js

For some reason its not showing the button. :(


Best regards. :thumbup:

Comments

  • ShopwareianerShopwareianer MemberComments: 3624 Received thanks: 646 Member since: November 2013
    Did you included the scroll.less in your all.less?
    Also did you included the js file in your theme.php ?

    Make also sure to re compile your theme.
  • U365U365 MemberComments: 67 Received thanks: 2 Member since: November 2015
    kayyy wrote:
    Did you included the scroll.less in your all.less?
    Also did you included the js file in your theme.php ?

    Make also sure to re compile your theme.
    Yes

    Theme.php
    protected $javascript = [
    	'frontend/_public/src/js/scroll.js'
    	];
    
    all.less
    @import "_modules/scroll.less";
    
  • TannyTanny MemberComments: 650 Received thanks: 83 Member since: September 2014
    Das klappt bei mir leider auch nicht. Der Button wird einfach nicht angezeigt. Der soll ja schon vor dem js-file-Einbau zumindest zu sehen sein. Ist er aber leider nicht...
  • ShopwareianerShopwareianer MemberComments: 3624 Received thanks: 646 Member since: November 2013
    Tanny wrote:
    Das klappt bei mir leider auch nicht. Der Button wird einfach nicht angezeigt. Der soll ja schon vor dem js-file-Einbau zumindest zu sehen sein. Ist er aber leider nicht...
    Bei mir hat es ohne Probleme 1zu1 nach dem Tutorial funktioniert.

    Can you show me your site also @Tanny so i can have a look?
    Does the "a" appears in the html sourcecode?

    You may try to extend the block {block name='frontend_index_after_body'} instead of {block name="frontend_index_page_wrap"}
  • useguseg MemberComments: 2235 Received thanks: 538 edited December 2015 Member since: January 2013
    Tanny wrote:
    Das klappt bei mir leider auch nicht. Der Button wird einfach nicht angezeigt. Der soll ja schon vor dem js-file-Einbau zumindest zu sehen sein. Ist er aber leider nicht...

    Hallo Tanny,
    Der Link sollte ganz unten nach unserem gesamten Content kommen. Wenn wir uns einmal die originale Shopware index.tpl aus dem Bare Theme anschauen, haben wir hier den Block frontend_index_page_wrap
    Bei mir im Shop unter Shopware 5.1.1 gibt es den Block nicht und du musst den „frontend_index_body_inline“ erweitern.
    {* Scroll to top Button	*}
    		{block name='frontend_index_body_inline' append}
    			<a class="cd-top" href="#0"></a>
    		{/block}
    

    Dann bin ich kein Freund von Bildern und habe deshalb die Shopware-Schrift genommen.
    Meine modifizierte scroll.less sieht jetzt so aus.
    .cd-top {
    	z-index: 999;
       display: inline-block;
    	position: fixed;
    	.unitize(bottom, 40);
    	.unitize(right, 10);
    	box-shadow: 0 0 1px @body-bg;
     	background: @body-bg;
     
    /* image replacement properties */
    	overflow: hidden;
    	white-space: nowrap;
     	border: 1px solid @brand-primary;
      	.border-radius();
    	visibility: hidden;
    	opacity: 0;
    	-webkit-transition: opacity .3s 0s, visibility 0s .3s;
    	-moz-transition: opacity .3s 0s, visibility 0s .3s;
    	transition: opacity .3s 0s, visibility 0s .3s;
     
     
      		&:after {    
    			font-family: 'shopware';
    			content: "\e610";
    			color: @brand-primary;
    			font-weight: 700;
    			.unitize(font-size, 20); 
    			display:block;
    			.unitize-padding(12, 12 );
    		}
    
    }
    
    .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
    	-webkit-transition: opacity .3s 0s, visibility 0s 0s;
    	-moz-transition: opacity .3s 0s, visibility 0s 0s;
    	transition: opacity .3s 0s, visibility 0s 0s;
    }
    
    .cd-top.cd-is-visible {
    /* the button becomes visible */
    	visibility: visible;
    	opacity: 1;
    }
    
    .cd-top.cd-fade-out {
    /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
    	opacity: .5;
    }
    
    .cd-top:hover,  {
    	background-color: @brand-primary;
    	opacity: 1;
     
     		&:after {    
        		color: @body-bg;	
          }
     	
    }
    
    @media only screen and (min-width: 768px) {
    	.cd-top {
    		.unitize(right, 20);
    		.unitize(bottom, 20);
    	}
    }
    
    @media only screen and (min-width: 1024px) {
    	.cd-top {
    		.unitize(right, 30);
    		.unitize(bottom, 30);
    	}
    }
    
    Edit: Danke Carsten für die Info habe den "z-index: 999;" noch hinzugefügt.
    sonic wrote:
    ".cd-top" könnte hier noch einen hohen z-index gebrauchen - ich habe mal 9999 genommen.
  • ShopwareianerShopwareianer MemberComments: 3624 Received thanks: 646 Member since: November 2013
    @useg But in shopware 5.1 you should have this block: https://github.com/shopware/shopware/bl ... ex.tpl#L18
  • useguseg MemberComments: 2235 Received thanks: 538 Member since: January 2013
    kayyy wrote:
    @useg But in shopware 5.1 you should have this block: https://github.com/shopware/shopware/bl ... ex.tpl#L18

    Hallo Kayyy,

    sind wir hier nicht im deutschen Forum. :sunglasses:

    Bei den Update von Shopware 4 auf 5.1.1 ist der Block definitiv nicht vorhanden.

    Ich habe jetzt mal das Installationspaket für Shopware 5.1 heruntergeladen und auch da gibt es kein Block "frontend_index_page_wrap" in der "themes/Frontend/Bare/frontend/index/index.tpl"


    Ich denke dieser wird erst mit Shopware 5.1.2 eingefügt.
  • ShopwareianerShopwareianer MemberComments: 3624 Received thanks: 646 Member since: November 2013
    @useg Tatsache .. da habe ich das wohl vepennt.

    Steht auch in der Update.md, dass der Block erst mit 5.1.2 eingeführt wird:
    Added new Smarty blocks to the index/index.tpl file
    frontend_index_body_classes
    frontend_index_page_wrap
    frontend_index_header_navigation
    frontend_index_container_ajax_cart
    frontend_index_content_main
  • U365U365 MemberComments: 67 Received thanks: 2 Member since: November 2015
    I testify that my problem is solved and i thank you for communicating in English.

    Best regards. :thumbup:
  • sonicsonic MemberComments: 2376 Received thanks: 704 Member since: January 2014
    Zuerst mal Danke für den "Button" ;-)

    Ich habe die less von Uwe genommen, soweit passt es :-)
    Aber: Z.B. im Listing verschwindet der Button bei "Zuletzt gesehen" hinter den Bildern.

    ".cd-top" könnte hier noch einen hohen z-index gebrauchen - ich habe mal 9999 genommen.
    Thanked by 1useg
  • ShopwareianerShopwareianer MemberComments: 3624 Received thanks: 646 Member since: November 2013
    @sonic Danke für den Hinweis. Dann passe ich den Artikel mal an :)
Sign In or Register to comment.