fix: Alpine.js defer race condition — blank pages on first load
Dynamic script creation (document.createElement) ignores the defer attribute per HTML spec — scripts are async regardless. Alpine.js CDN loaded fast and auto-initialized before page scripts had executed, causing ReferenceError for x-data functions (adminStores, dark, isSideMenuOpen, etc.) and blank pages. Fix: Replace dynamic script creation with static <script defer> tags and move extra_scripts block BEFORE Alpine.js in all 4 base templates (admin, store, merchant, storefront). Alpine.js is now always the last deferred script, ensuring all page functions are defined before it auto-initializes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -380,28 +380,13 @@
|
||||
{# 6. API Client #}
|
||||
<script defer src="{{ url_for('static', path='shared/js/api-client.js') }}"></script>
|
||||
|
||||
{# 7. Alpine.js with CDN fallback (deferred - loads last) #}
|
||||
<script>
|
||||
(function() {
|
||||
var script = document.createElement('script');
|
||||
script.defer = true;
|
||||
script.src = 'https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js';
|
||||
|
||||
script.onerror = function() {
|
||||
console.warn('Alpine.js CDN failed, loading local copy...');
|
||||
var fallbackScript = document.createElement('script');
|
||||
fallbackScript.defer = true;
|
||||
fallbackScript.src = '{{ url_for("static", path="shared/js/lib/alpine.min.js") }}';
|
||||
document.head.appendChild(fallbackScript);
|
||||
};
|
||||
|
||||
document.head.appendChild(script);
|
||||
})();
|
||||
</script>
|
||||
|
||||
{# 8. Page-specific JavaScript #}
|
||||
{# 7. Page-specific JavaScript (MUST load before Alpine.js) #}
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
|
||||
{# 8. LAST: Alpine.js (must be last defer script — auto-initializes on load) #}
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"
|
||||
onerror="var s=document.createElement('script');s.defer=true;s.src='{{ url_for('static', path='shared/js/lib/alpine.min.js') }}';document.head.appendChild(s);"></script>
|
||||
|
||||
{# Toast notification container #}
|
||||
<div id="toast-container" class="fixed bottom-4 right-4 z-50"></div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user