0

I would appreciate it if someone can point me into the right direction on this issue.

I'm trying to optimize page load speed of my OpenCart project. To do this I want to load the content of each page (product/category , product/search, ...) after javascript onload like this in header.twig:

window.onload = function() {
    console.log('page loaded');

    $.post( window.location.href, { loaded: true })
        .done(function( data ) {
            alert( "Data Loaded: ");
    });
}

In php side I tried such a code but it's not successful at all. 

if (isset($this->request->get['manufacturer_id']) && isset($_POST['loaded'])) {
...

If I want to use callback the problem is pages are different. I don't know how to manage all pages.

Kardo
  • 1,658
  • 4
  • 32
  • 52
  • Can you please clarify what this means "*the problem is pages are different*"? What is your question? – But those new buttons though.. Jan 29 '18 at 03:29
  • 1
    sorry I couldn't understand, how will this optimize page load speed? As the routes/pages are different you can try to do the above php logic in `index.php` directly but, its going to be too complicated to handle. Instead handle it individually. – Rohit Batra Jan 29 '18 at 06:47
  • @RohitBatra: Actually I already tried to apply it individually and it's successful. – Kardo Jan 29 '18 at 07:07
  • @Kardo so where is the problem then? Are you trying to have one common `callback` function for all the pages ? – Rohit Batra Jan 29 '18 at 07:18
  • @RohitBatra: The time I asked this question I didn't have any idea how to do it, but little later the idea you explained came to my mind. I tried it last night. It works, but unfortunately it's not stable. Very often it passes over the `window.onload = function() {...`. The result is a blank page (www.bindex.co) Right now I'm trying to fix this. Do you have any suggestion? – Kardo Jan 29 '18 at 07:33
  • @RohitBatra: Interesting. Javascript doesn't allow more than window.onload – Kardo Jan 29 '18 at 07:45
  • @Kardo did you try `$(window).on('load', function() {` also? – Rohit Batra Jan 29 '18 at 10:36
  • @RohitBatra: Now everything works fine. I just removed extra `window.onload` – Kardo Jan 29 '18 at 11:57
  • @Kardo can you update the above code, with the working one. It will be helpful for others who maybe trying this too. – Rohit Batra Jan 29 '18 at 11:58
  • 1
    @RohitBatra: I added it as answer, to be more helpful :-D – Kardo Jan 29 '18 at 12:10

1 Answers1

1

SOLUTION

To fix the issue I removed all window.onload = function()s from header, footer, etc. Instead, I added it to common/home, product/search, etc, and it works fine. 

window.onload = function() {

var productClass = 'product-layout product-full col-lg-3 col-md-4 col-sm-6 col-xs-12';

$('#moreHolder').css("display", "block");

$.post('index.php?route=product/productx', { class: productClass },
function(data) {
     if(data.length>10){
        $(data).insertBefore($('#moreHolder'));
     }
})
.always(function() {
    $('#moreHolder').css("display", "none");
});

I also added swiper related style and javascript on each page's first load, checking it by the number of products/limit = page to not have duplicates: 

{% if products %} 
{% if page <= 1 %} 
<link href="catalog/view/javascript/jquery/swiper/css/swiper.min.css" rel="stylesheet" type="text/css">
<link href="catalog/view/javascript/jquery/swiper/css/opencart.css" rel="stylesheet" type="text/css">
<script src="catalog/view/javascript/jquery/swiper/js/swiper.jquery.js" type="text/javascript"></script>
{% endif %} 
{% for product in products %}
....
Kardo
  • 1,658
  • 4
  • 32
  • 52