###・前提条件 ・発生している問題・エラーメッセージ ・実装したい機能
ユーザー登録を行うにあたって規約を全てスクロールすることで、
同意チェックボックスがクリックできるようにしたいです。
(デフォルトではチェックボックスがクリックできない)
###試したこと
Tool boxを用いてJavaScriptによる実装を試してみましたが上手く動作しません。
(規約内容は伏せております)
こんにちは。javascriptを使わずに実装できそうな気がしましたが、難しいかもしれないです。
javascriptを使って実装してみました
スクロールする外側のGroupに、containerというidをつけて、Run javascriptでページロード時に
var container = document.getElementById('container');
var containerHeight=$('#container').innerHeight();
container.addEventListener('scroll', () => {
var scrollPosition = container.scrollTop;
var contentHeight=container.scrollHeight;
if(scrollPosition + containerHeight === contentHeight){
bubble_fn_switch();
}
});
と実行します。あとは、switchという名前のjavascript to bubbleを配置して、それをトリガーにチェックボックスを有効にする感じです。
↓サンプル
参考になれば幸いです
「いいね！」 1
ありがとうございます!!
共有していただいた事項を実装してみたのですがチェックボックスのクリックができない状況です。
WorkflowとConditional、各種idも同一のものにしてみたのですが動作しておらず
ご教示いただけますと幸いです…!!
JavaScript to bubbleのエレメントのTrigger a eventにチェックは入っていますでしょうか？
これにチェックを入れないと、Workflowが動作しません。
もしチェックを入れているようであれば、Workflowの中に別のわかりやすいアクション(ページの移動など)を入れて、Workflowが動いていないのか、チェックボックスを有効化するところで上手くいっていないかの問題の切り分けができますので一度やってみてください
ありがとうございます!!
ご連携いただいた箇所にもチェックしておりました。
page loadした際にrun javascriptを実行し、ページ遷移するWork Flowを設定したところこちらは動作しておりました。
またデバッカーを確認したところ以下のエラーが出ており、
調整してみたのですがerrorが消えず変わらずチェックができない状況です。
General error
Bug in custom code TypeError: Cannot read properties of null (reading ‘addEventListener’)
at eval (eval at (PLUGIN_1488796042609x768734193128308700/Toolbox-action–Run-javascript-.js), :3:11)
at eval (PLUGIN_1488796042609x768734193128308700/Toolbox-action–Run-javascript-.js:3:46)
at root ()
以上のエラー内容から推察できる要項はございますでしょうか??
idをcontainerにしたエレメントがうまく読み取れていない可能性があります。
考えられる原因としては複数のエレメントに対してcontainerというIDをつけていたりしないでしょうか？もしその場合はどちらかのIDを変えてみてください。
また、単純なスペルミスなどもないかもう一度ご確認お願いします。
ありがとうございます!!
各種エレメントidの重複など確認してみたしたが、
誤字・ダブり共にありませんでした。
そこで tomonorihashimoto930さんにご連携いただいた形式のみで
ページを作成しプレビューを見てみたところ同様なエラーが発生しておりました。
そもそもプラグインや既存の設定が異なる可能性もあるのかと思ったのですが、
そのようなパターンはありますでしょうか??
こんにちは。既存のプラグインとの相性という可能性はあるかもしれません。
少しだけコードを改良してみました。
(index2のページです)
読み込めるものはjavascriptの中にbubbleのdynamic data を入れた他、一番下ではなく、下から50px以上で判定されるようにしているので細かい設定の影響を受けにくいはずです。
お手数ですが、是非こちらを参考にしてみていただきたいです。
「いいね！」 2
わざわざ別仕様もありがとうございます!!
こちらのjavascriptを参考に修正を行ったのですが同様のエラーが出ている状態です。
別で新規のアプリケーションも立ち上げ
同様の操作を行ってみたのですが、こちらでも同様のエラーが出てしまいました。
プラグインとの相性、環境の違いでしょうか…。
こんにちは。
規約の同意などでグループの下までスクロールしたらチェックボックスを有効にしたいという需要はありそうなので、プラグインにしてみました。
プラグインページ
サンプルアプリ
さすがにプラグインにすれば環境の違いは乗り越えられる…はずなので、ぜひ試してみてください
(プラグインタブからScrollToEndActionTriggerと検索すれば出るはずです)
「いいね！」 1
プラグイン作成までありがとうございます
早速利用しようとしたところ検索しても出てきませんでした…
プラグインのURLから直接自分のアプリのエディターにとんでも出てこないのですが
原因分かりますでしょうか??
もしかしたらリリース直後だと読み込みづらいのかもしれません
プラグインの検索画面で、URLの最後に
&show_plugin=ScrollToEndActionTrigger
と付け加えてみてください。30秒くらい時間はかかりますが出てくるはずです
ありがとうございます!!
仰る通り待っていると検索結果として表示されました
早速利用してみたところ
The plugin Missing plugin / element ScrollToEndActionTrigger threw the following error: TypeError: Cannot read properties of null (reading ‘addEventListener’)
at eval (PLUGIN_1689157941168x200099781276860400/Missing-plugin-update–ScrollToEndActionTrigger-.js:7:11)
以上のエラーが表示されてしまったのですが、
container_idに指定する要素が読み込めていないということでしょうか??
こちらの環境で試しにID attributeを外して動かしてみると、同じエラーが出ました。
IDが読めていないような気がします。
それが、ほかのプラグインの影響なのか、開発環境の影響なのか、ほかの理由なのかはすみませんが検討がつきません、、、
確認ですが、こちらがデモで作成したアプリのプレビューは正常に動いていますか？
「いいね！」 1
そうなんですね…
丁寧にご返信いただきありがとうございます！！
はい!!デモアプリのプレビューは動作しております!!
デモアプリのプレビューが動くようであれば、少なくとも新しいアプリを作って、デモアプリと全く一緒の状態にすれば、正常に動くはずです。
それでも動かないようであれば、Bubble側の問題だと思います。
もう一度試してみて、それでも上手くいかなければ、デモアプリと作ったアプリを添付してBubbleのサポートに問い合わせてみた方が良いかもしれません
「いいね！」 1
そうですよね、ありがとうございます!!
もう少し試してみて、ダメそうであれば問い合わせをしてみます！
丁寧にご教示いただきありがとうございました！
また今後ともよろしくお願いいたします。
「いいね！」 1