> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Develop a business solution item page with Blocks

## Article: Develop a Business Solution Item Page with Blocks

## Article Link: https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/get-started/apps/develop-a-business-solution-item-page-with-blocks.md

## Article Content:

# Develop a Business Solution Item Page with Blocks

When you [build a business solution on top of the Wix eCommerce platform](https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/get-started/apps/build-a-business-solution.md), you need at least one page in your app that exposes eCommerce functionality and allows site visitors to make purchases. This is known as an item page.

When a site owner installs your app on their site, any item pages you create are included in the installation and displayed to site visitors on the site. An item page displays information about your item, including images. It uses the [Wix eCommerce frontend API](https://dev.wix.com/docs/sdk/frontend-modules/ecom/introduction.md) to allow site visitors to view their cart and navigate to checkout from the item page.

An example of an item page is the Wix Stores product page. This page lets a customer on a site view details about a product, and updates the customer’s cart or navigates to checkout when the customer clicks certain buttons. The product page is installed automatically whenever a user adds Wix Stores to their site.

![Stores item page example](https://wixmp-833713b177cebf373f611808.wixmp.com/images/85da7170dd7abaa4e7a231580e95b51b.png)

This article explains how to create an item page in [Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-blocks.md) as part of your business solution.

## Before you begin

Before getting started, make sure that you:

- Create an app on the [Custom Apps page](https://manage.wix.com/studio/custom-apps).
- Configure your app to [install Wix eCom](https://dev.wix.com/docs/rest/business-solutions/e-commerce/wix-e-commerce-platform-handbook/get-started/apps/build-a-business-solution.md#step-1--set-up-automatic-installation-of-the-ecommerce-app).
- Create an item catalog and implement the [Catalog service plugin](https://dev.wix.com/docs/rest/business-solutions/e-commerce/service-plugins/catalog-service-plugin/introduction.md).

## Step 1 | Design a site widget in Blocks

1. In the [Custom Apps page](https://dev.wix.com/apps), select the app you want to add the item page to and go to [Extensions](https://dev.wix.com/app-selector?title=Select+an+App\&primaryButtonText=Select+Site\&actionUrl=https%3A%2F%2Fdev.wix.com%2Fapps%2F%7BappId%7D%2Fextensions).

2. Click **+ Create Extension** and in the modal that appears, search for the **Widget** extension labeled Wix Blocks.

    ![Create a widget extension on Blocks](https://wixmp-833713b177cebf373f611808.wixmp.com/images/ed6afa2a492034fae80dd137bf78d119.png)

3. Click **+ Create on Blocks**. This opens the widget extension in a new page on Wix Blocks.

4. Use the Blocks Editor to design your widget to match your app’s needs. For example, if you want to create an item page that displays all available items on a site, you can add a repeater element. Or, you can combine basic elements like buttons and images to create a product page similar to Wix Stores’.

5. Connect your item catalog to the widget. If you’re hosting the catalog externally, fetch the data from the external service to populate the widget.

This completes the design of your site widget.

## Step 2 | Add code to the widget to support eCommerce functionality

At a minimum, your item page code should do the following:

- Add items to the cart using the [`catalogReference` object](https://dev.wix.com/docs/rest/business-solutions/e-commerce/service-plugins/catalog-service-plugin/handle-item-variants.md#the-catalogreference-object).

- Navigate the visitor to a cart view or checkout page.

We’ll show you an example of some basic code that does this below. To add code to your item page in Blocks:

1. At the bottom of the Blocks Editor, open the [code section](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/get-started/a-blocks-app-workflow.md#add-widget-code) for your widget.

2. At the top of the code section, add the following import statements:

    ```javascript
    import {currentCart} from 'wix-ecom-backend';
    import wixEcomFrontend from "wix-ecom-frontend";
    ```

    These lines import 2 modules that are necessary for your item page:

    - The [`currentCart`](https://dev.wix.com/docs/sdk/backend-modules/ecom/current-cart/setup.md) module from the Wix eCom backend API. This module lets you update the current cart on a site and create the checkout.

    - The [Wix eCom frontend API](https://dev.wix.com/docs/velo/apis/wix-ecom-frontend/introduction.md): This API lets you update the cart UI and navigate to the cart or checkout page.

3. Call `addToCurrentCart()` to add an item to the current site visitor’s cart. As part of the method arguments, pass it an object containing a reference to your item catalog. Here’s an example of what that looks like:

    ```javascript
    const catalogReferenceObject = {
      lineItems: [{
        catalogReference: {
            appId: "10e5b2b7-f4cf-4063-ad08-01f38a114b48",
            catalogItemId: "abc123"
          },
          quantity: 1
        }]
    };

    // Call addToCurrentCart() with the reference
    currentCart.addToCurrentCart(catalogReferenceObject);
    ```

    The important part of this function is the `catalogReferenceObject` that is passed to `addToCurrentCart()`. Whenever your code uses the Wix eCommerce flow, you need to pass the eCommerce platform a catalog reference so it can retrieve the item information. The code above uses hard-coded values as an example, but normally you collect these values dynamically. For example, you might retrieve values from a repeater item.

    The object contains 3 required parameters:

    - The `appId` is the ID of your custom app. You can find this in your app’s [dashboard page](https://dev.wix.com/app-selector?title=Select+an+App\&primaryButtonText=Select+Site\&actionUrl=https%3A%2F%2Fdev.wix.com%2Fapps%2F%7BappId%7D%2F). The app ID tells the eCommerce platform which app it’s working with, so it can look up the URI of your catalog implementation.

    - The `catalogItemId` tells Wix eCom which item in the catalog to request information for. The ID can take any format you choose, as long as it matches an ID in your item catalog.

    - `quantity` indicates the requested number of items.

    Include an optional `options` parameter to request information for different [variants](https://dev.wix.com/docs/rest/business-solutions/e-commerce/service-plugins/catalog-service-plugin/handle-item-variants.md) of an item. For example, if an item can come in different sizes and colors, your catalog reference might look something like this:

    ```javascript
    const catalogReferenceObject = {
    lineItems: [{
        catalogReference: {
          appId: "10e5b2b7-f4cf-4063-ad08-01f38a114b48",
          catalogItemId: "cdf456",
          options: {
            color: "Blue",
            size: "L"
          }
        },
        quantity: 1
      }]
    };

    currentCart.addToCurrentCart(catalogReferenceObject);
    ```

4. Add a clickable element such as an **Add to cart** button, and call `addToCurrentCart()` in the element’s `onClick()` handler.

    Inside the provided `onReady()` function, add logic that navigates customers to the checkout or cart pages using the eCom frontend API. For example, if your widget contains a **View Cart** button, call [`navigateToCartPage()`](https://dev.wix.com/docs/velo/apis/wix-ecom-frontend/navigate-to-cart-page.md) when it’s clicked.

    Before navigating to the cart view, make sure to call the [`refreshCart()`](https://dev.wix.com/docs/velo/apis/wix-ecom-frontend/refresh-cart.md) function. This function updates the cart UI with the latest data, and ensures that all items selected by the customer appear in the cart view.

    Here’s an example of logic that adds an item to the cart and then navigates to the cart page:

    ```javascript
    $w.onReady(function () {
        $w('#addToCartButton').onClick(async () => {
            await addToCurrentCart();
            await wixEcomFrontend.refreshCart();
            wixEcomFrontend.navigateToCartPage();
        })
    });
    ```

Here’s a complete example:

```js
import {currentCart} from 'wix-ecom-backend';
import wixEcomFrontend from "wix-ecom-frontend";

$w.onReady(function () {
  $w('#addToCartButton').onClick(async () => {
    const catalogRef = {
        lineItems: [{
            catalogReference: {
                appId: "538b878c-03c3-477f-b5bd-74f493aa86b5",
                catalogItemId: "abc123"
            },
            quantity: 1
        }]
    };
    await addToCurrentCart(catalogRef);
    await wixEcomFrontend.refreshCart();
    wixEcomFrontend.navigateToCartPage();
   })
});
```

Use this code as a starting point for your own logic. Here are a few suggestions for building upon the example code:

- Listen to [onCartChange()](https://dev.wix.com/docs/sdk/frontend-modules/ecom/on-cart-change.md) to dynamically update the value of `quantity`, based on site visitor input.

- Add support for [removing line items from the cart](https://dev.wix.com/docs/sdk/backend-modules/ecom/current-cart/remove-line-items-from-current-cart.md).

* Add a **Buy Now** button to your widget and implement a flow to take the customer directly to the checkout page. A "Buy now" flow skips the cart view, so you don’t need to call `refreshCart()`. When a customer clicks the **Buy Now** button, [create a checkout directly](https://dev.wix.com/docs/sdk/backend-modules/ecom/checkout/create-checkout.md) to get a checkout ID, then pass that ID to [`navigateToCheckoutPage()`](https://dev.wix.com/docs/sdk/frontend-modules/ecom/navigate-to-checkout-page.md).

You now have a fully functional site widget.

## Step 3 | Add your widget to a site page extension

You want your item page to be added automatically to a site whenever a user installs your app. To make sure this happens, do the following steps:

1. In the Wix Blocks editor, go to the **Wix Blocks** menu in the top left corner and select **Dashboard**. This opens your app dashboard.

    ![View Blocks dashboard](https://wixmp-833713b177cebf373f611808.wixmp.com/images/f49e3ad05a6df6f4f2f5bcb7e15d6706.png)

2. In your app dashboard, go to the [Extensions](https://dev.wix.com/app-selector?title=Select+an+App\&primaryButtonText=Select+Site\&actionUrl=https%3A%2F%2Fdev.wix.com%2Fapps%2F%7BappId%7D%2Fextensions) page.

3. Click **+ Create Extension**. In the modal that opens, select the **Site Page** extension.

4. Give your page a name and ID. The name is visible to users on a site. The ID is not visible to users and is used to refer to the page in code. Configure the other settings as necessary.

5. Under **Add widgets to this page**, click **+ Add Widgets** and select the site widget you created in the previous steps. Click **Save** to save the site page extension.

6. Return to the home page of your app dashboard. Under **Building your app**, click **Installation settings** > **Manage Settings**.

    ![Installation settings](https://wixmp-833713b177cebf373f611808.wixmp.com/images/9a92268e352f02e3f93d27cef74a05e8.png)

7. Under **Installation**, select **Added to a site page** and make sure your widget is added to a page. Select the site page extension you created.

    ![Site page config](https://wixmp-833713b177cebf373f611808.wixmp.com/images/bf8574e98a65da5620b65eafe1c6afcb.png)

Finish configuring the remaining settings and click **Save**.

Now, when a user installs your app, the site page extension with the widget you created will be added automatically to the site.

## Step 4 | Test your item page on a site

Now that you have a complete item page with code, you can test it on a site to make sure it works. We recommend installing and testing on a [premium test site](https://dev.wix.com/docs/build-apps/launch-your-app/app-distribution/test-your-app/test-your-app-on-a-premium-site.md).

1. Return to your app in the app dashboard.

2. Click **Test App** > **Editor**.

3. Select a site to install and test the app on. Wix takes you to the selected test site. Click **Add to Site** to add your app and agree to the terms of use. This adds the app, along with the item page, to your site.

4. Publish your site and go to your item page. Test your widget by clicking on various buttons. Make sure that it navigates to the correct pages, and that the cart updates appropriately.

## See also

- [Wix App Developers: Build a New eCommerce Business Solution](https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/get-started/apps/build-a-business-solution.md)
- [About the eCommerce Catalog Service Plugin](https://dev.wix.com/docs/rest/business-solutions/e-commerce/service-plugins/catalog-service-plugin/introduction.md#about-the-ecommerce-catalog-service-plugin)
- [Tutorial | Build an eCommerce Business Solution](https://dev.wix.com/docs/build-apps/get-started/tutorials/tutorial-build-an-e-commerce-business-solution/overview.md)