كيف انقر هنا Labs Unlocked Composable Commerce with Atlas

تعمل WP Engine حاليًا على تسهيل أكبر مجتمع تعاوني لوكالات WordPress من خلال برنامج شركاء الوكالة.

في هذه الجلسة عند الطلب من DE {CODE} 2023 ، ستتعرف على كيفية استخدام WP Engine Agency Partner Click Here Labs لمخطط Atlas BigCommerce الجديد لإعادة تخيل متجر Combat Corner عبر الإنترنت. ستحصل أيضًا على عرض توضيحي لـ BigCommerce Blueprint حتى تتمكن من إنشاء موقع التجارة الإلكترونية Atlas الخاص بك في أقل من 10 دقائق!

مكبرات الصوت:

• جوناثان جيتر ، مدير الإنتاج الفني في Click Here Labs
• بريان سميث ، مدير المنتج الرئيسي في WP Engine

شرائح الجلسة:

نص:

برايان سميث: مرحبًا بكم جميعًا. اسمي بريان سميث ، مدير المنتج الرئيسي هنا في WP Engine. اليوم ، سنتحدث عن كيفية فتح Click Here Labs التجارة القابلة للتكوين باستخدام Atlas.

ينضم إليّ اليوم جوناثان جيتر ، مدير الإنتاج التقني في Click Here Labs. يرأس الفريق هناك. إنهم شركاء وكالة WP Engine ، وقد عملنا معهم عن كثب على مدار الأشهر القليلة الماضية لجلب أول عميل تجاري لدينا بدون رأس أو قابل للتكوين إلى Atlas.

سوف نتعمق أكثر في دراسة الحالة هذه في دقيقة واحدة فقط ، ولكن قبل أن نفعل ذلك ، أود أن أتحدث قليلاً عن حالة السوق مع التطوير القابل للتكوين. قابلة للتركيب وبدون رأس - نحن نستخدمها بالتبادل هنا. غالبًا ما يشير مصطلح مقطوعة الرأس إلى إمكانية التركيب.

وليس فقط لأن هذه المواقع عالية الأداء لدرجة أن الطلب عليها آخذ في الازدياد. إنها قابلة للتخصيص بشكل كبير ، ويمكنها التكيف بسرعة مع المشهد التكنولوجي المتغير ، فضلاً عن بيئة الأعمال المتغيرة باستمرار ، حيث قد تتغير نتائج عملك بشكل متكرر. يقدمون تجارب ديناميكية بسرعة ثابتة ، والتي سنغطيها لاحقًا اليوم.

ويمكنك أيضًا توسيع نطاقها دون الحاجة إلى إعادة النظام الأساسي. في دراسة الحالة التي سنقدمها اليوم ، كان عميل Click Here Labs قادرًا في الواقع على البقاء على BigCommerce ، الواجهة الخلفية للتجارة الإلكترونية ، ودمج WordPress باعتباره CMS ، وإحضار كل ذلك إلى واجهة متجر بلا رأس. لكن كل هذه التكنولوجيا الجديدة غالبًا ما تكون باهظة التكلفة ، وهذا هو السبب في أننا أمضينا السنوات القليلة الماضية في معالجة أكثر نقاط الضعف خطورة في التطوير باستخدام أطلس لمواقع البناء بهذه الطريقة.

وأطلس بالطبع أكثر من مجرد مضيف. إنه أكثر من مجرد إطار أمامي. يحتوي على طبقة API ، والمكوِّن الإضافي للحقول المخصصة ، وتطبيق التطوير المحلي ، وكل هذه الأشياء التي تحتاجها للبدء. ولكن ربما الأهم من ذلك ، أن لديها مجتمع التعلم والدعم.

مع وجود كل هذه الأدوات في متناول يدك ، لن نخطئ في أنك تعاني من القليل من الإرهاق في اتخاذ القرار. قد يكون من الصعب البدء حتى عندما يكون لديك العديد من الخيارات في متناول يدك وهنا يأتي دور المخططات.

لذلك قمنا بتطوير المخططات وتمكنك من إنشاء موقع بداية مع جميع المكونات الإضافية للكود ونماذج المحتوى والهيكل المدفوع الذي تحتاجه. يمكنك الحصول عليها وتشغيلها في أقل من 10 دقائق. يمكنك حقًا تبسيط هذه العملية لبدء مشروع جديد.

وإلى جانب ذلك ، فإنه يساعدك أيضًا على تعلم النظام الأساسي وأفضل ممارساتنا أيضًا. لذا فهو يجعلك جاهزًا لهذا المشروع التالي ، ولكن حتى الآن ، اقتصرت المخططات التي لدينا على المزيد من حالات استخدام الموقع من النوع الثابت ، مثل المحفظة ، أو مواقع من نوع المدونة - لا شيء ديناميكي هو واجهة متجر بلا رأس.

ولهذا السبب قمنا بإنشاء مخطط BigCommerce. إذن هذا المخطط الذي سنعرضه لك هنا في دقيقة واحدة فقط - يأتي مُهيأ مسبقًا باستخدام WPGraphQL ، و Atlas Content Modeler ، وإطار عمل Faust JS ، واثنين من الأشياء الجديدة أيضًا - وهو مكون إضافي لحظر التجارة في Atlas ، مما يتيح لك لإحضار بيانات المنتج إلى محرر WordPress ، ثم أيضًا موصل التجارة ، الذي يوصلك إلى BigCommerce API ، مما يتيح لك مزامنة البيانات من BigCommerce إلى WordPress ، واحتفظ بها متزامنة.

يمكنك إنشاء نماذج محتوى منها ويمكنك أيضًا تشغيل المكون الإضافي لهذا الحظر. مع ذلك ، لماذا لا أريكم فعلاً كيف يعمل هذا وسنقفز في عرض توضيحي ...

حسنًا ، نحن هنا في بوابة WP Engine على صفحة Atlas. لذلك عندما تنشئ تطبيق Atlas جديدًا ، يمكنك البدء من المخطط وهنا سيكون لديك خياران. ما سنفعله هنا هو اختيار مخطط BigCommerce هناك على اليمين.

ومن هنا يمكنك أيضًا معاينة واجهة المتجر أو عرض الكود في GitHub. سنحدد هذا المخطط ونضغط على متابعة. لذا فإن الخطوة التالية هي الاتصال بحساب GitHub الخاص بك.

ثم ما سنفعله هو أننا سننسخ المستودع الخاص بنا إلى مستودعاتنا. لذلك حددت حساب GitHub الخاص بك ، واسم المستودع ، ثم سنضغط على Create App.

لذلك تحدث بعض الأشياء خلال هذه العملية. أولاً ، نقوم بتوفير موقع WordPress. نقوم ببناء كود Atlas لتطبيق Atlas. وبعد ذلك يتم نشرها. وعادة ما تستغرق هذه العملية حوالي خمس دقائق ، لكننا قمنا بتسريعها هنا.

بمجرد إنشاء موقع WordPress ، يمكننا الانتقال إلى موصل BigCommerce ، والذي ستراه على الشاشة هنا. شاشة التكوين - سندخل بيانات الاعتماد ومن ثم يمكننا بدء مزامنة المنتج.

ولقد تم توصيل هذا بحساب Atlas sandbox بالإضافة إلى حساب BigCommerce sandbox. ويمكنني استيراد المنتجات التي أمتلكها في حساب BigCommerce هذا. لقد حصلت للتو على حوالي 13 منتجًا تجريبيًا.

أريد أن أشير هنا إلى أنه بعد هذه المزامنة الأولية ، لا يتعين عليك تشغيلها مرة أخرى لالتقاط التحديثات. يدعم البرنامج المساعد webhooks بالإضافة إلى وظيفة cron الليلية. وبعد الانتهاء من استيراد هذه المنتجات ، ستقوم بمزامنة الصور أيضًا.

وبعد ذلك سنذهب ونلقي نظرة على المنتجات. حسنًا ، تم تحميل منتجاتنا. يمكنك رؤيتها هنا على صفحة المنتجات. هذه هي المنتجات التجريبية من موقع BigCommerce.

سنذهب إلى صفحة التفاصيل لواحد من هؤلاء وكل ما أعرضه هنا هو فقط جميع حقول البيانات التي جلبناها - العنوان والصور والأوصاف. كل شيء هناك.

حتى الآن ، يوجد في WordPress. تمت مزامنته من أجلك. تقوم بإجراء تغيير على موقع BigCommerce ، يتم تحديثه على الفور.

الآن ، أريد أن أريكم نماذج المحتوى التي أنشأناها باستخدام Atlas Content Modeler. هذا مجرد مثال. وأعتقد أن ضع ذلك في الاعتبار مع هؤلاء. إنها حقًا نقطة انطلاق لك فقط لتظهر لك كيف قمنا بذلك.

تعمل نماذج المحتوى هذه على تشغيل صفحة تفاصيل منتجاتنا على واجهة المتجر بدون رأس ، والتي سنلقي نظرة عليها هنا خلال دقيقة واحدة فقط. مجرد مثال على مدى مرونة نمذجة المحتوى مع Atlas Content Modeler. حسنًا ، بعد ذلك ، سأريكم المكوِّن الإضافي لكتل ​​التجارة الذي تحدثنا عنه سابقًا.

سننتقل إلى الصفحة الرئيسية في محرر القوالب في WordPress. وهنا ترى هذا المتجر قسم أحدث المنتجات. هذه هي الكتل التجارية.

لذا ما يمكنك القيام به هو أنه يمكنك اختيار نوع الكتلة ، وأحدث المنتجات ، والمنتجات المشهورة ، وعدد العرض الذي تريد إظهاره. نحن نعرض أربعة هناك. كل هذا يأتي من جانب BigCommerce. إليك مثالًا آخر أسفل الصفحة - بيع العناصر ، كبديل لكيفية استخدامها.

حتى الآن ، رأينا نماذج المحتوى والمكوِّن الإضافي للكتل. إليك كل ما تم تثبيته على موقع WordPress. إنها كل تلك المكونات الإضافية التي ذكرناها سابقًا.

نعم. نحن هنا في واجهة المحل. هذه واجهة متجر بلا رأس ، ويمكنك رؤيتها في عنوان URL. يمكنك رؤية كتل منتجاتنا على الصفحة.

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

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

وسترى أن العربة في الواقع مقطوعة الرأس أيضًا. كل هذا في الواجهة الأمامية لـ Atlas. الآن ، من أجل الخروج ، نقوم بإعادة التوجيه إلى BigCommerce. لأغراض هذا المخطط ، شعرنا أن ذلك كان منطقيًا للغاية ، لكن كل شيء آخر موجود في الواجهة الأمامية لـ Atlas مقطوعة الرأس.

ها نحن نعود إلى واجهة المحل. إليك صفحة "حول" - مجرد مثال لما يمكنك القيام به من خلال تخطيط أقسام الصفحة المختلفة هذه. لذا يمكنك أخذها واستخدامها والتعلم منها. هذا حقًا القصد هنا هو أن تبدأ بسرعة.

حسنًا ، هذا كل شيء وبهذا ، سأقوم بتمريره إلى جوناثان للتعمق أكثر حول كيفية أخذ Click Here Labs هذا المخطط وتمديده لحالة استخدام العميل الحقيقية. إليكم يا جوناثان.

جوناثان جيتر: شكرًا بريان. قبل أن نتحدث عن تمديد المخطط ، أردت أولاً مناقشة القليل حول التخطيط للحل. قبل أن نبدأ في حل تجاري قابل للإنشاء مرن للغاية ، نريد التأكد من أننا قد خططنا له بشكل صحيح للتأكد من أننا نستخدم القطع المناسبة.

ونبدأ دائمًا بوثائق API والمتطلبات الوظيفية. لذلك في هذه الحالة ، بالنسبة لـ BigCommerce ، راجعنا وثائق API الخاصة بهم للتأكد من أن جميع الميزات التي يحتاجها العميل في متجره كانت متاحة عبر واجهة برمجة التطبيقات. وتلك التي لم تكن كذلك ، احتجنا إلى التخطيط لكيفية تلبية تلك الاحتياجات ، وتلبية تلك المتطلبات.

لذلك كجزء من هذه الخطة ، تحتاج إلى تحديد المكان الذي سيتم فيه تلبية كل مطلب ، أليس كذلك؟ هل من خلال BigCommerce الأصلي؟ هل هو من خلال WordPress؟ هل هو من خلال تطبيق الواجهة الأمامية الذي تقوم ببنائه أم من خلال تطبيقات الطرف الثالث؟

في هذه الحالة ، كان علينا اتخاذ بعض القرارات ولأن النظام الأساسي مرن للغاية ، كان الهدف الرئيسي هنا هو تسريع الموقع ، للحصول ، كما قلنا من قبل ، على سرعة ثابتة في تطبيق الواجهة الأمامية. لذلك أردنا التأكد من أن جميع أجزاء الموقع ، وجميع المكونات الموجودة في الموقع التي كانت Google ستراها موجودة في تطبيق الواجهة الأمامية بدون رأس.

ثم كان علينا أن نلقي نظرة ، على سبيل المثال - تحدث بريان عن العربة ، وتحدث عن قسم الحساب. تحدث عن تلك الأشياء المختلفة. أي من هذه القطع سنقوم به في الأنظمة المختلفة؟ على سبيل المثال ، قررنا في هذه الحالة بالنسبة للعربة ، للخروج ، لحساب العميل القيام بذلك داخل التطبيق الأصلي.

ثم محتوى الموقع - أردنا التأكد من إمكانية تصنيف ذلك بشكل صحيح ، بحيث يشعر العميل بالراحة في إضافة هذا المحتوى من خلال واجهة WordPress القياسية. قمنا أيضًا بتجميع بعض البيانات داخل WordPress حتى نتمكن من تقديمها في الواجهة الأمامية بطريقة مختلفة. قد تكون هذه أشياء ربما لم تكن متوفرة في BigCommerce نفسها ومن ثم كان علينا أن نأخذ في الاعتبار تطبيقات الطرف الثالث.

أين كانت البيانات تأتي أو تذهب من أجل CRM الخاص بهم ، للتتبع ، لهذه الأنواع من الأشياء ، ثم أخيرًا ، تحتاج إلى التخطيط - ما هي المكونات التي ستقوم ببنائها في تلك الواجهة الأمامية وأين سيتم سحبها البيانات من؟

لذا تعني المرونة المطلقة أن لديك الكثير من القرارات التي يتعين عليك اتخاذها وتذكر أنك تقوم بشكل أساسي ببناء تطبيق للتجارة الإلكترونية باستخدام جميع الأدوات المتوفرة في Atlas ، وفي هذه الحالة BigCommerce ، لتتمكن من إنشاء هذا المتجر. لذلك أردت فقط أن أوضح أنه من المهم جدًا وضع تلك الخطة ، لفهم ما ستدخل فيه.

وقم بإجراء تلك المناقشات مع العميل أيضًا وقل ، هذا ما نبنيه. هذا ما سيبقى في التطبيق الأصلي. هذا ما سيكون في الواجهة الأمامية.

تلك القطع المحمية بكلمة مرور - على سبيل المثال ، حسابي ، محفوظات الفواتير ، هذه الأنواع من الأشياء - مرة أخرى هذه ، هي أشياء لن تتم فهرستها. لذلك من الأقل أهمية أن يكون هؤلاء في تطبيق الواجهة الأمامية. وبمجرد أن تكتشف ذلك ، ونقوم بإعداد المخطط ، فأنت الآن جاهز للعمل.

الآن نتحدث عن تمديد المخطط ، أليس كذلك؟ إذن ما الذي ينطوي عليه ذلك؟ سنرى هنا أن تطبيق الواجهة الأمامية قد بدأ. والآن ، تحتاج إلى بناء كل تلك القطع الإضافية التي ستجعل المتجر فريدًا ، والتي ستجعله يقوم بما يحتاج إليه عميلك.

على سبيل المثال ، في BigCommerce ، هناك بعض الوظائف الأصلية المتوفرة في واجهة برمجة التطبيقات ، مثل المنتجات المصاحبة ومجموعات العملاء وتلك الأنواع من الأشياء. وبالتالي لا يزال العميل يستخدم BigCommerce الأصلي لإدارة تلك المنتجات المصاحبة ، وإدارة مجموعات العملاء المختلفة ، وإدارة وقت بيع الأشياء ، ورموز الخصم ، وتلك الأنواع من الأشياء.

نحن نأخذ هذه البيانات ونقدمها في الواجهة الأمامية. لدينا أيضًا تطبيقات طرف ثالث - تم تثبيت المكونات الإضافية في BigCommerce ، أليس كذلك؟ هناك أداة تخصيص المنتج.

ثم البيانات من مواقع مختلفة - تلك التي يجب أخذها في الاعتبار. ويمكن بعد ذلك بناء هذه المكونات ، على سبيل المثال ، على صفحة تفاصيل المنتج ، أليس كذلك؟ إذا كان هناك منتج به تخصيص - حتى تتمكن من تغيير الألوان.

يمكنك إضافة الشعارات. يمكنك فعل هذه الأنواع من الأشياء ، أليس كذلك؟ يسمح لك هذا المُخصص بالقيام بذلك. إذن فهذه قطع مختلفة تم بناؤها على وظائف الطرف الثالث.

ثم أخيرًا ، هناك وظائف تم إنشاؤها مباشرةً في الواجهة الأمامية. على سبيل المثال ، مصفوفة مقارنة المنتج - لذلك رأينا جميعًا هذا في مواقع مختلفة. قارن بين ثلاثة منتجات مختلفة ، واطلع على السمات المختلفة ، وكيفية مقارنتها ، والقدرة على تجميع المنتجات في عملية بيع ، وخصم للحزمة. ثم هناك أشياء ، على سبيل المثال ، متوفرة في BigCommerce الأصلي ، ولكن لسبب ما ، لا تقوم واجهة برمجة التطبيقات بالوظيفة.

وبالتالي فإن أداة تحميل الملفات هي مثال على شيء كان علينا إنشاءه بشكل أساسي داخل الواجهة الأمامية باستخدام وظائف مختلفة في النهاية الخلفية. إذن هذه كل الأشياء التي تبنيها لتوسيع هذا المخطط وسيتم تضمين بعض منها في المخطط الموسع ، أو المخطط المتميز الذي أعتقد أن برايان سيتحدث عنه هنا قريبًا جدًا.

برايان سميث: شكرًا جوناثان. الآن سأقوم بتغطية خارطة طريق أطلس بسرعة حقيقية. لقد قسمنا هذا إلى أعمدة الآن والتالي ولاحقًا.

ضمن العمود الآن ، سترى بخط عريض مبادرات أطلس الخاصة بالتجارة الإلكترونية. أسفل هناك على الجانب الأيسر ، مخطط BigCommerce - هذا مباشر ومتاح لأي شخص ليقوم بتجربته الآن. نحن نعمل أيضًا على واجهة برمجة تطبيقات لواجهة المتجر.

هذه طبقة بيانات ستجمع المحتوى من WordPress أو BigCommerce أو أي مصادر خارجية أخرى تهتم بها. لذا إليك طريقة لدمجهم جميعًا. نحن نعمل على الإصدار التجريبي الآن ، لذا ترقبوا المزيد من التفاصيل لأن ذلك يتطور.

بعد ذلك ، سنعمل على مخطط Shopify. هذا تكامل مشابه لما فعلناه مع BigCommerce ، ولكن في هذه الحالة ، سيكون مع Shopify. وبعد ذلك ، بينما ننتقل إلى ما بعد ذلك ، سنوجه تركيزنا إلى التخصيص والتوطين بدون رأس. نحن نعلم أن هذه الأشياء مهمة حقًا لواجهات المتاجر الديناميكية. وهو شيء نريد التأكد من تكامله بإحكام مع منصة التجارة Atlas.

لذلك إذا كنت مستعدًا للبدء في BigCommerce blueprint ، يمكنك فتح حساب Atlas sandbox مجاني اليوم لتجربته. إذا كان لديك بالفعل حساب Atlas ، فإن المخطط ، بالطبع ، متاح لك أيضًا. اذهب وجربها اليوم.

جربه في مشروعك القادم. اسمحوا لنا أن نعرف ما هو رأيك. شكرا لكم جميعا. نحن حقا نقدر وقتك اليوم. أتمنى لك يوماً عظيماً.