Bring Slices from SliceMachine slices to Prismic

Developing with Prismic
1

I can't use slice machine yet unfortunately (gatsby user), but I really want to start taking advantage of some of the slices in the library that slice machine uses (FAQs for example)

Prismic already has some pre-defined slices, can we add the 'new' ones from slice machine into the standard prismic slice library

2

Hey,

You can grab the slice models from the library on it’s github.

All the slices are there to use.

Though I agree this would be cool and was something we discussed. We are also working another solution that might be just as easy as this. I’ll update you here once I know more.

Thanks.

1 Like
3

The library manifest is kept in an sm.json file, at the root of the project. If you want all slice models, you would have to copy the “slices” object and manually add it to the “choices” key of your Prismic custom type.

4

When I create new custom types, I create them in the Prismic Web Interface and then copy all the JSON in the “Json Editor” tab, and paste that into a new file in my code project under /content_types/whatever.json

These are two scenarios I want to use:

A) Starting a new slice from scratch
B) Duplicating a provided library slice to make my own custom slice

Let’s take Duplicating a Slice to customise my own local version:

  1. In my project I create a new slice:

    $ npx prismic-cli sm --create-slice #==> Lets say we created ‘CallAction’

  2. Replace the contents of my new Slice with the contents of the library provided CallToAction.

  3. Login to Prismic and open content type that suports the new Slice.

  4. How do I get the json data from CallToAction/model.json into the Prismic Writer Center?

At this stage it looks like I need to create the fields by dragging them in with the UI, but this seems wasteful of time and prone to variation and hence inacuracy.

What’s the best way to import the JSON into Prismic?

prismic_io_-
prismic_io_-1611×459 69 KB

10

Hey there online,

This is a good question, and you’re on the right track. To import the JSON, simply copy it from /model.json. Then, in the JSON editor in the custom type builder, in “choices”, create a new key with the snake_cased name for your slice, and paste in the JSON from /model.json as the value.

Note: the name of your slice in Prismic must be the snake_cased version of the PascalCased name in your code in order for the slice-zone component to properly match them.

Let me know if that works for you.

Sam

1 Like
13

This issue has been closed due to inactivity.