function prepareVariantsImages(variants, optionKey) {
  // Go through the variants and reduce them into non-redundant
  // images by optionKey. Output looks like this:
  // {
  //   [optionKey]: image
  // }
  const imageDictionary = variants.reduce((dictImages, variant) => {
    dictImages[variant[optionKey]] = variant.image;
    return dictImages;
  }, {});

  // prepare an array of image objects that include both the image
  // and the optionkey value.
  const images = Object.keys(imageDictionary).map((key) => {
    return {
      [optionKey]: key,
      src: imageDictionary[key],
    };
  });

  return images;
}
/*
  prepareVariantsImages()

  This function distills the variants images into a non-redundant
  group that includes an option 'key' (most likely color). The
  datastructure coming into this function looks like this:

  {
    "shopifyId": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8zMTc4NDQ4MTAzMDE4OA==",
    "image": image1,
    "color": "Red",
    "size": "Small"
  },
  {
    "shopifyId": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaW1l2C8zMTc4NDQ4MTAzMDE4OA==",
    "image": image1,
    "color": "Red",
    "size": "Medium"
  },

  And condenses them so that there is only one unique
  image per key value:

  {
    "image": image1,
    "color": "Red",
  },
*/
prepareVariantsImages()
This function distills the variants images into a non-redundant
group that includes an option 'key' (most likely color). The
datastructure coming into this function looks like this.



And condenses them so that there is only one unique
image per key value.


prepareVariantsImages () This function distills the variants images into a non - redundant group that includes an option ' key ' ( most likely color ) . The datastructure coming into this function looks like this . And condenses them so that there is only one unique image per key value .
function prepareVariantsImages(variants, optionKey) {
  const imageDictionary = variants.reduce((dictImages, variant) => {
    dictImages[variant[optionKey]] = variant.image;
    return dictImages;
  }, {});
  const images = Object.keys(imageDictionary).map((key) => {
    return {
      [optionKey]: key,
      src: imageDictionary[key],
    };
  });
  return images;
}
function prepareVariantsImages ( variants , optionKey ) { const imageDictionary = variants . reduce ( ( dictImages , variant ) => { dictImages [ variant [ optionKey ] ] = variant . image ; return dictImages ; } , { } ) ; const images = Object . keys ( imageDictionary ) . map ( ( key ) => { return { [ optionKey ] : key , src : imageDictionary [ key ] , } ; } ) ; return images ; }
prepareVariantsImages()
This function distills the variants images into a non-redundant
group that includes an option 'key' (most likely color).
prepareVariantsImages () This function distills the variants images into a non - redundant group that includes an option ' key ' ( most likely color ) .
// Go through the variants and reduce them into non-redundant // images by optionKey. Output looks like this: // { //   [optionKey]: image // } // prepare an array of image objects that include both the image // and the optionkey value.