Cloudinary Product Gallery

Comments

1 comment

  • Avatar
    Thomas Gurung

    Hi Rob,

    The widget does not natively support this currently but there is a workaround you could implement using our Client-side list API (https://cloudinary.com/documentation/advanced_url_delivery_options#client_side_asset_lists) which lists all the assets in a given tag (e.g. https://res.cloudinary.com/<your_cloud_name>/image/list/25697194M-JJE90XX.json). Per notes, by default, the list delivery type is restricted. To enable it, open the Security settings in your Management console, and clear the Resource list item under Restricted image types. You may want to clear this option only temporarily, as needed. Alternatively, you can bypass this (and any) delivery type restriction using a signed URL.

    Using this you can retrieve the total number of images in a particular tag and use that to dynamically assign a startIndex value to each swatch.

    Here is an example I did: https://jsfiddle.net/tommygrg/83a297po/575/

    So what I've done is:

    • First, assigned contextual data called color_code to the images which correspond to their colour and then added all the required tags to an array called tagList
    • Then I have a loop that goes over this array where I do a GET request to the list API via the httpGetAsync function which then sends the json response to resHttp function
    • In the resHttp function, I calculate the total number of images in that particular tag, add that total to allTagValue array, this array keeps track of the total number of images in all the tags which I later use to calculate the correct startIndex
    • Next, I retrieve the color hex value, when the loop initially starts we know startIndex is 0 so I assign that value to the first button and then inject the relevant HTML code to the div with the id btnArea with the appropriate color id
    • Same logic applies after the first button is created but only difference this time is to get the correct startIndex, I remove the last element from allTagValue array, assign it to a new array called newTagArray, add all the values in the newTagArray and finally use this value as the startIndex, this should then correspond to the correct coursel/image in the widget

    Please let me know if you have any questions and hope this helps.

    Kind Regards,
    Thomas

    0
    Comment actions Permalink

Please sign in to leave a comment.