feat: handle missing SKU in Media Manager
- Added UI and logic to handle cases where the Media Manager is opened for a row without a SKU. - Displays a user-friendly error message with a Close button. - Fixed an issue where the Gallery card was not properly hidden in the error state.
This commit is contained in:
@ -403,7 +403,6 @@
|
|||||||
</a>
|
</a>
|
||||||
<div id="photos-session-status" style="font-size:11px; color:#64748b; text-align:center;">Initializing...</div>
|
<div id="photos-session-status" style="font-size:11px; color:#64748b; text-align:center;">Initializing...</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card" style="padding-bottom: 0;">
|
<div class="card" style="padding-bottom: 0;">
|
||||||
<div class="header" style="margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;">
|
<div class="header" style="margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;">
|
||||||
@ -447,6 +446,17 @@
|
|||||||
<div style="margin-top:16px; color: var(--text-secondary); font-weight: 500;">Connecting...</div>
|
<div style="margin-top:16px; color: var(--text-secondary); font-weight: 500;">Connecting...</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Error UI -->
|
||||||
|
<div id="error-ui"
|
||||||
|
style="display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top: 80px;">
|
||||||
|
<div style="font-size: 48px; margin-bottom: 20px;">⚠️</div>
|
||||||
|
<h3 style="margin: 0 0 8px 0; color: var(--text);">No SKU Found</h3>
|
||||||
|
<p style="color: var(--text-secondary); max-width: 300px; margin-bottom: 24px; line-height: 1.5;">
|
||||||
|
This row does not appear to have a valid SKU. Please ensure the product is set up correctly before managing media.
|
||||||
|
</p>
|
||||||
|
<button onclick="google.script.host.close()" class="btn" style="width: auto;">Close</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Preview Modal -->
|
<!-- Preview Modal -->
|
||||||
<div id="preview-modal" class="modal-overlay" onclick="ui.closeModal(event)">
|
<div id="preview-modal" class="modal-overlay" onclick="ui.closeModal(event)">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
@ -884,6 +894,11 @@
|
|||||||
if (sku && sku !== state.sku) {
|
if (sku && sku !== state.sku) {
|
||||||
state.setSku(info); // Pass whole object
|
state.setSku(info); // Pass whole object
|
||||||
this.loadMedia();
|
this.loadMedia();
|
||||||
|
} else if (!sku && !state.sku) {
|
||||||
|
// If we don't have a SKU and haven't shown error yet
|
||||||
|
if (document.getElementById('error-ui').style.display !== 'flex') {
|
||||||
|
this.loadMedia();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.getSelectedProductInfo();
|
.getSelectedProductInfo();
|
||||||
@ -897,7 +912,18 @@
|
|||||||
if (!sku) {
|
if (!sku) {
|
||||||
const domSku = document.getElementById('current-sku').innerText;
|
const domSku = document.getElementById('current-sku').innerText;
|
||||||
if (domSku && domSku !== '...') sku = domSku;
|
if (domSku && domSku !== '...') sku = domSku;
|
||||||
|
}
|
||||||
|
|
||||||
|
// CHECK FOR MISSING SKU
|
||||||
|
if (!sku || sku === '...') {
|
||||||
|
console.warn("No SKU found. Showing error.");
|
||||||
|
document.getElementById('loading-ui').style.display = 'none';
|
||||||
|
document.getElementById('main-ui').style.display = 'none';
|
||||||
|
document.getElementById('error-ui').style.display = 'flex';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!title) {
|
||||||
const domTitle = document.getElementById('current-title').innerText;
|
const domTitle = document.getElementById('current-title').innerText;
|
||||||
if (domTitle && domTitle !== 'Loading...') title = domTitle;
|
if (domTitle && domTitle !== 'Loading...') title = domTitle;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user