Create Your First Variation

[00:00] We learned in a previous lesson that website designs could be broken down to become Slices. What we didn't look at was that many of these Slices have a very similar structure, even if they appear different.

[00:10] Now, take a moment and let's revisit our website design. Can you spot the 'Call to Action' section?

[00:15] Yep, that's the one right there. Notice something interesting? It's like the Text Slice trying on a fancy costume with an extra button. Pretty cool, right?

[00:23] It would be a shame if we have to maintain two Slice models and extra lines of component code for such similar Slices. This is the perfect use case for creating a variation of a Slice in Slice Machine.

[00:34] To create a variation, navigate to the TextSlice, select the dropdown in the top left of the editor window, and click the Add new variation option in the drop-down.

[00:43] Give the variation the name Call To Action Button; this will automatically generate the ID callToActionButton for the variation. Then you can select which variation of the Slice you want to duplicate your new variation from, this will copy all of the fields from the chosen variation into the new one. We only have one option for this Slice, which is default.

[01:01] Click submit, this will open the regular editor window, but you will now have the variation name along the top and, importantly, the variation ID.

[01:10] You can now make changes in your new variation that will not affect the default variation. We need a button for this variation, so add a Link field called Button Link and a Key Text field called Button Label. Save your work by clicking Save to File System.

[01:25] Back in your project code, in the TextSlice component, import the button component:

import Button from '@/components/Button'

[01:30] Then add the button component tag and pass it the button link, and label data:

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

[01:38] The next step is to update the <Button> component to use the <PrismicNextLink> component. This component converts links coming from Prismic to use the Next Link component. We need this component to transform links to Prismic documents into Next.js links.

[01:51] Import it into the ./components/Button.jsx file:

import { PrismicNextLink } from '@prismicio/next'

[01:55] and add the component tag, pass the link prop to the field attribute and the label between the tags:

<PrismicNextLink field={ link }>{ label }</PrismicNextLink>

[02:03] Now your button component should be ready for the Prismic data. Let's add a conditional statement to the button component in your TextSlice. Adding a conditional statement means that the button will only appear when the 'Call To Action Button' variation is selected in Prismic. To do that, you can use the variation ID that was generated for you earlier.

[02:20] Using this conditional rendering. When the variation is callToActionButton, the button will be rendered.

{slice.variation === 'callToActionButton' && (
  <Button link={slice.primary.button_link} label={slice.primary.button_label} />
)}

[02:26] That's your first variation setup. Now, wouldn't it be just great if we could check its functionality before we pushed all our changes for Mr. McDonald to use? In the next video we'll show you how to do just that.