🐛 [BUG] - Problems when the website is inside a folder

maofree commented 1 year ago

Description

Hi if the website is set inside a folder like /shop/ there are some problems: 1) the head-preload.tpl is wrong at line 8, the /shop/ is added again at the start of url of font files 2) if inside is_themecore is set the webp, it is wrong to use the %{DOCUMENT_ROOT} because ti gives the webroot address but without the shop folder. You can use the shop_url table to get the name of the subfolder

bye

Node.js version

v16.20

php version

8.1

OS and it's version

linux

Browsers

Chrome

Required module/theme

is_themecore and theme

Reproduction steps

1. in the webroot add a folder named like "shop"
2. install inside it a clean prestashop and falcon theme
3. then you will see in the console of your browser the errors about the fonts
4. then go inside is_themecore and active the webp option and the images will go away

bye

Logs

No response

Oksydan commented 1 year ago

Hi @maofree,

thank you for creating an issue. I was able to reproduce an issue.

maofree commented 1 year ago

Hi @Oksydan now I've done a test move the demo site (with my new theme) on a real server there are some problems to do this operation if my demo site is inside one or more folder or to move it on another place without or inside one or more folders if they have a different name

theme.css
theme.css.map
theme.js
theme.js.map
preload.html
I cannot compile the theme on the real server, so in these 5 files there is the path_url of my dev server (to fix I need to edit theme with an editor)
head-preload.tpl and .htaccess (I've already reported) when i compile the theme

Oksydan commented 1 year ago

Hi @maofree

It's not theme problem by you CD problem. You have two options build you theme with different .evn file. You can change env file loaded by webpack via cli. Second option is to build your theme in your CI/CD process with different env file on your production server during development.

Oksydan commented 1 year ago

If you rly can't build theme on production server. You can use worker to build it and use rsync to deliver files for your production server.

maofree commented 1 year ago

Hi @Oksydan I explain this problem in a better mode, because there are two separate when the website is present in a folder named for example NUOVO8

htaccess it is necessary to replace %{DOCUMENT_ROOT} with %{DOCUMENT_ROOT}/NUOVO8

you have reproduced this problem over here on Jul 28 this problem is not due from the theme but from the module that edit the htaccess

the second problem is present in these files theme.css.map theme.js theme.js.map preload.html

just for the icon fonts url because in they are absolute and not relative to the theme folder

The first point I think you solve easily in the module

for the second issue I have found a simple solution the preload.html file is load inside head-preload.tpl so I suggest this steps:

set into preload.html the url relative to the theme folder like href="/themes/maotheme/assets/fonts/roboto-v20-latin-ext_latin-regular-5cb5c8f08bb4e6cb64c3b5b6115bf498.woff2"
add into head-preload.tpl the shop folder, because here it is possible to get this information from prestashop's variables and the href become so href="/NUOVO8/themes/maotheme/assets/fonts/roboto-v20-latin-ext_latin-regular-5cb5c8f08bb4e6cb64c3b5b6115bf498.woff2"

in this mode there are no constraints for both the development server and the production sites

to fix the problem of url inside the css and js files, it is necessary to use the same solution used in classic theme like this with relative urls

url(../css/12a47ed5fd5585f0f422.woff2) format("woff2"),url(../css/f2a0933406f783065152.woff)

Oksydan commented 1 year ago

Hi,

Path to font file isn't relative to theme. It's your publicPath set in env files. Preload.html is created upon your build process. It's not theme faul but it's how webpack and uri works. I am not sure yet but we might change the way how public path is set in next version. I am also thinking about dropping webpack preload plugin for something different build in PHP code with simpler control over what should be preload and what shouldn't.

maofree commented 1 year ago

Hi

today I uploaded the site with a new theme to a dedicated server of one of my clients. it has 95/100 despite there being a lot of content tomorrow I'll try to make a version without using vanilla lazyload, to use the native solution and I hope it gets the same score too. However, I warn you

Oksydan / falcon