useReview(id?: string)

The useReview() composable allows for fetching, storing and adding product Reviews.

Be careful about shared state

You should pass a unique id as a parameter to avoid state conflicts when using multiple instances of this composable. Every instance with the same id (or those that lack it) will share the same state, even on different pages.

reviews

Main data object populated by the load() method.

Type

const reviews: ComputedProperty<Review[]>

References: Review

loading

Indicates whether any of the composable methods is in progress.

Type

const loading: ComputedProperty<UseReviewLoading>;

References: UseReviewLoading

error

Contains errors thrown by any of the composable methods.

Type

const error: ComputedRef<UseReviewError>;

References: UseReviewError

load()

Fetches a list of product reviews from the API and saves them to the reviews property. Under the hood, it sends a request to the getProductReviews API endpoint.

Type

interface LoadReviewsProps extends BaseProps {
  productCode: string;
  maxCount?: number;
}

async function load(props: LoadReviewsProps): Promise<void>;

References: LoadReviewsProps, BaseProps

Example

In the following example, we are fetching a list of reviews for a product with a given code. We are also specifying a subset of fields which should be returned with the response as well as the maximum result count. Finally, we are exposing the reviews property to the templates by returning it from the setup() method.

import { useReview } from '@vsf-enterprise/sapcc';
import { onMounted } from '@nuxtjs/composition-api';

export default {
  setup() {
    const { reviews, load } = useReview();

    onMounted(async () => {
      await load({
        productCode: '1',
        fields: 'reviews(id,alias,comment,rating)',
        maxCount: 3
      });
    });

    return { reviews };
  }
};

add()

Creates a new product review and returns it. When called during an authenticated user session, it creates a review assigned to the currently logged-in user. Otherwise, it creates an anonymous review. Under the hood, it sends a request to the createProductReview API endpoint.

This method does not alter the main data object!

One might expect the add() method to push the newly-created review to the reviews array. However, this might lead to unexpected behaviors. In SAP Commerce Cloud, all reviews need to be accepted through Backoffice before they can be returned by the API and displayed on the frontend.

Type

interface AddReviewProps extends BaseProps {
  productCode: string;
  review: Review;
}

async function add(props: AddReviewProps): Promise<Review>;

References: AddReviewProps, BaseProps, Review

Example

In this example, we are creating a simple wrapper around the add() method. It accepts a product code and a raw review object as params and calls the add() method with the right arguments.

import { useReview } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { add } = useReview();
    
    const addReview = async (productCode, review) => {
      await add({ productCode, review });
    };

    return { addReview };
  }
};

Did you know?

In SAP Commerce Cloud, the only property required to create a new product review is rating. All other keys such as alias, headline and comment can be skipped. In such scenario, their values will be set to an "undefined" string.