RFC - CLD Product Gallery

[Baroshem]

Hey there and welcome to this RFC about Product Gallery component powered by Cloudinary!

Below, I have gathered information about the current implementation in Nuxt CLD and how it could be extracted into generic Cloudinary URL Loader / Helpers.

What is Cloudinary Product Gallery widget?

Cloudinary's Product Gallery is an interactive user interface for displaying your products to your users on your website or application. The Product Gallery requires only pure JavaScript to integrate, is easy to use within any web development framework, and eliminates the need to develop an in-house interactive media gallery with just a few lines of code.

You can read more about it here

Usage

Users can use Product Gallery in Nuxt (Vue) as following:

<script setup lang="ts">
const mediaAssets = [
  { tag: 'electric_car_product_gallery_demo' }, // by default mediaType: "image"
  { tag: 'electric_car_product_gallery_demo', mediaType: 'video' },
  { tag: 'electric_car_360_product_gallery_demo', mediaType: 'spin' },
]
</script>

<template>
  <CldProductGallery
    :media-assets="mediaAssets"
    cloud-name="demo"
  />
</template>

Users can also pass some optional params like following:

<script setup lang="ts">
const mediaAssets = [
  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
];

const params = {
  sortProps: {
    source: "public_id",
    direction: "asc",
    videoBreakpoint: 200,
    carouselOffset: 6
  }
}
</script>

<template>
  <CldProductGallery
    :media-assets="mediaAssets"
    :params="params"
  />
</template>

Extracting code to Cloudinary Community Packages

The code for the CldProductGallery component is quite small and you can see it here.

The only code I can see that could be extracted is the code responsible for parsing the options from props:

    const options = Object.fromEntries(
      Object.entries(props).filter((elem) => {
        if (typeof elem[1] === 'object') {
          return Object.keys(elem[1]).length ? elem : false
        }

        return Boolean(elem[1])
      }),
    )

Apart from that, the code is quite framework oriented so we won't be able to move it easily.

Summary

This was the implementation that I have created for Nuxt so let's consider it as a beta which we can modify to support more examples and be more usable in general. I am open for any feedback from you :)

[colbyfayock]

@Baroshem thanks for putting this together, have a few initial thoughts on the widget API

• mediaAssets - I personally don't love this name as a prop, however i recognize that's what the API uses, so I suspect it makes sense to follow the pattern of the widget itself. similarly with mediaType vs type as given the user already knows they're working with a "media" widget, its redundant to re-specify everything as such
• cloud-name - I'd love to see this migrated to the config prop pattern that we use with all of the other components. particularly in 2 parts, 1) using the globally defined cloud name 2) just being able to have a consistent interface. probably no reason you couldnt keep cloud-name for backwards compat and convenience, but it would be good that people have a similar expectation everywhere, esp if maybe they define a single config object that they share across components
• params - similar to other components, would love to see some of these lifted up to top-level props
• in the future, to the last point, I'd love to see some of the parameters have reformatted surfaces, for instance, for carousel parameters, instead of a single option for each point, we could have a carousel prop with:

carousel={{
  location
  offset
  style
}}

• will be good to get all of the core gallery Types written out so that we can have that in the shared /types location - i can create an Issue there and perhaps someone will want to knock that out during Hacktoberfest: [Feature] Write out Typescript Types for Cloudinary Product Gallery Widget cloudinary-community/cloudinary-util#199

with the above in mind, I think having a getProductGalleryProps function would be great similar to getVideoPlayerProps!

wdyt?

[ghostdevv]

+1 this & to abstracting the logic further to also include the handling the props for the fn