Reuse component

Technical tutorial alert!

This tutorial is fairly technical. In your organization, these steps may be done by developers. It is completely possible for marketers to handle this task, but if it feels overwhelming, just remember this is not expected to be a normal part of your everyday work with Uniform, and feel free to skip it.

Lets imagine we’re just about ready to go live with this new campaign with our landing page and with our custom product detail page. Someone on your marketing team has been working on early customer reviews and we added several of them to our custom product detail page. But maybe one of these is really compelling and you would like to call out that customer review or customer quote as a testimonial.

Now what do you do? Well the reality is we need a new hero that can display testimonials. If you remember when we were talking about challenges on many projects that limit speed to market the idea of having a marketing hero that is repurposed across different types of content is something that's often difficult. Uniform’s visual workspace makes that really easy.

Let’s go through the process of taking our existing hero component and revise it to display a new type of content. In this case we’ll do a customer testimony.

  1. If it is not already open, open the composition you created in the previous tutorial.

  2. After the Image Gallery component, add a Hero component.

    insert-component-hero
    The Hero component to select.
    hero-component-inserted
    Hero component is added to the composition.

    About this step

    In the previous tutorial you used the Hero (uc) component. That component lets you automatically populate the component with content from a CMS entry. The Hero component lets you set the content to whatever values you want. They are both use the same code written by the developer. The difference between them is how the content is set.

  3. Set the parameter Background Type to Dark.

    background-type-black
    This parameter is located under the section "Presentation Settings" in the Content Panel.

    About this step

    Changing the background type to dark makes the text invisible. Next you need to change the text color.

  4. Set the parameter Text Color Variant to Light.

    text-color-variant-light
    Light text on a dark background.

    About this step

    Now the text is visible again.

  1. On the left, in the Side Rail Menu, click the Data Resources button.

    data-resources-panel-open
    Data Resources Panel is open.

    About this step

    This is how you open the Data Resources Tab.

  2. Click Add a data resource.

    add-data-resource-clicked
    Add Data Resource dialog is displayed.
  3. Under the section Uniform Content, select Testimonial.

    testimonial-data-type-selected
    Testimonial Data Type is selected.
  4. Select the entry that matches the following search text:

    Love It!
    testimonial-selected
    Testimonial is selected.
  5. Set the parameter Name to the following value:

    Love It Testimonial Content
    data-resource-name-set
    Data Resource name is set.
  6. Click the button Save.

    data-resource-saved
    Data Resource is saved.
  7. Click the button to close the Data Resources Tab.

  1. In the Content Tab, find the parameter Title.

    title-parameter-selected
    Title parameter selected.
  2. Click the chip icon .

    chip-icon-menu
    Menu displayed when chip icon is clicked.
  3. Click Insert dynamic token.

  4. Select the following node:

    Love It Testimonial Content > entries > 1 > entry > fields > title > value
    title-field-value-selected
    Title field value selected.
  5. Click the button Connect.

    About this step

    This is how you map a parameter to a Data Resource field.

    title-parameter-populated
    Title parameter is populated.
  6. Set the parameter Title Style to H2.

  7. Map the parameter Description to the following Data Resource node:

    Love It Testimonial Content > entries > 1 > entry > fields > experience > value
    description-parameter-populated
    Description parameter is populated.
  8. In the Content Panel, from the dropdown Display Variant, select Image Left.

    image-left-display-variant
    Description text is no longer centered.
  1. Find the parameter Image.

  2. Click the chip icon .

    chip-icon-image-menu
    Menu displayed when chip icon is clicked.
  3. Click Connect to Uniform Content asset....

  4. Select the following Data Resource node:

    Love It Testimonial Content > entries > 1 > entry > fields > picture > value
  5. Click Connect.

    image-distorted
    Image parameter is populated.

    About this step

    The image is displayed, but it is distorted. This can be fixed using another parameter that was created to make sure images can be displayed properly.

  6. Set the parameter Object Fit to Contain.

    image-fixed
    This parameter is located under the section "Image Settings" in the Content Panel.

    About this step

    The different options for this parameter give control over how the image is displayed. This makes it possible to support a variety of images.

  1. Map the parameter Eyebrow text to the following Data Resource node:

    Love It Testimonial Content > entries > 1 > entry > fields > firstName > value
    eyebrow-text-first-name
    The first name from the testimonial is displayed.
  2. In the Content Panel, click inside the input box for the parameter Eyebrow text.

  3. Enter the following text:

    -
    eyebrow-text-separator
    Dynamic tokens and text can be entered in the field.

    About this step

    Note that there is a space before and after the dash.

  4. Map the parameter Eyebrow text to the following Data Resource node:

    Love It Testimonial Content > entries > 1 > entry > fields > stars > value
    eyebrow-text-stars
    Multiple dynamic tokens can be entered in the field.
  5. Enter the following text:

    stars!
    eyebrow-text-literal-text
    Complex, composite values can be entered in the field.

    About this step

    Note that there is a space at the start of the text.

  6. Publish the composition.

  1. Visit your PDP page to see the selected testimonial.
    published-page
    The published page shows the selected testimonial.

You have completed the marketer tutorials. Now you should have a basic understanding how pages can be build and managed using Uniform.