How to set up key value pair in Prismic Repeater

[mark (Mark Doubleday)]

I was wondering what the best way to implement a key/value pair repeat area for a custom type. Here's my use case:

Each product has a 'variants' field, that contains variants of the base download URL (for instance, resolution products have 4k/1080x1920/1920x1080/1080x1080 resolutions. I'd like 'prettified' values for the frontend select group with an associated backend value. The user is selecting a variation of a product, and it is generating a pre-signed URL based on the path (product/variant/product-download-name)

How would I accomplish such a thing? Should I just use the rawText field and just make it an object? I was hoping to have something little less brittle and prone to user-error. Thanks!

[Priyanka (Priyanka Maheshwari)]

Hello @mark

Thanks for posting this question to us.

You can upload the different sizes/renditions of images to the prime media library. For the Key/Value pair on the front end, you need to create a map with the respective key-value pair for different variations. And before sending the image request to prismic. In your code, check the “key” and send the request to the corresponding “value” to prismic.

Flow:

Request for variation with the help of key-> checks the value of that key-> send the query to prismic media library for the value and URL.

I hope It answers your question. Let me know if you have any other doubt.

Thanks,
Priyanka

[mark (Mark Doubleday)]

The media is on an S3 bucket (some files are up to 100GB in size).

I have a specific structure for the variations, and I just want a way to show a 'pretty' value with an associated url safe one.

I.e. 'H.264': 'h264'

I just need a flexible way for people to add key value pairs, and I was hoping not to have to use raw html parsed because it's brittle and error-prone.

To give a more comprehensive idea: I have a Product custom type, with field like [price, sale_price, short_description, slices, on_sale, ...]. I want to add another repeater field with key value pairs, cause some products are audio products (so the variant is sample rate) and some are video (so the variants are codec/resolution). One product might have variants: { '4K': '4k', '1920 x 1080': '1920x1080', '1080(square)': '1080x1080', ...} and some might have variants: { '44.1kHz': '44khz', '48kHz': '48khz', '96kHz': '96khz', ... }

I'm going to use Object.entries to map over the entries and make those the front-end options (The prettier, non-url-encoded text) with the value being the backend value (url-safe, lowercase option). So a person selecting 4K/ProRes will be getting filename_4k_prores.zip file. I don't want a giant list of combinations to replace somewhere, as some have periods, some have letters/words omitted. I just want a key and a value where I can show the keys on the frontend, and use the values on the backend. Pretty common scenario, IMO.

[Priyanka (Priyanka Maheshwari)]

Hello @mark,

Thank you for more clarification on this requirement.

As per my understanding, you want to store key-value pairs in a type of map in Prismic, which you can retrieve on the front end. We do not have the direct map field in Prismic.

I can think of one workaround, but this is not a perfect solution but can be an option to get the expected results.

We have a Rich field in Prismic that stores values in a format. Let us say you want to store a string like:

key: 'one', val: 'sample1'
key: 'two', val: 'sample2'

And you can get it on the front end in Rich text and create a js function on it.

Thanks,
Priyanka

[mark (Mark Doubleday)]

Yeah - That's exactly what I ended up doing. It's just weird, cause it's completely up to the user to understand how to properly form a JSON object, and I really wanted to specify a specific set of possible keys with mapped values that they could add/subtract. Just doesn't really seem like something that's possible without being incredibly complex. I'm certainly open to ideas though.

[Priyanka (Priyanka Maheshwari)]

Hello @mark

I understand that the suggested idea is complex and not perfect. But That's something with different way is not possible at the moment. But I will add this to the feature request for future improvement.

Thanks,

Priyanka