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 帐户，那么您当然也可以获得蓝图。 今天就去试试吧。
在您的下一个项目中尝试一下。 让我们知道您的想法。 感谢大家。 我们非常感谢您今天的时间。 祝你有美好的一天。