fix: properly call parent init in cart and product components

Issue:
- sessionId was undefined when cart/product pages loaded
- Parent shopLayoutData init() was being overridden, not called
- Session ID setup in parent wasn't running

Solution:
- Store reference to baseData before spreading
- Explicitly call baseData.init() in child component init
- This ensures sessionId is initialized before cart/product logic runs
- Add session ID logging for debugging

Now the session ID is properly initialized and cart functionality works.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-23 09:28:15 +01:00
parent 84c6c38a50
commit 4c69a94f14
2 changed files with 86 additions and 64 deletions

View File

@@ -169,8 +169,11 @@
{% block extra_scripts %} {% block extra_scripts %}
<script> <script>
document.addEventListener('alpine:init', () => { document.addEventListener('alpine:init', () => {
Alpine.data('shoppingCart', () => ({ Alpine.data('shoppingCart', () => {
...shopLayoutData(), const baseData = shopLayoutData();
return {
...baseData,
items: [], items: [],
loading: false, loading: false,
@@ -199,6 +202,12 @@ document.addEventListener('alpine:init', () => {
// Initialize // Initialize
async init() { async init() {
console.log('[SHOP] Cart page initializing...'); console.log('[SHOP] Cart page initializing...');
// Call parent init to set up sessionId
if (baseData.init) {
baseData.init.call(this);
}
await this.loadCart(); await this.loadCart();
}, },
@@ -302,7 +311,8 @@ document.addEventListener('alpine:init', () => {
window.location.href = '{{ base_url }}shop/checkout'; window.location.href = '{{ base_url }}shop/checkout';
} }
} }
})); };
});
}); });
</script> </script>
{% endblock %} {% endblock %}

View File

@@ -216,8 +216,11 @@ window.PRODUCT_ID = {{ product_id }};
window.VENDOR_ID = {{ vendor.id }}; window.VENDOR_ID = {{ vendor.id }};
document.addEventListener('alpine:init', () => { document.addEventListener('alpine:init', () => {
Alpine.data('productDetail', () => ({ Alpine.data('productDetail', () => {
...shopLayoutData(), const baseData = shopLayoutData();
return {
...baseData,
// Data // Data
product: null, product: null,
@@ -253,8 +256,16 @@ document.addEventListener('alpine:init', () => {
// Initialize // Initialize
async init() { async init() {
console.log('[SHOP] Product detail page initializing...'); console.log('[SHOP] Product detail page initializing...');
// Call parent init to set up sessionId
if (baseData.init) {
baseData.init.call(this);
}
console.log('[SHOP] Product ID:', this.productId); console.log('[SHOP] Product ID:', this.productId);
console.log('[SHOP] Vendor ID:', this.vendorId); console.log('[SHOP] Vendor ID:', this.vendorId);
console.log('[SHOP] Session ID:', this.sessionId);
await this.loadProduct(); await this.loadProduct();
}, },
@@ -384,7 +395,8 @@ document.addEventListener('alpine:init', () => {
this.addingToCart = false; this.addingToCart = false;
} }
} }
})); };
});
}); });
</script> </script>
{% endblock %} {% endblock %}