Problem:
The client wants to ensure that when a user clicks on the 'FR' language switcher on their mobile site, they are not only taken to the French homepage but also immediately see the French pop-up menu.
Solution:
We recommend using custom JavaScript in combination with URL parameters or cookies to control the state of the menu. Here are the steps to achieve this:
1. Add a menu item with a specific class and href on the source page:
<li class="wpml-ls-slot-footer wpml-ls-item wpml-ls-item-fr wpml-ls-last-item wpml-ls-item-legacy-list-horizontal">
<a href="https://www.dsmcuisines.be/testingpage-2-fr/" class="wpml-ls-link">
<span class="wpml-ls-display">FR</span>
</a>
</li>2. Add the menu pop-up container with a specific ID on the target page:
<div class="dialog-widget dialog-lightbox-widget dialog-type-buttons dialog-type-lightbox elementor-popup-modal" id="elementor-popup-modal-70337" aria-modal="true" role="document" tabindex="0" style="display: none;">
<!-- Content of your menu pop-up goes here -->
</div>
3. Use JavaScript to open the menu pop-up on the source page when the 'FR' menu item is clicked:
<script>
function openMenuPopup() {
const menuPopup = document.getElementById('elementor-popup-modal-70337');
if (menuPopup) {
menuPopup.style.display = 'block';
}
}
const targetMenuItem = document.querySelector('li.wpml-ls-item-fr a[href="https://www.dsmcuisines.be/testingpage-2-fr/"]');
if (targetMenuItem) {
targetMenuItem.addEventListener('click', function(event) {
event.preventDefault();
openMenuPopup();
});
}
</script>4. On the target page, check for the 'menu' parameter and open the menu if needed:
<script>
function checkForMenuParameter() {
const urlParams = new URLSearchParams(window.location.search);
const isMenuOpen = urlParams.has('menu');
if (isMenuOpen) {
openMenuPopup();
}
}
function openMenuPopup() {
const menuPopup = document.getElementById('elementor-popup-modal-70337');
if (menuPopup) {
menuPopup.style.display = 'block';
}
}
checkForMenuParameter();
</script>Please note that this is a general guide and the code needs to be adjusted to fit the specific structure and requirements of your website. If this solution does not seem relevant or if you need further assistance, we recommend consulting with one of our WPML contractors for custom work.
If this solution does not look relevant, please open a new support ticket.
