JavaScript正处于复兴的中期，这将使我很酷，我嫉妒。
新的框架，设计了很多一切可以想象的是，正在以极快的速度出现在左边和右边。的扩散节点和服务器上的JavaScript鼓励了更多的对话框，产生了这样的想法isomorpic JavaScript。即使是传统的桌面应用程序，比如Spotify正在(部分地)使用JavaScript构建。
在前端，JavaScript使我们能够做许多交互式的事情，比如定位用户和创建丰富的动画。然而，我认为JavaScript所做的最大贡献在很大程度上是被忽视的:速度。
一段时间以来，JavaScript一直在努力帮助提高互联网的速度，然而，应该不用说，JavaScript对性能带来的最大和最具影响力的变化之一是XMLHTTPRequest的到来。XMLHTTPRequest是负责我们发出的所有ajax请求的底层技术，它允许我们检索额外的页面资源，而无需强制重新加载整个页面。对了，它是根据大家最喜欢的，微软。
你可能还喜欢:介绍BuyButton.js - Shopify的新JavaScript库
那现在呢?
让我们停止回顾过去，开始讨论JavaScript能为我们做些什么OB欧宝娱乐APP今天。我们将着眼于利用Shopify平台的一些方法，以便在客户的Shopify商店中以更复杂的方式开始使用JavaScript。我将向你展示一些你可以安装到位的构建模块，然后从那里，剩下的就取决于你了。
我们将从定义OB欧宝娱乐APP我们想要完成的事情和我们真正的目标开始。您很快就会发现(或者甚至可能已经知道)，一旦您开始徘徊在HTML和CSS安全舒适的牧场之外，就有可能永远不会回来。OB欧宝娱乐APP各种各样的机会会为你打开，但为了保持正轨，让我们OB欧宝娱乐APP大致概述一下我们今天要做的事情:
- 想想怎么从Shopify服务器上获取我们所有的产品和收集数据
- 以这样一种方式设置模板，以准确地提供我们想要的数据
- 编写一些JavaScript，使我们能够在初始页面加载时获取所需的所有数据
- 处理并解决过程中出现的任何问题
总之，所有这些改进将为用户创造一个更流畅、更快捷的体验——一种更像是原生应用的体验。用户将更快地看到他们想要看到的东西，花更少的时间等待加载，并且更倾向于进一步探索和发现。我也确信这些好处对转化率和跳出率等道具的影响是不言而喻的，所以让我们直接编写代码，开始这个派对吧。OB欧宝娱乐APP
你可能还喜欢:合作伙伴焦点:指针创意整合Shopify到莱西公司的Wordpress网站
我:
我们需要弄清楚的第一件事是，我们将如何以及从哪里获得数据。某种公开可用的API可以返回存储数据，这将是一个很好的开始，但不幸的是，这样的东西并不存在……OB欧宝娱乐APP然而(稍后会详细介绍)。还有公共购物车API，它也有一个随机的产品端点，但它只对执行购物车操作有帮助。此外，产品端点一次只返回一个项目的JSON，因此如果您的商店包含300个产品，那么每次新用户访问您的站点时，向API发出的请求就多达300个。这可不是我们想去的方向。
我看到在一些地方提到过发送$。getJSON请求到许多不同的地方(例如“products/blue-hat”，“collections/all”)，实际上会为所请求的任何东西返回JSON。这是我们想要的，但还不完全是。让我们锐意进取。
一旦您开始徘徊在HOB欧宝娱乐APPTML和CSS安全舒适的牧场之外，就有可能永远不会回来。
这时，你可能会说:“嘿，伙计，慢点。也许我们可以使用这些。json来获取我们需要的一些东西!”你不会错的，我们可以这么做。但是，我们仍然会遇到需要为商店中的每个产品和集合发出一个请求的问题。而且，解释整个“URL + .json”是如何工作的文档相对较少。我们怎么知道明天向完全相同的位置发送请求会返回今天得到的相同类型的数据呢?也许明天我们什么都拿不回来了。
既然我们不知道是谁，或者是什么，决定了我们从这些地点得到什么数据，我建议我们忘记它们，继续前进。但在此之前，快速看一下我们发送$的URL。getJSON请求…
o -m- 4 -g，这是相对的!响应来自我们自己的服务器内部!!
当你仔细想想，这是完全有道理的。Shopify服务器已经设置得更像api，而不像静态文件服务器。当人们导航到“http://store.com/collections/cute-motorcycle-jackets”时，他们并没有真正看到这个文件那的位置。相反，Shopify服务器查看所请求资源的URL，发现它需要将“cute-motorcycle-jacket”数据插入“collections”模板中，然后快速运行去构建该模板，最后返回来交付一个格式完整的.html文件。
现在考虑一下，如果我们使用一个主题模板，比如集合，会怎么样?比如液体，然后把所有的标记都撕掉，只剩下液体标签。然后，假设您导航到“http://store.com/collections/rad-velcro-shoes”，它现在使用新的无标记集合模板。假设我们去掉了生成DOM节点的液体标记和过滤器，您应该看到的是来自主题的标记。液体模板包裹在一堆不连贯的文本从你的集合。液体模板。如果您将URL稍微更改为“http://store.com/collections/rad-light-up-shoes”，然后尝试加载该页面，您将看到与上一个页面非常相似的内容，只是所有无意义的文本都更新为反映“rad-light-up-shoes”系列中的项目，而不是“rad- velcroo -shoes”。
这就是我们的大胜利(连同其他几个我已经轻描淡写的关键时刻)。它应该使您意识到，在合理的范围内，Shopify服务器必须完全按照我们的要求/礼貌地要求他们做。现在所需要做的就是确保整个流程顺利进行所需的跑腿工作。你们很幸运，我支持你们，而且已经做到了。
第二幕:
我们接下来要做的是构建一些只包含液态标签的模板，它们的结构类似JSON。然后，当我们第一次登陆我们的站点时，我们将为这些模板发出ajax请求。我们将从服务器得到一个响应，它将是呈现的模板，包含我们最初设置它保存的所有数据。此时，它将只是一个长文本字符串，而不是JSON，因此我们需要通过JSON.parse()运行它。我们会把我们需要的东西和我们已有的东西结合起来，然后把所有的产品和集合联系起来，这样我们就可以快速地建立一个集合，而不会在任何地方复制数据。
我们将使用平台的一些特性来帮助我们完成所有这些，即{% layout ' none ' %}、可选模板和' ?= ',控制您的目录页。
新建一个集合模板，并将其命名为“分页-端点”。它应该看起来像这样:
如果我们要从Shopify服务器请求我们所有的产品和集合，我们首先需要在开始之前知道每个产品和集合的总数。OB欧宝娱乐APP这是因为当在任何液体模板上检索和显示信息时，返回的最大项目数(通常是产品)上限为50。为了说明这一点，我们要做的是不断地请求50个产品，(totalProducts/50)次数。
这也是我们使用{% layout ' none ' %}标签和的地方控制您的目录页。布局none标签告诉服务器，“当您构建这个特定模板时，不要将它放在主题中。液体/布局框架，给我勇气。”这对我们来说更容易，因为现在我们不必解析和删除服务器响应中不想要的所有内容。按照上面文章中的说明，确保在“/collections/all/”中有一个集合，其中包含我们所有的产品(或我们想要的任何产品)，并且我们是负责它(集合)的人。在这里，您可以设置是否希望将缺货商品包含在我们将用于建立我们的商店的数据中。
接下来，创建一个新的list-collections模板，并将其命名为“collections-endpoint”。它应该看起来像这样:
几句注释……
- 因为这仍然是一个在交付给我们之前在服务器上渲染的Liquid模板，所以我们可以利用条件和控制流标签
- {{collection.description}}有一个url_escape过滤器附加到它，以保留包含在产品和集合的描述中的HTML，同时仍然确保描述是正确格式化的JSON字符串。在这里，我的解决方案是在服务器端对描述进行url_encode，存储编码后的字符串并传输它，在传递时，通过decodeURI()运行它以恢复它。
- 因为我们使用了另一个模板，所以仍然可以使用默认集合。液体和列表集合。液体服务内容，以爬虫试图索引网站。备用模板+ pushState()应该回答任何人关于SEO的任何问题。
- 追溯性地查看“json”过滤器可能是明智的
- products属性是一个空数组，当我们从服务器接收到所有的集合和产品时，我们将填充它，将我们的产品和集合永久地连接在一起。
最后，创建一个新的集合模板，并将其命名为“products-endpoint”。它应该看起来像这样:
请记住，您可以选择将哪些内容放入这些模板中(除了一些关键属性)。唯一的要求是从服务器返回的内容必须是可解析的JSON。如果任何数据导致JSON.parse()出错，那么您就会遇到麻烦。
基于上面的JavaScript，当getResources()运行时，将发送一系列请求以从服务器检索信息，一旦接收并处理了所有后续响应，将创建查找映射，以便快速检索产品，而无需不断重复地遍历保存数据的数组。
此时，您已经拥有了开始构建应用程序所需的所有数据和查找表。OB欧宝娱乐APP
在实践中
有关我使用上述方法所能做的事情的现场参考，请参阅SunStaches.com(和在这里使用React的实验版本)。
一些高级统计数据:请求、接收和处理一个拥有337个集合和802个产品的商店的所有数据大约需要1.5-2秒。在初始加载之后，客户机和服务器之间不再需要产品或集合的请求。总的来说，300个奇数集合和800个奇数项的所有请求/响应的权重约为250KB，这可能看起来很大，但请记住，这些都是可以并发检索的异步请求。最大的单个响应大小为17KB，平均值在12KB左右。
在检索数据的初始有效负载之后，唯一发出的其他请求是针对资源(如图像)的请求，这些请求根据需要在JIT上发出一次，然后被缓存，再也不会被检索。如果你的网站足够轻量，你可以预加载/预缓存所有的图片，完全不需要做任何更多的请求。只是要记住，在过于疯狂之前，要注意手机用户和网速较慢的用户。
移植之后SunStaches.com从WordPress (WooCommerce的实现)到Shopify(以及使用本文中描述的一些方法)，该网站的页面速度得分一直排在第90 -95百分位。订单一直在上升，游客们享受着时尚、超快的购物体验。
了解更多
如果你有兴趣探索更多，我的建议是看看以下四种方法来制作一个完整的前端应用程序，仍然通过Shopify平台管理:
你可能还喜欢:4高级Shopify主题技术添加到您的工作流程
