> For the complete documentation index, see [llms.txt](https://help.mimeeq.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.mimeeq.com/developer-guides/cart-validation-script.md).

# Cart Validation Script

## Summary

This script solves a timing issue in Shopify where custom product images and prices don't load immediately when items are added to the cart. Without this solution, customers might see incomplete product information (missing images, $0 prices, or blank titles), which could lead to confusion or checkout errors.

### What It Does

* Detects when custom products (marked with \_mmqProduct property) are added to the cart
* Checks if critical product data is missing (price, image, title, product ID, or URL)
* Displays a user-friendly overlay with a loading message to prevent interaction with incomplete data
* Continuously polls Shopify's cart API every 6 seconds until all product information is fully loaded
* Automatically refreshes the page once complete data is available
*

### Problem It Solves

Shopify's backend processing for custom products can be delayed, causing a gap between when a product is added to the cart and when its full details (especially images and pricing) become available. This script bridges that gap by:

* Preventing customers from seeing or interacting with incomplete product data
* Ensuring accurate pricing and product information before checkout
* Providing clear feedback that the system is working ("We are creating your custom product...")
* Automatically resolving the issue without requiring manual page refreshes The implementation is theme-specific (shown here for Dawn Theme) but can be adapted to any Shopify theme by adjusting the cart container selector.\
  This code snippet is designed for the Dawn Theme but can be easily adapted for any Shopify theme.

When products are added to the Shopify cart, they receive a \_mmqProduct property. The script checks for this property to determine if it should execute. Here's how it works:

* First, it verifies whether the cart contains products with the \_mmqProduct property
* If found, it checks whether these products are missing critical data—specifically price or image information (configurable via variables at the start of the script)
* When missing data is detected, the script displays an overlay on the cart page to prevent user interaction
* It then waits for Shopify to finish processing the product data, checking at customizable intervals until the information is complete This ensures customers don't proceed with incomplete product information in their cart.

## Code

```javascript
{% if template.name contains 'cart' %}
<script>
// Mimeeq Script for Cart Checking Variants Start
console.group('[Mimeeq Cart Debug]');
console.log('🟦 Script loaded and running');
console.log('💡 To test overlay, run: window.mimeeqDebugOverlay()');

const checkPrice = true;
const checkImage = true;
const waitTime = 6000;

const items = {{ cart.items | json }};
console.log('📦 Cart items:', items);

const isMmqProduct = items.some(i => i.properties && i.properties._mmqProduct);
const isMissingData = items.some(i => {
  const missingPrice = checkPrice && (!i.price || i.price === 0);
  const missingImage = checkImage && !i.image;
  const missingTitle = !i.product_title;
  const missingProductId = !i.product_id;
  const missingUrl = !i.url;
  const isMissing = missingPrice || missingImage || missingTitle || missingProductId || missingUrl;
  if (isMissing) console.log('🔍 Item missing data:', i);
  return isMissing;
});

console.log('🧩 isMmqProduct:', isMmqProduct);
console.log('⚠️ isMissingData:', isMissingData);

function showMimeeqOverlay(debugMode = false) {
  const cartContainer = document.querySelector('.cartitems--list');
  if (!cartContainer) {
    console.warn('⚠️ No .cartitems--list element found');
    return;
  }

  // --- Create overlay ---
  const overlay = document.createElement('div');
  overlay.id = 'mimeeq-overlay';
  Object.assign(overlay.style, {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    background: 'rgba(255, 255, 255, 0.65)', // soft white-gray blur
    backdropFilter: 'blur(10px)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: '9999',
    pointerEvents: 'all',
    transition: 'opacity 0.3s ease',
    opacity: '0'
  });

  // --- Spinner (left of text) ---
  const spinner = document.createElement('div');
  Object.assign(spinner.style, {
    width: '22px',
    height: '22px',
    border: '3px solid rgba(0,0,0,0.1)',
    borderTop: '3px solid #ac7349',
    borderRadius: '50%',
    animation: 'mimeeq-spin 1s linear infinite',
    flexShrink: '0',
    marginRight: '12px'
  });

  // Spinner animation keyframes (add once)
  if (!document.getElementById('mimeeq-spinner-style')) {
    const styleTag = document.createElement('style');
    styleTag.id = 'mimeeq-spinner-style';
    styleTag.textContent = `
      @keyframes mimeeq-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    `;
    document.head.appendChild(styleTag);
  }

  // --- Message box ---
  const messageBox = document.createElement('div');
  Object.assign(messageBox.style, {
    background: '#fff',
    borderRadius: '8px',
    padding: '20px 28px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
    fontFamily: 'system-ui, sans-serif',
    fontSize: '16px',
    color: '#000',
    whiteSpace: 'nowrap',
    maxWidth: '600px'
  });

  // --- Message text ---
  const messageText = document.createElement('div');
  messageText.innerText =  'We are creating your custom product. The page will refresh once it’s ready.';

  messageBox.appendChild(spinner);
  messageBox.appendChild(messageText);
  overlay.appendChild(messageBox);

  // --- Attach to container ---
  cartContainer.style.position = 'relative';
  cartContainer.appendChild(overlay);

  // --- Fade in effect ---
  requestAnimationFrame(() => { overlay.style.opacity = '1'; });

  console.log(debugMode ? '🐞 Debug overlay shown' : '📍 Overlay shown');
}

function hideMimeeqOverlay() {
  const overlay = document.getElementById('mimeeq-overlay');
  if (!overlay) return;
  overlay.style.opacity = '0';
  setTimeout(() => overlay.remove(), 300);
}

window.mimeeqDebugOverlay = () => { showMimeeqOverlay(true); };
window.mimeeqHideOverlay = () => { hideMimeeqOverlay(); };

if (isMmqProduct && isMissingData) {
  console.log('🚀 Conditions met — starting cart data check loop');
  let finishCheck = false;
  showMimeeqOverlay(false);

  const getCartData = async () => {
    console.log('🔄 Checking cart data...');
    try {
      const response = await fetch('/cart.js');
      const { items } = await response.json();
      const missingData = items.some(i => {
        const missingPrice = checkPrice && (!i.price || i.price === 0);
        const missingImage = checkImage && !i.image;
        const missingTitle = !i.product_title;
        const missingProductId = !i.product_id;
        const missingUrl = !i.url;
        return missingPrice || missingImage || missingTitle || missingProductId || missingUrl;
      });
      if (!missingData) {
        finishCheck = true;
        console.log('✅ All data loaded — refreshing page...');
        window.location.reload();
      }
    } catch (error) {
      console.warn('❌ Cart refresh check failed:', error);
    }
  };

  const interval = setInterval(async () => {
    if (finishCheck) {
      clearInterval(interval);
      console.log('🛑 Interval cleared');
    } else {
      await getCartData();
    }
  }, waitTime);
} else {
  console.log('ℹ️ Conditions not met — script exited');
}

console.groupEnd();
// Mimeeq Script for Cart Checking Variants End
</script>
{% endif %}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.mimeeq.com/developer-guides/cart-validation-script.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.