ProductOptions

Commit for @Deepak from @James

• change onOptionClick to onChange
• fix home page product options / sku selection (pass in onOptionChange - this was only passed in plp @deepak)
• pass down item attribute alongside product
• format tab
• cleanup unused code
• (MINOR) optimize toProductOptions
• add docs linking in ProductBlock renderSku to other places
• add commnts for renaming productList which should be productOptionsList
• fix missing onChange prop being passed in SelectOption inside ProductOptions
  • !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  • THIS MAKES IT ONLY ABLE TO CHANGE 1X SINCE NEW SKU ARE RETURNED, NEEDS FIXING, MAY NEED FIXING
  • !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Animation

• https://stackoverflow.com/questions/11496734/add-a-background-image-png-to-a-svg-circle-shape

Description

this is the list of colors/images/sizes/fits ReactComponent for StockKeepingUnitChoices (SKU Props -> UI)

Pseudo Code / Outline / Flow

  sku1: color: red, size: 10, fit: 'm'
  sku2: color: blue, size: 5, fit: 's',
  sku3: color: yellow, size: 20, fit: 's'
  sku4: color: pink, size: 40, fit: 'm'
  sku5: color: red, size: 50, fit: 'm'

forEach
  key: color
  value: red


  color, size, fit
  red    10     m


autoSelectSkuForValue(key, value) {
  // .find will return the first one it finds that matches
  const firstSkuMatching = this.skus.find(sku => {
    // value matches the key we are selecting
    return sku.skuinfo[key] === value
  })

  this.currentlySelectedSku = firstSkuMatching
}
updateSkusForSelectedValue(key, value) {
  // set the keyvalue in our map
  this.currentlySelectedSkuProps[key] = value

  this.skus.forEach(sku => {
    const hasValidValue = sku.skuinfo[key] === value

    if (hasValidValue) {
      sku.isSelectAble = true
    }
    else {
      sku.isDisabled = true
    }
  })
}

selectSkuValue(key, value) {
  this.updateSkusForSelectedValue(key, value)
  this.autoSelectSkuForValue(key, value)
}


.selectSkuValue('color', 'red')