Step 2 | Create a Catalog Database in Blocks

< Previous | Next >

In order to integrate with the Wix eCommerce platform, your business solution must provide a catalog of items for sale. In general, the catalog database can be hosted and managed wherever you prefer. In our example app, each site’s catalog database will live on the site itself.

A catalog database allows users to store information about the products they want to sell, and is central to any eCommerce app. For our example business solution, we’ll create a catalog of poems as a Wix data collection. When Wix users install our app, a copy of the collection is installed on their site. Wix users can then customize this collection to meet their site’s needs.

To create a collection in Blocks, we first need to connect our app to Blocks. We can do this by creating a Blocks widget from the app dashboard.

  1. To add a widget, return to your app dashboard and go to extensions. Click on + Create Extension.

    Extensions tab

  2. In the modal that opens, search for “widget” and find the Blocks widget extension. Click + Create on Blocks. This opens a new tab in the Blocks editor.

    Create widget on Blocks

    Note: If a window pops up prompting you to choose a template, you can close it.

    In the lefthand column of the Blocks editor, you should now see something that looks like this:

    App interface widget 1

    We’ll rename and design our widget in the next step, but let’s first add the product catalog.

  3. In the menu on the left, click CMS .

    Click CMS

  4. Under Your Collections, click Create Collection. A modal opens prompting you to name your app. Click Save & Continue to save your app name.

    Create your first collection

  5. Next, Blocks prompts you to create an app namespace. Wix uses this namespace to identify your apps and create the collection ID. Click Next to continue. A new modal that looks like this appears:

    Create app namespace modal

    The usual format of the namespace is @accountName/appName. We recommend accepting the default format. Click Next to continue.

  6. Once you’ve set up your app name and namespace, a Create a collection modal appears offering you several options on how to set up your initial collection. Select the Start from scratch option and click Next.

    Create a collection modal

  7. Name your collection Poems and click Create. Blocks opens the CMS, where you can start editing the collection structure.

  8. Click + Add Field to add columns to the collection. Add the following columns to the collection:

    Field nameField type
    Titletext
    Pricetext
    Descriptiontext
    Main Product IDtext
    VariantsJavascript array

    Wix generates the field ID automatically when you name the field. Accept the default IDs.

    Note: Once you save the field, you can’t change the field ID.

  9. Now let’s add some sample data to get us started. Add the following items to the collection:

    TitlePriceDescriptionMain Product IDVariants
    Birthday Poem3Write a poem for someone’s birthday00003[  {    "label": "For partner",    "value": "v01"  },  {    "label": "For child",    "value": "v02"  },  {    "label": "For friend",    "value": "v03"  }]
    Wedding Poem2Congratulate the bride or groom with a wedding poem00002[  {    "label": "For bride",    "value": "v01"  },  {    "label": "For groom",    "value": "v02"  }]
    Graduation Poem1Celebrate a new graduate with a graduation poem00001[  {    "label": "For child",    "value": "v01"  },  {    "label": "For other relative",    "value": "v02"  }]

    When a Wix user installs the app, they’ll receive these default values in their Poems collection.

This completes our catalog database setup. In the next article, we’ll connect our widget to the collection to allow site visitors to view the available poems.

Next up: Step 3 | Create an Item Page in Blocks

Did this help?