Judge.meは、Shopifyストア向けのレビューアプリケーションで、顧客からのレビューやフィードバックを収集、表示、管理するためのアプリです。
Judge.meは、無料プランと有料プラン（Judge.me Awesome Plan）を提供しています。無料プランでも基本的な機能は利用可能ですが、有料プランでは以下のような追加機能が提供されます。
アプリを組み込みし、商品ページ上のブロックでウィジェットを表示しただけでは、以下のように星のマークが表示されないことがあります。構築初心者はここでさっそく出鼻くじかれます。
アプリ管理画面右下のチャットボタンで、以下のようにキャプチャ付きでメッセージをお送りする
No stars are displayed.するとかなり迅速にアプリ側でfixed(修理)してくれるはず。
または自力で以下のcssをテーマのcssに記述
.jdgm-star {font-family: 'JudgemeStar' ;}以下のスクリプトを追加することで解消される。
<script>
setTimeout(() => {
let writeReviewLinks = document.querySelectorAll('.jdgm-write-rev-link');
let askQuestionBtns = document.querySelectorAll('.jdgm-ask-question-btn');
writeReviewLinks.forEach(link => {
link.removeAttribute('href');
});
askQuestionBtns.forEach(btn => {
btn.removeAttribute('href');
});
}, 1000);
</script>
デフォルトの表示は少しカタコトになっており、アプリの翻訳設定にないところでした。
どうやらストアのcssでfont awesomeを潰しているような記述がここに影響してしまうようだった。
font awesome、もう僕ほぼ使ってないんですよね。。使いたいアイコンは都度svgを設置してました。なのでこのアプリがfont awesomeマストのためにサイト内の仕様を微調整する必要が発生した。
label.jdgm-form__inline-label.jdgm-always-visible {
font-size: 0;
}
label.jdgm-form__inline-label.jdgm-always-visible:after {
content: '表示方法を選択ください';
font-size: 14px;
}
<script>
document.addEventListener('webkitAnimationStart', function(event) {
if (event.animationName == 'reviewer_name_format') {
//window.alert('ddd');
var select = document.querySelector('select[name="reviewer_name_format"]');
var options = select.options;
for (var i = 0; i < options.length; i++) {
switch (options[i].value) {
case '':
options[i].text = 'フルネーム(例：山田 太郎)';
break;
case 'last_initial':
options[i].text = '名のイニシャル(例：T.)';
break;
case 'all_initials':
options[i].text = '名・姓のイニシャル(例：T.Y.)';
break;
}
}
}
}, true);
</script>
<style>
@-webkit-keyframes reviewer_name_format {
0% {opacity: 0;}
100% {opacity: 1;}
}
select[name="reviewer_name_format"] {
-webkit-animation: reviewer_name_format 0.001s 1;
}
</style>
古いUI
最新UI (サイドメニュー内に”Settings”がなくなって項目も全然違っている)
新しいバージョンにアップグレードするには、Advanced > Advanced Settings > New Judge.me Admin のスイッチをオンにしてください。
UIが最新になった
アプリってノーコードで実装できるのが売りなんじゃないんかい！
Shopify構築で最も難しいのはアプリ組み込みだと個人的には思います。ここではこれまで丁寧に勉強してきたきれいなhtmlやcssやliquidコードが通用しなくなります。
だいたいが今回のようにところどころで地味に現れているハック的な手法を使い整えていくしかなく、不具合の原因調査でも経験則からの勘が重要になるので、Web技術全般的な経験が必要になることがあるように思います。