MAISON CODE .
/ Shopify Plus · Checkout · Rust · WebAssembly · Architecture

قابلية التوسعة في الخروج: نهاية checkout.liquid

لقد قتل Shopify checkout.liquid. يتم تشغيل العصر الجديد بواسطة ملحقات واجهة المستخدم Rust وWebAssembly وSandboxed. دليل الترقية التقنية.

AB
Alex B.
قابلية التوسعة في الخروج: نهاية checkout.liquid

لمدة عقد من الزمن، كان “checkout.liquid” هو الأداة الفعالة المثالية لمطوري Shopify Plus. لقد منحنا وصول HTML/JS الخام إلى الخروج. لقد أساءنا ذلك. لقد انخرطنا في “DOM Scraping” لإخفاء أسعار الشحن. استخدمنا حلقات setInterval لاختراق الهدايا المجانية. لقد قمنا بحقن 50 بكسل تتبع مختلفًا مما أدى إلى إبطاء تحميل الصفحة إلى 8 ثوانٍ. لقد كانت مرنة، لكنها كانت هشة وغير آمنة.

Shopify وقد إهماله. البديل هو إمكانية توسيع الخروج. هذه ليست مجرد ترقية؛ إنه نقلة نوعية. نحن ننتقل من “الاختراقات من جانب العميل” إلى “الوظائف من جانب الخادم”. نحن ننتقل من “jQuery” إلى “Rust & React”.

في Maison Code Paris، قمنا بنقل أكثر من 50 تاجرًا إلى القابلية للتوسعة. هنا الدليل الهندسي.

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

1. الهندسة المعمارية: قوة وضع الحماية

لماذا فعلت Shopify هذا؟

  1. الأمان: يمكن للنصوص البرمجية الموجودة في checkout.liquid سرقة أرقام بطاقات الائتمان من الناحية الفنية. الامتدادات في وضع الحماية.
  2. الأداء: تعمل الامتدادات في Web Worker أو على الخادم (WASM). يبقى الخيط الرئيسي حرا.
  3. ترقية الأمان: نظرًا لأنه لا يمكنك لمس DOM، يمكن لـ Shopify إعادة تصميم الخروج بالكامل (على سبيل المثال، One Page Checkout) وستعمل الإضافة الخاصة بك فقط.

هناك مكونان رئيسيان:

  • ملحقات واجهة المستخدم: عرض وحدات البكسل على الشاشة (يشبه رد الفعل).
  • الوظائف: منطق الأعمال على الخادم (Rust/WASM).

2. مكونات واجهة المستخدم: نموذج “العرض عن بعد”.

أنت تكتب تعليمات برمجية تبدو مثل React، ولكنها لا تُعرض إلى DOM مباشرة. يرسل شجرة JSON إلى Shopify، والتي تعرض المكونات الأصلية. ولهذا السبب لا يمكنك استخدام <div> أو classname. يجب عليك استخدام أساسيات Shopify.

// ملحقات/gift-message/Checkout.jsx
استيراد {
  تمديد,
  حقل نص,
  بلوكستاك,
  النص،
  useApplyAttributeChange
} من '@shopify/ui-extensions-react/checkout';

تصدير رد الفعل الافتراضي('purchase.checkout.block.render', () => <GiftMessage />);

وظيفة GiftMessage () {
  const ApplyChange = useApplyAttributeChange();

  مؤشر الإدخال الثابت = (القيمة) => {
    تطبيق التغيير({
      النوع: "سمة التحديث"،
      المفتاح: "_gift_note"،
      القيمة: القيمة
    });
  };

  العودة (
    <BlockStack تباعد = "ضيق">
      <Text size="medium"weight="bold">هل هذه هدية؟</Text>
      <TextField label="Gift Note" متعدد الأسطر onChange={handleInput} />
    </بلوك ستاك>
  );
}

قيد المفتاح: لا يمكنك الوصول إلى “نافذة” أو “مستند”. إذا كنت بحاجة إلى جلب البيانات، فيجب عليك استخدام الخطاف “useQuery” الذي يوفره وضع الحماية، أو إجراء مكالمات “جلب” إلى الوكيل الخاص بك.

3. وظائف Shopify: المنطق على الحافة (الصدأ)

هذا هو الجزء الأقوى. في السابق، لإجراء “خصومات متدرجة” (اشتر 5 واحصل على خصم 20%)، كنت تستخدم Shopify Scripts (Ruby). كانت البرامج النصية بها عربات التي تجرها الدواب، ويصعب اختبارها، ولها حدود صارمة لوحدة المعالجة المركزية. يتم تجميع وظائف Shopify إلى WebAssembly (Wasm). يتم تنفيذها في <5ms.

نكتبها بلغة Rust لأنها اللغة الأكثر أداءً بالنسبة لـ Wasm.

دراسة حالة: خصم الحجم

''''الصدأ // سرك/run.rs استخدم shopify_function::prelude::*; استخدم shopify_function::Result;

#[وظيفة_تسوق] fn run(input: input::ResponseData) -> النتيجةoutput::FunctionResult { دع تخفيضات mut = vec![];

للخط في input.cart.lines {
    دع الكمية = line.quantity؛
    
    // تعريف المنطق
    دع النسبة = إذا كانت الكمية >= 50 {
        25.0 // بالجملة
    } وإلا إذا كانت الكمية >= 10 {
        10.0 // السائبة
    } آخر {
        0.0
    };

    إذا كانت النسبة المئوية > 0.0 {
        خصومات.دفع(الخصم {
            القيمة: قيمة الخصم::النسبة المئوية(النسبة المئوية)،
            الرسالة: التنسيق!("خصم الحجم ({}%)"، النسبة المئوية)،
            الأهداف: vec![Target::ProductVariant(line.merchandise.id)]،
        });
    }
}

طيب (الإخراج::FunctionResult {
    خصومات,
    Discount_application_strategy: DiscountApplicationStrategy::الحد الأقصى،
})

}

يتم تحميل هذا الثنائي إلى Shopify. إنه يتدرج إلى ما لا نهاية.

## 4. التحقق من الصحة: منع الطلبات السيئة

في الأيام الخوالي، لمنع P.O. صندوق الشحن، استخدمنا التحقق من صحة JS.
قام المستخدمون الأذكياء (أو الروبوتات) بتعطيل JS وطلبوا ذلك على أي حال.
الآن، نستخدم **وظائف التحقق من سلة التسوق**.
يتم تشغيل هذا على الواجهة الخلفية *قبل* أن تتمكن من متابعة عملية الدفع.

```جرافقل
#استعلام الإدخال
إدخال الاستعلام {
  عربة التسوق {
    مجموعات التسليم {
      عنوان التسليم {
        العنوان1
        مدينة
        CountryCode
      }
    }
  }
}

إذا قامت وظيفة الصدأ بإرجاع خطأ، فسيتم تعطيل زر “الدفع الآن” ** على مستوى واجهة برمجة التطبيقات. من المستحيل تجاوزه.

5. بكسلات الويب: إصلاح التتبع

تكره فرق التسويق الهجرة لأننا “سنفقد تتبع GTM الخاص بنا!” في الواقع، تعمل القابلية للتوسعة على إصلاح التتبع. تشترك Web Pixels API في أحداث الدفع (checkout_Completed، Payment_info_subitter) في وضع حماية آمن. نظرًا لأنه يستخدم Browser Beacon API، فهو مقاوم بشكل مدهش لأدوات حظر الإعلانات. لقد لاحظنا زيادة 15% في التحويلات المتعقبة بعد الترحيل إلى Web Pixels.

// تحليلات.js
analytics.subscribe('checkout_Completed', (event) => {
  const Total = events.data.checkout.totalPrice.amount;
  // أرسل إلى GA4
  gtag('event', 'purchase', { القيمة: الإجمالي });
});

6. الخروج بلا رأس مقابل القابلية للتوسعة

لسنوات عديدة، كان “الخروج بلا رأس” هو الطريقة الوحيدة للحصول على التخصيص. لكنه كان خطيرا. لقد أصبحت مسؤولاً عن الامتثال لـ PCI. قابلية التوسعة في عملية الدفع تقضي على الحاجة إلى عملية الدفع بدون استخدام الجهاز. تحصل على 90% من المرونة (الحقول المخصصة وعمليات البيع والمنطق) مع 0% من الصيانة. ما لم تكن Nike أو Apple، فلن تحتاج إلى إصدار مخصص للدفع. يضمن الالتزام بالمنصة (Shopify) حصولك على تحديثات Apple Pay وPayPal وShop Pay على الفور.

7. الأسواق العالمية: الخروج المحلي

البيع في فرنسا مقابل الولايات المتحدة الأمريكية؟

  • الولايات المتحدة الأمريكية: تحتاج إلى القائمة المنسدلة “الولاية”.
  • فرنسا: تحتاج إلى معالجة “Cedex”.
  • اليابان: تحتاج إلى “محافظة”. مع القابلية للتوسعة، نستخدم Localization API. تعرض امتداداتنا مجالات مختلفة بناءً على “context.market”. يمكننا إظهار تعليمات “المغادرة عند الباب” للطلبات الأمريكية، ولكننا نخفيها للطلبات الألمانية (حيث قد يكون ذلك غير قانوني/غير شائع). هذا عرض ديناميكي على الحافة.

8. واجهة برمجة تطبيقات العلامة التجارية: لا مزيد من CSS

لم يعد بإمكانك تعديل “checkout.css” أو “checkout.scss”. يمكنك استخدام Branding API (GraphQL). أنت تحدد:

  • الألوان الأساسية.
  • نصف قطر الزاوية (مستدير مقابل مربع).
  • الخطوط (تحميل WOFF2).
  • تخطيطات الرأس/التذييل.

“وجهة نظر المتشككين”: “لكن لا يمكنني تحريك الزر بمقدار 5 بيكسل إلى اليسار!” نقطة مضادة: جيد. لا ينبغي لك. في كل مرة تقوم فيها باختراق التخطيط، فإنك تكسر إمكانية الوصول. لقد أنفق Shopify الملايين في اختبار التصميم الأمثل. ثق بالمنصة. ركز على المحتوى و المنطق، وليس الحشو.

7. ملحقات ما بعد الشراء: اللحظة الذهبية

الخروج لم ينته عندما يدفعون. صفحة الشكر هي أكثر العقارات تحويلاً في مجال التجارة الإلكترونية. معدل الفتح: 100%. تنبيه: 100%. باستخدام القابلية للتوسعة، يمكننا إدخال “البيع بنقرة واحدة” هنا. “لقد اشتريت الحذاء الرياضي. هل تريد المنظف مقابل 10 دولارات؟ (لا توجد تكلفة شحن).” نظرًا لأن لدينا “معرف_الطلب” و”رمز_الدفع”، يمكننا معالجة هذه المعاملة دون إعادة إدخال رمز CVV. هذه الميزة وحدها تدفع تكلفة الترحيل بالكامل خلال شهر واحد.

8. الاختبار: بيئة الحماية

في الأيام “السائلة” القديمة، كنا نختبر الإنتاج. مرعب. الآن، لدينا وضع الحماية للوحة تحكم الشريك. يمكنك محاكاة:

  • شبكة بطيئة (3G).
  • أخطاء API (فشل المخزون).
  • الأسواق المختلفة (الدولار الأمريكي مقابل اليورو). نكتب اختبارات الوحدة لوظائف الصدأ لدينا. يتم تشغيل “اختبار الشحن” خلال 10 مللي ثانية. لقد أثبتنا أن خيار “اشتر 5 واحصل على خصم 10%” يعمل حسابيًا قبل أن ننشره في متجر يعالج مليون دولار في اليوم.

9. الاستنتاج

التوسعة الخروج هو عامل تصفية. يقوم بتصفية “المتسللين” ويحتفظ بـ “المهندسين”. إنه يفرض عليك كتابة تعليمات برمجية نظيفة ومعيارية وقابلة للاختبار. والنتيجة هي تجربة دفع أسرع وأكثر أمانًا وجاهزة للسنوات العشر القادمة من التجارة الإلكترونية.

هل تشعر بالذعر بشأن الموعد النهائي؟

يقترب تاريخ إيقاف checkout.liquid.

احجز موعد تدقيق الهجرة. اقرأ عن تسعير B2B وClean Code.

يستغرق ترحيل متجر معقد من 4 إلى 8 أسابيع.

  1. التدقيق: قم بتصدير checkout.liquid وتعيين كل كتلة <script>.
    • إعلانات Google -> وحدات بكسل الويب.
    • منطق الشحن -> وظائف التسليم.
  • Upsell Slider -> ملحق واجهة المستخدم.
  1. تحديد الأولويات: “الأشياء الضرورية” مقابل “المخلفات القديمة”. عادةً ما تكون 30% من البرامج النصية عبارة عن تعليمات برمجية ميتة.
  2. التطوير: أنشئ الإضافات محليًا باستخدام shopify app dev.
  3. اختبار أ/ب: يمكنك نشر عملية الدفع الجديدة في حالة “مسودة” ومعاينتها.
  4. العرض المباشر: قم بتبديل العلامة في إعدادات الخروج.

8. الاستنتاج

التوسعة الخروج هو عامل تصفية. يقوم بتصفية “المتسللين” ويحتفظ بـ “المهندسين”. إنه يفرض عليك كتابة تعليمات برمجية نظيفة ومعيارية وقابلة للاختبار. والنتيجة هي تجربة دفع أسرع وأكثر أمانًا وجاهزة للسنوات العشر القادمة من التجارة الإلكترونية.

هل تشعر بالذعر بشأن الموعد النهائي؟

يقترب تاريخ إيقاف checkout.liquid.

احجز موعد تدقيق الهجرة. قم بتوظيف مهندسينا.