Bagaimana Klik Di Sini Labs Membuka Komersial yang Dapat Dikomposisi dengan Atlas

WP Engine saat ini memfasilitasi komunitas kolaboratif terbesar dari agensi WordPress melalui Program Mitra Agensi kami.

Dalam sesi sesuai permintaan dari DE{CODE} 2023 ini, Anda akan mempelajari cara WP Engine Agency Partner Click Here Labs menggunakan Cetak Biru Atlas BigCommerce baru untuk menata ulang toko online Combat Corner. Anda juga akan mendapatkan demo Cetak Biru BigCommerce sehingga Anda dapat membangun situs eCommerce Atlas Anda sendiri hanya dalam 10 menit!

Pembicara:

• Jonathan Jeter, Direktur Produksi Teknis di Click Here Labs
• Bryan Smith, Manajer Produk Utama di WP Engine

Slide Sesi:

Salinan:

BRYAN SMITH: Halo semuanya. Nama saya Bryan Smith, manajer produk utama di WP Engine. Hari ini, kita akan membahas tentang cara Click Here Labs membuka perdagangan yang dapat disusun dengan Atlas.

Bergabung dengan saya hari ini adalah Jonathan Jeter, direktur produksi teknis di Click Here Labs. Dia mengepalai tim di sana. Mereka adalah partner agensi WP Engine, dan partner yang telah bekerja sama sangat erat dengan kami selama beberapa bulan terakhir untuk menghadirkan pelanggan perdagangan headless atau composable pertama kami ke Atlas.

Kita akan membahas lebih lanjut tentang studi kasus tersebut sebentar lagi, tetapi sebelum kita melakukannya, saya ingin berbicara sedikit tentang keadaan pasar dengan pengembangan yang dapat disusun. Sangat dapat disusun dan tanpa kepala– kami menggunakannya secara bergantian di sini. Headless sering kali menyiratkan komposisi.

Dan itu bukan hanya karena situs-situs ini sangat berkinerja sehingga permintaan akan mereka meningkat. Mereka sangat dapat disesuaikan, dan mereka dapat dengan cepat beradaptasi dengan lanskap teknologi yang berubah, serta lingkungan bisnis yang selalu berubah, di mana hasil bisnis Anda mungkin sering berubah. Mereka memberikan pengalaman dinamis dengan kecepatan statis, yang akan kita bahas hari ini.

Dan Anda juga dapat menskalakannya tanpa harus melakukan platform ulang. Dalam studi kasus yang akan kami sajikan hari ini, klien Click Here Labs benar-benar dapat bertahan di BigCommerce, backend ecommerce mereka, mengintegrasikan WordPress sebagai CMS mereka, dan membawa semua itu ke etalase tanpa kepala. Tetapi semua teknologi baru ini seringkali dapat menjadi penghalang biaya, itulah sebabnya kami telah menghabiskan beberapa tahun terakhir untuk mengatasi masalah pengembangan yang paling parah dengan Atlas situs bangunan dengan cara ini.

Dan Atlas, tentu saja, lebih dari sekadar tuan rumah. Ini lebih dari kerangka ujung depan. Ini memiliki lapisan API, plugin bidang khusus, aplikasi pengembangan lokal, semua hal yang Anda perlukan untuk memulai. Tapi mungkin yang paling penting, ia memiliki komunitas belajar dan dukungan.

Namun, dengan semua alat ini di ujung jari Anda, kami tidak akan menyalahkan Anda karena sedikit kelelahan dalam mengambil keputusan. Mungkin sulit bahkan untuk memulai ketika Anda memiliki begitu banyak pilihan di ujung jari Anda dan di situlah cetak biru masuk.

Jadi kami telah mengembangkan cetak biru dan memungkinkan Anda menyiapkan situs pemula dengan semua plugin kode, model konten, struktur berbayar yang Anda butuhkan. Anda dapat mengaktifkan dan menjalankannya dalam waktu kurang dari 10 menit. Anda benar-benar dapat merampingkan proses memulai proyek baru.

Selain itu, ini juga membantu Anda mempelajari platform dan praktik terbaik kami. Jadi itu membuat Anda siap untuk proyek berikutnya, tetapi sampai sekarang, cetak biru yang kami miliki terbatas pada kasus penggunaan situs tipe statis, seperti portofolio, atau situs tipe blog– tidak ada yang dinamis dari etalase tanpa kepala.

Dan itulah mengapa kami membuat cetak biru BigCommerce. Jadi cetak biru ini yang akan kami demokan untuk Anda di sini hanya dalam satu menit– sudah dikonfigurasi sebelumnya dengan WPGraphQL, Atlas Content Modeler, kerangka kerja Faust JS, dan beberapa hal baru juga– plugin blok perdagangan Atlas, yang memungkinkan Anda untuk membawa data produk ke editor WordPress, dan kemudian juga konektor perdagangan, yang menghubungkan Anda ke BigCommerce API, memungkinkan Anda untuk menyinkronkan data dari BigCommerce ke WordPress, menjaga agar tetap sinkron.

Anda dapat membuat model konten dari mereka dan Anda juga dapat memberi daya pada plugin blok itu. Jadi dengan itu, mengapa saya tidak benar-benar menunjukkan cara kerjanya dan kami akan melompat ke demo…

Baiklah, jadi di sini kita berada di portal WP Engine di halaman Atlas. Jadi saat Anda membuat aplikasi Atlas baru, Anda dapat mulai dari cetak biru dan di sini Anda akan memiliki beberapa opsi. Apa yang akan kita lakukan di sini adalah memilih cetak biru BigCommerce di sebelah kanan.

Dan dari sini Anda juga dapat melihat etalase itu atau melihat kode di GitHub. Kami akan memilih cetak biru itu dan tekan Lanjutkan. Jadi langkah selanjutnya adalah menghubungkan ke akun GitHub Anda.

Dan kemudian yang akan kami lakukan adalah mengkloning repositori kami ke milik Anda. Jadi Anda memilih akun GitHub Anda, nama repositori dan kemudian kita akan menekan Create App.

Jadi beberapa hal terjadi selama proses ini. Pertama, kami menyediakan situs WordPress. Kami membuat kode Atlas untuk aplikasi Atlas. Dan kemudian dikerahkan. Dan proses itu biasanya memakan waktu sekitar lima menit, tetapi kami telah mempercepatnya di sini.

Setelah situs WordPress dibuat, kita dapat masuk ke konektor BigCommerce, yang akan Anda lihat di layar di sini. Layar konfigurasi– kami akan memasukkan kredensial dan kemudian kami dapat memulai sinkronisasi produk itu.

Dan saya menghubungkan ini ke akun kotak pasir Atlas serta akun kotak pasir BigCommerce. Dan saya dapat mengimpor produk yang saya miliki di akun BigCommerce itu. Saya baru saja mendapatkan sekitar 13 produk demo.

Saya memang ingin mencatat di sini bahwa setelah sinkronisasi awal ini, Anda sebenarnya tidak perlu menjalankannya lagi untuk mendapatkan pembaruan. Plugin ini mendukung webhook serta tugas cron malam. Dan setelah produk tersebut selesai diimpor, gambar juga akan disinkronkan.

Dan kemudian kita akan pergi dan melihat produknya. Baiklah, jadi produk kami sudah dimuat. Anda dapat melihatnya di sini di halaman Produk. Ini adalah produk demo dari situs BigCommerce.

Kita akan masuk ke halaman Detail dari salah satunya dan semua yang saya tampilkan di sini hanyalah semua bidang data yang telah kita bawa– judul, gambar, deskripsi. Semuanya ada di sana.

Jadi sekarang, itu ada di WordPress. Ini disinkronkan untuk Anda. Anda membuat perubahan di situs BigCommerce, itu segera diperbarui.

Sekarang, saya ingin menunjukkan kepada Anda model konten yang telah kami buat dengan Atlas Content Modeler. Ini hanya sebuah contoh. Dan saya kira ingatlah itu dengan ini. Ini benar-benar tempat awal bagi Anda hanya untuk menunjukkan kepada Anda bagaimana kami melakukannya.

Model konten ini mendukung halaman detail produk kami di etalase tanpa kepala, yang akan kita lihat di sini sebentar lagi. Hanya contoh betapa fleksibelnya pemodelan konten dengan Atlas Content Modeler. OK, selanjutnya, saya akan menunjukkan kepada Anda plugin blok Commerce yang telah kita bicarakan sebelumnya.

Kami akan masuk ke halaman Beranda di editor blok di WordPress. Dan di sini Anda melihat Toko ini di bagian Produk Terbaru kami. Ini adalah blok perdagangan.

Jadi yang bisa anda lakukan adalah anda bisa memilih jenis blok, produk terbaru, produk populer, jumlah tampilan yang ingin anda tampilkan. Kami menunjukkan empat di sana. Semua ini berasal dari sisi BigCommerce. Berikut contoh lain di bagian bawah halaman– item penjualan, hanya sebagai alternatif bagaimana Anda dapat menggunakannya.

Sejauh ini, kita telah melihat model konten dan plugin blok. Inilah semua yang diinstal di situs WordPress. Itu semua plugin yang kami sebutkan sebelumnya.

OKE. Di sini kita berada di etalase. Ini adalah etalase tanpa kepala kami, yang dapat Anda lihat di URL. Anda dapat melihat blok produk kami di halaman.

Dan ini adalah etalase sederhana. Ini benar-benar dimaksudkan untuk menjadi tempat awal. Dan karena alasan itu, kami berusaha membuatnya sesederhana mungkin. Selanjutnya, saya akan pergi ke halaman Toko.

Di sini Anda dapat melihat semua produk kami. Jadi halaman ini sebenarnya adalah model konten, halaman Detail Produk. Anda dapat melihat kami memiliki tempat di bawah sana untuk ditinjau. Langkah kita selanjutnya adalah menambahkan ini ke troli.

Dan Anda akan melihat bahwa gerobak itu sebenarnya juga tanpa kepala. Jadi semua ini ada di ujung depan Atlas. Sekarang, untuk pembayaran, kami mengalihkan ke BigCommerce. Untuk keperluan cetak biru ini, kami merasa itu yang paling masuk akal, tetapi yang lainnya ada di ujung depan Atlas tanpa kepala.

Di sini kita kembali ke etalase. Inilah halaman Tentang– hanya contoh dari apa yang dapat Anda lakukan dengan menata bagian halaman yang berbeda ini. Jadi Anda bisa mengambilnya, menggunakannya, belajar darinya. Itu benar-benar maksudnya di sini adalah untuk membantu Anda memulai dengan cepat.

Baiklah, itu saja dan dengan itu, saya akan meneruskannya ke Jonathan untuk lebih mendalam tentang bagaimana Click Here Labs mengambil cetak biru ini dan telah mengembangkannya untuk kasus penggunaan klien yang sebenarnya. Kepadamu, Jonatan.

JONATHAN JETER: Terima kasih, Bryan. Sebelum kita berbicara tentang perluasan cetak biru, pertama saya ingin membahas sedikit tentang perencanaan solusinya. Sebelum memulai solusi perdagangan yang dapat disusun yang sangat fleksibel, kami ingin memastikan bahwa kami telah merencanakannya dengan benar untuk memastikan bahwa kami menggunakan bagian yang sesuai.

Dan kami selalu memulai dengan dokumentasi API dan persyaratan fungsional. Jadi dalam hal ini, untuk BigCommerce, kami memeriksa dokumentasi API mereka untuk memastikan bahwa semua fitur yang dibutuhkan klien di toko mereka tersedia melalui API. Dan yang tidak, kami perlu merencanakan bagaimana kami akan memenuhi kebutuhan itu, memenuhi persyaratan itu.

Jadi sebagai bagian dari rencana itu, Anda perlu menentukan di mana setiap persyaratan akan dipenuhi, bukan? Apakah melalui BigCommerce asli? Apakah melalui WordPress? Apakah melalui aplikasi ujung depan yang Anda buat, atau aplikasi pihak ketiga?

Dalam hal ini, kami harus membuat beberapa keputusan dan karena platformnya sangat fleksibel, tujuan utamanya di sini adalah untuk mempercepat situs, untuk mendapatkan, seperti yang telah kami katakan sebelumnya, kecepatan statis di aplikasi ujung depan. Jadi kami ingin memastikan bahwa semua bagian situs, semua komponen di situs yang akan dilihat Google ada di aplikasi ujung depan tanpa kepala.

Dan kemudian kami harus melihat, misalnya– Bryan berbicara tentang gerobak, berbicara tentang bagian akun. Dia berbicara tentang hal-hal yang berbeda. Bagian mana yang akan kita lakukan dalam sistem yang berbeda? Jadi misalnya, kami memutuskan dalam hal ini untuk keranjang, untuk pembayaran, untuk akun pelanggan untuk melakukannya dalam aplikasi asli.

Kemudian konten situs– kami ingin memastikan bahwa itu dapat dikategorikan dengan benar, sehingga pelanggan dapat merasa nyaman dalam menambahkan konten tersebut melalui antarmuka WordPress standar. Kami juga mengumpulkan beberapa data di dalam WordPress agar dapat menyajikannya di bagian depan dengan cara yang berbeda. Ini akan menjadi hal-hal yang mungkin tidak tersedia di BigCommerce itu sendiri dan kemudian kami harus mempertimbangkan aplikasi pihak ketiga.

Ke mana data datang atau pergi untuk CRM mereka, untuk pelacakan, untuk hal-hal semacam itu dan akhirnya, Anda perlu merencanakan– komponen apa yang akan Anda buat di ujung depan itu dan ke mana mereka akan menariknya datanya dari?

Jadi, fleksibilitas tertinggi berarti Anda memiliki banyak keputusan untuk diambil dan mengingat bahwa pada dasarnya Anda membangun aplikasi e-niaga dengan semua alat yang tersedia di Atlas, dan dalam hal ini, BigCommerce, agar dapat membuat toko itu. Jadi saya hanya ingin menggarisbawahi bahwa sangat penting untuk membuat rencana itu, untuk memahami apa yang Anda hadapi.

Dan berdiskusi dengan klien juga dan katakan, inilah yang sedang kami bangun. Inilah yang akan tetap ada di aplikasi asli. Ini adalah apa yang akan berada di ujung depan.

Bagian-bagian yang dilindungi kata sandi– misalnya, Akun Saya, Riwayat Penagihan, hal-hal semacam itu– sekali lagi, adalah hal-hal yang tidak akan diindeks. Jadi yang kurang penting adalah yang ada di aplikasi front end. Jadi setelah Anda mengetahuinya, dan kami menyiapkan cetak birunya, sekarang Anda siap berangkat.

Sekarang kita berbicara tentang memperpanjang cetak biru, bukan? Jadi apa yang terlibat di dalamnya? Kita akan melihat di sini bahwa aplikasi ujung depan dimulai. Dan sekarang, Anda perlu membuat semua bagian ekstra yang akan membuat toko menjadi unik, yang akan membuatnya melakukan apa yang perlu dilakukan klien Anda.

Jadi misalnya, di BigCommerce, ada beberapa fungsi asli yang tersedia di API, seperti produk pendamping, grup pelanggan, hal-hal semacam itu. Jadi klien masih menggunakan BigCommerce asli untuk mengelola produk pendamping tersebut, untuk mengelola grup pelanggan yang berbeda, untuk mengelola kapan barang akan mulai dijual, dan kode diskon, dan hal-hal semacam itu.

Kami mengambil data itu, dan kami mempresentasikannya di bagian depan. Kami juga memiliki aplikasi pihak ketiga yang– plugin dipasang di BigCommerce, bukan? Ada penyesuai produk.

Dan kemudian data dari lokasi yang berbeda– yang perlu dipertimbangkan. Dan komponen-komponen itu kemudian dapat dibuat, misalnya, pada halaman Detail Produk, bukan? Jika ada produk yang memiliki kustomisasi– jadi Anda bisa mengubah warna.

Anda dapat menambahkan logo. Anda dapat melakukan hal-hal semacam itu, bukan? Penyesuai ini memungkinkan Anda melakukan itu. Jadi ini adalah bagian berbeda yang dibangun di atas fungsionalitas pihak ketiga.

Dan terakhir, ada fungsionalitas yang dibangun langsung ke ujung depan. Misalnya, matriks perbandingan produk– jadi kita semua pernah melihatnya di lokasi yang berbeda. Bandingkan tiga produk yang berbeda, lihat atribut apa yang berbeda, bagaimana perbandingannya, kemampuan untuk menggabungkan produk menjadi obral, diskon untuk satu bundel. Dan kemudian ada hal-hal yang, misalnya, tersedia di BigCommerce asli, tetapi untuk beberapa alasan, API tidak melakukan fungsinya.

Jadi pengunggah file adalah contoh dari sesuatu yang pada dasarnya harus kami buat di bagian depan menggunakan fungsi yang berbeda di bagian belakang. Jadi ini semua hal yang Anda bangun untuk memperluas cetak biru itu dan beberapa di antaranya akan disertakan dalam cetak biru yang diperpanjang, atau cetak biru premium yang menurut saya akan segera dibicarakan oleh Bryan di sini.

BRYAN SMITH: Terima kasih, Jonathan. Sekarang saya akan membahas peta jalan Atlas dengan sangat cepat. Kami membaginya menjadi kolom Sekarang, Berikutnya, dan Nanti.

Di bawah kolom Sekarang, Anda akan melihat inisiatif Atlas khusus e-niaga kami dengan huruf tebal. Di bawah sana di sisi kiri, cetak biru BigCommerce– yang aktif, tersedia bagi siapa saja untuk dicoba sekarang. Kami juga sedang mengerjakan API etalase.

Ini adalah lapisan data yang akan menyatukan konten dari WordPress, BigCommerce, atau sumber pihak ketiga lainnya yang Anda minati. Jadi, inilah cara untuk mengintegrasikan semuanya. Kami sedang mengerjakan versi beta sekarang, jadi pantau terus untuk detail lebih lanjut seiring berjalannya waktu.

Selanjutnya, kami akan mengerjakan cetak biru Shopify. Ini adalah integrasi yang mirip dengan apa yang telah kami lakukan dengan BigCommerce, tetapi dalam hal ini, dengan Shopify. Dan saat kita melewati itu, kita akan mengalihkan fokus kita ke personalisasi dan lokalisasi tanpa kepala. Kami tahu bahwa hal-hal ini sangat penting untuk etalase dinamis. Dan ini adalah sesuatu yang ingin kami pastikan terintegrasi erat dengan platform perdagangan Atlas.

Jadi, jika Anda siap memulai dengan cetak biru BigCommerce, Anda dapat membuka akun kotak pasir Atlas gratis hari ini untuk mencobanya. Jika Anda sudah memiliki akun Atlas, cetak birunya tentu saja tersedia untuk Anda juga. Cobalah hari ini.

Cobalah di proyek Anda berikutnya. Beri tahu kami pendapat Anda. Terimakasih semuanya. Kami sangat menghargai waktu Anda hari ini. Semoga harimu menyenangkan.