====== Bethico for Joomla 4 ======
Updated 30<sup>th</sup> December 2021

===== Guides =====
  * [[https://docs.joomla.org/Special:MyLanguage/Potential_backward_compatibility_issues_in_Joomla_4|Potential backward compatibility issues in Joomla 4]]
  * [[https://docs.joomla.org/J4.x:Web_Assets/de|Web Assets]]
  * [[https://docs.joomla.org/Category:Joomla!_4.x|Joomla! 4.x]]
  * [[https://docs.joomla.org/URLs_in_Joomla|URLs in Joomla]]
  * [[https://docs.joomla.org/Using_own_library_in_your_extensions/en|Using own library in your extensions]]
  * [[https://www.inmotionhosting.com/support/edu/joomla/joomla-4/joomla-http-headers/|Joomla 4 Security HTTP Headers]], then check [[https://securityheaders.com/|here]]
  * [[https://docs.joomla.org/Archived:How_to_implement_actions_in_your_code|How to implement actions in your code (Permissions)]]

===== Installation =====
  * Install Joomla 4.0.5 without quickstart
  * Install Helix Ultimate 2.0.5 without quickstart
  * Copy template part of Helix Ultimate to Bethico template
  * Copy modified files over from Joomla 3.10 installation and make necessary adjustments, which include adaptions to Helix Ultimate 2.0.5 and Bootstrap 5:<code>index.php
headers/style3/header.php
features/footer.php
features/logo.php
css/custom.css
js/custom.js
</code>
  * Note: I dropped the flexibility to change color theme in Helix Ultimate, as my site's content such as images, logos, etc. depend on the color scheme anyway. It makes it easier to manage, if you have access to custom.css and custom.js. I also added more css variables to make it easier to maintain should I need to change the color theme in the future.
  * Make the correct settings in HelixUltimate back-end including footer, etc.
  * Publish the menu module in position //offcanvas// and select the layout of the offcanvas menu in HelixUltimate.
  * Install //SP Page Builder 3.8.2 Free// or //Pro// and make the following changes:
    - <color red>**Free:**</color> ''com_sppagebuilder/layouts/row/start.php'': set variable ''$video_loop'' to always 'loop' to allow looped videos on the site. You could also rename the file and override it in ''html/layouts/com_sppagebuilder/row/start.php'' (SP Page Builder does not allow overriding it's own layout files).
    - <color red>**Pro:**</color> SP Page Builder Pro adds a custom Access Control Header which needs to be enabled on the server for correct CORS handling. The header is **X-CSRF-Token** and must be added to the server's Access-Control-Allow-Headers for preflight response. If you are unable to do so you need to modify the following files (see [[https://archive.joomshaper.com/forums/pagebuillder-pro-3-2-1-interfere-causes-error-request-header-field-x-csrftoken-is-not-allowed-by-access-control-allow-headers-in-preflight-response#205009|Request header field X-CSRFToken is not allowed by Access-Control-Allow-Headers in preflight response]]):<code>/components/com_sppagebuilder/sppagebuilder.php
/components/com_sppagebuilder/controllers/page.php
/components/com_sppagebuilder/addons/ajax_contact/site.php
/components/com_sppagebuilder/addons/form_builder/site.php</code>
    - <color red>**Pro:**</color> SP Page Builder Pro adds the custom Access Control Header with a call to jQuery.ajaxSetup(), which is not recommended by jQuery. In the process it also triggers that jQuery shipped with SP Page Builder is loaded after jQuery shipped with Joomla 4. Since SP Page Builder uses an ancient jQuery version 1.12 this breaks functionality with extensions which use widgets depending on more up to date jQuery versions. You can fix this 2 ways:
      - Rename or remove jQuery shipped with SP Page Builder: ''/components/com_sppagebuilder/assets/js/jquery.min.js''
      - Manually remove the CSRF Token in ''/components/com_sppagebuilder/sppagebuilder.php'' as described above. Just remember to redo this after updating SP Page Builder Pro.
  * Install //Akeeba 9.0.10// for Joomla 4 and enter the download ID
  * Disable the //SEF plugin// which messes with urls generated by //Bethico File Upload (based on jQuery File Upload)//
  * Install and enable the //BethicoSEF plugin// which allows to exclude the site urls for //Bethico File Upload//. Exclude menu items which point to //Bethico File Upload//.
  * Setup multilingual site
    - Install languages
    - Create new main menu and assign language to new menu, then assign //English// to the original main menu
    - Use the same aliases for each menu entry between languages and connect them through //Language associations//
    - You will need to create a hidden or unused main menu and assign a default page for all languages there
    - Create and assign content for the different languages
    - Go to //Site Template Styles// and copy the template
    - Go to //Template Options// for each language and assign the corresponding menu
    - Enable the //Language Filter Plugin//. Set //Language Selection for new Visitors//, //Remove URL Language Code// and //Cookie Lifetime// in the plugin options.
    - Enable //Bethico Language Switcher//
    - Set the //Native Titles// in //Content Languages//, omit (United Kingdom) or (Deutschland) behind the language name
    - Make sure the //Offcanvas// menu for each language has //Layout// set to **Default** in parameter fieldset //Advanced//, otherwise ''mod_menu/default.php'' is not called and icons do not render
    - Note that in SP Page Builder Pro 3.8.0, language selection for a page is done by clicking icon //Publishing// on the left side of the window of //Edit Page//
    - Make sure the language menus are all enabled in the //Menu Assignment// of the template
    - Associations should be //hidden// in (global) Options -> Articles
    - Make sure all menu items are enabled in the menu assignment
    - Pages without menu entry should be added to each language's menu and then set to //hidden// in the menu
  * Set login and logout redirects in menu //Login// to //Internal URL// as //Menu Item// does not work. Use override of login template which adds option to return to referrer page.
  * Enable ReCaptcha invisible plugin
  * Change the password length required in Options -> Users in the back-end
  * SP Page Builder Content tricks
    * Define background image and video in section, then save it with video active. This will make sure the background image is shown when javascript is disabled, instead of a white area where the video should show.
  * Disable plugin //System - WebAuthn Passwordless Login//
  * Site module should be enabled for all pages. mod_bethico_contact_form, for example, will not work if not enabled for the page where it is used.

===== Development =====
  * If a namespace changes during development, for example in the xml file, then you need to adjust the namespace in file ''/administrator/cache/autoload_psr4.php''

===== Login =====
  * If you need to change the site's Multi-Faktor Login credentials, you need to align the following:
  - File ''configuration.php'' variable ''$secret'' in your site root
  - Table ''#__user_mfa'' in the database

===== CORS - CSRF =====
  * [[https://docs.joomla.org/How_to_add_CSRF_anti-spoofing_to_forms|How to add CSRF anti-spoofing to forms]]
  * [[https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS|Cross-Origin Resource Sharing (CORS)]]
  * [[https://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains|Access-Control-Allow-Origin Multiple Origin Domains?]]
  * [[https://archive.joomshaper.com/forums/pagebuillder-pro-3-2-1-interfere-causes-error-request-header-field-x-csrftoken-is-not-allowed-by-access-control-allow-headers-in-preflight-response#205009|Pagebuillder Pro 3.2.1 - 3.8.0 csrf error]] (scroll to bottom)