因此,我目前已将Yotpo的“评论和评论”集成到了Angular应用程序中。
它由一个JavaScript小部件和一些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>
通过将JS放入指令中,我可以使用它,但是,仅当您重新加载页面时它才可以使用。
为解决此问题,我在用户离开页面时删除了脚本,并在用户返回页面时重新插入了脚本
示例:
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();
}
不幸的是,这不起作用。任何建议将不胜感激。
因此,我找到了一个解决方案,并认为我可以将其发布在这里,因为我敢肯定,如果其他人在Angular中使用Yotpo,无疑会遇到这个问题。
答案是yotpo.initWidgets();
不幸的是,Yotpo的文档中没有关于此的信息。
所以这就是我最终要做的事,它的工作原理就像一种魅力:
.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)
}
}
}
您不需要指令即可完成这项工作。
widget.js脚本使用HTML中的数据属性。您需要确保在加载javascript之前已设置这些数据属性。
我还建议您对属性使用单向绑定。
我如何在Shopify平台中实现这一点?