search

vuestorefront-community / prestashop

Convert your traditional PrestaShop website into a fast, mobile friendly and modern website.
MIT License
51 stars 31 forks source link

Category page does not load products sometimes #80

Closed mdkbdg closed 1 year ago

mdkbdg commented 1 year ago

What is your question / Please describe your issue

Thanks for this project!!

I fresh install PrestaShop 1.7.8.8 and 'master' branch of this project (latest release was 1.1.1), then configure everything, access http://localhost:3000, and the homepage appear.

The homepage has ~4 products~ feature product section on it (where it has left and right arrow). I thought it is successfully connected. But, when I click the top menu "Cloth" or "Accessories", it shows a page with 2 loading icons (on filter area and product grid area) Weirdly, when I click the top menu "Art", it shows the products well. Then, I click "Accessories", it shows loading. Now, when I click "Art", it shows loading! "Art" will work after I restart the server (browser refresh does not work)

Clicking product on homepage works fine (cloth) and lead me to the product detail page.

In short, for me : a. "Cloth" or "Accessories" category page does not work b. "Art" category page sometimes work

On point a, the error shown is this

[dev:theme]  ERROR  Cannot read property 'status' of undefined
[dev:theme]
[dev:theme]   at getAxiosStatusCode (/Library/WebServer/Documents/prestashop1788vuesf/node_modules/@vue-storefront/middleware/lib/index.cjs.js:167:31)
[dev:theme]   at getAgnosticStatusCode (/Library/WebServer/Documents/prestashop1788vuesf/node_modules/@vue-storefront/middleware/lib/index.cjs.js:179:12)
[dev:theme]   at /Library/WebServer/Documents/prestashop1788vuesf/node_modules/@vue-storefront/middleware/lib/index.cjs.js:216:32
[dev:theme]   at step (/Library/WebServer/Documents/prestashop1788vuesf/node_modules/@vue-storefront/middleware/lib/index.cjs.js:75:23)
[dev:theme]   at Object.throw (/Library/WebServer/Documents/prestashop1788vuesf/node_modules/@vue-storefront/middleware/lib/index.cjs.js:56:53)
[dev:theme]   at rejected (/Library/WebServer/Documents/prestashop1788vuesf/node_modules/@vue-storefront/middleware/lib/index.cjs.js:47:65)
[dev:theme]   at runMicrotasks (<anonymous>)
[dev:theme]   at processTicksAndRejections (internal/process/task_queues.js:95:5)

Appreciate your time

What version of PrestaShop integration are you using?

1.7.8.8

Code of Conduct

samberrry commented 1 year ago

thanks for reporting.

I tried with a fresh PrestaShop installation 1.7.8.8 and main branch of the integration. I followed the instructions in README file of the Vue Storefront PrestaShop integration (current repo), and I changed the url endpoint to my local prestashop instance. However, I could not re-produce the issue.

Here is a video record:

https://user-images.githubusercontent.com/20775532/208201999-eb3946cf-057b-4274-87ff-847fd87cae27.mp4

Please provide me with more info if possible, and please check the instructions carefully, and double check your configs.

thank you

mdkbdg commented 1 year ago

guys, it is amazing @samberrry has been responding to message on discord. I really appreciate your time @samberrry . Thank you!

I follow exactly the README steps, I am using nodeJS 14, and have double check my env setup. Unfortunately, I found two problems now :

After few conversation with the man of the house @samberrry , his question "Is your site multilang?" got me thinking. Actually, this conversation is there in discord thread already but he takes time to reply to my message and create me a thread. What an amazing guy!

I will write how I solve mine below. Hope it is useful for some. (Note : It solves Category page problem , but not Add to Cart problem)

These are things to watch :

This is what I did :

  1. Fresh install PrestaShop with Country selection : US. Then, install the REST API Module (mine was v2.4). Make sure to successfully access /rest When successful, it would show this on your browser

    {
success: true,
message: "Hello Binshops API!"
}

  2. middleware.config.js : 

    url: 'http://localhost/prestashop801'

    without trailing slash and can be any name to replace 'prestashop801' depending on your PS installation

  3. nuxt.config.js comment out 9 lines that is NOT related to US/English

i18n: {
    currency: 'USD',
    country: 'US',
    countries: [
      { name: 'US', label: 'United States', states: ['California', 'Nevada'] },
      //{ name: 'AT', label: 'Austria' },
      //{ name: 'DE', label: 'Germany' },
      //{ name: 'NL', label: 'Netherlands' }
    ],
    currencies: [
      //{ name: 'EUR', label: 'Euro' },
      { name: 'USD', label: 'Dollar' }
    ],
    locales: [
      { code: 'en', label: 'English', file: 'en.js', iso: 'en' }
    ],
    defaultLocale: 'en',
    lazy: true,
    seo: true,
    langDir: 'lang/',
    vueI18n: {
      fallbackLocale: 'en',
      numberFormats: {
        en: {
          currency: {
            style: 'currency', currency: 'USD', currencyDisplay: 'symbol'
          }
        //},
        }
        //de: {
        //  currency: {
        //    style: 'currency', currency: 'EUR', currencyDisplay: 'symbol'
        //  }
        //}
      } 
    },
  1. yarn build then yarn dev

I can access Category Page and the products are now shown. Perfect! Unfortunately, Add to Cart button still does not work. It has the same error

[dev:theme]  ERROR  Cannot read property 'status' of undefined
[dev:theme] 
[dev:theme]   at getAxiosStatusCode (/Library/WebServer/Documents/prestashop801vuesff/node_modules/@vue-storefront/middleware/lib/index.cjs.js:167:31)
[dev:theme]   at getAgnosticStatusCode (/Library/WebServer/Documents/prestashop801vuesff/node_modules/@vue-storefront/middleware/lib/index.cjs.js:179:12)
[dev:theme]   at /Library/WebServer/Documents/prestashop801vuesff/node_modules/@vue-storefront/middleware/lib/index.cjs.js:216:32
[dev:theme]   at step (/Library/WebServer/Documents/prestashop801vuesff/node_modules/@vue-storefront/middleware/lib/index.cjs.js:75:23)
[dev:theme]   at Object.throw (/Library/WebServer/Documents/prestashop801vuesff/node_modules/@vue-storefront/middleware/lib/index.cjs.js:56:53)
[dev:theme]   at rejected (/Library/WebServer/Documents/prestashop801vuesff/node_modules/@vue-storefront/middleware/lib/index.cjs.js:47:65)
[dev:theme]   at runMicrotasks (<anonymous>)
[dev:theme]   at processTicksAndRejections (internal/process/task_queues.js:95:5)

Both problems do not happen when I use middleware.config.js : 

url: 'https://rest.binshops.com'

At this point, I am still curious on : A. How to config for "other country"? e.g. select country other than US during installation B. How to config for multilang / multi-currency / multi-country PS installation? C. If this is an error 'connecting' to the PrestaShop, why does it work in the first place (featured products are shown, menu also shows category, etc)? I thought the connection was successful until I tried clicking on the category menu

D. Should I create another issue for Add to Cart problem?

samberrry commented 1 year ago

@mdkbdg thanks for your explanation, regarding your questions: A.B. To setup multi lang and multi currency correctly please check doc: https://docs.vuestorefront.io/prestashop/guide/multi-language.html C. I'm just curious to know more.. a screen record from your browser and browser console would be helpful. Thank you D. Not necessary, here we can track it.

mdkbdg commented 1 year ago

This is a recording describing :

I checked the multi-lang doc, it seems the nuxt.config.js above (number 3) is all right? Please correct me.

As directed, develop branch was also tried but same error occurred.

I also tried installing the PrestaShop twice, using different country :

If this https://rest.binshops.com works, maybe I could try its exact installation on localhost. PrestaShop installation could be different accessing from different countries, choosing different installation parameters, etc.

Any other idea?

theproblem

samberrry commented 1 year ago

@mdkbdg thanks for the record, as I see you are trying to use Ps 8.0.1 which is still under development, we support 1.7.8.8 LTS version. I think that's the reason. Please try with 1.7.8.8 and let me know if you still have problem. Thank you

mdkbdg commented 1 year ago

Please find below video using :

After changing the middleware.config.js to PS1.7.8.8 installation, I did yarn build then yarn dev And then make the video below.

I am afraid both problems are still there.

theproblem1788

samberrry commented 1 year ago

thanks for recording, however I could not check middleware.config.js config, because I guess you may still trying to use your 8.0 version.

Usually, the error will be thrown when there is a connection issue between your nodejs and prestashop instance, or there is a version miss-match. As you are working on local it's hard to figure it out, next step is to deep dive in code and check results in api-client package on your local setup, but if you have an online version for testing and still you have the same issue I can check your endpoints.

thank you

mdkbdg commented 1 year ago

It works using rest.binshops.com middleware url but not with local prestashop installation. I am still wondering is it prestashop installation or vuesf installation. I use prestashop 1.7.8.8 and have double checked my config.

I tried via Postman with endpoint : {{website_url}}/rest/categoryProducts It returns code 200 and all the data needed (shown as postman response)

However, the error still remain. I tried different browsers, chrome, vivaldi, firefox, safari with "Clean all data" prior, same error on category page.

samberrry commented 1 year ago

Yes, I see it works with rest.binshops.com it's a fresh Ps 1.7.8.8, I'm just curious to know if there is other ps LTS version that it's not working on.. to figure out the issue.

And yes may be there are some connection issues.. but I'm not sure why your home page works.. as it's a specific issue on your system, debugging api-client would be helpful to see what is happening.

mdkbdg commented 1 year ago

Hi @samberrry , please find http://13.214.214.23:3000

This test server explain loading problem on Clothes (and other category). After loading for a while, it would go to Error page. Then, if the page is refreshed, it will show a perfect category page.

Also, the Add to Cart problem. After clicking Add to Cart, it pops up information on top-right that product is added to cart but no items in cart when cart icon on header (top-right) is clicked.

The configuration is default, middleware api pointing to url: 'https://rest.binshops.com'

Please be kind to this server, and extra patience. It is a test server, very small spec depending on swap. Click Add to Cart can take effect in 60 seconds and to get to featured product detail, even more time.

@samberrry I can give you access to the server via private message or somewhere, if you prefer. Thanks in advance.

image
samberrry commented 1 year ago

Hi @mdkbdg and thanks for setting up the test server.

I checked the http://13.214.214.23:3000/ but it seems that it's down now.

Thank you

mdkbdg commented 1 year ago

Hi @samberrry How can I give you the server access?

samberrry commented 1 year ago

Hi @mdkbdg , a new version just released v1.2.2, it has a bug fix related to multi lang, would you please check the latest version and see if it fixes your issue. May be you had same problem. If it did not fix, I think it would be better to check your online test server first, please set it up so I can check details.
thanks

mdkbdg commented 1 year ago

Hi @samberrry This was done to the server on Feb 27, 2023 about 03:30AM Berlin time : 

git clone https://github.com/vuestorefront-community/prestashop.git
yarn
Leave this as it is : packages/theme/middleware.config.js (pointing to rest.binshops.com)
yarn build
yarn dev

The gif below shows the behaviour. Basically, same problem. Loading icons when category is clicked. But when the page is refreshed, then the products show.

I have setup the online test server. Thank you very much. How can I send you the .pem for server access?

theproblem122

mdkbdg commented 1 year ago

Hi @samberrry

Update for this issue : It is solved. I can't believe it is nuxt.config.js

export default {
  server: {
    port: 3000,
    //host: '0.0.0.0' <-- comment this!
    host: '192.168.18.71' //<-- change to this!
  },

I am unsure about localhost and previous server setup, but currently my env has 2 virtual machines on the same network (e.g. 192.168.18.72 for prestashop and 192.168.18.71 for vuestorefront) and updating to v1.2.2 as you suggested. It works with default PrestaShop installation.

The category page load perfectly now. Also, add to cart is functioning perfectly on this setup.

But I found add to cart error when using domain name. This is the flow : 

CloudFlare tunnel (CNAME, e.g. demoshop01.mydomain.com) 
--> Public Hostname to local IP:port (e.g. 192.168.18.71:3000)
--> Access demoshop01.com from browser

And this error occur : image which is obviously followed by

image

I was thinking, if I could make the ajax call to demoshop01.mydomain.com (instead of 192.168.18.71:3000), it would solve this problem? How? I tried hardcoding api-client/index.server.ts

const client = axios.create({
    // baseURL: settings.api.url
    baseURL: 'demoshop01.mydomain.com'
  });

but no success. Does it relate to jest.base.config.js at all?

samberrry commented 1 year ago

Hi @mdkbdg sorry for late reply, I'm happy that you found the issue, no changing jest.base.config.js does not work, please make sure that you are using the correct prestashop root url. I'm going to close this issue, it seems that the main problem solved, feel free to re-open it if needed.