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.