Build an e-Commerce site with Figma-to-React code using Component Slots and dynamic data

This blog post was written by Wesley Peck, Senior Product Manager – Technical at AWS Amplify.

Component Slots are a new Amplify Studio feature that allows you to pass content as children of your components. Last time, we outlined how to pass static content into a component generated by AWS Amplify Studio. Now, we will apply the same tools to a Collection.

By adding slots to Collections, you can customize a collection with static content that appears the same on each component within the collection, or with dynamic content that is unique to each component.

What are Collections?

A Collection is a repeating set of components generated by Amplify Studio – for example, you might want a “Post” component for each post in your social media app. Generally, your collections will be bound to your data so that Amplify can generate a component for each entry in a data model.

This example will use a collection of components bound to a “Products“ data model to generate a product name, description, and image URL. For more information on how to generate collections, visit the Collections documentation.

How to use Component Slots in Collections

Pre-Requisites

• An Amplify Studio app
• At least 1 component in your UI Library. If you don’t have any components in your UI Library, you can use our Figma file to generate some.
• At least 1 data model with 2 or more records. For this example, we will use a model called “Products” with “name”, “description”, and “image” fields.

Create a Collection with slots

First, you will need to generate a Collection made of components that have at least one slot.

• Use the instructions in our previous blog post to customize a component and add a slot. The slot in this example is named “brandArea”.
• Bind your component to your data model. You can do this by selecting an element in the Element Tree, and using the right-hand action bar to bind the element to data.

Here, the component’s “Card Title” element is bound to the “name” field in the “Products” data model. The “Card Description” and “Image” elements are bound to the “description” and “image” fields, respectively.

• Click the “Create Collection” button in the upper right-hand corner to generate and name your collection
• Run amplify pull to import the new Collection

Pass static content to your Collection

You can pass static content to your component slot if there is content you want to be the same for each component in your collection. In this example, a generic brand name is passed so that every component has the same brand.

1. Import and add your new Collection to your primary app page. In this example, the name of the collection is “ActionCardWithBrandCollection”
2. Using the overrideItems prop, add your static content to each item in the collection. Here, the brand of each item is set to “AWS Amplify Brand”

import { 
  ActionCardWithBrandCollection,
} from './ui-components';

function App() {
  return (
    <div>
      <ActionCardWithBrandCollection
        overrideItems={({item, index}) => ({
        {/*brandArea overridden with static content*/}
          brandArea: 
          <div>
            <small><i>AWS Amplify Brand</i></small>
          </div>,
      })} />
    </div>
  );
}
export default App;

Pass dynamic content to your Collection

With Component Slots, you can pass dynamic content as well as static content. This example will use the same “Products” data model, and will add a “Comments” model, which has a one-to-many relationship with “Products”. For more information on many-to-many relationships, visit the Data Modeling documentation.

For this example, a new Component has been generated called “ActionCardWithComments”. This component has 2 slots – “brandArea” and “comments” – and is bound to the same data fields as the previous example. You can create a similar component by copying and modifying the “ActionCard” component in Figma, and importing it to Amplify Studio. Import your Collection and add it to your primary app page. Use the overrideItems prop to target the comments slot Access each Product’s Comments by using item.Comments Use the .map() method to generate JSX for each Comment

import { 
  ActionCardWithCommentsCollection,
} from './ui-components';

function App() {
  return (
    <div>
      <ActionCardWithCommentsCollection
      {/*Use the overrideItems prop*/}
        overrideItems={({item, index}) => ({
        {/*Here's your comments slot*/}
          comments: 
          <div>
          {/*Map each comment to some JSX for dynamic content*/}
            {item.Comments.map(comment => 
              <div>
                <h3>{comment.author}</h3>
                <p>{comment.content}</p>
                <hr />
              </div>
            )}
          </div>,
          {/*Here's your brandArea slot with static content*/}
          brandArea: 
            <div>
                <small><i>AWS Amplify Brand</i></small>
            </div>,
         />
    </div>
  );
}
export default App;

🥳 Success!

You’ve done it! You’ve successfully added a Component Slot to a Collection!

You can see how powerful slots can be when combined with collections and a data source. A few lines of code can populate a dynamic portion of your web application and save you hours of customization. But wait – there’s even more! Tune into our next post to learn how to take full advantage of component slots by nesting collections inside each other!

Do you have a clever use case for Collections and Component Slots? Share your ideas with us on Twitter, get inspired by other community members in our Discord channel, or build your vision as part of the September Amplify hackathon! You can also review documentation on Component Slots here, and share your feedback with us on Github.