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:
@@ -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 %}
|
||||||
|
|||||||
@@ -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 %}
|
||||||
|
|||||||
Reference in New Issue
Block a user