Bethico for Joomla 4

Updated 30^th December 2021

• Potential backward compatibility issues in Joomla 4
• Web Assets
• Joomla! 4.x
• URLs in Joomla
• Using own library in your extensions
• Joomla 4 Security HTTP Headers, then check here
• How to implement actions in your code (Permissions)

• 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:

  index.php
  headers/style3/header.php
  features/footer.php
  features/logo.php
  css/custom.css
  js/custom.js

• 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:
  1. Free: 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).
  2. Pro: 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 Request header field X-CSRFToken is not allowed by Access-Control-Allow-Headers in preflight response):

     /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

  3. Pro: 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:
     1. Rename or remove jQuery shipped with SP Page Builder: /components/com_sppagebuilder/assets/js/jquery.min.js
     2. 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
  1. Install languages
  2. Create new main menu and assign language to new menu, then assign English to the original main menu
  3. Use the same aliases for each menu entry between languages and connect them through Language associations
  4. You will need to create a hidden or unused main menu and assign a default page for all languages there
  5. Create and assign content for the different languages
  6. Go to Site Template Styles and copy the template
  7. Go to Template Options for each language and assign the corresponding menu
  8. Enable the Language Filter Plugin. Set Language Selection for new Visitors, Remove URL Language Code and Cookie Lifetime in the plugin options.
  9. Enable Bethico Language Switcher
  10. Set the Native Titles in Content Languages, omit (United Kingdom) or (Deutschland) behind the language name
  11. 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
  12. 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
  13. Make sure the language menus are all enabled in the Menu Assignment of the template
  14. Associations should be hidden in (global) Options → Articles
  15. Make sure all menu items are enabled in the menu assignment
  16. 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.

• 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

• If you need to change the site's Multi-Faktor Login credentials, you need to align the following:

1. File configuration.php variable $secret in your site root
2. Table #__user_mfa in the database

• How to add CSRF anti-spoofing to forms
• Cross-Origin Resource Sharing (CORS)
• Access-Control-Allow-Origin Multiple Origin Domains?
• Pagebuillder Pro 3.2.1 - 3.8.0 csrf error (scroll to bottom)