ポップアップのボタンクリック時にページ側の挙動を制御する

通常のステップでは、ポップアップ内のボタンをクリックしたときの挙動は次の3種類があります。

• 指定のURLに移動する
• 次のステップに移動する
• ステップを閉じる

ステップのHTMLに直接 JavaScript を記述してカスタマイズすると、さらに細かい挙動を実現することが可能です。

例1：Webサイト側の特定の要素のクリックと同じ挙動にする

ステップのボタンをクリックすることで、Webサイト側の特定の要素をクリックしたときと同じ挙動をさせることができます。

例えば、物件の検索サイトの場合、ステップの質問に答えていくと、自動的に「東京都」「沿線」「一人暮らし」などの条件で表示物件を絞り込んでいくといった挙動が可能になります。

例2：ページ内の指定の位置までスクロールする

ステップのボタンをクリックすると、ページ内の指定の位置までスクロールさせることができます。通常、ページの途中に移動させる場合は移動先にページ内リンクの設定が必要です。しかし、この方法であればページのコードを修正する必要はなく、直接移動先の要素を指定できます。

例えば、ステップ内の「商品の仕様を詳しく見る」というボタンをクリックすると、商品仕様が書かれている場所まで移動させるといった挙動が可能です。

サンプルコード

Sprocketの管理画面で、ステップ内のHTMLに下記のJavaScriptを記述します。

<script>
(function(){
  var props = {
    scenario: 'scenario1',
    phase: 'phase1',
    pattern: 'pattern1',
    stepFrom: 'step_01',
    stepTo: 'step_02'
  };
  
  var bindButtonClick = function(props) {
    SPSDK.gears.navigation.on('click', function(e, info, dom) {
      SPSDK.gears.navigation.off('click');
      if (info.scenario === props.scenario 
        && info.pattern === props.pattern 
        && info.step === props.stepFrom 
        && SPSDK.$(dom).data().next === props.stepTo) {
          console.log('Do something');
      }
    });
  };
  
  bindButtonClick(props);
})();
</script>

📘

JavaScriptを記述するときの注意

• console.log('Do something');の箇所に実行したい処理を記述してください。
• propsのscenario、phase、pattern、stepFromには、JavaScriptを記述しているシナリオ、フェーズ、パターン、ステップのIDを指定してください。
• stepTo で「どのボタンがクリックされたときに処理を実行するか」を指定します。対象となるボタンの連結先のステップIDを指定してください。
• 上記のサンプルコードは「scenario1-phase1-pattern1のstep_01 のボタンのうち、step_02に連結されているボタンがクリックされたら処理（console.log('Do something');）を実行する」という挙動になります。