Variations and Simulating Slices

HTML Variations


[00:00] Next we'll add a variation for this Slice, which contains a button. Create a variation called "Split Button Left" duplicated from Split Image Right. The fields of this variation include:

[00:12] - A Link field with the API ID 'button_link'

[00:16] - A Key Text field with the API ID 'button_label'

[00:20] Save your changes, and let's add the code for the buttons. In the index.js file, In the SplitImageText folder, import the button component:

import Button from '@/components/Button'

[00:34] Add the button component after the <PrismicRichText /> Tag and update the link and label attributes to accept Prismic data. Grab the necessary API IDs from the suggested code, snippets in Slice Machine.

<Button link={slice.primary.button_link} label={slice.primary.button_label} />

[00:55] You can verify the button is working in the simulator.

[01:05] Now, like for the image, we'll set a conditional based on an array of variations using includes.

  ["splitButtonLeft"].includes(slice.variation) &&
  <Button link={slice.primary.button_link} label={slice.primary.button_label} />

[01:20] Voila, you've got another variation set up. Flick through the different variations in the simulator to see your work. Take a screenshot of your variation for Mr. McDonald.

[01:31] Now let's give Mr. McDonald the option to have the button on the other side. Create a variation called 'Split Button Right' duplicated from 'Split Button Left'. You don't need to add any fields here. Save the changes to the file system.

[01:43] Then in the code. It's as simple as including this new variation in the array of variations on the button conditional

["splitButtonLeft", "splitButtonRight"]

[01:53] and in the array to set the image order.

["default", "splitButtonRight"]

[02:03] Can you believe it? You've just whipped up, not one, not two, but four variations of the same Slice. That was lightning fast.

[02:10] So let's celebrate by taking screenshots of all the variations. All done? Awesome.

Main takeaways

  • Conditional rendering allows you to output different HTML/JSX depending on the variation in use.
  • Create 2 variations: "Split Button Left" and "Split Button Right".
  • Use 'includes' to render the correct components.

Side Note

It’s worth noting that this isn’t the only way to structure a Slice with JSX variations. You could break it down into multiple components and pass the Slice data down as props. This type of componentized structure could be better for testing as well.

Answer to continue

Quiz banner

Does your variation work as expected in the simulator?