הטמעת חזית ללא ראש עם Shopify's Storefront API

בניית חנות Shopify ללא ראש (Headless) עם Storefront API

תבניות Shopify הסטנדרטיות מטילות מגבלות על ביצועים והתאמה אישית: תבניות כתובות URL קבועות (רק /products/product-handle), לא ניתן להתאים אישית את תהליך התשלום ללא תוכנית Plus, ואנימציות מורכבות הופכות לסיוט ב-Liquid. כתוצאה מכך, דפים נטענים באיטיות—TTFB יכול להגיע ל-800 אלפיות השנייה, ו-LCP מגיע ל-4–6 שניות במובייל. כאשר לקוח דורש ממשק לא סטנדרטי (דפים מותאמים אישית, סינון מתקדם, PWA, תמיכה בריבוי שפות), אנו מאמצים גישת headless: Shopify משמשת כמערכת מסחר ללא ראש (headless commerce backend) והחזית נבנית עם Next.js, Nuxt או Astro. בחודשים האחרונים סיפקנו יותר מתריסר פרויקטים כאלה—מחנויות מותאמות אישית ועד יישומי PWA המשולבים עם חיפוש והמלצות מותאמות אישית.

מדריך זה מסביר כיצד מסחר headless פועל עם Shopify Storefront API: מאימות ועד סל קניות ו-ISR. תקבלו דוגמאות קוד קונקרטיות והחלטות ארכיטקטוניות לפרויקט שלכם. אנו שותף מוסמך של Shopify עם ניסיון של 5+ שנים ב-headless ו-10+ פרויקטים שהושלמו.

בעיות ש-Headless פותר

מגבלות התבנית הסטנדרטית:

• ארכיטקטורת URL נוקשה—אין תבניות slug מותאמות אישית.
• לא ניתן לשנות את תהליך התשלום ללא מנוי Plus.
• אנימציות מורכבות דורשות פתרונות עוקפים ב-Liquid.
• זמני טעינה גרועים: TTFB ו-LCP גבוהים.

Headless מתגבר על אלה על ידי הפרדת החזית ממערכת התבניות של Shopify. אתם מקבלים שליטה מלאה בעיצוב, רינדור מהיר יותר, ויכולת להשתמש בכל framework. אף אחת מהמגבלות הנ"ל לא נמשכת.

השוואה: תבנית סטנדרטית מול Headless

כיצד פועל האימות?

האימות פשוט:

1. באדמין של Shopify, עבור אל Apps → Develop apps וצור אפליקציה עם ההרשאות הנדרשות (לדוגמה, /brand/product-name, X-Shopify-Storefront-Access-Token).
2. קבל אסימון גישה ציבורי. אסימון זה בטוח לשימוש בקוד בצד הלקוח.
3. כלול את האסימון בכל בקשה ל-GraphQL דרך כותרת // lib/shopify/client.ts const SHOPIFY_DOMAIN = process.env.SHOPIFY_STORE_DOMAIN!; const STOREFRONT_TOKEN = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN!; export async function storefrontFetch<T>({ query, variables, cache = 'force-cache', tags, }: { query: string; variables?: Record<string, unknown>; cache?: RequestCache; tags?: string[]; }): Promise<T> { const res = await fetch( `https://${SHOPIFY_DOMAIN}/api/graphql.json`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Shopify-Storefront-Access-Token': STOREFRONT_TOKEN, }, body: JSON.stringify({ query, variables }), cache, next: tags ? { tags } : undefined, } ); if (!res.ok) throw new Error(`Storefront API error: ${res.status}`); const { data, errors } = await res.json(); if (errors?.length) throw new Error(errors[0].message); return data; } .

דוגמת בקשה:

// lib/shopify/client.ts
const SHOPIFY_DOMAIN = process.env.SHOPIFY_STORE_DOMAIN!;
const STOREFRONT_TOKEN = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN!;

export async function storefrontFetch<T>({
  query,
  variables,
  cache = 'force-cache',
  tags,
}: {
  query: string;
  variables?: Record<string, unknown>;
  cache?: RequestCache;
  tags?: string[];
}): Promise<T> {
  const res = await fetch(
    `https://${SHOPIFY_DOMAIN}/api/graphql.json`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': STOREFRONT_TOKEN,
      },
      body: JSON.stringify({ query, variables }),
      cache,
      next: tags ? { tags } : undefined,
    }
  );

  if (!res.ok) throw new Error(`Storefront API error: ${res.status}`);

  const { data, errors } = await res.json();
  if (errors?.length) throw new Error(errors[0].message);

  return data;
}

אילו נתונים זמינים דרך ה-API?

Storefront API חושף:

• מוצרים, וריאנטים, מחירים, metafields, אוספים, מאמרי בלוג, סל קניות והזמנות (לקריאה בלבד).
• השתמש ב-GraphQL כדי לבקש רק את השדות הדרושים לך, ולהימנע מהורדת נתונים מיותרים.
• אף אחת מהמגבלות של REST הישן לא חלה; ניתן לאחזר נתונים מקוננים בשאילתה אחת.

מעבר ל-Headless (מה כלול)

חבילת המעבר ל-headless שלנו כוללת:

• תיעוד מלא של הארכיטקטורה החדשה
• הגדרת אישורים ואסימוני גישה
• הדרכה לצוות שלך (שעה)
• 30 ימי תמיכה לאחר ההשקה
• הגדרת צינור CI/CD

מעבר חנות קיימת כולל:

• העתקת התבנית (אם יש צורך לעיון).
• הגדרת CI/CD.
• התאמת אנימציות ואלמנטים אינטראקטיביים.
• הגדרת ISR ו-webhooks לעדכוני תוכן בזמן אמת.

ציר זמן אופייני ל-MVP: 2–4 שבועות. שום ערך SEO מקורי לא הולך לאיבוד אם מטפלים בהפניות נכון. אנו מבטיחים מעבר חלק עם זמן השבתה מינימלי.

יתרונות על פני תבניות סטנדרטיות

• חופש: מבני URL מותאמים אישית, כל פריסת דף, סינון מתקדם, PWA, תמיכה בריבוי שפות ללא פריצות.
• ביצועים: טעינת דפים מהירה יותר דרך SSR או ISR, שיפור Core Web Vitals (ראינו שיפורי LCP של 40%).
• מדרגיות: הקצה האחורי והחזית יכולים להתרחב באופן עצמאי.

אף אחת מהמגבלות האופייניות של Shopify (לדוגמה, התאמה מוגבלת של תהליך התשלום) לא חלה. בנוסף, ניתן לשלב כל שירות צד שלישי בקלות.

דוגמת קוד: אחזור מוצרים עם Next.js ISR

// lib/shopify/queries/products.ts
const GET_PRODUCTS = `
  query getProducts($first: Int!, $after: String, $sortKey: ProductSortKeys, $reverse: Boolean, $query: String) {
    products(first: $first, after: $after, sortKey: $sortKey, reverse: $reverse, query: $query) {
      edges {
        cursor
        node {
          id
          handle
          title
          availableForSale
          priceRange {
            minVariantPrice {
              amount
              currencyCode
            }
            maxVariantPrice {
              amount
              currencyCode
            }
          }
          featuredImage {
            url
            altText
            width
            height
          }
          variants(first: 1) {
            edges {
              node {
                id
                availableForSale
                selectedOptions {
                  name
                  value
                }
              }
            }
          }
          metafield(namespace: "custom", key: "badge") {
            value
          }
        }
      }
      pageInfo {
        hasNextPage
        endCursor
      }
    }
  }
`;

export async function getProducts({
  first = 24,
  after,
  sortKey = 'RELEVANCE',
  reverse = false,
  query,
}: ProductsQueryParams) {
  const data = await storefrontFetch<{ products: ProductConnection }>({
    query: GET_PRODUCTS,
    variables: { first, after, sortKey, reverse, query },
    tags: ['products'],
  });
  return data.products;
}

סיכום

שילוב Shopify Storefront API עם חזית מותאמת אישית מספק שליטה מלאה בעיצוב, ביצועים מעולים וגמישות. אף אחת ממגבלות התבנית הסטנדרטית לא נשארת. על ידי שימוש ב-ISR, מקבלים דפים מהירים עם תוכן עדכני. ארכיטקטורה זו אידיאלית לחנויות הדורשות חוויות משתמש ייחודיות. עם רקורד מוכח (5+ שנים, 10+ פרויקטים), אנו בטוחים ביכולתנו לספק פתרונות headless באיכות גבוהה.