嵌入式挂件功能

多会支持使用 js 的方式将购票页面嵌入到网页中,为活动官网提供无缝式的购票体验。


# 使用方式:

在页面底部加入:

<script src="https://wx.duohui.co/js/embed.js"></script>

在购票链接的 a 标签元素上加入 duohui-button 的类名(class),例如:

<a href="https://wx.duohui.co/event/1161" class="duohui-button">立即购票</a>

如需指定票种,请在链接尾部加入 ?ticket=[TICKETID],例如:

<a href="https://wx.duohui.co/event/1161?ticket=1" class="duohui-button">立即购票</a>

如需打开兑换窗口,请在链接 query 中加入 openCoupon,例如:

<a href="https://wx.duohui.co/event/1161?ticket=1&openCoupon" class="duohui-button">立即购票</a>

# 注意事项:

  • 如果无法确定 eventId 和 ticketId 请联系客服;

  • 若不方便修改购票链接的类名,请使用以下方式:

    将现有的类名作为添加到 embed.js 之后作为后缀,例如:

  <a href="https://wx.duohui.co/event/1161" class="my-action-button">立即购票</a>
  ...
  <script src="https://wx.duohui.co/js/embed.js?class=my-action-button"></script>

# 配合 JWT 实现统一登录:

  • 参照 JWT 文档实现 JWT Token 生成业务(将自有系统的用户信息生成成 JWT Token 传入);

  • 自行实现一个跳转到购票界面的接口 [JWT Gateway]:

    此接口判断用户当前的登录状态, 若已经登录,则根据用户信息生成 JWT Token 并将其附加到目标网址(例如:https://wx.duohui.co/event/1161)的 Query 中,将页面重定向到:https://wx.duohui.co/embed/event/1161?token={token}(请特别注意,此时的目标路径为:https://wx.duohui.co/embed/event/{eventId})

    若未登录,则先展示登录,要求用户先登录。在登录后,按上述逻辑重定向到指定地址。(活动页面亦可只在用户已登录时展示购票按钮,[JWT Gateway] 无需实现未登录的情况。)

    对于需要用户登录的情况,需要在 [JWT Gateway] 的网页中使用如下代码,来通知活动页面成功加载了登录页:

     $(window).load(function () {
        window.parent.postMessage('ready', '*')
      })
    
  • 完成上述 JWT Gateway 后,将此页面的 URL 写入到 "duohui-button" 的 a 标签中:

    <a href="https://wx.duohui.co/event/1161?ticket=1&openCoupon" jwt-gateway="https://mydomain.com/user/duohui-jwt?event=1161&ticket=1&openCoupon" class="duohui-button">立即购票</a>
    

最后更新于 3 years ago

这篇文章是否解决了你的问题?

😀😟