Improving Theme Selection in Landing Pages

The landing project provides customizable landing pages. Recently, we addressed an issue with the theme selection process that was causing cross-origin errors on tenant subdomains.

The Problem

Previously, the theme selector used the route() function to generate URLs. This resulted in the main domain URL being generated, which caused cross-origin failures when the landing page was accessed on tenant subdomains. These errors prevented users from properly customizing the appearance of their landing pages.

The Solution

To resolve this, we made two key changes:

1. URL Generation: We replaced the route() function with the native url() function for generating theme selection URLs. This ensures that the correct subdomain is used, eliminating cross-origin issues.

2. Dropdown Implementation: The original theme selector used a native <select> element. We replaced this with a custom Alpine.js dropdown component. This change allows us to control the dropdown's behavior more precisely, specifically ensuring that it opens upward since the component is fixed at the bottom of the viewport.

Code Example

Here's a simplified example of how the url() function can be used to generate a URL in PHP:

$theme = 'dark';
$url = url('/theme/' . $theme);
echo $url;
// Output: https://example.com/theme/dark (or the correct subdomain)

This code snippet demonstrates how the url() function generates a URL for selecting a specific theme. It is crucial that the correct URL is generated to avoid cross-origin errors, especially in multi-tenant environments. The old route() function was inadvertently including the base URL instead of respecting the subdomain.

Benefits

• Eliminated Cross-Origin Errors: By using the url() function, we ensure that the correct subdomain is used, resolving cross-origin issues.
• Improved User Experience: The custom Alpine.js dropdown provides a better user experience, especially on smaller screens or when the component is positioned at the bottom of the viewport.

Key Takeaway

When working with multi-tenant applications, it's crucial to pay close attention to URL generation. Using the correct function (url() instead of route() in this case) can prevent cross-origin errors and improve the overall user experience. Additionally, consider using custom components like Alpine.js dropdowns to enhance UI behavior and flexibility.