Add bin number for accessory product onto the packing slip - Bigcommerce

Question

I have exhausted all the resources I could think of, between their community forum and their support staff, I can't get a hint.

The Scenario: A person chooses a product to buy. When they click 'add to cart', they are presented with a list of options, containing other products that they can choose from to bundle with the original product. The product they choose becomes sort of like an accessory to the main product.

When I go to print the packing slip, all the information for the main product is visible, but only a small description for the attached product can be seen. In this example I bought a Bottle, and added a Journal as my accessory:

The attached product, just like the main product, IS an actual product that you can buy separately on its own, but in this case, it is added on as an accessory. In the image you can see the quantity, SKU, and bin# for the main product, but there isn't a bin for the accessory product.

The following snippet displays the product information onto the packing slip. (this is the original snippet)

<tr>
    <td class="ProductBinNumber">%%GLOBAL_ProductBinNumber%%</td>

    <td class="ProductSku">%%GLOBAL_ProductSku%%</td>

    <td class="ProductDetails">
        %%GLOBAL_ProductName%%        
        <div class="ProductAttributes" style="%%GLOBAL_HideAttributes%%">
            %%GLOBAL_ProductAttributes%%
        </div>
        <div class="ProductVariationOptions"  style="%%GLOBAL_HideVariationOptions%%">
            %%GLOBAL_ProductOptions%%
        </div>
        <div class="ProductConfigurableFields" style="%%GLOBAL_HideConfigurableFields%%">
            %%GLOBAL_ProductConfigurableFields%%
        </div>
        <div class="ProductGiftWrapping" style="%%GLOBAL_HideGiftWrapping%%">
            %%GLOBAL_ProductGiftWrapping%%
        </div>
        <div class="ProductEventDate" style="%%GLOBAL_HideEventDate%%">
            %%GLOBAL_ProductEventDate%%
        </div>
    </td>

    <td class="ProductQuantity">%%GLOBAL_ProductQuantity%%</td>
</tr>

I have tried adding different store-wide variables to different positions within this table, but no matter what I do, the information that gets returned is the information for the main product - my only goal here is to get the bin# for the accessory product to display on this sheet.

I should mention that I did the same thing with product thumbnails, displaying them only for certain products, but the only way I figured out how to do it, was searching through text to find matches, and appending hardcoded image url's to a div within the rows that had the matching text....not ideal especially when your dealing with a lot of products - here is my revised HTML, followed by the JS that adds the logo to the appropriate product (definitely iteration one of test code):

<span id="prod-tab-results">%%GLOBAL_ProductsTable%%</span>
<!--using JS to grab the text from this variable-->


 <tr>
    <td class="ProductBinNumber" style="width: 25px;">%%GLOBAL_ProductBinNumber%%
    </td>

    <td class="ProductBinNumber2">
        <img id="logo-src-img-tag" src="" style="width: 55px; border: 1px solid black;"/>
        <!--This is where the JS will append the img path to src-->
    </td>

    <td class="ProductSku">%%GLOBAL_ProductSku%%</td>

    <td class="ProductDetails">
        %%GLOBAL_ProductName%%
        <div class="ProductAttributes" style="%%GLOBAL_HideAttributes%%">
            %%GLOBAL_ProductAttributes%%
        </div>
        <div class="ProductVariationOptions" style="%%GLOBAL_HideVariationOptions%%">
            %%GLOBAL_ProductOptions%%
        </div>

        <div class="ProductConfigurableFields" style="%%GLOBAL_HideConfigurableFields%%">
            %%GLOBAL_ProductConfigurableFields%%         
        </div>

        <div class="ProductGiftWrapping" style="%%GLOBAL_HideGiftWrapping%%">
            %%GLOBAL_ProductGiftWrapping%%
        </div>
        <div class="ProductEventDate" style="%%GLOBAL_HideEventDate%%">
            %%GLOBAL_ProductEventDate%%
        </div>         
    </td>
    <td class="ProductQuantity">
        %%GLOBAL_ProductQuantity%%
    </td>
</tr>

And the JS simplified for your understanding:

  var itemsInThisOrder = $.trim($('span#prod-tab-results').text());

  var logoSrcArray = ["http://PATH1",
  "http://PATH2",
  "http://PATH3",
  "http://PATH4",
  "http://PATH5"];

  var logoTextArray = ["[Sample]ProductText1", 
  "[Sample]ProductText2",
  "[Sample]ProductText3",
  "[Sample]ProductText4",
  "[Sample]ProductText5"];

if ( itemsInThisOrder.indexOf("[Sample]") >= 0 ) {
    console.log("there is an accesory product that needs a logo and bin#");

    for (var i=0; i < 10; i++) {
        var theProductText = $.trim($('.ProductSku').eq(i).text());

        for (var z=0; z < logoTextArray.length; z++) {          
            if ( theProductText === logoTextArray[z] ) {
                $('.ProductBinNumber2').eq(i-1).children('img').attr("src", logoSrcArray[i]);
            }
        } 
    }

}

I'm thinking that there MUST be a way to accomplish this (bin #'s, not pictures) using Bigcommerce's variables, but I have exhausted my resources within their forum and support. As you can see, this might be okay for a 5 product demo, but it's pretty much one of the worst ways I can think of to go about doing this, unfortunately, it's the only way I can think of.

I appreciate any time and help, thank you.