如何在确认屏幕上访问 Big Commerce 上的订单数据

Question

我需要向包含订单详细信息的订单确认页面添加一些 JavaScript。虽然我可以通过 BigCommerce 全局变量访问订单 ID，但我不知道如何将其余订单详细信息放入我的 JavaScript.

例如，我可以访问 BigCommerce order_id 全局 %%GLOBAL_OrderId%% 并在 JavaScript 警报中使用它，但我还需要访问以下内容：

1. 总订单
2. 订单税
3. 订单发货
4. 订单邮编

然后为订单中的每个产品

1. product_id
2. unit_price
3. 数量

有这些全局项目，但是当我尝试访问它们时它们是空白的，我想我需要循环浏览购物车内容。

1. %%GLOBAL_ProductModel%%
2. %%GLOBAL_ProductPrice%%
3. %%GLOBAL_ProductQty%%

我已经阅读了我能找到的所有文档。谁能告诉我如何实现这一目标。我需要这些值，以便我可以将它们传递给第三方 JS 函数以供使用。所有这些都在等待并准备就绪，但我无法从 Big Commerce 模板系统中获取数据。数据就在那里，在 order.html 模板页面上，正如社交分享面板读取的那样，但我还是看不到社交分享片段是如何访问它的。

Answer 1

我专门为您创建了一个 hacky 脚本，用于提取产品数据（以及一些订单详细信息）。

它解析来自 %%GLOBAL_ConversionCode%% 模板变量的数据，因此这个脚本应该插入到 order.html 中紧跟在 %%GLOBAL_ConversionCode%% 变量之后。

具体来说，%%GLOBAL_ConversionCode%%输出到：

<!-- Include the conversion tracking code for all analytics packages -->
<!-- Start conversion code for analytics_googleanalytics -->
<script type="text/javascript">
  if(typeof(pageTracker) != 'undefined') {
    pageTracker._addTrans(
      '196',
      'store-name',
      '0.00',
      '2.12',
      '1.92',
      'Austin',
      'Texas',
      'United States'
    );

    pageTracker._addItem(
      '196',
      '2004',
      'TAKE YOUR TIME: Sweet Body Butter',
      '',
      '24.96',
      '1'
    );

    pageTracker._trackTrans();
  }
</script>

---

解决方案：

<script>
    //-------------- Main --------------//

    //** Create the order data array from analytics script **//
    var data = parseAnalyticsData(getAnalyticsScript());
    //console.log(data);

    /**
     * Retrieve the order details as an object, properties are:
     * id          - The order ID.
     * shipping    - The order shipping cost. 
     * tax         - The order tax cost. 
     * shippingTax - The order shipping tax cost.
     * city        - The order shipping city.
     * state       - The order shipping state. 
     * country     - The order shipping country.
     */
    var orderDetails = getOrderDetails(data);

    console.log("Order ID = %d", orderDetails.id);
    console.log("Order shipping city = %s", orderDetails.city);
    console.log("Order subtotal = %f", orderDetails.subtotal);

    /**
     * Retrieve the order product details, as an array of product objects. 
     * Properties are:
     * id          - The product ID. 
     * description - The product description.
     * tax         - The product tax cost.
     * price       - The product price per product. 
     * qty         - The product quantity purchased. 
     */
    var products = getOrderProducts(data);

    //** Loop through the products array to access each product **//
    console.log("Total number of products = %d", products.length);
    for (x=0; x<products.length; x++) {
      console.log("--------");
      console.log("Item # ", x+1);
      console.log("Product ID = %f", products[x].id);
      console.log("Product QTY = %f", products[x].qty);
      console.log("Product Price = %f", products[x].price);
      console.log("--------");
    }



    //-------------- Functions --------------//

    /**
     * Parses the DOM to retrieve the order data analytics script.
     */
    function getAnalyticsScript() {
      var scripts = document.getElementsByTagName('script');
      var thisScriptTag = scripts[scripts.length - 2];
      var data = thisScriptTag.textContent || thisScriptTag.innerText;
      return data;
    }

    /**
     * Parses the raw analytics script element to remove all script
     * text, and parse just the order related data into an array.
     * @param script <String> - The raw order analytics script.
     * @return <mixed> - Array containing the order data. 
     */
    function parseAnalyticsData(data) {
      String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.split(search).join(replacement);
      };
      // This is hacky, and probably inefficient, but it removes all
      // script related text, so the end result is just a comma separated
      // array of the order and product data. 
      data = data.replace("if(typeof(pageTracker) != 'undefined') {", '');
      data = data.replaceAll( 'pageTracker._addTrans(', '');
      data = data.replaceAll( ' pageTracker._trackTrans();', '');
      data = data.replaceAll( 'pageTracker._addItem(', '');
      data = data.replaceAll(');', '');
      data = data.replace('}', '');
      data = data.replace( /\n/g, ",").replaceAll( ",,",",");
      data = data.replace(/\s/g,'');
      data = data.split(',');
      data = cleanArray(data); // Remove all empty values from array. 
      return data;
    }

    /**
     * Removes all empty data from array.
     * @param array <mixed> - The array to clean. 
     */
    function cleanArray(array) {
      var newArray = new Array();
      for (var i = 0; i < array.length; i++) {
        if (array[i]) {
          newArray.push(array[i]);
        }
      }
      return newArray;
    }

    /**
     * Parse Analytics Data for Order Details
     * @param data <mixed> - The order analytics data.
     * @return <mixed>     - Object containing the order details. 
     */
    function getOrderDetails(data) {
      String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.split(search).join(replacement);
      };
      return {
        id          : parseFloat(data[0].replaceAll("'",'')),
        subtotal    : ( parseFloat(data[2].replaceAll("'",'')) - (parseFloat(data[3].replaceAll("'",'')) + parseFloat(data[4].replaceAll("'",'')) ) ),
        total       : parseFloat(data[2].replaceAll("'",'')),
        tax         : parseFloat(data[3].replaceAll("'",'')),
        shipping    : parseFloat(data[4].replaceAll("'",'')),
        city        : data[5].replaceAll("'",''),
        state       : data[6].replaceAll("'",''),
        country     : data[7].replaceAll("'",'')
      }
    }

    /**
     * Parse Analytics Data for All Order Product Details.
     * @param data <mixed> - The order analytics data.
     * @return <mixed>     - Array containing individual product details.
     */
    function getOrderProducts(data) {
      String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.split(search).join(replacement);
      };
      var counter = -1;        // Keep index of details per product.
      var productsArray = []; // Init empty array to hold all products. 
      var product = {};       // Init empty object to hold single product data. 
      //** Product data starts at index 8 **//
      for (x=8; x<data.length; x++) {
        counter++;
        switch (counter) {
          case 1:
            product.id = parseFloat(data[x].replaceAll("'",''));
            break;
          case 2:
            product.description = data[x].replaceAll("'",'');
            break;
          case 3:
            product.tax = parseFloat(data[x].replaceAll("'",''));
            break;
          case 4:
            product.price = parseFloat(data[x].replaceAll("'",''));
            break;
          case 5:
            product.qty = parseFloat(data[x].replaceAll("'",''));
            counter = -1;                 // reset counter
            productsArray.push(product); // push product to products array
            product = {};
            break;
        }
      }
      return productsArray;
    }

 </script>