如何刷新Angular JS部分文件中的第三方小部件的数据

Question

I am including YOTPO reviews on my angular js website. Its a two step process - 1) Include their widget.js - I have included this on my index.html, where all other js files have also been included 2) Include their widget's div tag the page where reviews have to be displayed - I have included this on individual product page, which is a partial/product.html

Issue - My site is a search website. Index.html has a search box, all the results are displayed there. When user clicks on a particular page in results, he gets redirected to particular product page (partial/product.html)

User Flow - Lets assume, on search I get products P1, P2, P3 in results.

For the first time, If i click on P1 and go to its product page, YOTPO review appears. But when I go back to search and click on any other result (even with new search query and results) - YOTPO widget doesnot appear. But if i refresh the page, it appears.

I think reviews are displayed when widgets.js is called (which is included in index.html) and refresh reloads it. But How do i make sure that its reloaded everytime user navigates to product page? Or how is this scenario handled in angularJS - I am new to JS, may be I am missing some concept here.

Answer 1

Hey I'm working on a React/Redux application so it may not be the same.

When you have the yotpo sitewide script, it should create an object, yotpo (if you console.log(yotpo) you can see it). If you look in the proto , there are a number of functions in there.

The products are pulled in by the product ID, whether parent or child sku or however you have it.

I was having an issue where it wasn't updating the widget if we went to a new product, but would render right if I refreshed.

This is how I solved it; I put this code into the function where it is re-rendering:

// update Yotpo dynamically
  window.yotpo.initialized = false;
  window.yotpo.clean();

// there is a widgets array that the widgets are pulling data from; we need to update this
  for (let i = 0, len = window.yotpo.widgets.length; i < len; i++) {
    window.yotpo.widgets[i].settings.pid = nextProps.product.id;
    window.yotpo.widgets[i].settings.main_widget_pid = nextProps.product.id;
  }
  setTimeout(() => window.yotpo.initWidgets(), 500);

I'm not sure if that fixes your specific issue but hopefully it can at least point you in the right direction.

For you, you might just have to run window.yotpo.initWidgets() when that div is re-rendered.

Answer 2

I would recommend looking at the "Creating a Directive that Manipulates the DOM" section of this page.

Angular Directives

I am not familiar with YOTPO, but I am willing to guess you could create a updateReview function within the link function of a custom directive that would be called every time you need to update the reviews. That would most likely be an excellent place to start, since now it sounds like the code is only being executed when a certain view is loaded.

Answer 3

For my VueJS SPA I've used the following code in mounted() :

if (
  typeof yotpo != 'undefined'
  && yotpo
  && yotpo.initialized
  && !document.querySelector('.yotpo-display-wrapper')
) {
  (new Yotpo.API(yotpo)).refreshWidgets()
}

found method on https://support.yotpo.com/en/article/loading-yotpo-with-ajax