On Chrome tablet not all products are fetched on page load

[m-zat]

When opening wepos on a tablet only a limited amount of product is shown and accessible with the search bar.

In order to get all products I need to scroll down until the end of the page.

Would it be possible to preload all products on page load?

[uaibo]

I was going to write about the initial products load which is the stupidest thing I've seen in a while on code. I don't know why they did it but loading all the products on page load is very very ameteurish and very inefficient. I have a client who had about 800 products and it would take them minutes of waiting before they can do anything useful with the page. What if they had 10000 products? Keep waiting all day long, forever? Why not just search as they type?

I fixed it in my case by editing the searchProduct() method in ProductSearch.vue like the following:

        searchProduct(e) {
            if ( this.serachInput ) {
                if ( this.mode == 'product' ) {

                  wepos.api.get( wepos.rest.root + wepos.rest.posversion + '/products?status=publish&per_page=30&page=1&sku='+this.serachInput )
                  .done( ( response, status, xhr ) => {
                      this.productLoading = false;
                  }).then( ( response, status, xhr ) => {
                      this.searchableProduct = response;
                  });


                  /*
                  this.searchableProduct = this.products.filter( (product) => {
                    if ( product.id.toString().indexOf( this.serachInput ) != -1 ) {
                      return true;
                    } else if ( product.name.toString().toLowerCase().indexOf( this.serachInput.toLowerCase() ) != -1 ) {
                      return true
                    } else if ( product.sku.toString().toLowerCase().indexOf( this.serachInput.toString().toLowerCase() ) != -1 ) {
                      return true
                    } else {
                      return false;
                    }
                  });
                  */

                }
            }
        },

and by commenting this.fetchProducts() in Home.vue as the following:

        fetchProducts() {
            if ( this.page == 1 ) {
                this.productLoading = true;
            }

            if ( ( this.totalPages >= this.page ) ) {
                wepos.api.get( wepos.rest.root + wepos.rest.posversion + '/products?status=publish&per_page=30&page=' + this.page )
                .done( ( response, status, xhr ) => {
                    this.products = this.products.concat( response );
                    this.page += 1;
                    this.totalPages = parseInt( xhr.getResponseHeader('X-WP-TotalPages') );
                    this.productLoading = false;
                }).then( ( response, status, xhr ) => {
                    //this.fetchProducts(); //stop loading all the unnecessary crap!!!!
                });
            } else {
                this.productLoading = false;
            }
        },

now my client can only search by SKU but that's perfectly fine since that's all what they needed. If you need to be able to search simply by title, then replace the "&sku=" parameter from the API URL with "&s="