Portal | Homepage | Blog

How to get product data for fellow matrix items?


#1

Is there anyway to get data about sibling matrix items? I reviewed the code Donogh provided me with:
http://ws4301-4323.staging.nitrosell.com/store/advsearch.asp?submitted=1&product_id=75&output=json

I did not see any mention of “matrix” anything… Specifically, we are trying to replicate Amazon’s functionality (as seen on this page: http://www.amazon.com/Belkin-Certified-Lightning-ChargeSync-iPhone/dp/B00BCIS5I8

  • Specifically, the little boxes with the orange borders (on active selction) where you can select length and color.

In order to accomplish this, I would need to get the product image for the sibling matrix items. I figured using $.getJSON with the string above would be a good way to get that data.

So to clarify: How can I get data like image names from sibling matrix items?

If I can’t get that data, can I at least get an array of the ItemLookupCode’s of each sibling matrix items?


#2

I found this in the body tag…

<script language="javascript" type="text/javascript"><!--
    var product_pictures = [];
    var aryDim1 = [];
    var aryDim2 = [];
    var aryDim3 = [];
    var bLimitInStockPurchases = false;
    
    var arrMatrix = {"_9078":{"componentdetail1":"Black","product_image":"be-f8j023bt04blk.jpg","componentdetail2":"4 ft. (In Stock)","componentdetail3":"","product_stock":"193","product_weblinxcustomtext1":"0","product_weblinxcustomtext2":"","product_weblinxcustomtext3":"","product_weblinxcustomtext4":"","product_weblinxcustomtext5":"","product_priceweb":"11.95","product_price":"11.95","product_imageurl":"\/product_images\/18\/4301\/be-f8j023bt04blk.jpg"},"_9082":{"componentdetail1":"Black","product_image":"be-f8j023bt06inblk.jpg","componentdetail2":"6 in. (In Stock)","componentdetail3":"","product_stock":"100","product_weblinxcustomtext1":"0","product_weblinxcustomtext2":"","product_weblinxcustomtext3":"","product_weblinxcustomtext4":"","product_weblinxcustomtext5":"","product_priceweb":"11.95","product_price":"11.95","product_imageurl":"\/product_images\/18\/4301\/be-f8j023bt06inblk.jpg"},"_9076":{"componentdetail1":"Blue","product_image":"be-f8j023bt04blu.jpg","componentdetail2":"4 ft. (In Stock)","componentdetail3":"","product_stock":"93","product_weblinxcustomtext1":"0","product_weblinxcustomtext2":"","product_weblinxcustomtext3":"","product_weblinxcustomtext4":"","product_weblinxcustomtext5":"","product_priceweb":"11.95","product_price":"11.95","product_imageurl":"\/product_images\/18\/4301\/be-f8j023bt04blu.jpg"},"_9080":{"componentdetail1":"Gold","product_image":"be-f8j023bt04gld.jpg","componentdetail2":"4 ft. (In Stock)","componentdetail3":"","product_stock":"97","product_weblinxcustomtext1":"0","product_weblinxcustomtext2":"","product_weblinxcustomtext3":"","product_weblinxcustomtext4":"","product_weblinxcustomtext5":"","product_priceweb":"11.95","product_price":"11.95","product_imageurl":"\/product_images\/18\/4301\/be-f8j023bt04gld.jpg"},"_9079":{"componentdetail1":"Green","product_image":"be-f8j023bt04grn.jpg","componentdetail2":"4 ft. (In Stock)","componentdetail3":"","product_stock":"99","product_weblinxcustomtext1":"0","product_weblinxcustomtext2":"","product_weblinxcustomtext3":"","product_weblinxcustomtext4":"","product_weblinxcustomtext5":"","product_priceweb":"11.95","product_price":"11.95","product_imageurl":"\/product_images\/18\/4301\/be-f8j023bt04grn.jpg"},"_9075":{"componentdetail1":"Pink","product_image":"be-f8j023bt04pnk.jpg","componentdetail2":"4 ft. (In Stock)","componentdetail3":"","product_stock":"92","product_weblinxcustomtext1":"0","product_weblinxcustomtext2":"","product_weblinxcustomtext3":"","product_weblinxcustomtext4":"","product_weblinxcustomtext5":"","product_priceweb":"11.95","product_price":"11.95","product_imageurl":"\/product_images\/18\/4301\/be-f8j023bt04pnk.jpg"},"_9077":{"componentdetail1":"Purple","product_image":"be-f8j023bt04pur.jpg","componentdetail2":"4 ft. (In Stock)","componentdetail3":"","product_stock":"100","product_weblinxcustomtext1":"0","product_weblinxcustomtext2":"","product_weblinxcustomtext3":"","product_weblinxcustomtext4":"","product_weblinxcustomtext5":"","product_priceweb":"11.95","product_price":"11.95","product_imageurl":"\/product_images\/18\/4301\/be-f8j023bt04pur.jpg"},"_9074":{"componentdetail1":"Red","product_image":"be-f8j023bt04red.jpg","componentdetail2":"4 ft. (In Stock)","componentdetail3":"","product_stock":"100","product_weblinxcustomtext1":"0","product_weblinxcustomtext2":"","product_weblinxcustomtext3":"","product_weblinxcustomtext4":"","product_weblinxcustomtext5":"","product_priceweb":"11.95","product_price":"11.95","product_imageurl":"\/product_images\/18\/4301\/be-f8j023bt04red.jpg"},"_9073":{"componentdetail1":"White","product_image":"be-f8j023bt04wht.jpg","componentdetail2":"4 ft. (In Stock)","componentdetail3":"","product_stock":"92","product_weblinxcustomtext1":"0","product_weblinxcustomtext2":"","product_weblinxcustomtext3":"","product_weblinxcustomtext4":"","product_weblinxcustomtext5":"","product_priceweb":"11.95","product_price":"11.95","product_imageurl":"\/product_images\/18\/4301\/be-f8j023bt04wht.jpg"},"_9081":{"componentdetail1":"White","product_image":"be-f8j023bt06inwht.jpg","componentdetail2":"6 in. (In Stock)","componentdetail3":"","product_stock":"100","product_weblinxcustomtext1":"0","product_weblinxcustomtext2":"","product_weblinxcustomtext3":"","product_weblinxcustomtext4":"","product_weblinxcustomtext5":"","product_priceweb":"11.95","product_price":"11.95","product_imageurl":"\/product_images\/18\/4301\/be-f8j023bt06inwht.jpg"}};

    function updateProductSelection() {
      var key = nsc('#prodcode').val();
      var key2 = key;

      var iIndexOfUnderScore = key.indexOf('_');

      if (!iIndexOfUnderScore) {
        key2 = key.substring(1, key.length);
      }

            refreshItemData(key2, 2, 'productbody');
      
    }
     populateSelect(1,2,'9074',true);
     enablePopupBox();
     --></script>

This enables the use of the arrMatrix variable as long as the script you are calling it in renders after this part of the page…

So in the Product Page template, I can use the following:

$.each(arrMatrix, function(key, value) {

    $('[data-title="color"] [data-value="' + key + '"]').html('<img src="' + this.product_imageurl + '" alt="">');

});

We used this data to create Amazon-like selectors on our product page :smile:
http://ws4301-4323.staging.nitrosell.com/Belkin-4-Feet-F8J023BT04-RED-4'-Lightning-to-USB-Charge-%26-Sync-Cable-(Red)-Apple-MFI-Certified-Retail-BE-F8J023BT04RED/