如果您熟悉Shopify主题和构建(和自定义)Shopify商店的传统工作流程，您就会知道有一个强大的重点是Liquid和Ruby开发语言-非常适合与Shopify合作，在Shopify平台上。
然而，许多网页设计师和开发人员也为其他主流框架(如WordPress、Drupal或客户端托管网站)做项目。而且，与这些框架共同的是web上最常用的开发语言之一:JavaScript。
所有这些都引出了一个问题:如何将电子商务与拥有如此庞大社区的开发语言结合起来?
最近，我们采访了Shopify的Buy Button团队的前端开发者Tessa ThorntonShopify合作伙伴网络研讨会，我们在那里讨论了如何使用BuyButton.js和购买SDK在任何平台上创建电子商务体验。
我们之前已经写过Shopify的两个Buy Button库，但本文将更深入地挖掘两者的技术细微差别，并让您更好地了解如何在当前或即将到来的客户端项目中使用Shopify的Buy Button功能。
为什么要买按钮?
曾经想要将Shopify添加到客户的网站上，但由于他们不在Shopify的在线商店频道(托管在Shopify服务器上的商店)上而无法实现?欧宝体育官网入口首页这是我们在创建Buy Button时想要解决的痛点。
您可以使用“购买按钮通道”以下列方式使您的客户受益:
- 将非电子商务页面转换为产品页面
- 设计原型并验证设计理念
- 为客户端应用程序添加购买功能
- 将产品集成到现有的登陆页面中
- 通过客户的博客赚钱
你可能还喜欢:在客户端网站中嵌入Shopify商店的四个明智理由
购买按钮通道
重要的事情先做。无论你希望如何在你的网页设计和开发过程中接近购买按钮，你都需要安装购买按钮通道在您正在处理的任何客户机存储上。这将允许您生成初始化所需的身份验证令牌buildClient，这反过来又使您能够访问客户的产品数据。
值得注意的是，虽然你不需要在线商店渠道来使用购买按钮，但你的客户确实需要一个付费的Shopify计划-基本的5欧宝体育官网入口首页美元/月(Shopify入OB欧宝娱乐APP门计划)就可以了。
使用Shopify StaOB欧宝娱乐APPrter，您的客户将获得在其网站上实现简单电子商务解决方案所需的一切，包括无限产品，订单跟踪和访问各种支付网关-所以不用担心失去功能而不是更小的价格标签。
购买SDK
那么，JS Buy SDK到底是什么?
首先，它OB欧宝娱乐APP是一个API客户端，允许自由职业者和代理商将Shopify电子商务功能添加到非Shopify托管的商店，如Wix、SquareSpace、Drupal、WordPress、自托管网站和托管在云解决方案上的网站。
你可以在任何支持JavaScript的平台上添加电子商务功能。
JS的Buy SDK建立在Shopify的API之上，并使用Fetch API来发出HTTP请求。它的目的是让你能够访问在线商店环境之外的产品列表数据(通常与在线商店渠道或Shopify店面相关联)，允许你管理客户的购物车体验，并使使用JavaS欧宝体育官网入口首页cript的REST API变得轻而易举。
假设您想编写一个JavaScript应用程序或脚本来使用Shopify的API，那么有几件事需要考虑:您需要编写一些样板代码，担心身份验证，并跨平台发出AJAX请求。JS Buy SDK为您处理这些细节，因此您可以专注于为客户构建定制的电子商务解决方案。
你可以通过这里了解更多关于JS Buy SDK的信息，以及如何在你的客户端网站上启动和运行它帮助文档由Shopify购买按钮团队创建。
使用JS所需的JavaScript知识中级到高级。
JS的特性购买SDK
JS Buy SDK的许多特性使其成为网页设计师和开发人员的一个有吸引力的选择。
- 它是在基于承诺的界面上创建的。这可确保在进入下一步之前完成所有操作。例如，使用基于承诺的界面，在产品完成加载之前，用户无法购买产品。
- 它有多边形。这使得JS购买SDK浏览器支持回到ie9。
- 它的特点是具有动态属性的模型。您不再需要主动记住对某些数据点所做的更改。动态属性意味着如果您更新
selectedVariant一个产品的模型，下次你去访问的时候selectedVariant属性时，它将被设置为新属性。
- 它的足迹很小。不,真的。缩小到30kb以下。
你可以用JS购买SDK构建什么?
世界在你的掌握之中
如果我们完全诚实地说，你可以建立任何你内心想要的东西(当然，只要你有实现它的技能)。这包括任何类型的界面，只要它包含产品、变体和购物车概念。
创建自己的库
你的客户正在为他们的网站寻找一个非常具体的电子商务定制吗?幸运的是，您可以使用JS Buy SDK作为基础来构建自己的JS和JQuery库。例如，如果您希望创建一个库，允许在现有(或即将到来的)客户端项目上提供详细的产品库，那么这将非常有用。
与其他框架集成
JS Buy SDK提供了各种JavaScript框架集成。你可以为React、Ember和Angular创建产品或购物车组件。我们鼓励您尽可能多地使用JS Buy SDK进行实验-它与其他SDK一起玩得很好!
JS购买SDK的实例
观看下面的视频，了解如何在客户端网站上初始化和自定义JS Buy SDK的编码示例。
如果你想跟随，这里是你需要开始的CodePen基础:OB欧宝娱乐APP
看笔购买SDK库由tessa-lt (@tessa-lt)CodePen。
BuyButton.js
在我们了解BuyButton.js是什么之前，重要的是要首先理解为什么要创建它。
随着JS Buy SDK的发布，Shopify开发人员开始在合作伙伴、网页设计师和开发人员的工作中看到共性。OB欧宝娱乐APP根据这些观察，在人们已经用JS Buy SDK构建的东西和他们最终想用它构建的东西之间建立了模式。
Shopify开发人员随后注意到，许多开发人员正在编写重复的代码，而更多的通才开发人员并不真正知道从哪里开始使用JS Buy SDK。OB欧宝娱乐APP如果您不熟悉更高级的JavaScript编码，这是可以理解的——可能很难想象如何从控制台上的对象创建实际的接口。
于是，BuyButton.js诞生了。
BuyButton.js建立在JS购买SDK之上，是一个开箱即用的UI/组件库，允许网页设计师和开发人员使用仅几行代码创建交互式电子商务组件。
BuyButton.js可以用于:
- 产品嵌入
- 集合嵌入
- 车
- 产品详细信息
所有的BuyButton.js嵌入在iframe中都是沙盒的——所以它们不会从你的客户端网页中继承CSS，并且无论你把它们放在哪个页面上，它们看起来总是一样的。然而，如果你想要完全控制元素的CSS，你可以通过传递iFrames false来退出这个沙箱，然后从默认的BuyButton.css开始，或者从头开始。OB欧宝娱乐APP
你可以在这里找到更多关于BuyButton.js的细节和实现演练帮助文档，由Shopify Buy Button团队维护。
使用BuyButton.js所需的JavaScript知识:初学者到高级，取决于您的定制的复杂性。
BuyButton.js的例子
观看下面的视频，了解如何在客户端网站上初始化和自定义BuyButton.js。
如果你想跟随，这里是你需要开始的CodePen基础:OB欧宝娱乐APP
看笔buybutton.js基地由tessa-lt (@tessa-lt)CodePen。
自定义的API
js还为您提供了一个灵活的自定义的API-一个强大的设计资源，并不太难学习。本质上，每个组件都是由其内容定制的，这些内容都有唯一的关键字。例如，product组件有一个“price”元素。要定制这个元素，可以使用关键字“price”。
在BuyButton.js逻辑中，一切都是用大的自定义对象来定制的，这与你配置JQuery插件的方式非常相似。对于Buy Button UI库创建的每个元素，您可以自定义以下内容:
- 每个元素的内容
- 元素出现的顺序
- 样式和文本
- 修改HTML组件的模板(Mustache模板)
高级BuyButton.js定制的例子
观看下面的视频，了解如何自定义BuyButton.js。
如果你想跟随，这里有一个CodePen的例子，你可以使用:
看笔js演示2完成由tessa-lt (@tessa-lt)CodePen。
想观看更多来自Shopify Partners的视频吗?
订阅我们的YouTube获取更多关于使用Shopify开发的教程。
获取代码
有兴趣尝试JS购买SDK和BuyButton.js为自己?
JS Buy SDK有多种格式，包括global、commonjs和amd，有或没有多边形填充。然而，BuyButton.js默认情况下是填充的，并且可以作为全局和commonjs模块使用。
Shopify还使网页设计师和开发人员可以轻松地从各种来源获取代码:
CDN
- JS购买SDK:http://shopify.github.io/js-buy-sdk/
- BuyButton.js:http://shopify.github.io/buy-button-js/
NPM
- NPM install shopify-buy
- NPM install @shopify/buy-button-js
Github
注意，如果你从GitHub上抓取代码，Shopify的BuyButton团队总是欢迎关于JS Buy SDK和BuyButton.js存储库的问题和pr:
你正在做一些简洁的“购买按钮”项目吗?请在下面的评论中告诉我们。
你可能还喜欢:每个开发者应该在他们的电子商务网站中包含的2个实时功能
