Post by seanstorm100 » Sun Dec 01, 2019 4:40 am

Hi All,

This is how I enabled scroll to top on my Opencart v3 without an extension.

Please note that I am not a professional coder and you should use the below at your own risk. For the professional coders out there you can comment on any corrections that need to be made. I also do not own the codepen below. Please read the licence.txt file before use. Please back up all related files, possibly your server before making changes.

1) Downloaded this CodePen: https://codepen.io/rdallaire/pen/apoyx
2) Extract the file.
3) Go to the dist folder and rename the JS File from script.js to scroll-top-script.js so it can be easily identified in the future.
4) Add this code:

Code: Select all

/* Scroll to top */

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}
To the CSS file located here:
*/catalog/view/theme/default/stylesheet/styleshee.css. Please note that you can use a custom made css file so your changes are saved after an OC upgrade.

5) Upload scroll-top-script.js to */catalog/view/javascript/

6) Then add:

Code: Select all

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<script  src="catalog/view/javascript/scroll-top-script.js"></script>
To this file:
*/catalog/view/theme/themename/template/common/header.twig

I hope this helps someone!

Regards,
Sean

Regards,
Sean


New member

Posts

Joined
Tue Nov 05, 2019 11:08 pm

Post by seanstorm100 » Sun Dec 01, 2019 7:16 am

Instead of using a CSS script hosted on the internet (Unreliable), you can download https://netdna.bootstrapcdn.com/font-aw ... wesome.css and save it as font-awesome.css, in
*/catalog/view/theme/default/stylesheet
Then simply go back to

Code: Select all

/catalog/view/theme/default/template/common/header.twig
and replace

Code: Select all

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
with

Code: Select all

<link href="catalog/view/theme/default/stylesheet/font-awesome.css" rel="stylesheet">

After doing, this I inspected the page and went to console in google chrome and I noticed that it was reporting a few errors about some font awesome files.
Failed to load resource: fontawesome-webfont.woff:1
the server responded with a status of 404 (Not Found)
Failed to load resource: fontawesome-webfont.ttf:1
the server responded with a status of 404 (Not Found)

To resolve my issue, I commented out this entire code because I didn't think I needed them. To ignore/comment out a code you simply add /* in front and */ after the code.
for example

Code: Select all

/*
@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.2.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}
*/
seanstorm100 wrote:
Sun Dec 01, 2019 4:40 am
Hi All,

This is how I enabled scroll to top on my Opencart v3 without an extension.

Please note that I am not a professional coder and you should use the below at your own risk. For the professional coders out there you can comment on any corrections that need to be made. I also do not own the codepen below. Please read the licence.txt file before use. Please back up all related files, possibly your server before making changes.

1) Downloaded this CodePen: https://codepen.io/rdallaire/pen/apoyx
2) Extract the file.
3) Go to the dist folder and rename the JS File from script.js to scroll-top-script.js so it can be easily identified in the future.
4) Add this code:

Code: Select all

/* Scroll to top */

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}
To the CSS file located here:
*/catalog/view/theme/default/stylesheet/styleshee.css. Please note that you can use a custom made css file so your changes are saved after an OC upgrade.

5) Upload scroll-top-script.js to */catalog/view/javascript/

6) Then add:

Code: Select all

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<script  src="catalog/view/javascript/scroll-top-script.js"></script>
To this file:
*/catalog/view/theme/themename/template/common/header.twig

I hope this helps someone!

Regards,
Sean

Regards,
Sean


New member

Posts

Joined
Tue Nov 05, 2019 11:08 pm
Who is online

Users browsing this forum: No registered users and 2 guests