React集成Spreadshop店铺失败，求错误排查及正确集成方案

Hey there, let's break down why your Spreadshop integration isn't working in React and fix it step by step!

The Core Issues in Your Current Code #

Your setup has two critical problems keeping the shop from loading:

1. spread_shop_config isn't in the global window scope: Spreadshop's script expects this configuration to exist on the window object (global scope) when it runs. Right now, you're just declaring it as a local variable inside your component— the script can't see it.
2. Script loading vs. config timing: Even if the config was global, your useScript hook might load the script before the config is set up, leaving the script with no data to initialize the shop.

Fixed Implementation #

Let's rewrite your component to handle the config and script loading correctly, with full control over timing:

import React, { useEffect, useState } from 'react';

function Shop() {
  const [isShopLoaded, setIsShopLoaded] = useState(false);
  const [loadError, setLoadError] = useState(false);

  useEffect(() => {
    // Step 1: First, attach the config to the global window object
    window.spread_shop_config = {
      shopName: 'awesome-merch-shop',
      locale: 'US',
      prefix: 'https://shop.spreadshirt.com',
      baseId: 'shop'
    };

    // Step 2: Create and load the Spreadshop script manually
    const shopScript = document.createElement('script');
    shopScript.src = 'https://shop.spreadshirt.no/shopfiles/shopclient/shopclient.nocache.js';
    shopScript.async = true;

    // Handle successful script load
    shopScript.onload = () => {
      setIsShopLoaded(true);
      setLoadError(false);
    };

    // Handle script load failures
    shopScript.onerror = () => {
      setIsShopLoaded(false);
      setLoadError(true);
      console.error('Failed to load Spreadshop shop script');
    };

    // Add the script to the DOM
    document.body.appendChild(shopScript);

    // Cleanup: Remove the script and clear config when component unmounts
    return () => {
      document.body.removeChild(shopScript);
      delete window.spread_shop_config;
    };
  }, []); // Empty dependency array ensures this runs only once on mount

  return (
    <div className="shopBody">
      {loadError && <p>Oops, we couldn't load the shop. Please try again later!</p>}
      {isShopLoaded ? (
        <div id="shop" />
      ) : (
        <div id="shop">
          <div>
            <i id="spinner" className="fa fa-spinner" aria-hidden="true"/>
            <p>Loading The Shop...</p>
          </div>
        </div>
      )}
    </div>
  );
}

export default Shop;

Why This Works #

• Global config first: We explicitly set window.spread_shop_config before loading the script, so when the script runs, it can immediately find the configuration it needs.
• Controlled script loading: Creating the script element manually lets us guarantee the config exists before the script starts executing, avoiding race conditions that might happen with generic useScript hooks.
• Cleanup logic: The useEffect cleanup removes the script and clears the global config when the component unmounts, preventing memory leaks or leftover global state.

Extra Troubleshooting Tips #

• Double-check your config values: Make sure shopName, prefix, and locale match exactly what's specified in your Spreadshop dashboard. Mismatched values (like a wrong shop name) will break the integration.
• Check browser dev tools: If the shop still won't load, open your browser's console—you'll likely see errors pointing to missing config, CORS issues, or invalid parameters.
• Verify the script URL: Ensure the script's domain matches your shop's region (e.g., .no for Norway, .com for US) to avoid cross-origin loading problems.

内容的提问来源于stack exchange，提问作者JanTorvald