构建支持票务编辑器应用程序
在本教程中,您将构建Zendesk Support应用程序亚博票编辑器的位置。此位置中的应用程序将显示为票据编辑器工具栏中的按钮。
你需要什么
要完成本教程,您需要以下内容:
拥有亚博Zendesk Suite增长计划或以上版本或支持的Zendesk帐户
专业计划或以上。要获取免费的合格帐户进行测试,请参见请求赞助测试帐户.在Zendesk支持中启用了Sunshine自定义对象。亚博有关说明,请参见启用自定义对象.
Zend亚博esk命令行接口。要安装或升级ZCLI,请参见安装和更新ZCLI.您还需要使用Zendesk帐户验证ZCLI。亚博看到身份验证在ZCLI文档中。
ZCLI取代了Zendesk App亚博s Tools (ZAT), ZAT目前处于维护模式。若要改用ZAT,请参阅安装和使用ZAT.
熟悉亚博Zendesk应用框架(ZAF).在开始之前,请完成构建第一个支持应用程序教程。
规划应用程序
您创建的应用程序允许代理在Zendesk票务评论中插入优惠券代码。亚博优惠券存储在Zendesk作为亚博阳光定制对象.为了获取优惠券,应用程序向自定义对象搜索API端点。请求返回最多9张优惠券,按创建日期降序排序。
如果请求返回一个或多个优惠券,应用程序的iframe将为每个优惠券显示一个按钮。当代理点击其中一个按钮时,应用程序将优惠券的兑换代码插入代理的光标。
如果请求返回无优惠券,应用程序将显示相关的“无优惠券”消息。如果请求失败,应用程序会显示一条错误消息。
<中心>创建应用程序文件
首先,为一个名为<年代trong>添加优惠码年代trong>.
在你的shell中,导航到你想要存储应用程序的文件夹。
$ CD项目年代pan>
在文件夹中运行:
zcli应用:新年代pan>
在提示符下,输入以下值:
- 目录名称:<年代trong>add_coupon_code年代trong>
- 作者姓名:您的姓名
- 作者邮箱:您的邮箱地址
- 作者网站:留空并按Enter。
- 应用名称:<年代trong>添加优惠码年代trong>
中创建应用程序启动器文件<年代trong>add_coupon_code年代trong>文件夹中。
设置应用程序位置
更新应用程序以在票务编辑器位置运行。
在<年代trong>add_coupon_code年代trong>文件夹,打开<年代trong>manifest.json年代trong>在文本编辑器中。
取代<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">位置代码>具有以下属性:
...年代pan>
“位置”年代pan>:年代pan>{年代pan>
“支持”年代pan>:年代pan>{年代pan>
“ticket_editor”年代pan>:年代pan>“资产/ iframe.html”年代pan>
}年代pan>
}年代pan>,年代pan>
...年代pan>
保存<年代trong>manifest.json年代trong>.
更改标识和图标
除了logo图像外,票务编辑器应用程序还需要一个名为<年代trong>icon_ticket_editor.svg年代trong>在应用的<年代trong>资产年代trong>文件夹中。要了解有关图标需求的详细信息,请参见样式和资产.
要添加应用程序图标并替换应用程序的默认logo图像,右键单击以下每个图像链接并将它们下载到<年代trong>add_coupon_codes /资产年代trong>文件夹中。使用列出的文件名保存图像。如果出现提示,则覆盖文件的任何现有版本。
本地运行应用程序
使用ZCLI在本地运行应用程序。这可以让你验证应用程序图标是否正确显示。
在shell中,导航到<年代trong>add_coupon_code年代trong>文件夹中。例子:
cd / add_coupon_code项目年代pan>
运行以下命令启动本地ZCLI web服务器:
zcli应用:服务器年代pan>
过了一会儿,会出现一条状态消息,通知您服务器已经启动。
注意:年代trong>按“Ctrl+C”停止服务器。
在浏览器的私有或隐身窗口中,登录到Zendesk Support并进入代理工作区。亚博从工作空间打开一个新的或现有的票据。
URL应该是这样的:
https://{子域名}.zendes亚博k.com/agent/tickets/ {ticket_id}代码>< / p >
附加<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">? zcli_apps = true代码>到URL并按“Enter”。URL现在应该是这样的:
https://{子域名}.zendes亚博k.com/agent/tickets/ {ticket_id} ? zcli_apps = true代码>< / p >
票务编辑器显示应用程序图标。
点击图标打开应用程序。
应用程序会显示一个“Hello, World!”的标题。
设计用户界面
为应用程序的iframe添加一些按钮和样式。这可以让你在不使用实时数据的情况下模拟应用程序的视觉设计。
在应用的<年代trong>资产年代trong>文件夹,打开<年代trong>iframe.html年代trong>.替换文件的内容如下:
<!年代pan>文档类型年代pan>超文本标记语言年代pan>>年代pan>
<年代pan>超文本标记语言年代pan>>年代pan>
<年代pan>头年代pan>>年代pan>
<年代pan>元年代pan>字符集年代pan>=年代pan>"年代pan>utf - 8年代pan>"年代pan>/>年代pan>
<年代pan>标题年代pan>>年代pan>添加优惠券代码年代pan>年代pan>标题年代pan>>年代pan>
<!——造型——>年代pan>
<年代pan>链接年代pan>
href年代pan>=年代pan>"年代pan>https://cdn.jsdelivr.net/combine/npm/@亚博zendeskgarden/css-bedrock年代pan>"年代pan>
rel年代pan>=年代pan>"年代pan>样式表年代pan>"年代pan>
/>年代pan>
<年代pan>链接年代pan>rel年代pan>=年代pan>"年代pan>样式表年代pan>"年代pan>href年代pan>=年代pan>"年代pan>main.css年代pan>"年代pan>/>年代pan>
年代pan>头年代pan>>年代pan>
<年代pan>身体年代pan>>年代pan>
<!——主容器——>年代pan>
<年代pan>div年代pan>id年代pan>=年代pan>"年代pan>容器年代pan>"年代pan>>年代pan>
<年代pan>按钮年代pan>data-cpn-id年代pan>=年代pan>"年代pan>1年代pan>"年代pan>>年代pan>优惠券1年代pan>年代pan>按钮年代pan>>年代pan>
<年代pan>按钮年代pan>data-cpn-id年代pan>=年代pan>"年代pan>2年代pan>"年代pan>>年代pan>息2年代pan>年代pan>按钮年代pan>>年代pan>
<年代pan>按钮年代pan>data-cpn-id年代pan>=年代pan>"年代pan>3.年代pan>"年代pan>>年代pan>优惠券3年代pan>年代pan>按钮年代pan>>年代pan>
<年代pan>按钮年代pan>data-cpn-id年代pan>=年代pan>"年代pan>4年代pan>"年代pan>>年代pan>息4年代pan>年代pan>按钮年代pan>>年代pan>
<年代pan>按钮年代pan>data-cpn-id年代pan>=年代pan>"年代pan>5年代pan>"年代pan>>年代pan>息5年代pan>年代pan>按钮年代pan>>年代pan>
<年代pan>按钮年代pan>data-cpn-id年代pan>=年代pan>"年代pan>6年代pan>"年代pan>>年代pan>优惠券6年代pan>年代pan>按钮年代pan>>年代pan>
<年代pan>按钮年代pan>data-cpn-id年代pan>=年代pan>"年代pan>7年代pan>"年代pan>>年代pan>息7年代pan>年代pan>按钮年代pan>>年代pan>
<年代pan>按钮年代pan>data-cpn-id年代pan>=年代pan>"年代pan>8年代pan>"年代pan>>年代pan>优惠券8年代pan>年代pan>按钮年代pan>>年代pan>
<年代pan>按钮年代pan>data-cpn-id年代pan>=年代pan>"年代pan>9年代pan>"年代pan>>年代pan>优惠券9年代pan>年代pan>按钮年代pan>>年代pan>
年代pan>div年代pan>>年代pan>
<!——脚本——>年代pan>
<年代pan>脚本年代pan>src年代pan>=年代pan>"年代pan>https://static.zdassets.com/亚博zendesk_app_framework_sdk/2.0/zaf_sdk.min.js年代pan>"年代pan>>年代pan>年代pan>脚本年代pan>>年代pan>
<年代pan>脚本年代pan>src年代pan>=年代pan>"年代pan>main.js年代pan>"年代pan>>年代pan>年代pan>脚本年代pan>>年代pan>
年代pan>身体年代pan>>年代pan>
年代pan>超文本标记语言年代pan>>年代pan>
HTML包含9个硬编码<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">< >按钮代码>元素。现在,您可以使用这些按钮来测试应用程序的外观和样式。您将在本教程的后面替换它们。
在<年代trong>资产年代trong>文件夹,创建一个<年代trong>main.css年代trong>文件。将以下内容粘贴到文件中:
#容器年代pan>{年代pan>
显示年代pan>:年代pan>网格年代pan>;年代pan>
grid-template-columns年代pan>:年代pan>重复年代pan>(年代pan>auto-fit年代pan>,年代pan>极大极小年代pan>(年代pan>One hundred.年代pan>px年代pan>,年代pan>1年代pan>fr年代pan>)年代pan>)年代pan>;年代pan>
grid-auto-rows年代pan>:年代pan>40年代pan>px年代pan>;年代pan>
grid-auto-columns年代pan>:年代pan>One hundred.年代pan>px年代pan>;年代pan>
grid-gap年代pan>:年代pan>5年代pan>px年代pan>;年代pan>
对齐项目年代pan>:年代pan>拉伸年代pan>;年代pan>
保证金年代pan>:年代pan>10年代pan>px年代pan>5年代pan>px年代pan>;年代pan>
}年代pan>
#容器年代pan>>年代pan>按钮年代pan>{年代pan>
这个特性年代pan>:年代pan>4年代pan>px年代pan>;年代pan>
边境年代pan>:年代pan>0年代pan>px年代pan>;年代pan>
光标年代pan>:年代pan>指针年代pan>;年代pan>
过渡年代pan>:年代pan>背景颜色年代pan>0.25年代pan>年代年代pan>;年代pan>
溢出年代pan>:年代pan>隐藏的年代pan>;年代pan>
文本溢出年代pan>:年代pan>省略年代pan>;年代pan>
}年代pan>
#容器年代pan>>年代pan>按钮年代pan>:徘徊年代pan>{年代pan>
背景颜色年代pan>:年代pan>rgba年代pan>(年代pan>31年代pan>,年代pan>115年代pan>,年代pan>183年代pan>,年代pan>0.2年代pan>)年代pan>;年代pan>
}年代pan>
p年代pan>.center年代pan>{年代pan>
text-align年代pan>:年代pan>中心年代pan>;年代pan>
}年代pan>
p年代pan>.bold年代pan>{年代pan>
粗细年代pan>:年代pan>大胆的年代pan>;年代pan>
}年代pan>
CSS将应用程序的优惠券按钮布局成一个网格。CSS还包含为应用程序格式化消息的规则。
在<年代trong>资产年代trong>文件夹,创建一个<年代trong>main.js年代trong>文件。将以下内容粘贴到文件中:
(年代pan>函数年代pan>(年代pan>)年代pan>{年代pan>
常量年代pan>客户端年代pan>=年代pan>ZAFClient年代pan>.年代pan>初始化年代pan>(年代pan>)年代pan>;年代pan>
客户端年代pan>.年代pan>调用年代pan>(年代pan>“调整”年代pan>,年代pan>{年代pan>宽度年代pan>:年代pan>“400 px”年代pan>,年代pan>高度年代pan>:年代pan>“150 px”年代pan>}年代pan>)年代pan>;年代pan>
}年代pan>)年代pan>(年代pan>)年代pan>;年代pan>
代码初始化一个ZAF客户端。然后它使用ZAF客户端为应用程序的iframe设置默认大小。
保存<年代trong>iframe.html年代trong>,<年代trong>main.css年代trong>,<年代trong>main.js年代trong>.
在浏览器中,刷新票据页面。点击应用程序图标重新打开应用程序。
该应用程序现在显示优惠券按钮的网格。
点击优惠券按钮还没有任何作用。您将在下一节中为按钮添加处理程序。
获取数据
接下来,将实时数据加载到应用程序中。在本教程中,应用程序使用自定义“优惠券”对象的数据。在加载数据之前,您需要定义这些对象。
使用以下方法创建对象类型请求为“coupon”自定义对象类型创建一个模式。
curl -X POST https://{subdomain}.亚博zendesk.com/api/sunshine/objects/types \年代pan>
-u {email}:{password} \年代pan>
-H "Content-Type: application/json" \年代pan>
- d”{年代pan>
"数据":{年代pan>
“关键”:“息票”,年代pan>
"模式":{年代pan>
"属性":{年代pan>
"标签":{年代pan>
“类型”:“字符串”,年代pan>
"description": "优惠券代码的按钮文本。示例:\"$5 off\""年代pan>
},年代pan>
“代码”:{年代pan>
“类型”:“字符串”,年代pan>
"description": "优惠券兑换代码"年代pan>
}年代pan>
},年代pan>
“要求”:[年代pan>
“标签”,年代pan>
“代码”年代pan>
]年代pan>
}年代pan>
}年代pan>
} '年代pan>
提示:年代trong>您还可以添加一个自定义对象模式作为应用程序需求。看到自定义对象应用程序需求.但是,应用程序需求不能与本地ZCLI web服务器一起工作。
使用以下方法创建对象记录请求创建三个“优惠券”对象。对象使用在步骤1中定义的模式。
curl -X POST https://{subdomain}.亚博zendesk.com/api/sunshine/objects/records \年代pan>
-u {email}:{password} \年代pan>
-H "Content-Type: application/json" \年代pan>
- d”{年代pan>
"数据":{年代pan>
“类型”:“息票”,年代pan>
"属性":{年代pan>
"label": "$5 off",年代pan>
“代码”:“5美元- abcd - 2099”年代pan>
}年代pan>
}年代pan>
} '年代pan>
curl -X POST https://{subdomain}.亚博zendesk.com/api/sunshine/objects/records \年代pan>
-u {email}:{password} \年代pan>
-H "Content-Type: application/json" \年代pan>
- d”{年代pan>
"数据":{年代pan>
“类型”:“息票”,年代pan>
"属性":{年代pan>
"label": "$10 off",年代pan>
“代码”:“10美元- efgh - 2099”年代pan>
}年代pan>
}年代pan>
} '年代pan>
curl -X POST https://{subdomain}.亚博zendesk.com/api/sunshine/objects/records \年代pan>
-u {email}:{password} \年代pan>
-H "Content-Type: application/json" \年代pan>
- d”{年代pan>
"数据":{年代pan>
“类型”:“息票”,年代pan>
"属性":{年代pan>
“标签”:“包邮”,年代pan>
“代码”:“自由-运输- ijkl - 2099”年代pan>
}年代pan>
}年代pan>
} '年代pan>
在<年代trong>main.js年代trong>,用以下代码替换文件的内容。
代码实现了应用程序逻辑规划应用程序.为了在代理的光标上插入优惠券代码,应用程序使用ZAF客户端<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">invoke ()代码>方法。方法运行ticket.editor.insert行动。方法调用在下面突出显示。
(年代pan>函数年代pan>(年代pan>)年代pan>{年代pan>
常量年代pan>客户端年代pan>=年代pan>ZAFClient年代pan>.年代pan>初始化年代pan>(年代pan>)年代pan>;年代pan>
客户端年代pan>.年代pan>调用年代pan>(年代pan>`年代pan>调整年代pan>`年代pan>,年代pan>{年代pan>高度年代pan>:年代pan>`年代pan>40像素年代pan>`年代pan>}年代pan>)年代pan>;年代pan>
常量年代pan>设置年代pan>=年代pan>{年代pan>
url年代pan>:年代pan>`年代pan>/ api /阳光/对象/查询?per_page = 9年代pan>`年代pan>,年代pan>
类型年代pan>:年代pan>`年代pan>帖子年代pan>`年代pan>,年代pan>
contentType年代pan>:年代pan>`年代pan>application / json年代pan>`年代pan>,年代pan>
数据年代pan>:年代pan>JSON年代pan>.年代pan>stringify年代pan>(年代pan>{年代pan>
查询年代pan>:年代pan>{年代pan>
美元和年代pan>:年代pan>[年代pan>{年代pan>_type年代pan>:年代pan>{年代pan>美元的情商年代pan>:年代pan>`年代pan>优惠券年代pan>`年代pan>}年代pan>}年代pan>]年代pan>,年代pan>
}年代pan>,年代pan>
}年代pan>)年代pan>,年代pan>
}年代pan>;年代pan>
客户端年代pan>.年代pan>请求年代pan>(年代pan>设置年代pan>)年代pan>.年代pan>然后年代pan>(年代pan>
(年代pan>响应年代pan>)年代pan>= >年代pan>{年代pan>
常量年代pan>优惠券年代pan>=年代pan>响应年代pan>.年代pan>数据年代pan>;年代pan>
如果年代pan>(年代pan>优惠券年代pan>.年代pan>长度年代pan>>年代pan>0年代pan>)年代pan>{年代pan>
//调整应用程序大小以避免滚动条年代pan>
resizeApp年代pan>(年代pan>优惠券年代pan>,年代pan>客户端年代pan>)年代pan>;年代pan>
displayCouponButtons年代pan>(年代pan>优惠券年代pan>,年代pan>客户端年代pan>)年代pan>;年代pan>
}年代pan>其他的年代pan>{年代pan>
displayNoCouponsMsg年代pan>(年代pan>)年代pan>;年代pan>
}年代pan>
}年代pan>,年代pan>
(年代pan>错误年代pan>)年代pan>= >年代pan>{年代pan>
displayErrorMsg年代pan>(年代pan>错误年代pan>)年代pan>;年代pan>
控制台年代pan>.年代pan>错误年代pan>(年代pan>错误年代pan>)年代pan>;年代pan>
}年代pan>
)年代pan>;年代pan>
}年代pan>)年代pan>(年代pan>)年代pan>;年代pan>
函数年代pan>resizeApp年代pan>(年代pan>优惠券年代pan>,年代pan>客户端年代pan>)年代pan>{年代pan>
//应用程序每行显示3个优惠券按钮年代pan>
常量年代pan>rowCount年代pan>=年代pan>数学年代pan>.年代pan>装天花板年代pan>(年代pan>优惠券年代pan>.年代pan>长度年代pan>/年代pan>3.年代pan>)年代pan>;年代pan>
//每一行大约是42px。为容器边缘添加24px年代pan>
常量年代pan>iframeHeight年代pan>=年代pan>rowCount年代pan>*年代pan>42年代pan>+年代pan>24年代pan>;年代pan>
客户端年代pan>.年代pan>调用年代pan>(年代pan>`年代pan>调整年代pan>`年代pan>,年代pan>{年代pan>宽度年代pan>:年代pan>`年代pan>400 px年代pan>`年代pan>,年代pan>高度年代pan>:年代pan>`年代pan>$ {年代pan>iframeHeight年代pan>}年代pan>px年代pan>`年代pan>}年代pan>)年代pan>;年代pan>
}年代pan>
函数年代pan>displayCouponButtons年代pan>(年代pan>优惠券年代pan>,年代pan>客户端年代pan>)年代pan>{年代pan>
优惠券年代pan>.年代pan>forEach年代pan>(年代pan>(年代pan>优惠券年代pan>)年代pan>= >年代pan>{年代pan>
常量年代pan>couponButton年代pan>=年代pan>`年代pan>
<按钮data-cpn-id = "年代pan>$ {年代pan>优惠券年代pan>.年代pan>id年代pan>}年代pan>" >年代pan>
$ {年代pan>优惠券年代pan>.年代pan>属性年代pan>.年代pan>标签年代pan>}年代pan>
< /按钮>年代pan>`年代pan>;年代pan>
insertContent年代pan>(年代pan>couponButton年代pan>)年代pan>;年代pan>
文档年代pan>
.年代pan>querySelector年代pan>(年代pan>`年代pan>[data-cpn-id = "年代pan>$ {年代pan>优惠券年代pan>.年代pan>id年代pan>}年代pan>”)年代pan>`年代pan>)年代pan>
.年代pan>addEventListener年代pan>(年代pan>`年代pan>点击年代pan>`年代pan>,年代pan>(年代pan>)年代pan>= >年代pan>{年代pan>
客户端年代pan>.年代pan>调用年代pan>(年代pan>`年代pan>ticket.editor.insert年代pan>`年代pan>,年代pan>`年代pan>$ {年代pan>优惠券年代pan>.年代pan>属性年代pan>.年代pan>代码年代pan>}年代pan>`年代pan>)年代pan>;年代pan>
客户端年代pan>.年代pan>调用年代pan>(年代pan>“隐藏”年代pan>)年代pan>;年代pan>
客户端年代pan>.年代pan>调用年代pan>(年代pan>“显示”年代pan>)年代pan>;年代pan>
}年代pan>)年代pan>;年代pan>
}年代pan>)年代pan>;年代pan>
}年代pan>
函数年代pan>displayNoCouponsMsg年代pan>(年代pan>)年代pan>{年代pan>
常量年代pan>noCouponsMsg年代pan>=年代pan>`年代pan>
年代pan>
没有优惠券年代pan>
< / p >年代pan>`年代pan>;年代pan>
insertContent年代pan>(年代pan>noCouponsMsg年代pan>)年代pan>;年代pan>
}年代pan>
函数年代pan>displayErrorMsg年代pan>(年代pan>错误年代pan>)年代pan>{年代pan>
常量年代pan>errorMsg年代pan>=年代pan>`年代pan>
年代pan>
$ {年代pan>错误年代pan>.年代pan>状态年代pan>}年代pan>:年代pan>$ {年代pan>错误年代pan>.年代pan>statusText年代pan>}年代pan>
< / p >年代pan>`年代pan>;年代pan>
insertContent年代pan>(年代pan>errorMsg年代pan>)年代pan>;年代pan>
}年代pan>
函数年代pan>insertContent年代pan>(年代pan>内容年代pan>)年代pan>{年代pan>
常量年代pan>容器年代pan>=年代pan>文档年代pan>.年代pan>getElementById年代pan>(年代pan>`年代pan>容器年代pan>`年代pan>)年代pan>;年代pan>
容器年代pan>.年代pan>insertAdjacentHTML年代pan>(年代pan>`年代pan>beforeend年代pan>`年代pan>,年代pan>内容年代pan>)年代pan>;年代pan>
}年代pan>
在<年代trong>iframe.html年代trong>,删除硬编码<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">< >按钮代码>元素中的代码<年代trong>main.js年代trong>现在动态添加优惠券按钮。
...年代pan>
<!——主容器——>年代pan>
<年代pan>div年代pan>id年代pan>=年代pan>"年代pan>容器年代pan>"年代pan>>年代pan>年代pan>div年代pan>>年代pan>
...年代pan>
保存<年代trong>main.js年代trong>而且<年代trong>iframe.html年代trong>.
在浏览器中,刷新票据页面。点击应用程序图标重新打开应用程序。
应用程序的iframe现在显示你创建的“优惠券”对象的按钮。
点击每个优惠券按钮。验证应用程序插入正确的优惠券代码在您的光标。
测试应用程序
接下来,测试应用程序,以验证它是否按预期工作。本教程提供了三个测试用例的步骤:
您可以使用类似的工作流程来覆盖其他测试用例。
测试用例1:新的优惠券
如果你添加了一个“优惠券”自定义对象,应用程序应该显示一个相关的优惠券按钮。
使用以下方法创建对象记录请求添加一个“coupon”对象。
curl -X POST https://{subdomain}.亚博zendesk.com/api/sunshine/objects/records \年代pan>
-u {email}:{password} \年代pan>
-H "Content-Type: application/json" \年代pan>
- d”{年代pan>
"数据":{年代pan>
“类型”:“息票”,年代pan>
"属性":{年代pan>
“标签”:“5折”,年代pan>
“代码”:“5% - mnop - 2099”年代pan>
}年代pan>
}年代pan>
} '年代pan>
在浏览器中,刷新票据页面。点击应用程序图标重新打开应用程序。
验证应用程序显示相关优惠券按钮。
点击优惠券按钮。验证应用程序插入正确的优惠券代码在您的光标。
如果需要,重复步骤1-3测试更多优惠券。该应用程序只显示最近创建的9张优惠券。
测试用例2:没有优惠券
如果应用程序的自定义对象搜索请求没有返回优惠券,应用程序应该显示相关消息。
在<年代trong>main.js年代trong>,将以下比较对象添加到自定义对象搜索请求。这确保了请求不返回匹配的对象。
...年代pan>
常量年代pan>设置年代pan>=年代pan>{年代pan>
url年代pan>:年代pan>`年代pan>/ api /阳光/对象/查询?per_page = 9年代pan>`年代pan>,年代pan>
类型年代pan>:年代pan>`年代pan>帖子年代pan>`年代pan>,年代pan>
contentType年代pan>:年代pan>`年代pan>application / json年代pan>`年代pan>,年代pan>
数据年代pan>:年代pan>JSON年代pan>.年代pan>stringify年代pan>(年代pan>{年代pan>
查询年代pan>:年代pan>{年代pan>
美元和年代pan>:年代pan>[年代pan>{年代pan>_type年代pan>:年代pan>{年代pan>美元的情商年代pan>:年代pan>`年代pan>优惠券年代pan>`年代pan>}年代pan>}年代pan>]年代pan>,年代pan>
美元和年代pan>:年代pan>[年代pan>{年代pan>_type年代pan>:年代pan>{年代pan>美元的情商年代pan>:年代pan>`年代pan>零年代pan>`年代pan>}年代pan>}年代pan>]年代pan>,年代pan>
}年代pan>,年代pan>
}年代pan>)年代pan>,年代pan>
}年代pan>;年代pan>
...年代pan>
保存<年代trong>main.js年代trong>.
在浏览器中,刷新票据页面。点击应用程序图标重新打开应用程序。
验证应用程序显示“无优惠券可用”的消息。
在<年代trong>main.js年代trong>,恢复第1步中的更改。
...年代pan>
常量年代pan>设置年代pan>=年代pan>{年代pan>
url年代pan>:年代pan>`年代pan>/ api /阳光/对象/查询?per_page = 9年代pan>`年代pan>,年代pan>
类型年代pan>:年代pan>`年代pan>帖子年代pan>`年代pan>,年代pan>
contentType年代pan>:年代pan>`年代pan>application / json年代pan>`年代pan>,年代pan>
数据年代pan>:年代pan>JSON年代pan>.年代pan>stringify年代pan>(年代pan>{年代pan>
查询年代pan>:年代pan>{年代pan>
美元和年代pan>:年代pan>[年代pan>{年代pan>_type年代pan>:年代pan>{年代pan>美元的情商年代pan>:年代pan>`年代pan>优惠券年代pan>`年代pan>}年代pan>}年代pan>]年代pan>,年代pan>
}年代pan>,年代pan>
}年代pan>)年代pan>,年代pan>
}年代pan>;年代pan>
...年代pan>
保存<年代trong>main.js年代trong>.
测试用例3:请求错误
如果应用程序的自定义对象搜索请求返回一个错误,应用程序应该显示错误的HTTP状态代码和相关的状态文本。
在<年代trong>main.js年代trong>,在自定义对象搜索请求中添加以下输入。这确保了请求失败并返回一个错误。
...年代pan>
常量年代pan>设置年代pan>=年代pan>{年代pan>
url年代pan>:年代pan>`年代pan>/ api /阳光/对象/查询?per_page foo = 9年代pan>`年代pan>,年代pan>
类型年代pan>:年代pan>`年代pan>帖子年代pan>`年代pan>,年代pan>
contentType年代pan>:年代pan>`年代pan>application / json年代pan>`年代pan>,年代pan>
数据年代pan>:年代pan>JSON年代pan>.年代pan>stringify年代pan>(年代pan>{年代pan>
查询年代pan>:年代pan>{年代pan>
美元和年代pan>:年代pan>[年代pan>{年代pan>_type年代pan>:年代pan>{年代pan>美元的情商年代pan>:年代pan>`年代pan>优惠券年代pan>`年代pan>}年代pan>}年代pan>]年代pan>,年代pan>
}年代pan>,年代pan>
}年代pan>)年代pan>,年代pan>
}年代pan>;年代pan>
...年代pan>
保存<年代trong>main.js年代trong>.
在浏览器中,刷新票据页面。点击应用程序图标重新打开应用程序。
验证应用程序显示错误消息。
在<年代trong>main.js年代trong>,恢复第1步中的更改。
...年代pan>
常量年代pan>设置年代pan>=年代pan>{年代pan>
url年代pan>:年代pan>`年代pan>/ api /阳光/对象/查询?per_page = 9年代pan>`年代pan>,年代pan>
类型年代pan>:年代pan>`年代pan>帖子年代pan>`年代pan>,年代pan>
contentType年代pan>:年代pan>`年代pan>application / json年代pan>`年代pan>,年代pan>
数据年代pan>:年代pan>JSON年代pan>.年代pan>stringify年代pan>(年代pan>{年代pan>
查询年代pan>:年代pan>{年代pan>
美元和年代pan>:年代pan>[年代pan>{年代pan>_type年代pan>:年代pan>{年代pan>美元的情商年代pan>:年代pan>`年代pan>优惠券年代pan>`年代pan>}年代pan>}年代pan>]年代pan>,年代pan>
}年代pan>,年代pan>
}年代pan>)年代pan>,年代pan>
}年代pan>;年代pan>
...年代pan>
保存<年代trong>main.js年代trong>.
代码完成!
恭喜你!你建立了一个有效的票务编辑程序<年代trong>main.js年代trong>文件现在应该是这样的:
(年代pan>函数年代pan>(年代pan>)年代pan>{年代pan>
常量年代pan>客户端年代pan>=年代pan>ZAFClient年代pan>.年代pan>初始化年代pan>(年代pan>)年代pan>;年代pan>
客户端年代pan>.年代pan>调用年代pan>(年代pan>`年代pan>调整年代pan>`年代pan>,年代pan>{年代pan>高度年代pan>:年代pan>`年代pan>40像素年代pan>`年代pan>}年代pan>)年代pan>;年代pan>
常量年代pan>设置年代pan>=年代pan>{年代pan>
url年代pan>:年代pan>`年代pan>/ api /阳光/对象/查询?per_page = 9年代pan>`年代pan>,年代pan>
类型年代pan>:年代pan>`年代pan>帖子年代pan>`年代pan>,年代pan>
contentType年代pan>:年代pan>`年代pan>application / json年代pan>`年代pan>,年代pan>
数据年代pan>:年代pan>JSON年代pan>.年代pan>stringify年代pan>(年代pan>{年代pan>
查询年代pan>:年代pan>{年代pan>
美元和年代pan>:年代pan>[年代pan>{年代pan>_type年代pan>:年代pan>{年代pan>美元的情商年代pan>:年代pan>`年代pan>优惠券年代pan>`年代pan>}年代pan>}年代pan>]年代pan>,年代pan>
}年代pan>,年代pan>
}年代pan>)年代pan>,年代pan>
}年代pan>;年代pan>
客户端年代pan>.年代pan>请求年代pan>(年代pan>设置年代pan>)年代pan>.年代pan>然后年代pan>(年代pan>
(年代pan>响应年代pan>)年代pan>= >年代pan>{年代pan>
常量年代pan>优惠券年代pan>=年代pan>响应年代pan>.年代pan>数据年代pan>;年代pan>
如果年代pan>(年代pan>优惠券年代pan>.年代pan>长度年代pan>>年代pan>0年代pan>)年代pan>{年代pan>
//调整应用程序大小以避免滚动条年代pan>
resizeApp年代pan>(年代pan>优惠券年代pan>,年代pan>客户端年代pan>)年代pan>;年代pan>
displayCouponButtons年代pan>(年代pan>优惠券年代pan>,年代pan>客户端年代pan>)年代pan>;年代pan>
}年代pan>其他的年代pan>{年代pan>
displayNoCouponsMsg年代pan>(年代pan>)年代pan>;年代pan>
}年代pan>
}年代pan>,年代pan>
(年代pan>错误年代pan>)年代pan>= >年代pan>{年代pan>
displayErrorMsg年代pan>(年代pan>错误年代pan>)年代pan>;年代pan>
控制台年代pan>.年代pan>错误年代pan>(年代pan>错误年代pan>)年代pan>;年代pan>
}年代pan>
)年代pan>;年代pan>
}年代pan>)年代pan>(年代pan>)年代pan>;年代pan>
函数年代pan>resizeApp年代pan>(年代pan>优惠券年代pan>,年代pan>客户端年代pan>)年代pan>{年代pan>
//应用程序每行显示3个优惠券按钮年代pan>
常量年代pan>rowCount年代pan>=年代pan>数学年代pan>.年代pan>装天花板年代pan>(年代pan>优惠券年代pan>.年代pan>长度年代pan>/年代pan>3.年代pan>)年代pan>;年代pan>
//每一行大约是42px。为容器边缘添加24px年代pan>
常量年代pan>iframeHeight年代pan>=年代pan>rowCount年代pan>*年代pan>42年代pan>+年代pan>24年代pan>;年代pan>
客户端年代pan>.年代pan>调用年代pan>(年代pan>`年代pan>调整年代pan>`年代pan>,年代pan>{年代pan>宽度年代pan>:年代pan>`年代pan>400 px年代pan>`年代pan>,年代pan>高度年代pan>:年代pan>`年代pan>$ {年代pan>iframeHeight年代pan>}年代pan>px年代pan>`年代pan>}年代pan>)年代pan>;年代pan>
}年代pan>
函数年代pan>displayCouponButtons年代pan>(年代pan>优惠券年代pan>,年代pan>客户端年代pan>)年代pan>{年代pan>
优惠券年代pan>.年代pan>forEach年代pan>(年代pan>(年代pan>优惠券年代pan>)年代pan>= >年代pan>{年代pan>
常量年代pan>couponButton年代pan>=年代pan>`年代pan>
<按钮data-cpn-id = "年代pan>$ {年代pan>优惠券年代pan>.年代pan>id年代pan>}年代pan>" >年代pan>
$ {年代pan>优惠券年代pan>.年代pan>属性年代pan>.年代pan>标签年代pan>}年代pan>
< /按钮>年代pan>`年代pan>;年代pan>
insertContent年代pan>(年代pan>couponButton年代pan>)年代pan>;年代pan>
文档年代pan>
.年代pan>querySelector年代pan>(年代pan>`年代pan>[data-cpn-id = "年代pan>$ {年代pan>优惠券年代pan>.年代pan>id年代pan>}年代pan>”)年代pan>`年代pan>)年代pan>
.年代pan>addEventListener年代pan>(年代pan>`年代pan>点击年代pan>`年代pan>,年代pan>(年代pan>)年代pan>= >年代pan>{年代pan>
客户端年代pan>.年代pan>调用年代pan>(年代pan>`年代pan>ticket.editor.insert年代pan>`年代pan>,年代pan>`年代pan>$ {年代pan>优惠券年代pan>.年代pan>属性年代pan>.年代pan>代码年代pan>}年代pan>`年代pan>)年代pan>;年代pan>
客户端年代pan>.年代pan>调用年代pan>(年代pan>“隐藏”年代pan>)年代pan>;年代pan>
客户端年代pan>.年代pan>调用年代pan>(年代pan>“显示”年代pan>)年代pan>;年代pan>
}年代pan>)年代pan>;年代pan>
}年代pan>)年代pan>;年代pan>
}年代pan>
函数年代pan>displayNoCouponsMsg年代pan>(年代pan>)年代pan>{年代pan>
常量年代pan>noCouponsMsg年代pan>=年代pan>`年代pan>
年代pan>
没有优惠券年代pan>
< / p >年代pan>`年代pan>;年代pan>
insertContent年代pan>(年代pan>noCouponsMsg年代pan>)年代pan>;年代pan>
}年代pan>
函数年代pan>displayErrorMsg年代pan>(年代pan>错误年代pan>)年代pan>{年代pan>
常量年代pan>errorMsg年代pan>=年代pan>`年代pan>
年代pan>
$ {年代pan>错误年代pan>.年代pan>状态年代pan>}年代pan>:年代pan>$ {年代pan>错误年代pan>.年代pan>statusText年代pan>}年代pan>
< / p >年代pan>`年代pan>;年代pan>
insertContent年代pan>(年代pan>errorMsg年代pan>)年代pan>;年代pan>
}年代pan>
函数年代pan>insertContent年代pan>(年代pan>内容年代pan>)年代pan>{年代pan>
常量年代pan>容器年代pan>=年代pan>文档年代pan>.年代pan>getElementById年代pan>(年代pan>`年代pan>容器年代pan>`年代pan>)年代pan>;年代pan>
容器年代pan>.年代pan>insertAdjacentHTML年代pan>(年代pan>`年代pan>beforeend年代pan>`年代pan>,年代pan>内容年代pan>)年代pan>;年代pan>
}年代pan>
的<年代trong>iframe.html年代trong>文件应该是这样的:
<!年代pan>文档类型年代pan>超文本标记语言年代pan>>年代pan>
<年代pan>超文本标记语言年代pan>>年代pan>
<年代pan>头年代pan>>年代pan>
<年代pan>元年代pan>字符集年代pan>=年代pan>"年代pan>utf - 8年代pan>"年代pan>/>年代pan>
<!——造型——>年代pan>
<年代pan>链接年代pan>
href年代pan>=年代pan>"年代pan>https://cdn.jsdelivr.net/combine/npm/@亚博zendeskgarden/css-bedrock年代pan>"年代pan>
rel年代pan>=年代pan>"年代pan>样式表年代pan>"年代pan>
/>年代pan>
<年代pan>链接年代pan>rel年代pan>=年代pan>"年代pan>样式表年代pan>"年代pan>href年代pan>=年代pan>"年代pan>main.css年代pan>"年代pan>/>年代pan>
年代pan>头年代pan>>年代pan>
<年代pan>身体年代pan>>年代pan>
<!——主容器——>年代pan>
<年代pan>div年代pan>id年代pan>=年代pan>"年代pan>容器年代pan>"年代pan>>年代pan>年代pan>div年代pan>>年代pan>
<!——脚本——>年代pan>
<年代pan>脚本年代pan>src年代pan>=年代pan>"年代pan>https://static.zdassets.com/亚博zendesk_app_framework_sdk/2.0/zaf_sdk.min.js年代pan>"年代pan>>年代pan>年代pan>脚本年代pan>>年代pan>
<年代pan>脚本年代pan>src年代pan>=年代pan>"年代pan>main.js年代pan>"年代pan>>年代pan>年代pan>脚本年代pan>>年代pan>
年代pan>身体年代pan>>年代pan>
年代pan>超文本标记语言年代pan>>年代pan>
安装app
作为可选步骤,您可以在Zendesk Support实例中上传并安装该应用程序作为私有应用程序。亚博
在<年代trong>add_coupon_code年代trong>文件夹,运行:
zcli应用程序:创建年代pan>
ZCLI将应用程序打包、上传并安装到Zendesk实例。亚博
在管理中心,按<年代trong>应用程序和集成年代trong>图标()。然后选择<年代trong>应用程序年代trong>><年代trong>亚博Zendesk支持应用年代trong>.
应用程序显示在当前安装的应用程序列表中<年代trong>我的应用程序年代trong>页面。