自从引进多通道Shopify在美国，我们一直致力于为商家提供支持，帮助他们探索在线商店以外的销售新方式。欧宝体育官网入口首页对于开发人员来说，这意味着一个充满可能性的新世界，可以围绕网络构建出色的电子商务体验。
开发这些体验过去仅限于使用Liquid构建电子商务主题，但现在，作为开发者，你有比以往更多的方法来利用Shopify。
今天，我们很自豪地为您的Shopify工具包介绍一个强大且易于访问的开发工具。
js -一个新的JavaScript库，用于将电子商务构建到任何网站。
针对JavaScript开发者的Shopify
我们知道JavaScript现在很重要。对整个Shopify合作伙伴和开发人员社区的调查显示，它是我们生态系统中最广为人知和采用最广泛的编程语言之一。随着BuyButton.js的引入，我们希望帮助您利用您的知识与Shopify建立更大更好的电子商务体验。
js功能强大，灵活，易于使用。只需几行代码，您就可以检索和显示有关产品和集合的信息，创建交互式购物车和行动号召按钮，并连接到Shopify的安全结帐。
只需在你的网站上包含BuyButton.js脚本，用API密钥连接到Shopify API，你就可以使用' createComponent '方法开始显示发布到BuyButton频道的产品。OB欧宝娱乐APP不需要任何配置，就可以创建类似于购买按钮嵌入，但是通过传递自定义选项和回调，你可以构建完全自定义的体验，比如:
- 集成自定义事件跟踪库的购物车。
- 动态生成的产品清单和集合。
- 产品列表增强自定义效果，动画，或插件。
BuyButton.js可在NPM而且CDN并且很容易集成到任何网站或应用程序中，不需要特殊的工具或工作流程。
使用BuyButton.js
要使用BuyButton.js库，您需要在Shopify商店上安装免费的购买按钮应用程序创建一个API密钥．
要开始OB欧宝娱乐APP使用BuyButton.js构建，你需要将它包含在你的网页中。你可以从NPM下载它，并将其作为一个模块，或链接到CDN:
1.创建商店客户端
商店客户端将允许您连接到Shopify API，以便您可以检索关于您的产品和收藏品的数据。你需要你的myshopify.com域名、API密钥和应用程序ID来创建客户端并开始发出请求。看看我们的文档如果你不确定在哪里找到你的API密钥或应用程序ID。
请注意:你需要发布产品/集合如果您希望与Shopify的“购买按钮”频道进行互动。
2.初始化库
现在可以创建一个UI实例，这是用于创建组件的主接口。init方法将您之前配置的客户端作为它的参数。
3.创建组件
组件是通过UI实例的createComponent方法创建的。你可以用这种方法创建四种类型的组件:'product'、'collection'、'productSet'和'cart'。组件类型是createComponent的第一个参数，第二个参数是配置对象。
要创建产品或集合组件，需要将资源的ID传递给配置对象。学习如何找到资源ID通过阅读我们的文档。
配置对象中唯一的必填字段是资源标识符，它可以是ID，也可以是句柄。您可能还想指定一个节点，它是一个DOM元素，组件将附加到它。
这将把包含您的产品列表的iframe附加到指定的节点。它还将创建另外两个组件:购物车和“购物车切换”，这是屏幕右侧的一个小选项卡，用于切换打开购物车。
4.定制组件
要自定义组件，可以在配置对象中创建选项对象。您希望自定义的每个组件(例如，产品或购物车)都有自己的配置，嵌套在选项对象中。例如，要在一个产品组件中定制产品和购物车，你可以同时传递购物车和产品对象:
有太多的自定义选项无法在一篇博客文章中列出，但是您可以在文档．
用BuyButton.js可以构建什么?
我们很高兴看到你可以用BuyButton.js构建什么，但为了让你开始，我们整理了一些可能的例子。OB欧宝娱乐APP这个库背后的目标是简单的定制应该很容易，更有经验的开发人员将能够实现高级的定制。
下面是一些你可以用BuyButton.js构建的例子:
1.自定义样式
我们的第一个例子是带有完全自定义样式的简单产品嵌入。这个嵌入看起来就像产品页面或登陆页面的主页，并且没有保留默认购买按钮的“小部件”外观。
嵌入的外观是完全自定义的，通过向“styles”对象添加CSS属性，以及覆盖嵌入中出现的默认元素，并改变这些元素的顺序。
看钢笔js例子5由tessa-lt (@tessa-lt)CodePen．
2.自定义模板
这个例子演示了一个更小的按钮风格的嵌入，只有一个按钮和一些定价信息。这种嵌入风格可以为您提供很大的灵活性，并且可以轻松地定制以适合任何品牌。
为了构建这个嵌入，通过编辑“contents”对象删除了除按钮元素外的所有元素。为了向按钮添加额外的信息，包括价格和比较价格，按钮的模板已经被覆盖。模板是使用胡子语法，并使用mustache.js编译。
看钢笔js例子6由tessa-lt (@tessa-lt)CodePen．
您还可以覆盖模板和内容来创建完全自定义的标记，使您可以自由地重新安排和定位嵌入中的元素。
在这个例子中，嵌入的内容已经被覆盖，以包括一个新的用户定义的元素，称为“info”，它有自己的模板，包含完全自定义的HTML。
看钢笔js例子4由tessa-lt (@tessa-lt)CodePen．
这是另一个自定义模板的例子，它将几个产品嵌入在一起，以及自定义元素通过CSS动画在悬停时动画。
看钢笔BuyButton.js示例1由tessa-lt (@tessa-lt)CodePen．
3.自定义行为
下面的示例模拟了服装产品清单的外观，具有多个选项和不同库存水平的变体。这种类型的嵌入可以为希望快速确定他们想要的变体是否有库存的用户提供无缝体验。用户无需从选择菜单中选择选项，而是单击色板和尺寸代码。
为了创建这种体验，“option”组件的模板将被重写，用样式化的按钮替换选择菜单。
这些按钮的自定义行为是通过“viewData”对象控制的，该对象允许将自定义数据附加到产品嵌入中的元素。在本例中，每种颜色的十六进制代码和每种大小的短形式都映射到每个选项值。
看钢笔js例子2由tessa-lt (@tessa-lt)CodePen．
这些只是BuyButton.js提供的灵活性的几个例子，我们希望它能在自定义和易用性之间为您提供平衡。js的目标是处理在客户端集成电子商务的更具挑战性的方面，例如状态管理、事件和数据绑定以及组件之间的协调。
然而，如果你是一个更有经验的JavaScript开发人员，并且想要创建一个完全自定义的体验，你可能更喜欢使用支持BuyButton.js的库购买SDK．
完全控制与JS购买SDK
JS Buy SDK是一个轻量级的库，允许你在任何网站上构建电子商务。它基于Shopify的API，提供了从您的商店检索产品和集合、将产品添加到购物车和结帐的功能。
JS Buy SDK将集成的呈现交给您;您可以创建任何您喜欢的用户界面，使用任何您喜欢使用的工具。你可以建立一个购物车的jQuery和CSS，或者将JS Buy SDK集成到你的单页应用中，将API包装在React、Ember或Angular组件中。JS Buy SDK甚至可以在服务器上使用，并集成到Node应用程序中。
JS Buy SDK可在NPM而且CDN- - - - - -首先来看一下OB欧宝娱乐APP文档，或者看一些例子．
用JavaScript构建Shopify变得简单多了
无论您的技能水平或您想要创建的体验如何，我们都致力于使您能够使用JavaScript使用Shopify进行构建。无论你是想创建一个简单的购买按钮，还是一个复杂的、自定义的电子商务集成应用程序，我们希望BuyButton.js和JS buy SDK将为你提供与Shopify平台构建所需的工具。
要开始使用JaOB欧宝娱乐APPvaScript构建电子商务体验，请下载BuyButton.js或者是JS购买SDK，并免费安装购买按钮应用程序在你的Shopify商店。我们迫不及待地想看看你会想出什么。
