How to display Yotpo star ratings on Builder product page

[oscarlora]

Builder content link

Builder.io: Drag and drop page builder and CMS

Builder public api key
a03f2562d472492f9b4fc2fc86ecc5ba

What are you trying to accomplish
I want to display Yotpo star ratings on the product page I’m building with Builder.

I copied the code from Yotpo and pasted it in a custom code block but it’s not showing up. Is there anything I’m missing?

@logan Can you help here?

Code stack you are integrating Builder with
Shopify

[sarah]

Hi @oscarlora, you can follow the instructions here to use Yotpo with Builder: Yotpo app template - Builder.io

[oscarlora]

@logan Thank you, I really appreciate the detailed instructions you’re sending. I’m sure others that are trying to implement these things will find it useful.

Just so it’s clear, this is what I’m referring to.

[oscarlora]

Thank you for replying Sarah, I tried with the integration but that’s for the reviews. What I’m trying to display is the star rating that usually goes close to the product title and description. Here’s an example.

[sarah]

Hi @oscarlora, thanks for clarifying! One way you could do this is by placing a text block within the native embed reviews wrapper layer, and binding the text to the code below:

[oscarlora]

Thank you Sarah, how do I do that? In Data > Edit content JS + CSS and replace the JS there?

I tried doing that and it’s not displaying the stars in the text block.

Here’s the block:

Then I went to Data > Edit JS + CSS:

[sarah]

H @oscarlora, you can select the text box you added and add a new binding in the data tab under “Element data bindings”. You can set the “Get” field to “Text”, select the “edit code” button in the “from” field, and then paste this code there.

[mrnda_darkroom]

Hi Sarah! I’ve done this but I’m not seeing the stars appear on my page. Can you assist?

Also, I’m wondering how I could use a specific image for the stars, rather than just the star symbol?

[manish-sharma]

Hi @mrnda_darkroom,

You can try the below code

//ratings could be a dynamic data object or an array 
let itemsLen = state.reviews.length;
for(let i = 0; i < itemsLen; i++){   
  let rating_stars = [];   
  for(let j=0; j< parseInt(state.reviews[i].score); j++){     
    rating_stars[j] = state.star_img; // state.star_img can be a star image or any review.    
  }   
 state.reviews[i].score = rating_stars;
}

Let us know if you have any further questions. Thank you!

[mrnda_darkroom]

@manish-sharma

let itemsLen = state.reviews.length;
for(let i = 0; i < itemsLen; i++){   
  let rating_stars = [];   
  for(let j=0; j< parseInt(state.reviews[i].score); j++){     
    rating_stars[j] = state.star_img; // state.star_img can be a star image or any review.    
  }   
 state.reviews[i].score = rating_stars;
}

Hi @manish-sharma, thank you.

This didn’t work either. See below:

See content link here:https: //builder.io/content/0c3f9ed8408943d0896cb21056def2f2/edit?activeDesignerTab=3&selectedBlock=builder-0156cdd015a2483aafb25c632b73fc21