2016-02-03 19 views
2

顯示產品的文件,而付款後下載顯示產品的文件,而付款後下載主頁或其他(模板文件)上

我想顯示在首頁的Bigcommerce商店下載的產品的產品文件。我怎樣才能做到這一點?

我創建了一個可下載的產品,並通過瀏覽並附加該文件創建了產品文件。現在我想在主頁和任何模板文件category.html等文件中顯示該文件。目前這是通過suceessfull付款後實現的。在我們可以下載該文件形成我們的帳戶(帳戶購買)

%%Panel.AccountDownloadItems%% 

我想這個下載面板,在我的頁面模板。但是,當我在主頁中使用此面板時,它顯示文件已過期而不是下載鏈接。

+0

你能提供更多信息嗎?這相當模糊。 – Alyss

+0

Alyss我在我的問題中添加更多細節。 Plz看看。謝謝 – pank

回答

0

不幸的是,您不能像您打算在主頁上那樣使用該面板。面板的功能受到您嘗試使用它們的頁面的限制。

您可能會通過使用Web服務來點擊API來抓取文件。您需要將信息從商店前端傳遞到Web服務中,以便知道哪些文件可用。這可能包括最近的訂單號,或者更容易表面化的,如果他們登錄的人的電子郵件。

主頁加載 - >客戶登錄電子郵件確定 - >腳本異步發送請求到Web服務以識別相關的下載鏈接 - > Web服務使用電子郵件命中API以查找訂單 - >過濾器下載 - >標識可下載鏈接 - >將信息傳遞迴腳本加載。

希望提供一些清晰。

+0

如果我想在產品頁面顯示產品文件。我可以通過面板或其他變量來做到這一點。 – pank

+1

@ pank尚未與模具,你可能能夠雖然(目前尚未發佈):'https:// stencil.bigcommerce.com/docs/product-resources#DownItem' 您可以複製和粘貼我的客戶端解決方案同時,授予它將顯示客戶的所有文件下載。您可以使用我的解決方案進行字符串比較以過濾相關產品,或者如前所述,您可以使用API​​根據產品ID('%% GLOBAL_ProductId %%')+過去的客戶訂單(通過與客戶電子郵件關聯的客戶ID ('%% GLOBAL_CurrentCustomerEmail %%'))。 –

1

您可以通過對帳戶訂單歷史記錄頁面執行GET請求來實現此目的。用戶必須登錄,並且您請求的頁面必須使用HTTP。

下面的這個演示被插入在default.html頁面上,它加載了直接鏈接到過去的文件下載。您需要做的唯一修改是使用您自己的URL作爲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的請求都是異步發生的,所以它非常快。希望這有助於:-)

相關問題