メインコンテンツへスキップ

【クリエイターモード】テンプレートMinimumに検索窓を設置したいです。方法を教えてください。

  • 更新

全ページ共通、ヘッダーモジュール、商品検索結果ページに
それぞれソースを追加することで表示が可能です。

 

◆全ページ共通CSSに検索関連で使用するCSSを追記

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通

「CSS」の末尾に以下の内容をコピー＆ペーストし保存してください。

/* header search box */
.header-search{
	max-width: 400px;
	margin: 0 auto 48px;
	position:relative;
}
.header-search-input{
	border: solid 1px #CCC;
	padding: 6px 12px;
	width: 100%;
	box-sizing: border-box;
	border-radius: 20px;
}
.header-search-button{
	position: absolute;
	top: 0;
	right: 10px;
	padding: 4px;
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	appearance: none;
	opacity: .8;
}
/* header search SP */
@media screen and (max-width: 640px){
	.header-search{
		width: calc(100% - 20px);
		box-sizing: border-box;
		margin:10px;
	}
}

 

 

◆全ページ共通JavaScriptに、Enterキーでの動作に関するJavaScriptを追記

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通

「JavaScript」の末尾に以下の内容をコピー＆ペーストし保存してください。

// search enter key 
$('.search-keyword').on('keypress', function(e) {
	if (e.keyCode == 13) {
	var index = $('.search-keyword').index(this);
	$('.search-url')[index].click();
	}
});

 

 

◆ヘッダーモジュールにキーワード検索フォームのHTMLを追記

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理

 

「ヘッダー」$module.header

の末尾に以下の内容をコピー＆ペーストし保存してください。

<div class="header-search">
    <input type="text" data-id="<{$search_form.keyword_id}>" value="<{$search.keyword}>" class="header-search-input search-keyword">
    <a href="<{$search_form.search_url}>" class="header-search-button search-url"><img src="/view/images/template/6/search_icon.png" alt=""></a>
</div>

 

 

◆商品検索結果ページのHTMLを追記

 ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品検索結果

「HTML」に以下の内容をコピー＆ペーストし保存してください。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><{$page.title}></title>
<meta name="description" content="<{$page.description}>">
<link rel="canonical" href="<{$page.canonical_url}>">
<link rel="shortcut icon" type="image/ico" href="<{$shop.favicon_url}>">
<meta property="og:type" content="website">
<meta property="og:title" content="<{$page.title}>">
<meta property="og:description" content="<{$page.description}>">
<meta property="og:site_name" content="<{$shop.name}>">
<meta name="twitter:card" content="Summary with Large Image">
<{$makeshop.head}>
<link rel="stylesheet" href="<{$page.css}>">
</head>

<body>
<{$makeshop.body_top}>
<{$module.header}>

<div class="wrap">
    <div class="main-contents">
        <h2 class="section-title guide-title"><span class="section-title-deco">検索結果</span></h2>
		<section class="search-wrap">
			<!--検索結果-->
			<div class="category-title">
			<h2>
				<span>
					<{if $search.keyword}>
						<{$search.keyword}>
					<{/if}>
					<{if $search.category.name}>
						<{$search.category.name}>
					<{/if}>
						<{if $search.price_low || $search.price_high}>
						<{if $search.price_low}><{$search.price_low}>円<{/if}>～<{if $search.price_high}><{$search.price_high}>円<{/if}>
					<{/if}>
					<{if $search.original_code}>
						<{$search.original_code}>
					<{/if}>
				</span>
			</h2>
			<p class="total-count">（全<span><{$search.total_count}></span>件）<{$search.display_count}>件表示</p>
			<dl class="list-head-sort">
				<dt>並び替え：</dt>
				<dd><a href="<{$search.sort_low_price_url}>">価格の低い順</a></dd>
				<dd><a href="<{$search.sort_high_price_url}>">価格の高い順</a></dd>
				<dd><a href="<{$search.sort_recommend_url}>">おすすめ順</a></dd>
				<dd><a href="<{$search.sort_new_url}>">新着順</a></dd>
			</dl>
			</div>
			
			<!--検索アイテム-->
			<{if $search.item.has_item}>
			
				<ul class="product-list">
					<{section name=i loop=$search.item.list max=9}>
						<li class="product-item <{if $search.item.list[i].is_soldout}>outstock<{else}>instock<{/if}>"><a href="<{$search.item.list[i].url}>">
							<figure class="product-item-image-wrap">
								<img src="<{$search.item.list[i].image_M}>" alt="<{$search.item.list[i].name}>" class="product-item-image">
								<{if $search.item.list[i].is_soldout}><span class="status-soldout">Soldout</span><{/if}>
								<{if $search.item.list[i].is_sale}>
								<div class="badge badge-sale">
									<span>SALE</span>
								</div>
								<{/if}>
							</figure>
							<p class="product-item-name"><{$search.item.list[i].name}></p>
							<div class="product-item-price-wrap">
								<{if $search.item.list[i].is_soldout}>
									<del class="product-item-price<{if $search.item.list[i].is_sale}> product-item-sale-price<{/if}>">￥<{$search.item.list[i].price|number_format}></del>
								<{else}>
									<span class="product-item-price<{if $search.item.list[i].is_sale}> product-item-sale-price<{/if}>">￥<{$search.item.list[i].price|number_format}></span>
								<{/if}>								
								<{if $search.item.list[i].is_sale}><span class="sale-discount product-item-sale-discount"><{$search.item.list[i].sale_rate}>%OFF</span><{/if}>								
								<{if $search.item.list[i].is_soldout}><span class="product-item-soldout">SOLD OUT</span><{/if}>
							</div>
							</a>
						</li>
					<{/section}>
				</ul>
			
			<!--ページャー-->
			<div class="pager-wrap">
				<{if $search.pager.has_item}>
					<ul class="pager">
					<{if !$search.pager.is_first_display}>
						<li><a href="<{$search.pager.first_url}>"><span class="prev">一番前へ</span></a></li>
					<{/if}>
					<{section name=i loop=$search.pager.list}>
						<{if $search.pager.list[i].is_current_page}>
							<li class="pager-item"><span class="current"><{$search.pager.list[i].number}></span></li>
						<{else}>
							<li class="pager-item"><a href="<{$search.pager.list[i].url}>"><span><{$search.pager.list[i].number}></span></a></li>
						<{/if}>
					<{/section}>
					<{if !$search.pager.is_last_display}>
						<li><a href="<{$search.pager.last_url}>"><span class="next">最後へ</span></a></li>
					<{/if}>
					</ul>
				<{/if}>
			</div>
			
			<{else}>
			<p class="empty">ご指定の条件に一致する商品が見つかりませんでした</p>
			<{/if}>
		
		</section>
    </div>
    <{$module.footer}>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="<{$page.javascript}>"></script>
<{$makeshop.body_bottom}>
</body>
</html>

 

 

◆商品検索結果ページのCSSを追記

 ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品検索結果

「CSS」に以下の内容をコピー＆ペーストし保存してください。

.section-title{
  font-size: 1.6rem;
  margin-bottom: 28px;
}
.list-head-sort {
	display: flex;
	margin: 3em auto;
    justify-content:center;
}
.list-head-sort dd{
    margin: 0 10px;
} 
@media screen and (max-width: 768px) {
    .list-head-sort {
        justify-content:flex-start;
    }
    .list-head-sort dt{
        display:none;
    } 
    .list-head-sort dd{
        padding:0 5px;
        border: solid 1px #999;
        margin: 2px;
        font-size: 13px;
    } 
}

 

 

 

＜追加後の表示例＞

PCヘッダーの表示

sample-pc.JPG

 

スマホヘッダーの表示

sample-sp.JPG

 

位置や大きさは自由に変更してください。

 

 

記事の改善にご協力ください。この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています

お役に立てず申し訳ございません。

「いいえ」を選んだ理由をお聞かせください。

ページの先頭へ戻る

関連記事