Integrating widget into a angular app using a directive

Question

So I have currently integrated Yotpo 'reviews and comments' into my Angular application.

It consists of a javascript widget and some Html:

Js:

var e=document.createElement("script");

e.type="text/javascript",
e.async=true,
e.src="//staticw2.yotpo.com/API/widget.js",
e.id="test";

var t=document.getElementsByTagName("script")[0];
t.parentNode.insertBefore(e,t);

HTML:

<div class="yotpo yotpo-main-widget"
     data-product-id="{{ product.sku }}"
     data-name="{{ product.title }}"
     data-url="{{ pageUrl }}"
    data-image-url="{{ pageImage }}"
    data-description="{{ product.description }}">
</div>

By placing the JS into a directive, I have got it to work, however, it will only work when you reload the page.

To try and fix this, I remove the script when the user leaves the page and reinsert the script when the user goes back into the page

Example:

link: function ($scope, elem) {
    elem.bind('$destroy', function() {
        var widgetScript = angular.element('#foo');
        jQuery(WidgetScript).remove();
    });

    function loadWidget() {
        var e=document.createElement("script");

        e.type="text/javascript",
        e.async=true,
        e.src="//staticw2.yotpo.com/API/widget.js",
        e.id="foo";

        var t=document.getElementsByTagName("script")[0];
        t.parentNode.insertBefore(e,t);
    }

    loadWidget();
}

Unfortunately this doesn't work. Any advice would be very much appreciated.

Not really a generic answer about loading scripts, but I made an angular wrapper around yotpo you may be interested in. — Bufke
– Bufke, Commented Jul 15, 2019 at 18:48

Richy · Accepted Answer · 2016-04-09 16:16:40Z

2

So I have found a solution and thought I would post it here, as I am sure someone else will no doubt come across this issue if they are using Yotpo with Angular.

The answer is yotpo.initWidgets();

Unfortunately there is no information about this in Yotpo's documentations.

So this is what I have ended up doing, and it works like a charm:

.directive('yotpo', function ($document, $timeout) {
    return {
        restrict: 'AE',
        link: function() {

            function loadWidget() {
                var e = document.createElement("script");

                e.type = "text/javascript",
                e.async = true,
                e.src = "//staticw2.yotpo.com/API/widget.js",
                e.id = "test";

                var t = document.getElementsByTagName("script")[0];
                t.parentNode.insertBefore(e,t);
            }

            loadWidget();

            if (typeof yotpo !== 'undefined') {
                $timeout(function () {
                    yotpo.initWidgets();
                }, 500)

            }
        }
    }

answered Apr 9, 2016 at 16:16

Richy

1673 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shoaib Nawaz Over a year ago

I am using it with React. yotpo.initWidgets(); is not helpful in my case. After pagination, where items are updated in the list, rating widgets do not update calling with initWidgets() but when I call yotpo.refreshWidgets() it work well. refreshWidgets() has another problem, as it is called from componentDidUpdate and we trap into loop of refreshes.

BigglesZX · Accepted Answer · 2023-09-25 15:27:42Z

2

For Yotpo's "v3" widget library / API (release late 2022) the answer appears to be calling:

yotpoWidgetsContainer.initWidgets()

Their documentation on this is out of date, but I was able to find a corroborating official source in their docs on writing SPAs.

answered Sep 25, 2023 at 15:27

BigglesZX

1,0111 gold badge13 silver badges29 bronze badges

Comments

Livne Kestin · Accepted Answer · 2016-04-06 18:47:37Z

0

You don't need a directive to make this work.

The widget.js script uses the data attributes in the HTML. You need to make sure that those data attributes are set before the javascript is loaded.

I also recommend that you'll use one-way binding for the attributes.

answered Apr 6, 2016 at 18:47

Livne Kestin

111 silver badge3 bronze badges

2 Comments

Richy Over a year ago

Can you please elaborate on this as I am totally confused. Im using the directive to insert the script tag once the page loads. This is for the widget to take affect. If I just hard code the script tag into the header of the page, the Yotpo widget wont work

Livne Kestin Over a year ago

Can you give me a link to your site and I will try to help.

Collectives™ on Stack Overflow

Integrating widget into a angular app using a directive

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related