Any way to add a key value pair object in Prismic.io Custom type?

Question

Prismic's documentation is a bit fuzzy, and their community form isn't really being super responsive, so I figured I'd also ask here. In the Custom Type I have (Product), I'm hoping to create a Group repeater of (variants) that I can use to specify 'versions' of the product (e.g. A video pack will have resolution and codec as different options). I want the frontend, 'pretty' version to be displayed on the frontend, and I want url-safe, lowercase values for the actual backend.

Example:

variants: {
  'H.264': 'h264',
  'ProRes': 'prores',
  'MP4': 'mp4'
}

Another example:

variants: {
  '44.1kHz': '44khz',
  '48kHz': '48khz',
  '96kHz': '96khz
}

The resolution one is where it gets a bit complicated, as with the above examples, I could just use a .replace(/\s/g, '_').replace(/./g, '').toLowerCase() to 'hack' it to backend-usable code (it would match). However, for resolutions, it gets a bit more complicated:

variants: {
  '1920 x 1080': '1920x1080',
  '1080 x 1920': '1080x1920',
  '1080 (Square)': '1080x1080',
  '4K': '4k'
}

I figured if I could find a way to make a repeatable map of key/values in Prismic, I can create whatever variant I need to and have it abstract enough to work across any future variant.

Here is my json from the custom type:

{
  "Main" : {
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1",
        "label" : "Title",
        "placeholder" : "Product Title"
      }
    },
    "uid" : {
      "type" : "UID",
      "config" : {
        "label" : "UID",
        "placeholder" : "The unique identifier"
      }
    },
    "category" : {
      "type" : "Link",
      "config" : {
        "select" : "document",
        "customtypes" : [ "category" ],
        "label" : "Category",
        "placeholder" : "Product Category"
      }
    },
    "featured_image" : {
      "type" : "Image",
      "config" : {
        "constraint" : { },
        "thumbnails" : [ {
          "name" : "thumb",
          "width" : 150,
          "height" : null
        }, {
          "name" : "small",
          "width" : 300,
          "height" : null
        }, {
          "name" : "medium",
          "width" : 600,
          "height" : null
        }, {
          "name" : "large",
          "width" : 900,
          "height" : null
        }, {
          "name" : "xl",
          "width" : 1200,
          "height" : null
        } ],
        "label" : "featured image"
      }
    },
    "product_primary_color" : {
      "type" : "Color",
      "config" : {
        "label" : "Product Primary Color"
      }
    },
    "short_description" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "paragraph",
        "label" : "Short Description",
        "placeholder" : "The one-liner description"
      }
    },
    "price" : {
      "type" : "Number",
      "config" : {
        "label" : "Price",
        "placeholder" : "The regular price"
      }
    },
    "sale_price" : {
      "type" : "Number",
      "config" : {
        "label" : "Sale Price",
        "placeholder" : "Sale price (if any)"
      }
    },
    "on_sale" : {
      "type" : "Boolean",
      "config" : {
        "default_value" : false,
        "label" : "On sale?"
      }
    },
    "base_download_link" : {
      "type" : "Link",
      "config" : {
        "label" : "Base Download Link",
        "placeholder" : "This is the bucket-level link for product",
        "select" : null
      }
    },
    "upsell_items" : {
      "type" : "Group",
      "config" : {
        "fields" : {
          "upsell_item" : {
            "type" : "Link",
            "config" : {
              "select" : "document",
              "customtypes" : [ "product" ],
              "label" : "Upsell Item",
              "placeholder" : "This are the items that can be upsold/cross-sold"
            }
          }
        },
        "label" : "upsell_items"
      }
    },
// Variants are here ============================================
    "variants" : {
      "type" : "Group",
      "config" : {
        "fields" : {
          "variant" : {
            "type" : "Text",
            "config" : {
              "label" : "variant",
              "placeholder" : "A variant (resolution/sample rate/etc) for the download path on S3"
            }
          }
        },
        "label" : "variants"
      }
    },
    "body" : {
      "type" : "Slices",
      "fieldset" : "Slice zone",
      "config" : {
        "labels" : { },
        "choices" : {
          "embed_slice" : {
            "type" : "SharedSlice"
          },
          "image_text_slice" : {
            "type" : "SharedSlice"
          },
          "wide_text_slice" : {
            "type" : "SharedSlice"
          }
        }
      }
    }
  }
}

score 0 · Answer 1 · answered Jun 29 '21 at 10:07

0

This isn't possible at the moment, but we're tracking this as an open feature request and offer a workaround here: https://community.prismic.io/t/iterating-select-values-in-template-from-other-document/818/2

Thanks.

answered Jun 29 '21 at 10:07

Phil Snow

124
2

The workaround I've found was just using preformatted text as a json object, and then just `JSON.parse()` the field before accessing. Is that what the doc specifies? – Joel Hager Jun 29 '21 at 19:35
Yeah it's something similar about using regular expressions to get only numbers inside brackets of a string. – Phil Snow Jun 30 '21 at 10:53

Any way to add a key value pair object in Prismic.io Custom type?

1 Answers1