【问题标题】：Show product files on home page rather to download after payment在主页显示产品文件而不是付款后下载
【发布时间】：2016-02-07 21:55:53
【问题描述】：

在主页或其他（模板文件）上显示产品文件，而不是在付款后下载

我想在主页显示 bigcommerce 商店的可下载产品的产品文件。我该怎么做？

我创建了一个可下载的产品并通过浏览和附加该文件创建了产品文件。现在我想在主页中显示该文件以及任何模板文件 category.html 等。目前这是在成功付款后实现的。我们可以从我们的帐户（购买者帐户）下载文件

 %%Panel.AccountDownloadItems%%

我想在我的页面模板上下载这个面板。但是，当我在主页中使用此面板时，它显示文件已过期而不是下载链接。

【问题讨论】：

您能提供更多信息吗？这是相当模糊的。
Alyss 我在我的问题中添加了更多详细信息。请看一下。谢谢

标签： bigcommerce

【解决方案1】：

您可以通过对帐户订单历史记录页面执行 GET 请求来实现此目的。用户必须登录，并且您从中请求的页面必须使用 HTTPs。

下面的这个演示被插入到 default.html 页面上，它加载了过去文件下载的直接链接。您需要对此进行的唯一修改是使用您自己的 var pastOrdersUrl 网址，并确保它是 HTTPS。

演示

保存结果的 HTML 容器

<!-- Downloadable Products -->       
<div id="dlp">
  <h3> Download Previous Purchases </h3>
  <img id="dlp-loading" style="display:none;" src="http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif"/>
  <p id="dlp-login" style="display:none; color:red;"> Please login in order to download past purchases</p>
  <div id="results"></div> <!-- Hold the downloadable products -->
</div>

JAVASCRIPT

<!-- Load ES6 Promise Library to better Manage Async Requests -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.0.2/es6-promise.min.js"></script>

<script type="text/javascript">
  // If Customer Signed In:
  if ("%%GLOBAL_CurrentCustomerEmail%%") { 
    $('#dlp-loading').show(); //Show loading gif (nice effect):
    var pastOrdersUrl = 'https://store-abc123.mybigcommerce.com/account.php?action=order_status'; //Replace with your own HTTPS url.
    get(pastOrdersUrl)
      .then(function(res) {
        $(res).find('.OrderItemList > li > a').each(function() { //For each downloadable product on the order history page...
          $('#dlp-loading').show(); //Continue to show the loading gif.
          get($(this).attr('href')) //Grab it's url (via href attr) & Get content from the item download page...
            .then(function(dl_page) {
              //*** Append the Download Name and Direct Download Link To Results Container ***//
              $('#results').append('<li>' +$(dl_page).find('.DownloadItem > strong').html() +'</li>');
              $('#dlp-loading').hide();
            });
        });
      });
    } else {
      $('#dlp-login').show(); //Tell user to log-in, if not so already.
    }

  /**
   * Performs an HTTP GET request to the provided URL.
   * @param url string - The url to GET.
   * @return Promise - Fulfilled with request's response data. 
   */
  function get(url) {
    return new Promise(function(fulfill,reject) {
      $.ajax({
        url: url,
        success: function(res) {
          fulfill(res);                   
        }
      });
    });
  }
</script>

视频演示： http://screencast.com/t/8fZmSQVl
获取每个下载 url 的请求都是异步发生的，所以非常快。希望这会有所帮助:-)

【讨论】：

【解决方案2】：

很遗憾，您无法按照您在主页上想要的方式使用该面板。面板的功能受您尝试使用它们的页面的限制。

您可以通过使用 Web 服务访问 API 来获取文件来实现此目的。您需要将信息从店面传递到 Web 服务，以便它知道哪些文件可能可用。这可能包括最近的订单号，或者更容易显示的人的电子邮件（如果他们已登录）。

主页加载 -> 确定客户登录电子邮件 -> 脚本异步向 Web 服务发送请求以识别相关下载链接 -> Web 服务使用电子邮件命中 API 以查找订单 -> 过滤下载 -> 识别可下载链接 - > 将信息传递回脚本以加载。

希望能提供一些清晰的信息。

【讨论】：

如果我想在产品页面显示产品文件。我可以通过面板或其他变量来执行此操作吗？
@pank 还没有，使用 Stencil 你也许可以（目前未发布）：https://stencil.bigcommerce.com/docs/product-resources#DownItem 同时你可以复制和粘贴我的客户端解决方案，当然它会显示all 文件为客户下载。您可以与我的解决方案进行字符串比较以过滤相关产品，或者如前所述，您可以使用 API 查询产品 ID (%%GLOBAL_ProductId%%) + 过去的客户订单（通过与客户电子邮件关联的客户 ID (%%GLOBAL_CurrentCustomerEmail%% ))。