Product reviews

Highlighted
Excursionist
19 0 5

Hey! Anyone have any tips for custom built Product reviews UI?

I'm working from a design so cutomising Shopifys Product Reviews markups CSS is just not cutting it!

Is there a simple way of accessing the data in the metafield created by SPR? And using it to create my own mark up including the submit form? Or am I barking up the wrong tree??

0 Likes
Highlighted
Excursionist
19 0 5

I've actually gone for..

    const reviews = $('.spr-review')
    let arr = []

    if(!reviews.length){
      productReviews()
    }else{
      $(reviews).each(function(){
        let name = $(this).find('.spr-review-header-byline strong:first-of-type').text();
        let date = $(this).find('.spr-review-header-byline strong:last-of-type').text();
        let body = $(this).find('.spr-review-content-body').text();
        let numStars = $(this).find('.spr-starratings:eq(0)').attr("aria-label").charAt(0);
        arr.push({name: name, date: date, body: body, numStarts: numStars});        
      })
      console.log(arr);
    }

 

The productReviews function is on a setTimeout and loops 10 times in 1s intervals to check if product reviews are there and loaded... Not ideal as Shopify could change their markup at anytime but its working..  Shame they don't have an API for reviews!

Any other ideas would ve appreciated!!!

0 Likes