演示

Question

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

想在主页显示bigcommerce商店的可下载商品的商品File。我怎么能这样做？

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

 %%Panel.AccountDownloadItems%%

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

Answer 1

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

下面的演示已插入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的请求都是异步发生的，所以它非常快。希望这会有所帮助： - ）

Answer 2

不幸的是，您不能按照您在主页上的方式使用该面板。面板的功能受限于您尝试使用它们的页面。

您可以通过使用Web服务命中API来获取文件。您需要从商店前端将信息传递到Web服务，以便知道可用的文件。这可能包括最近的订单号，或更容易表面的，如果他们登录的人的电子邮件。

首页加载 - ＆gt;确定客户登录电子邮件 - ＆gt;脚本异步向Web服务发送请求以识别相关的下载链接 - ＆gt;网络服务通过电子邮件点击API查找订单 - ＆gt;过滤到下载 - ＆gt;识别可下载链接 - ＆gt;将信息传递回脚本加载。

希望提供一些清晰度。

在主页上显示产品文件，而不是在付款后下载

2 个答案:

演示