【簡単】WEBサイトでホップアップ表示される見積機能の作り方（Snow Monkeyで実装）

WEB・PC

WEBサイト制作などの組み合わせが必要な商品の販売をする際に、その場で見積が分かると良いと思った事はありませんか？

私はWEB制作の事業を行っており、その場でざっくり見積もりが分かるとクライアントさんが便利かな？と思いホップアップ式の見積機能を実装してみまたので共有します。

このブログでは、次のような簡易見積り機能が実装できます。

こちらはWordPressのテーマ、Snow Monkeyで実装しています。テーマによっては見た目が変わる場合があります。

今回は通常サイトへの実装と、WordPressのSnowMonkeyテーマでの実装方法解説していきます。
※他のWordPressも実装方法は似ているため応用してみて下さい

サーバーやWordPressの知識が多少ある方が対象となっております。

必要ファイルを準備

今回使うファイルは、HTML, CSS, JavaScriptの３つになります。
ひとまず3つのファイルをつくってブラウザに表示してみて下さい。コードはコピーできるように貼り付けておきます。

各要素の動きはコメントアウト表示の中で解説していますのでコードを確認してみて下さい。

■HTML

<!DOCTYPE html>
<html>
<head>
  <title>TAG index Webサイト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box">
    <a class="button" href="#popup1">ポップアップ</a>
  </div>

  <!-- WordPressで実装の場合はここから -->
  <div id="popup1" class="overlay">
    <div class="popup">
      <h2>簡易見積もり（税込み）</h2>
  <!-- &times;は特殊文字で✖を表示 -->
      <a class="close" href="#">&times;</a>
      <div class="content">
        <form action="#" name="form1">
          <table>
            <tr>
              <th>商品名</th>
              <th>数量</th>
              <th>金額(円)</th>
            </tr>
            <tr>
              <td>ホームページ</td>
              <!-- onchangeタグはイベントハンドラーと言って、JavaScriptのメソッドを呼び出すことができます。イベントハンドラーには種類が複数あり、onchangeはフォームの内容が変更されたときに発動するイベントです。 -->
              <!-- この場合、セレクトの中身が変更された場合sum()メソッドが呼び出されます -->
              <td><select name="price1" onchange="sum()">
                  <option>0</option>
                  <option>1</option>
                </select></td>
              <td><input type="text" name="field1" size="8" value="0"></td>
            </tr>
            <tr>
              <td>ランディングページ</td>
              <td><select name="price2" onchange="sum()">
                  <option>0</option>
                  <option>1</option>
                </select></td>
              <td><input type="text" name="field2" size="8" value="0"></td>
            </tr>
            <tr>
              <td>追加+1ページ</td>
              <td><select name="price3" onchange="sum()">
                  <option>0</option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                  <option>6</option>
                  <option>7</option>
                  <option>8</option>
                  <option>9</option>
                </select></td>
              <td><input type="text" name="field3" size="8" value="0"> </td>
            </tr>

            <tr>
              <td>決済機能+1ページ</td>
              <td><select name="price4" onchange="sum()">
                  <option>0</option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                  <option>6</option>
                  <option>7</option>
                  <option>8</option>
                  <option>9</option>
                </select></td>
              <td><input type="text" name="field4" size="8" value="0"> </td>
            </tr>
            <tr>
              <td>ドメイン取得</td>
              <td><select name="price5" onchange="sum()">
                  <option>0</option>
                  <option>1</option>
                </select></td>
              <td><input type="text" name="field5" size="8" value="0"></td>
            </tr>
            <tr>
              <td>MEO対応</td>
              <td><select name="price6" onchange="sum()">
                  <option>0</option>
                  <option>1</option>
                </select></td>
              <td><input type="text" name="field6" size="8" value="0"></td>
            </tr>
            <tr>
              <td>公式LINE対応</td>
              <td><select name="price7" onchange="sum()">
                  <option>0</option>
                  <option>1</option>
                </select></td>
              <td><input type="text" name="field7" size="8" value="0"></td>
            </tr>
            <tr>
              <td>ロゴ制作</td>
              <td><select name="price8" onchange="sum()">
                  <option>0</option>
                  <option>1</option>
                </select></td>
              <td><input type="text" name="field8" size="8" value="0"></td>
            </tr>
            <tr>
              <td>LINEスタンプ</td>
              <td><select name="price9" onchange="sum()">
                  <option>0</option>
                  <option>1</option>
                </select></td>
              <td><input type="text" name="field9" size="8" value="0"></td>
            </tr>
            <tr>
              <td><strong>合計</strong></td>
              <td></td>
              <td><input type="text" name="field_total" size="8" value="0"></td>
            </tr>
          </table>
          <p>※サーバー、メンテナンス代等は<br>別途見積もりとなります。</p>
        </form>
      </div>
    </div>
  </div>
  <!-- WordPressで実装の場合はここまで -->

  <script src="index.js"></script>
</body>
</html>

■CSS

.box {
  width: 80%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  border: 2px solid red;
  border-radius: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
  background:red;
  color: #fff;
}

/* WordPressで実装の場合はここから下を使用 */

/* visibility:hidden＝ボックスを非表示にする */
.overlay {
  z-index: 9999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

/* ◯◯:target = aタグが実行された場合◯◯クラスのCSSが発動する
/* visibility:visible=ボックスを表示 */
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.content{
  text-align:center;
}

table{
  margin:0 auto!important;
}

.popup {
  margin: 10px auto;
  padding: 30px;
  background: #fff;
  border-radius: 5px;
  width: 40%;
  position: relative;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

@media (max-width: 700px){
  .box{
    width: 90%;
  }
  .popup{
    width: 90%;
  }
  .overlay{
  font-size:12px;
  }
}

■JavaScript

// onchangeによりsum()が呼び出される
function sum(){

	// 合計金額をprice1という変数に代入する
	// document＝ブラウザに情報を保存する
	// selectedIndex＝セレクトボックスで選択中の番号を取得する
	// 番号を取得した後19800をかけた値を返す
	const price1 = document.form1.price1.selectedIndex * 19800; 
// price1をfiled1のvalueに代入すする
	document.form1.field1.value = price1; 

	const price2 = document.form1.price2.selectedIndex * 29800; 
	document.form1.field2.value = price2; 

	const price3= document.form1.price3.selectedIndex * 7980; 
	document.form1.field3.value = price3; 

	const price4 = document.form1.price4.selectedIndex * 2980; 
	document.form1.field4.value = price4; 

	const price5 = document.form1.price5.selectedIndex * 1980; 
	document.form1.field5.value = price5; 
	
	const price6 = document.form1.price6.selectedIndex * 4980; 
	document.form1.field6.value = price6; 	
	const price7 = document.form1.price7.selectedIndex * 2980; 
	document.form1.field7.value = price7; 
  
	const price8 = document.form1.price8.selectedIndex * 5980; 
	document.form1.field8.value = price8; 
 
	const price9 = document.form1.price9.selectedIndex * 5980; 
	document.form1.field9.value = price9; 

	// すべての小計金額をtotalとう変数に代入する
	const total = price1 + price2 + price3 +price4 + price5 + price6 + price7 + price8 + price9;

	// field_totalという名前のボックスへtotalの値を表示
	document.form1.field_total.value = total; 
}

ブラウザに下の画像のような形で表示できればOKです。
ボタンを押すとホップアップで見積もり画面が表示されるはずです。


このままでも使えるので、自分なりにカスタマイズしてもらえれば使いやすくなると思います。

WordPressで使う場合

WordPressで実装する場合は、子テーマにCSSとJavaScriptを記述して、ブロックエディタでHTMLを記述します。

今回はSnowMonkeyというテーマで実装しました。MySnowMonkeyのプラグインが導入されている前提で進めていきます。
※まだ入れていない人はMySnowMonkeyを入れましょう

導入手順は以下の通りです。

①FTPツールを立ち上げ後、該当のサーバーへファイルを入れる
②MySnowMonkeyにファイルを読み込むコードを記述
③設置したい場所にボタンとHTML、2つのブロックを作成

①FTPツールを立ち上げ後、該当のサーバーへファイルを入れる

まずはFTPツールを立ち上げて、WordPressを使っているサーバーと接続しましょう。
ローカル環境で開発中の方は、ローカル上でMySnowMonkeyフォルダの中に各ファイルを直接入れればOKです。

FTPツールがわからない人は、一度調べてみましょう。
こちらの記事が分かりやすいです。

このような画面になればOKです。
※画面はXサーバーになります
左側のローカルから右側のWordPressが入っているサーバーへCSSとJavaScriptのファイルを移動させましょう。
※HTMLファイルは移動させない


MySnowMonkeyのプラグインを入れていなくてもCSS、JavaScriptファイルは取り込めますが今回は割愛します。
副業お助けマンのブログ（じゃんきーさん）で詳しく解説しています。

②MySnowMonkeyにファイルを読み込むコードを記述

MySnowMonkeyにファイルを入れただけでは読み込めませんのでダッシュボードのプラグインからエディターを開き必要なコードを記述して下さい。

■CSSとJavaScriptを読み込むコード

add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style(
		 'my-snow-monkey',
		 MY_SNOW_MONKEY_URL . '/style.css',
		 [ Framework\Helper::get_main_style_handle() ],
		 filemtime( MY_SNOW_MONKEY_PATH . '/style.css' )
		);
	}
);

add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_script(
		 'my-snow-monkey',
		 MY_SNOW_MONKEY_URL . '/index.js',
		 [ Framework\Helper::get_main_style_handle() ],
		 filemtime( MY_SNOW_MONKEY_PATH . '/index.js' )
		);
	}
);

③設置したい場所にボタンとHTML、2つのブロックを作成

WordPressの既存テーマを使う場合ボタンブロックが最初から備わっている場合が多いので使っていきましょう！
※自分で作ってもOK

ボタンのリンク先は「#popup1」にすると、見積もり画面へ遷移します。

ボタンを作った後は、ボタンブロックの下に新しいカスタムHTMLブロックを作成してHTMLファイルのコードを貼り付ければOKです。

HTMLブロックをプレビューしても表示がわかりにくいので、ブログ全体をプレビュー表示させ実装できているか確認して下さい。

テーマによっては、表示が変わる場合もありますのでCSS等で調整が必要かもしれませんので、その辺はうまく対応していきましょう。

まとめ

今回はホップアップ式の見積もり機能を実装していきました。

クライアント様の最も気にする事のひとつが価格だとおもいますので、その場でざっくりとした金額が分かると親切なのかな？と思いますので自分の商品を案内する際に活用してみてはいかがでしょうか！

今回の参考にした記事はこちらです。
HAPPY SNOW MONKEY（オレインさん）
TAG INDEX

タイトルとURLをコピーしました