sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: rename shopLayoutData to storefrontLayoutData
Some checks failed
CI / ruff (push) Successful in 11s
Details
CI / pytest (push) Failing after 46m49s
Details
CI / validate (push) Successful in 23s
Details
CI / dependency-scanning (push) Successful in 30s
Details
CI / docs (push) Has been skipped
Details
CI / deploy (push) Has been skipped
Details

Browse Source 
Align Alpine.js base component naming with storefront terminology.
Updated across all storefront JS, templates, and documentation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-02-24 19:06:45 +01:00
parent ec888f2e94
commit a6e6d9be8e
25 changed files with 130 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/frontend/storefront/architecture.md
View File

@@ -291,7 +291,7 @@ Scripts MUST load in this exact order (see base.html):
7. Page-specific JS ← Optional page scripts
Why This Order Matters:
• shop-layout.js defines shopLayoutData() BEFORE Alpine initializes
• shop-layout.js defines storefrontLayoutData() BEFORE Alpine initializes
• Alpine.js defers to ensure DOM is ready
• Shared utilities available to all scripts
• Icons and logging available immediately
@@ -311,7 +311,7 @@ Alpine.js Component Architecture:
Provides shared functionality for all shop pages:
function shopLayoutData() {
function storefrontLayoutData() {
return {
// Theme state
dark: localStorage.getItem('shop-theme') === 'dark',
@@ -368,16 +368,16 @@ Provides shared functionality for all shop pages:
}
// Make globally available
window.shopLayoutData = shopLayoutData;
window.storefrontLayoutData = storefrontLayoutData;
⭐ PAGE-SPECIFIC COMPONENTS:
Each page extends shopLayoutData() for page-specific functionality:
Each page extends storefrontLayoutData() for page-specific functionality:
// Example: products.html
document.addEventListener('alpine:init', () => {
Alpine.data('shopProducts', () => ({
...shopLayoutData(), // Extend base component
...storefrontLayoutData(), // Extend base component
// Page-specific state
products: [],
@@ -387,7 +387,7 @@ Each page extends shopLayoutData() for page-specific functionality:
// Override init to add page-specific initialization
async init() {
shopLog.info('Products page initializing...');
this.loadCart(); // From shopLayoutData
this.loadCart(); // From storefrontLayoutData
await this.loadProducts(); // Page-specific
},
@@ -405,18 +405,18 @@ Template Usage:
──────────────────────────────────────────────────────────────────
{# In base.html - uses block to allow override #}
<html x-data="{% block alpine_data %}shopLayoutData(){% endblock %}"
<html x-data="{% block alpine_data %}storefrontLayoutData(){% endblock %}"
x-bind:class="{ 'dark': dark }">
{# In products.html - overrides to use page-specific component #}
{% block alpine_data %}shopProducts(){% endblock %}
{# In home.html - uses default base component #}
{# No block override needed, inherits shopLayoutData() #}
{# No block override needed, inherits storefrontLayoutData() #}
⭐ COMPONENT HIERARCHY:
shopLayoutData() ← Base component (shared state & methods)
storefrontLayoutData() ← Base component (shared state & methods)
↓
shopProducts() ← Products page (extends base + products state)
shopCart() ← Cart page (extends base + cart state)
@@ -435,11 +435,11 @@ Tradeoffs:
⚠️ Can't easily split page into independent sub-components
Best Practices:
1. Always extend shopLayoutData() in page components
1. Always extend storefrontLayoutData() in page components
2. Override init() if you need page-specific initialization
3. Call parent methods when needed (this.loadCart(), this.showToast())
4. Keep page-specific state in the page component
5. Keep shared state in shopLayoutData()
5. Keep shared state in storefrontLayoutData()
Responsibilities:
✅ Load products from API