Welcart_Basic 検索BOXの仕組みとは？

WelCart_Basicの検索フォームは「商品」だけが検索できる仕様で作られております。

ここではこの検索フォームがどの様に制御されているのか？を解説します。

1.検索フォームの中でのFont Awesomeの使われ方

WelCart_Basicの「Font Awesome」で総てのフォントアイコンが使える様になりましたが、検索フォームの中でどの様に使われているのか？を解説します。

Font Awesomeには2つの使い方があります。

①HTMLとしてアイコンフォントを記述する。

②Unicodeでアイコンフォントを記述する。

検索アイコンの場合の各々のコードは下記になります。

①HTML：

②Unicode：f002

但し、Unicodeで指定する場合はUnicodeを囲む「&#xユニコード;」で指定する必要があります。

「&#x」は数値文字参照コードで、CSSには「font-family: FontAwesome ;」を指定する必要があります。

2.プログラムとHTML表示

検索BOXの表示プログラムは下記になります。

<div class="search-box">
	<i class="fa fa-search"></i>
	<?php get_head_search_form();?>
</div>

上記を実行されるとHTMLは下記になります。

<div class="search-box">
	<i class="fa fa-search"></i>
    <form role="search" method="get" action="https://hnw.ddnsfree.com/welcart/" >
		<div class="s-box">
			<input type="text" value="" name="s" id="head-s-text" class="search-text" />
			<input type="submit" id="head-s-submit" class="searchsubmit" value="&#xf002;" />
		</div>
    </form>
</div>

■検索アイコンは、上記の赤字の2か所で表示するプログラムとなっています。

3.検索BOXのCSS制御

3-1.スマホ、iPAD等（1000px未満）

上記画面が表示されます。検索アイコンをクリックすると下記画面が表示されます。

クリック操作は「front-customized.js」のJqueryで開閉しています。

3-2.PC画面（1000px以上）

■PCの場合は、初めから検索BOXが表示されています。

3-3.CSS

WelCart_BasicのCSSはモバイルファーストで記述されています。

ブレークポイントは下記の様になっています。

①620px(38.75em)以下

②740px(46.25em)まで

③880px(55em)まで

④1000px(62.5em)以上

スマホ、iPAD等

.search-box {
	float: left;
}
.snav .search-box i {
	font-size: 1.42857em;
	padding: .5em;
}
.search-box form {
	display: none;
}
.search-box.On form {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	padding: 1.4286em .714286em .714286em;
	background-color: #fff;
}
.search-box div.s-box {
	display: block;  
	position: relative;
	width: 100%;
	border: 1px solid #ccc;
	float: right;
	text-align: center;
}
.search-box input[type="text"] {
	width: 100%;
	border: none;
}
.search-box .searchsubmit {
	color: #aaa;
	font-size: 1.14286em;
	font-family: FontAwesome ;
	position: absolute;
	right: 0;
	top: 0;
	padding: .3124995em;
	background: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
	border-radius: 0;
}
.search-box .searchsubmit:hover {
	background: none;
}

.search-box {
	position: inherit;
	padding: 0 0 10px;
	float: right;
}
.snav .search-box i {
	display: none;
}
.search-box form {
	display: block;
}
.search-box div.s-box {
	width: auto;
}
.search-box input[type="text"] {
	width: auto;
	padding: .357143em;
	background-color: #fff;
}
.search-box .searchsubmit {
	position: inherit;	
	color: #161616;
	padding: .357143em;
}

■1つ目の青字の記述で「」を表示しています。

■2つ目の青字の記述で「検索フォーム」を非表示にしています。

■後は検索BOXのスタイル定義で、赤字の所で「FontAwesome」が指定されている為「」で虫眼鏡が表示されます

■1つ目の青字の記述で「」を非表示にしています。

■2つ目の青字の記述で「検索フォーム」を表示しています。

■上記で指定されてない項目はスマホのCSSを継承します