Skip to main content

How to use Judgeme in your app - Native

prerequisites​

Enable Judgeme in your app from the Appmaker dashboard.

Rating/Review block​

This section explains how to show default rating/review view.

Available blocks for reviews and ratings are:

    {
      name: 'shopify/review-summery-wrapper',
      attributes: {},
    },
    {
      name: 'shopify/shopify-review-list-preview',
      attributes: {},
    },
    {
      name: 'shopify/show-all-review',
      attributes: {},
    },

  • shopify/review-summery-wrapper - displays rating/review summary.

  • shopify/shopify-review-list-preview - displays first five reviews.

  • shopify/show-all-review - displays a button to view all reviews.

How to use Custom View instead of default ones.​

Customize review summary​

  • Block shopify/review-summery
  • Override block shopify/review-summery with your own Component.
  • Use hook useReviewSummary to retrieve all necessary data.

Example usage:​


// Component override
  {
   name: 'shopify/review-summery',
   View: ReviewSummary, // The component to be rendered
  }

// Component definition
const ReviewSummary = (props) => {
  const {
    average_rating,
    total_questions,
    total_reviews,
    ratings,
    productId,
    openAddReview,
    isLoading,
  } = useReviewSummary(props);
 //.. 
}

Customize review list item​

  • Block shopify/review-item
  • Override block shopify/review-item with your own Component.
  • Use hook useReviewListItem to retrieve all the necessary data from Judgeme.

Example usage:​

// Override default component
 {
   name: 'shopify/review-item',
   View: ReviewListItem, // The component to be rendered
  }

// Component definition
const ReviewListItem = (props) => {
  const { body, title, reviewer, rating, imageUrls, created_at, verified } =
    useReviewListItem(props);
   //....
}
note

Customizing the review item will change the review item view in shopify/shopify-review-list-preview also.

Customize Add Review Block​

  • Block shopify/product-review-add
  • Override block shopify/product-review-add with your own Component.
  • Use hook useAddReview to retrieve all the necessary data from Judgeme.

Example usage:​


const AddReview = (props) => {
const {
  onSubmitReview,
  isLoading,
  setName,
  setRating,
  setEmail,
  setBody,
  setTitle,
  name,
  email,
  rating,
  body,
  title,
  user,
} = useAddReview(props);

return (
  <View>
    <Input
      label="Name"
      placeholder="Enter your name (public)"
      onChangeText={setName}
      value={name}
      style={[styles.input, styles.inputHeight]}
    />
    <Input
      label="Email"
      placeholder="Enter your email (private)"
      onChangeText={setEmail}
      value={email}
      editable={user?.email ? false : true}
      style={[styles.input, styles.inputHeight]}
    />
    <AddStarRating
      label={`Rating (${rating})`}
      rating={rating}
      setRating={setRating}
    />
    <Input
      label="Review Title"
      placeholder="Give your review a title"
      onChangeText={setTitle}
      value={title}
      style={[styles.input, styles.inputHeight]}
    />
    <Input
      label="Review"
      placeholder="Write your review here"
      onChangeText={setBody}
      value={body}
      multiline
      numberOfLines={4}
      style={[styles.input, styles.textAreaHeight]}
    />
    <Button onPress={onSubmitReview} loading={isLoading} status="dark">
      Submit Review
    </Button>
  </View>
);
};