AND検索
タグで絞り込んで検索条件に一致するカラムを表示します。
| 追加可能 | 変更可能 | 変更NG | 複数設置 | ページ複製・ クリップボード使用可否 |
|---|---|---|---|---|
|
|
|
✕ |
○ |
| ※留意事項 | |||
|---|---|---|---|
|
※1：タグ一覧パーツを使用。任意のタグを選択できます。 |
絞り込み結果
該当なし
項目1テキスト
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
項目2テキスト
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
項目3テキスト
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
項目4テキスト
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
項目5テキスト
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
項目6テキスト
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
構造図
デモのパーツの構造を説明しています。
設定方法
-
CSSをカスタムCSSに記述。
-
編集画面用CSSを適切な位置に記述。
-
JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページある場合は共通フッターに配置。
-
クラス名を見本とあわせる。
- 行（row）を新規作成＞[タグ一覧パーツ]を配置＞クラス名「js-checkTag_list checkTag_list」を追加。
※絞り込み対象のタグを選択してください。 - 上記で用意した[タグ一覧パーツ]の下にボタンパーツを配置＞クラス名「js-andSearch_btn」を追加。
リンク先を、[このページの一番上に遷移]に設定する。
※旧CMSの場合はデザイン用のカスタムクラス（btn_custom01 等）をつけてください。 - 上記行（row）の下に、新規行（row）を作成し、
クラス名「js-searchResults_row andSearch_row js-displayNone」を追加。- 見出しパーツを配置し、クラス「hd_result」を追加。
※カスタム用のクラス（hd_custom01 等）は別途任意でつけてください。 - テキストパーツを配置し、クラス「js-searchNone」を追加。
- 見出しパーツを配置し、クラス「hd_result」を追加。
- 更に下に新規行（row）を作成し、クラス名「js-andSearch_row andSearch_row」を追加。
カラム（col）を3分割【※固定】し、中に必要なパーツを配置していきます。 - 上記カラム内にそれぞれタグ一覧パーツを配置し、任意のタグを選択します。
- 必要な分だけ、行を複製して作成していきます。
注意点
- 絞り込み対象のカラムは3分割固定としています。（結果表示の際も3カラムで統一しています）
カスタムCSS
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2024-07-10更新（v1.0.0）
/*----- アンド検索 START v1.0.0-----*/
.theme-fo-base .wrapper .contents {
:is(section, section[data-designpart-id]:not(:root:root:root:root)) {
.inner {
.row {
/* 初期読み込み時に一瞬見えてしまう（チラつき）防止用クラス */
.js-displayNone {
display: none !important;
}
&.js-searchResults_row {
margin-bottom: 80px;
.col {
&:has(.hd_result) {
width: 100% !important;
}
}
}
&.andSearch_row {
display: flex;
flex-wrap: wrap;
gap: 10px;
.col {
width: calc((100% - (10px * 2)) / 3) !important;
padding-top: 10px;
@include breakpoint-sp {
width: 100% !important;
padding: 0 10px;
}
}
}
.col {
.component {
&.tag_cloud {
&.checkTag_list {
label {
padding-left: 5px;
margin-right: 15px;
}
}
}
&.button {
&.js-andSearch_btn {
margin-top: calc(40px * var(--fo-spacing-coef) - 20px);//旧CMSの場合削除
@include breakpoint-sp {
margin-top: calc(40px * var(--fo-spacing-coef)* .75 - 10px);//旧CMSの場合削除
}
.button-cont {
a {
&:is(.blue,.red,.orange,.black,.white) {
&::before {
content: none;
}
&::after {
content: "\f107";
font-family: $font_family_awsm6;
font-weight: 900;
color: inherit;
position: relative;
top: initial;
transform: none;
margin-left: 5px;
}
}
}
}
}
}
}
}
}
}
}
}
/*----- アンド検索 END -----*/
編集画面用カスタムCSS
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2024-02-01更新（v1.0.0）
/*-- アンド検索 編集画面用 START v1.0.0--*/
.theme-fo-base .wrapper .contents {
:is(section, section[data-designpart-id]:not(:root:root:root:root)) {
.inner {
.row {
.js-displayNone {
display: block !important;
}
&.js-searchResults_row {
position: relative;
border: 1px solid #f00;
&::before {
content: "絞り込み結果表示用（削除しないでください）";
position: absolute;
color: #fff;
background: #f00;
padding: 5px 5px;
right: 0;
top: -24px;
font-size: 14px;
line-height: 1;
}
}
}
}
}
}
/*-- アンド検索 編集画面用 END --*/
JavaScript
2024-07-10更新（v1.0.0）
<script>
'use strict';
/* ------------------------------------
アンド検索 v1.0.0
------------------------------------ */
document.addEventListener('DOMContentLoaded', function() {
/* チェックタグを囲む設定 */
function replaceTagWithCheckbox(tag, index) {
if (!tag.closest('.js-andSearch_row')) {
/* divを作成 */
const wrapperDiv = document.createElement('div');
wrapperDiv.classList.add('checkTag-wrap');
/* checkbox inputを作成 */
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = `checkbox-${index + 1}`;
checkbox.name = 'checkTag';
/* labelを作成 */
const label = document.createElement('label');
label.htmlFor = checkbox.id;
label.textContent = tag.textContent;
/* divで囲む */
wrapperDiv.appendChild(checkbox);
wrapperDiv.appendChild(label);
tag.parentNode.replaceChild(wrapperDiv, tag);
}
};
/* DOM変更を監視するMutationObserverの設定 */
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
/* 新しく追加されたノードが`.tag`クラスを持つか確認 */
if (node.nodeType === 1 && node.classList.contains('tag')) {
replaceTagWithCheckbox(node, document.querySelectorAll(
'.checkTag-wrap').length);
}
});
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});
setTimeout(() => {
/*------------- 変数定義 START -------------*/
/* 絞り込み検索用ボタン */
const searchBtn = document.querySelector('.js-andSearch_btn a');
/* 絞り込み対象のカラム */
const searchCols = document.querySelectorAll('.js-andSearch_row .col');
/* 検索結果の該当要素を格納する用のrow */
const searchResultsRow = document.querySelector('.js-searchResults_row');
/* チェックが入ったタグを入れる配列 */
let checkTagTextLists = [];
/*------------- 変数定義 END -------------*/
/* チェックタグに上記のdivで囲む */
document.querySelectorAll('.js-checkTag_list .tag').forEach((tag, index) => {
if (tag.closest('.js-checkTag_list')) {
replaceTagWithCheckbox(tag, index);
}
});
/* inputタグを取得 */
document.getElementsByName('checkTag').forEach(checkTag => {
checkTag.addEventListener('change', function() {
const tagText = this.nextElementSibling.textContent;
if (this.checked) {
/* チェックが入った場合は配列へ追加 */
if (!checkTagTextLists.includes(tagText)) {
checkTagTextLists.push(tagText);
}
} else {
/* チェックが外れた場合は配列から削除 */
const index = checkTagTextLists.indexOf(tagText);
if (index !== -1) {
checkTagTextLists.splice(index, 1);
}
}
});
});
/* 絞り込むボタンクリック後の処理 */
searchBtn.addEventListener('click', function(e) {
e.preventDefault();
/* ちらつき防止用の非表示クラス削除 */
searchResultsRow.classList.remove('js-displayNone');
/* 既存の検索結果を削除する */
document.querySelectorAll('.search-result-item').forEach(item => item.remove());
searchCols.forEach(searchCol => {
/* 各カラム内のタグを取得 */
let searchTagTextLists = Array.from(searchCol.querySelectorAll(
'.tag')).map(tag => tag.textContent);
/* 該当するタグが一致したカラムを複製して格納用rowに入れる */
if (checkTagTextLists.every(tag => searchTagTextLists.includes(tag))) {
let result = searchCol.cloneNode(true);
result.classList.add("search-result-item");
searchResultsRow.appendChild(result);
}
});
/*検索結果の有無の表示*/
const noResultText = document.querySelector('.js-searchNone');
if (searchResultsRow.querySelectorAll('.search-result-item').length === 0) {
/*検索結果がない場合*/
noResultText.style.display = '';
searchResultsRow.classList.add('js-searchNone_row');
} else {
/*検索結果がある場合*/
noResultText.style.display = 'none';
searchResultsRow.classList.remove('js-searchNone_row');
}
});
}, 300); /* 読み込み速度が遅ければ数値上げる */
});
/* ------------------------------------
アンド検索 END
------------------------------------ */
</script>
© Basic Inc. All Rights Reserved.