widgetマスター
コミュニティのコメント
-
続けてCTAボタンを真ん中にする方法を案内いたします！
CSSを変更
[ 変更前 ]
.l-chat__qa { display: flex; flex-wrap: wrap; align-items: flex-start; }[ 変更後 ]
.l-chat__qa { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; /* ← 追加 */ }プレビュー
-
ポップアップの管理画面からコードの追加をお願いします。
HTML→JSタブ内の下記コード部分を変更後のものに差し替えてみてください。
変更前
if(popupRoot){
Array.from(popupRoot.querySelectorAll('a > iframe'), el => {
el.style.pointerEvents = 'all';
});
}変更後
if(popupRoot){
Array.from(popupRoot.querySelectorAll('a > iframe'), el => {
el.style.pointerEvents = 'all';
});
Array.from(popupRoot.querySelectorAll(':scope > div'), el => {
el.style.zIndex = 99998;
});
} -
ご依頼ありがとうございます！
確認させていただきますね！
-
お待たせしました！！！
下記 の 3箇所 javascript の修正をお願いいたします。
① btnRadio にコードを追加
let btnRadioes = el.querySelectorAll(".btn-single .l-chat__qa__a__item");
btnRadioes.forEach(function(btnRadio) {
btnRadio.addEventListener("click", function(e) {
showAnimation(e.target);
/* 追加ここから */
btnRadioes.forEach(function(btnRadio) {
btnRadio.classList.remove(selectedClass);
});
/* 追加ここまで */
e.target.classList.add(selectedClass);
const nextElm = e.target.closest(".l-chat__list__item").nextElementSibling;
nextElm.classList.add(showClass);
});
});② btnMultiple の修正
let btnMultiples = el.querySelectorAll(".btn-multiple .l-chat__qa__a__item");
btnMultiples.forEach(function(btnMultiple) {
btnMultiple.addEventListener("click", function(e) {
showAnimation(e.target);
e.target.classList.toggle(selectedClass); /* ← add を toggle に修正 */
});
});③ btnOption にコードを追加
let btnOptions = el.querySelectorAll(".btn-option .l-chat__qa__a__item");
btnOptions.forEach(function(btnOption) {
btnOption.addEventListener("click", function(e) {
showAnimation(e.target);
/* 追加ここから */
btnOptions.forEach(function(btnOption) {
btnOption.classList.remove(selectedClass);
});
/* 追加ここまで */
e.target.classList.add(selectedClass);
const hiddenElm = e.target.closest(".l-chat__qa").querySelector(".l-chat__hidden");
hiddenElm.classList.add(showClass);
});
});プレビュー
-
作成が完了いたしました！ご確認お願いします！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Widget名: 当月終了までのカウントダウン表示/非表示 ※要Javascript
カテゴリ: 自動表示
設置例: https://sb-draft-preview.squadbeyond.com/articles/FxXSipHvKybnSnAEQ/draft?token=06da293808eeec1fe01aed53a724beb4＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
設定日の初期設定値は 5日前です。
当月終了日から設定日前の0時になるとカウントダウンを自動表示します。
翌月の1日（0時）になるとカウントダウン自体が非表示になります。設定値は javascript の endDay または HTMLにて設定変更が可能です。 -
日時指定の書式が間違っているようです！
正しい書式に修正して試してみてくださいませ。現在の指定
date: '2023/10/31/11:00', //日付指定（時間指定の場合は false を入力）
正しい書式
date: '2023/10/31 11:00:00', //日付指定（時間指定の場合は false を入力）
補足情報としてSP実機のみで動かなかった原因はおそらくSafariブラウザの端末で確認したからだと思います！
Chromeはけっこう適当な書式でも通ってしまうんですがSafariはダメなんですね・・・。参考：https://zenn.dev/aiueda/articles/f9e11aeca7813f
-
コードが全て見えないので同様のことをやってみての予想ですが、
①点滅widgetを入れる ②文字を書き換えてbrで改行をつける ③spanタグを使った装飾をする（伸縮マーカーなど）
とすると
①② <span class="flash">サンプル<br>テキスト</span>
では問題なく点滅していると思いますが
③ <span class="flash"> <span 装飾の色々>サンプル</span></span><br> <span 装飾の色々>テキスト</span>
となり、上側しか点滅しない、下側の位置がおかしいとなるのかな…と想定しております。なので、下側にも
<span class="flash"> <span 装飾の色々>サンプル</span></span><br> <span class="flash"> <span 装飾の色々>テキスト</span> </span>
でflashクラスのspanタグで囲ってみてあげてください！
-
・単一選択
・各設問回答後、自動スクロール
をする「アンケート-チャット型※要javascript(アンケート)」はいかがでしょうか？ -
閉じタグの位置によっての崩れになっております。
2つのカルーセルのHTMLコード最後の方に
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>というコードがあります。
その前にある「</div>」を一番最後に移動させてください。
（この閉じdivがカルーセルの箱自体のdivに対してしまっているので、この閉じdivの下にある矢印が迷子になっているようです。）
変更前
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>変更後
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div> -
早速お試しいただきありがとうございます！
よかったです☺
-
ご相談ありがとうございます💫
確認させていただきますね！！！
-
参考ページの共有もありがとうございます💪
-
よかったです👏
-
かしこまりました！
追加させていただきますね😊