[Design-v2] - change logic for the javascripts, bootstrap 5.3

src/CoreShop/Bundle/FrontendBundle/Resources/assets/js/app.ts

@@ -1,4 +1,5 @@
 /* STYLES  */
 import '../scss/app.scss';
 
-/* JS */
+/* JS */
+import 'bootstrap';

src/CoreShop/Bundle/FrontendBundle/Resources/assets/package.json

@@ -8,7 +8,9 @@
     "not IE >= 0"
   ],
   "devDependencies": {
+    "@popperjs/core": "^2.11.8",
     "@symfony/webpack-encore": "^4.7.0",
+    "@types/bootstrap": "^5.2.10",
     "@types/node": "^22.5.4",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",

src/CoreShop/Bundle/FrontendBundle/Resources/assets/scss/app.scss

@@ -1,4 +1,5 @@
 /* styles */
+@import "bootstrap/scss/bootstrap";
 @import "fonts";
 @import "flag-icons/sass/flag-icons";
 @import "bootstrap-icons/font/bootstrap-icons";

src/CoreShop/Bundle/FrontendBundle/Resources/assets/tsconfig.json

@@ -1,14 +1,14 @@
 {
   "compilerOptions": {
     "types": ["tsd", "node"],
-    "target": "es2022",
+    "target": "es5",
+    "module": "esnext",
+    "lib": ["dom", "es6"],
+    "strict": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "baseUrl": "./",
-    "paths": {
-      "@/*": ["node_modules/*"]
-    }
-  }
+  },
+  "include": ["./js/**/*"]
 }

src/CoreShop/Bundle/FrontendBundle/Resources/assets/webpack.config.js

@@ -5,12 +5,10 @@ if (!Encore.isRuntimeEnvironmentConfigured()) {
 }
 
 Encore
-// directory where compiled assets will be stored
 .setOutputPath('../public/build/')
-// public path used by the web server to access the output path
-.setPublicPath('/build')
-// only needed for CDN's or sub-directory deploy
-//.setManifestKeyPrefix('')
+.setPublicPath('/bundles/coreshopfrontend/build/')
+.setManifestKeyPrefix('bundles/coreshopfrontend/build/')
+.cleanupOutputBeforeBuild()
 
 /*
  * ENTRY CONFIG
@@ -25,7 +23,7 @@ Encore
 
 // will require an extra script tag for runtime.js
 // but, you probably want this, unless you're building a single-page app
-.enableSingleRuntimeChunk()
+.disableSingleRuntimeChunk()
 
 /*
  * FEATURE CONFIG
@@ -69,8 +67,6 @@ Encore
 // requires WebpackEncoreBundle 1.4 or higher
 //.enableIntegrityHashes(Encore.isProduction())
 
-// uncomment if you're having problems with a jQuery plugin
-.autoProvidejQuery()
 .copyFiles([
     {
         from: "./node_modules/bootstrap-icons/font/fonts",

src/CoreShop/Bundle/FrontendBundle/Resources/config/pimcore/config.yml

@@ -1,3 +1,9 @@
 twig:
     form_themes:
-        - '@CoreShopFrontend/Form/fields.html.twig'
+        - '@CoreShopFrontend/Form/fields.html.twig'
+
+# TODO SET CORRECT THE PATH #
+webpack_encore:
+    output_path: '%kernel.project_dir%/src/CoreShop/Bundle/FrontendBundle/Resources/public/build'
+    script_attributes:
+        defer: true

src/CoreShop/Bundle/FrontendBundle/Resources/public/build/entrypoints.json

@@ -2,11 +2,11 @@
   "entrypoints": {
     "app": {
       "js": [
-        "/build/runtime.js",
-        "/build/app.js"
+        "/bundles/coreshopfrontend/build/vendors-node_modules_bootstrap_dist_js_bootstrap_esm_js.js",
+        "/bundles/coreshopfrontend/build/app.js"
       ],
       "css": [
-        "/build/app.css"
+        "/bundles/coreshopfrontend/build/app.css"
       ]
     }
   }