Click Here Labs 如何使用 Atlas 解鎖可組合商務
已發表: 2023-04-09WP Engine 目前通過我們的代理合作夥伴計劃促進了最大的 WordPress 代理協作社區。
在 DE{CODE} 2023 的這個點播會議中，您將了解 WP Engine 代理合作夥伴 Click Here Labs 如何使用新的 Atlas BigCommerce 藍圖來重新構想 Combat Corner 的在線商店。 您還將獲得 BigCommerce 藍圖的演示，這樣您就可以在短短 10 分鐘內構建自己的 Atlas 電子商務網站！
演講嘉賓：
- Jonathan Jeter，Click Here Labs 技術生產總監
- WP Engine 首席產品經理 Bryan Smith
會議幻燈片：
成績單：
布萊恩·史密斯： 大家好。 我叫 Bryan Smith，是 WP Engine 的首席產品經理。 今天，我們將討論 Click Here Labs 如何使用 Atlas 解鎖可組合商務。
今天加入我的是 Click Here Labs 的技術製作總監 Jonathan Jeter。 他領導那邊的團隊。 他們是 WP Engine 的代理合作夥伴，在過去的幾個月裡，我們與他們密切合作，將我們的第一個無頭或可組合的商業客戶帶到 Atlas。
我們將在一分鐘內深入了解該案例研究，但在此之前，我想談談可組合開發的市場狀況。 如此可組合且無頭——我們在這裡可以互換使用它們。 無頭通常意味著可組合。
這不僅僅是因為這些網站的性能如此之高，以至於對它們的需求不斷增長。 它們是高度可定制的，並且可以快速適應不斷變化的技術環境以及不斷變化的業務環境，您的業務成果可能會經常發生變化。 它們以靜態的速度提供動態體驗，我們將在今天晚些時候進行介紹。
您還可以擴展它們而無需重新構建平台。 在我們今天介紹的案例研究中，Click Here Labs 的客戶實際上能夠繼續使用他們的電子商務後端 BigCommerce，將 WordPress 集成為他們的 CMS，並將所有這些都帶到無頭店面。 但所有這些新技術往往成本過高，這就是為什麼我們在過去幾年中一直以這種方式使用 Atlas of building sites 來解決最嚴重的開發痛點。
當然，Atlas 不僅僅是一台主機。 它不僅僅是一個前端框架。 它具有 API 層、自定義字段插件、本地開發應用程序，所有這些都是您入門所需的東西。 但也許最重要的是，它有一個學習社區和支持。
不過，有了所有這些觸手可及的工具，我們不會因為您有點決策疲勞而責備您。 當您觸手可及的選項太多時，甚至開始都很難，而這正是藍圖的用武之地。
所以我們開發了藍圖，它們使您能夠建立一個包含所有代碼插件、內容模型和您需要的付費結構的入門站點。 您可以在 10 分鐘內啟動並運行它們。 您可以真正簡化啟動新項目的過程。
除此之外，它還可以幫助您了解平台和我們的最佳實踐。 因此，它可以讓您為下一個項目做好準備，但直到現在，我們擁有的藍圖僅限於更多靜態類型的網站用例，例如投資組合或博客類型的網站——沒有什麼動態的是無頭店面。
這就是我們創建 BigCommerce 藍圖的原因。 因此，我們將在一分鐘內為您演示的這個藍圖——它預配置了 WPGraphQL、Atlas Content Modeler、Faust JS 框架，以及一些新東西——一個 Atlas 商業塊插件，它使你將產品數據導入 WordPress 編輯器，然後還有一個商務連接器，它將您連接到 BigCommerce API，使您能夠將數據從 BigCommerce 同步到 WordPress，並保持同步。
您可以從它們構建內容模型，也可以為該塊的插件提供動力。 因此，為什麼我不實際向您展示它是如何工作的，我們將跳入演示……
好的，我們現在位於 Atlas 頁面上的 WP Engine 門戶中。 因此，當您創建一個新的 Atlas 應用程序時，您可以從藍圖開始，在這裡您將有幾個選項。 我們在這裡要做的是選擇右邊的 BigCommerce 藍圖。
從這裡您還可以預覽該店面或查看 GitHub 中的代碼。 我們將選擇該藍圖並點擊繼續。 所以下一步是連接到你的 GitHub 帳戶。
然後我們要做的是將我們的存儲庫克隆到您的存儲庫中。 因此，您選擇您的 GitHub 帳戶、存儲庫名稱，然後我們將點擊創建應用程序。
所以在這個過程中會發生一些事情。 首先，我們提供 WordPress 站點。 我們為 Atlas 應用構建 Atlas 代碼。 然後它被部署。 這個過程通常需要大約五分鐘，但我們在這裡加快了速度。
構建 WordPress 網站後，我們可以跳轉到 BigCommerce 連接器，您將在此處的屏幕上看到它。 配置屏幕——我們將輸入憑據，然後我們可以開始該產品同步。
我已將其連接到 Atlas 沙箱帳戶和 BigCommerce 沙箱帳戶。 我可以導入我在那個 BigCommerce 帳戶中擁有的產品。 我剛拿到大約 13 個演示產品。
我確實想在這裡指出，在此初始同步之後，您實際上不必再次運行它來捕獲更新。 該插件支持 webhooks 以及每晚的 cron 作業。 然後一旦這些產品完成導入，它也會同步圖像。
然後我們會去看看產品。 好的，所以我們已經加載了我們的產品。 您可以在“產品”頁面上看到它們。 這些是來自 BigCommerce 網站的演示產品。
我們將進入其中一個的詳細信息頁面，我在這裡顯示的只是我們引入的所有數據字段——標題、圖像、描述。 一切都在那裡。
所以現在，它在 WordPress 中。 它已為您同步。 您在 BigCommerce 網站上進行更改，它會立即更新。
現在，我想向您展示我們使用 Atlas Content Modeler 構建的內容模型。 這只是一個例子。 我想記住這些。 這確實是您的起點，只是向您展示我們是如何做到的。
這些內容模型為我們在無頭店面上的產品詳細信息頁面提供支持，稍後我們將在此處查看。 只是使用 Atlas Content Modeler 進行內容建模的靈活性的一個例子。 好的，接下來，我將向您展示我們之前談到的 Commerce blocks 插件。
我們將進入 WordPress 塊編輯器中的主頁。 在這裡您可以看到我們的最新產品部分。 這是商業區。
所以你可以做的是你可以選擇塊類型，最新產品，熱門產品，你想要展示的展示數量。 我們在那裡展示了四個。 所有這些都來自 BigCommerce 方面。 這是頁面下方的另一個示例 – 銷售商品，作為使用這些商品的替代方法。
到目前為止，我們已經看到了內容模型和塊插件。 這是安裝在 WordPress 站點上的所有內容。 這就是我們之前提到的所有插件。
好的。 我們在店面。 這是我們的無頭店面，您可以在 URL 中看到它。 您可以在頁面上看到我們的產品塊。
這是一個簡單的店面。 它確實是一個起點。 因此，出於這個原因，我們試圖讓它盡可能簡單。 接下來，我將轉到“商店”頁面。
在這裡您可以看到我們所有的產品。 所以這個頁面實際上是一個內容模型，產品詳細信息頁面。 你可以看到我們在底部有一個地方供評論。 我們的下一步是將其添加到購物車。
你會看到手推車實際上也是無頭的。 所以所有這些都在 Atlas 前端。 現在，對於結帳，我們確實重定向到 BigCommerce。 就此藍圖而言，我們認為最有意義，但其他一切都在無頭 Atlas 前端。
在這裡，我們回到店面。 這是“關於”頁面 – 只是一個示例，說明您可以對這些不同的頁面部分進行佈局。 所以你可以接受它，使用它，從中學習。 這裡的真正目的是讓您快速入門。
好吧，就是這樣，我將把它傳遞給 Jonathan，以更深入地了解 Click Here Labs 如何採用這個藍圖並將其擴展到一個真實的客戶用例。 交給你了，喬納森。
喬納森·傑特： 謝謝，布萊恩。 在我們討論擴展藍圖之前，我首先想討論一下有關規劃解決方案的問題。 在我們開始一個非常靈活的可組合商務解決方案之前，我們要確保我們已經正確地計劃它以確保我們使用適當的部分。
我們總是從 API 文檔和功能需求開始。 因此，在這種情況下，對於 BigCommerce，我們仔細閱讀了他們的 API 文檔，以確保客戶在他們的商店中需要的所有功能都可以通過 API 獲得。 而那些沒有的，我們需要計劃我們將如何滿足這些需求，滿足這些要求。
因此，作為該計劃的一部分，您需要確定每個要求將在何處得到滿足，對嗎？ 是通過本地 BigCommerce 嗎？ 是通過 WordPress 嗎？ 是通過您正在構建的前端應用程序還是第三方應用程序？
在這種情況下，我們不得不做出一些決定，因為平台非常靈活，這裡的主要目標是加快站點速度，就像我們之前所說的那樣，獲得前端應用程序中的靜態速度。 所以我們想確保網站的所有部分，Google 將要看到的網站中的所有組件都在無頭前端應用程序中。
然後我們不得不看一下，例如——布萊恩談到了購物車，談到了賬戶部分。 他談到了那些不同的事情。 我們將在不同的系統中完成哪些部分？ 因此，例如，在這種情況下，我們決定在本機應用程序中為購物車、結帳和客戶帳戶執行這些操作。
然後是網站內容——我們想確保能夠正確分類，讓客戶可以放心地通過標準的 WordPress 界面添加該內容。 我們還在 WordPress 內部聚合了一些數據，以便能夠以不同的方式在前端呈現它。 這將是 BigCommerce 本身可能不可用的東西，然後我們必須考慮第三方應用程序。
數據從哪裡來或去哪裡用於他們的 CRM、用於跟踪、用於這些類型的事情，最後，您需要計劃——您要在該前端構建哪些組件以及它們將拉到哪裡數據來自？
因此，最終的靈活性意味著您需要做出很多決定，並記住您基本上是在使用 Atlas 中可用的所有工具構建電子商務應用程序，在本例中為 BigCommerce，以便能夠創建該商店。 所以我只是想強調製定該計劃非常重要，以了解您正在進入的領域。
並與客戶進行討論，並說，這就是我們正在構建的。 這是將保留在本機應用程序中的內容。 這就是前端的內容。
那些受密碼保護的部分——例如，我的帳戶、帳單歷史，這些東西——同樣，這些東西不會被索引。 因此，那些在前端應用程序中的重要性不那麼重要。 所以一旦你弄清楚了，我們就制定了藍圖，現在你就可以開始了。
現在我們談論擴展藍圖，對嗎？ 那麼這涉及到什麼呢？ 我們將在這裡看到前端應用程序已啟動。 而現在，您需要構建所有這些額外的部件，這些部件將使商店變得獨一無二，使它能夠滿足您的客戶需要做的事情。
因此，例如，在 BigCommerce 中，API 中提供了一些本機功能，例如配套產品、客戶群等。 因此，客戶仍在使用 BigCommerce 本機來管理這些配套產品、管理不同的客戶群、管理商品何時開始銷售、折扣代碼以及諸如此類的事情。
我們正在獲取這些數據，並將其呈現在前端。 我們還有第三方應用程序——插件安裝在 BigCommerce 中，對嗎？ 有一個產品定制器。
然後是來自不同位置的數據——需要考慮的數據。 然後可以構建這些組件，例如，在產品詳細信息頁面上，對嗎？ 如果有可定制的產品，那麼您可以更改顏色。
您可以添加徽標。 你可以做那些事，對吧？ 這個定制器允許你這樣做。 所以這些是建立在第三方功能上的不同部分。
最後，還有直接內置於前端的功能。 例如，產品比較矩陣——所以我們都在不同的地方看到過這個。 比較三種不同的產品，看看有什麼不同的屬性，它們是如何比較的，將產品捆綁銷售的能力，捆綁的折扣。 還有一些東西，例如，在 BigCommerce 本機中可用，但由於某種原因，API 不執行該功能。
因此，文件上傳器是我們必須在後端使用不同功能在前端基本上創建的東西的一個示例。 所以這些都是你為擴展該藍圖而構建的所有東西，其中一些將包含在擴展藍圖中，或者我認為 Bryan 將很快在這裡談論的高級藍圖。
布萊恩·史密斯： 謝謝，喬納森。 現在我將快速介紹 Atlas 路線圖。 我們將其分解為 Now、Next 和 Later 列。
在“現在”欄下，您會以粗體顯示我們特定於電子商務的 Atlas 計劃。 在左側下方，BigCommerce 藍圖是實時的，任何人都可以立即試用。 我們還在開髮店面 API。
這是一個數據層，它將匯集來自 WordPress、BigCommerce 或您感興趣的任何其他第三方來源的內容。因此，這是一種集成所有這些內容的方法。 我們現在正在開發測試版，敬請期待更多細節。
接下來，我們將研究 Shopify 藍圖。 這與我們對 BigCommerce 所做的集成類似，但在這種情況下，它將與 Shopify 集成。 然後，隨著我們繼續前進，我們將把重點轉向無頭個性化和本地化。 我們知道這些東西對於動態店面非常重要。 我們希望確保它與 Atlas 商務平台緊密集成。
因此，如果您已準備好開始使用 BigCommerce 藍圖，那麼您今天就可以開設一個免費的 Atlas 沙盒帳戶來試用。 如果您已經擁有 Atlas 帳戶，那麼您當然也可以獲得藍圖。 今天就去試試吧。
在您的下一個項目中嘗試一下。 讓我們知道您的想法。 感謝大家。 我們非常感謝您今天的時間。 祝你有美好的一天。