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.