6

我有一个购物车，我想在其他用户网站上嵌入一个小部件/iframe，我看到了三种方法，每种方法都有缺点。以下是从估计最多到最少工作的选项。

  1. 在 javascript 小部件中重新创建交互式购物车 UI，然后使用 AJAX 将值传递给服务器脚本，变量被传递到主站点，当用户单击“结帐”时，用户将被重定向到主购物车站点，其中的变量由输入的内容填充小部件。

    • 优点：完整的经验
    • 缺点：完成创建 UI 和 AJAX 请求的大部分工作。

  2. 以某种方式检测用户是否通过 iframe 进入购物车，如果是这种情况，当用户单击“结帐”时，备用代码会打开新窗口，将用户重定向到安全页面并通过 AJAX 从购物车中获取变量以填充最终结帐。

    • 优点：工作量中等，必须执行 AJAX 请求才能从购物车中获取变量以填充最终结帐
    • 缺点：我们是否可以轻松检测是否正在从另一个站点的 iframe 中的用户访问站点？

  3. 在 iframe/widget 中完成整个结帐过程。

    • 优点：工作量最少，只需将购物车嵌入 iframe
    • 缺点：不会在浏览器中显示 https 用户可能不愿意购买

什么是最好的选择？

4

3 回答 3

4

如果您可以提供更多信息，也许我可以为您提供更好的选择。首先，你用什么（语言/框架）构建了这个应用程序？另外，您是否会说您的应用程序的功能与 Shopify 的功能相似，因为您允许用户通过您的服务托管电子商务网站？如果没有，请告诉我们更多关于您的申请的信息。

这是对您提供的选项的快速回复。

选项1：我认为唯一真正的选择。无论您是将购物车嵌入特定的 iframe 中，还是将其作为模板的一部分呈现到用户页面上，您都应该将客户导航到您的主站点以完成结帐过程。或者至少给他们很多屏幕空间来使用（例如一个相当大的模式）。

选项2：很乱。您可以通过附加 url 参数来判断请求是否来自远程表单（如 iframe）。但是采用您建议的方法并没有太大意义。

选项 3：太重了，除非您采用我在回应选项 1 时提到的模态方法。

话虽如此，如果您正在构建像 Shopify 这样的应用程序，您应该能够为每个用户的网站构建一个模板，该模板有一个部分专门用于显示与当前客户会话相关的购物车。这种方法不需要 iframe 或小部件。但同样，这一切都取决于您的应用程序的用例。

于 2012-08-27T09:48:36.817 回答
3

如果您对选项 2 的唯一关注是检测您的内容是否在 iframe 中加载，您可以使用 JavaScript 执行此操作，方法是使用“top.frames.length”或“top === self”。

例如，您可以使用以下命令显示或隐藏不同的条件表单内容或不同的提交按钮：

if (top.frames.length == 0) {
    // Show content if not embedded in an iframe.
    document.getElementById('embedded-content').style.display = "none";
    document.getElementById('unembedded-content').style.display = "block";
}
else {
    // Show content if embedded in an iframe.
    document.getElementById('embedded-content').style.display = "block";
    document.getElementById('unembedded-content').style.display = "none";
}
于 2012-09-02T22:22:47.147 回答
2

正如您所说，第一个选项在用户体验方面是最好的，并且最有可能实现最高的转化率。与下一个最佳解决方案相比，转化率有多好无法客观衡量，因为它涉及经常性客户、您自己的品牌名称、产品种类等。由于转化率将直接影响您（和您的公司），因此明智的做法是先进行估算，看看您所付出的努力在短期和长期内是否值得。

第二种选择是甜蜜的中间地带；您仍然可以获得品牌认可，客户将获得一些安全保证（通过地址栏）；(i) 帧检测很容易通过一个简单的 JavaScript 比较来完成：top === window. 但是，您正在失去连续性，因此可能会失去一些转换。如果这种风险是可控的，我会在短期内选择这个选项。

无法通过绿色锁直接查看安全证书，这使得第三个选项最不可取。然而，并非一切都丢失了。通过巧妙地使用图像，您仍然可以获得最终用户的一些信任，如此图像中所述，这是Smashing Magazine的一篇精彩文章的一部分。

您的决定应基于：

  1. 短期内可以做什么
  2. 长期应该做什么
  3. 安全的视觉提示对我的潜在客户有多重要
  4. 花费在任一解决方案上的时间/金钱与收入（盈亏平衡分析）
于 2012-09-03T06:43:33.397 回答