{"id":45276,"date":"2022-01-13T15:39:08","date_gmt":"2022-01-13T06:39:08","guid":{"rendered":"\/present\/?p=45276"},"modified":"2025-10-25T14:51:56","modified_gmt":"2025-10-25T05:51:56","slug":"lacecurtain-designfunction","status":"publish","type":"post","link":"https:\/\/www.bicklycurtain.com\/present\/2022\/01\/13\/lacecurtain-designfunction\/","title":{"rendered":"\u3073\u3063\u304f\u308a\u30ab\u30fc\u30c6\u30f3\u306e\u30ec\u30fc\u30b9\u30ab\u30fc\u30c6\u30f3\u7279\u96c6"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><a href=\"https:\/\/www.bicklycurtain.com\/f\/613\" class=\"c-featured__link\"><video controls src=\"https:\/\/bicklycurtain.itembox.design\/item\/common\/banner\/lace_design.mp4\"  autoplay playsinline muted><\/video><\/a>\n<\/figure>\n\n\n\n<script>\n  \/\/ \u3053\u3060\u308f\u308a\u691c\u7d22\u30bb\u30c3\u30c6\u30a3\u30f3\u30b0\n  const searchSettings = {\n  \"searchTitle\": \"\u30ec\u30fc\u30b9\u30ab\u30fc\u30c6\u30f3\",\n  \"searchOnly\": true,\n  \"searchKeyword\": false,\n  \"searchResultURL\": \"https:\/\/www.bicklycurtain.com\/present\/2024\/03\/28\/custom-search-lacecurtain\/\",\n  \"setCategory\": \"\u30ec\u30fc\u30b9\u30ab\u30fc\u30c6\u30f3\",\n  \"setTag\": \"\",\n  \"addSubCategory\": [],\n  \"tags\": {\n    \"\u6a5f\u80fd\": [\n      {\n        \"name\": \"\u906e\u50cf\",\n        \"image\": \"\"\n      },\n      {\n        \"name\": \"\u30df\u30e9\u30fc\",\n        \"image\": \"\"\n      },\n      {\n        \"name\": \"UV\u30ab\u30c3\u30c8\",\n        \"image\": \"\"\n      },\n      {\n        \"name\": \"\u9632\u708e\",\n        \"image\": \"\"\n      },\n      {\n        \"name\": \"\u906e\u71b1\u30fb\u4fdd\u6e29\",\n        \"image\": \"\"\n      }\n    ]\n  },\n  \"tagsOption\": {\n    \"\u6a5f\u80fd\": {\n      \"searchType\": \"AND\",\n      \"panelOpen\": false\n    }\n  }\n};\n<\/script>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@3.4.21\/dist\/vue.global.min.js\"><\/script>\n<div id=\"app\" class=\"fs-c-productList\">\n  <div class=\"c-search-panel\">\n    <div class=\"c-search-panel__header\">\n      <h2>{{searchCustomSettings.searchTitle}}\u3000{{filterProductArray.length}}\u4ef6<\/h2>\n      <div class=\"l-header-search\">\n          <div class=\"c-search\" v-if=\"searchKeyword\">\n            <input type=\"text\" name=\"keyword\" maxlength=\"1000\" v-bind:value=\"keywordParam\" class=\"c-search__input\"\n                   placeholder=\"\" v-model=\"keywordParam\" v-on:change=\"filterProducts\">\n            <button class=\"c-search__submit\" v-on:click=\"filterProducts\"><img loading=\"lazy\"\n                    src=\"https:\/\/bicklycurtain.itembox.design\/item\/common\/icon\/search.svg\" width=\"16\" height=\"16\"\n                    alt=\"\u691c\u7d22\"\n                    decoding=\"async\"><\/button>\n          <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"c-search-panel__category\" :class=\"{'--single' : categoryArray.length === 1}\">\n      <h3 class=\"c-search-panel__category-title\">\u30ab\u30c6\u30b4\u30ea<\/h3>\n      <div class=\"c-search-panel__tag-list --category\" v-if=\"categoryArray.length > 0\">\n        <label v-bind:for=\"category\" v-for=\"category in categoryArray\" class=\"c-search-panel__label --category\">\n          <input type=\"checkbox\" v-bind:id=\"category\" v-bind:value=\"category\" class=\"c-search-panel__checkbox\"\n                 v-model=\"selectedCategories\" v-on:change=\"filterProducts\">\n          {{category}}\n        <\/label>\n      <\/div>\n    <\/div>\n    <div class=\"c-search-panel__category\" v-if=\"subCategoryArray.length > 0\">\n      <h3 class=\"c-search-panel__category-title\">\u30b5\u30d6\u30ab\u30c6\u30b4\u30ea<\/h3>\n      <div class=\"c-search-panel__tag-list --category\">\n        <label v-bind:for=\"category\" v-for=\"category in subCategoryArray\" class=\"c-search-panel__label --category\">\n          <input type=\"checkbox\" v-bind:id=\"category\" v-bind:value=\"category\" class=\"c-search-panel__checkbox\"\n                 v-model=\"selectedSubCategories\" v-on:change=\"filterProducts\">\n          {{category}}\n        <\/label>\n      <\/div>\n    <\/div>\n    <div class=\"c-search-panel__tag-list --category\" v-if=\"categoryArray.length === 0\">\n      <div v-for=\"category in [1,2,3,4,5,6]\" class=\"u-skeleton\" style=\"max-width: 200px;height: 2.5em;\"><\/div>\n    <\/div>\n    <details class=\"c-search-panel__details\" v-for=\"(tagGroup, index) in searchCustomSettings.tags\" :open=\"searchCustomSettings.tagsOption[index].panelOpen\">\n      <summary class=\"c-search-panel__summary\">\n        <h3 class=\"c-search-panel__tag-title\">{{index}}<\/h3>\n      <\/summary>\n      <div class=\"c-search-panel__tag-list\" v-if=\"tagGroup.length > 0\">\n        <label v-bind:for=\"tag.name\" v-for=\"tag in tagGroup\" class=\"c-search-panel__label\">\n          <img v-if=\"tag.image !== ''\" :src=\"tag.image\" alt=\"\" class=\"c-search-panel__tag-image\">\n          <input type=\"checkbox\" v-bind:id=\"tag.name\" v-bind:value=\"tag.name\" class=\"c-search-panel__checkbox\"\n                 v-bind:name=\"index\"\n                 v-model=\"selectedTagsByGroup[index]\" v-on:change=\"filterProducts\">\n          {{tag.name}}\n        <\/label>\n      <\/div>\n    <\/details>\n  <\/div>\n  <div class=\"result-wrapper\" id=\"result-wrapper\">\n    <div class=\"productList-wrapper\" id=\"productList-wrapper\" v-if=\"!searchOnly\">\n      <div class=\"fs-c-productList__controller\">\n        <div class=\"fs-c-sortItems\">\n          <span class=\"fs-c-sortItems__label\">\u4e26\u3073\u66ff\u3048<\/span>\n          <ul class=\"fs-c-sortItems__list\">\n            <li class=\"fs-c-sortItems__list__item\" :class=\"{ 'is-active': sortOption === 'latest' }\">\n              <button class=\"fs-c-sortItems__list__item__label\" v-on:click=\"sortProducts('latest')\">\u65b0\u7740\u9806<\/button>\n            <\/li>\n            <li class=\"fs-c-sortItems__list__item\" :class=\"{ 'is-active': sortOption === 'price_low' }\">\n              <button class=\"fs-c-sortItems__list__item__label\" v-on:click=\"sortProducts('price_low')\">\u5b89\u3044\u9806<\/button>\n            <\/li>\n            <li class=\"fs-c-sortItems__list__item\" :class=\"{ 'is-active': sortOption === 'price_high' }\">\n              <button class=\"fs-c-sortItems__list__item__label\" v-on:click=\"sortProducts('price_high')\">\u9ad8\u3044\u9806<\/button>\n            <\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"fs-c-listControl__status\">\n          <div class=\"c-search-pagination\" v-if=\"totalPages >= 1\">\n            <button class=\"c-search-pagination__button\" aria-label=\"\u524d\u306e\u30da\u30fc\u30b8\u3078\" v-on:click=\"goToPage(currentPage - 1)\"\n                    :disabled=\"currentPage === 1\"><\/button>\n            <div class=\"c-search-pagination__count\"><span class=\"c-search-pagination__count--current\">{{ currentPage\n              }}<\/span> \/ <span class=\"c-search-pagination__count--current\">{{ totalPages }}<\/span><\/div>\n            <button class=\"c-search-pagination__button\" aria-label=\"\u6b21\u306e\u30da\u30fc\u30b8\u3078\" v-on:click=\"goToPage(currentPage + 1)\"\n                    :disabled=\"currentPage === totalPages\"><\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"fs-c-productList__list\" v-if=\"visibleProducts.length > 0\">\n        <article class=\"fs-c-productList__list__item\" v-for=\"article in visibleProducts\">\n          <div class=\"fs-c-productListItem__imageContainer\">\n            <div class=\"fs-c-productListItem__image fs-c-productImage\">\n              <a v-bind:href=\"article.uri\">\n                <img alt=\"\" v-bind:src=\"'https:\/\/bicklycurtain.itembox.design\/product' + article.imageUrl\"\n                     class=\"fs-c-productListItem__image__image fs-c-productImage__image\" width=\"550\" height=\"550\"\n                     loading=\"lazy\">\n              <\/a>\n            <\/div>\n          <\/div>\n          <h2 class=\"fs-c-productListItem__productName fs-c-productName\">\n            <a v-bind:href=\"article.uri\">\n              <span v-text=\"article.name\" class=\"fs-c-productName__name\"><\/span>\n            <\/a>\n          <\/h2>\n          <div class=\"fs-c-productListItem__prices fs-c-productPrices\">\n            <div class=\"fs-c-productPrice fs-c-productPrice--selling\">\n          <span class=\"fs-c-productPrice__main\">\n            <span class=\"fs-c-productPrice__main__label\">\u8ca9\u58f2\u4fa1\u683c<\/span>\n            <span class=\"fs-c-productPrice__main__price fs-c-price\">\n              <span class=\"fs-c-price__currencyMark\">\u00a5<\/span>\n              <span class=\"fs-c-price__value\">{{Number(article.unitPrice).toLocaleString()}}<\/span>\n            <\/span>\n          <\/span>\n              <span class=\"fs-c-productPrice__addon\">\n            <span class=\"fs-c-productPrice__addon__label\">\u7a0e\u8fbc<\/span>\n          <\/span>\n            <\/div>\n          <\/div>\n          <div class=\"fs-c-productListItem__productDescription\"><\/div>\n        <\/article>\n      <\/div>\n      <p class=\"\" v-if=\"filterProductArray.length === 0 && totalPages === 0\">\n        \u691c\u7d22\u6761\u4ef6\u306b\u8a72\u5f53\u3059\u308b\u5546\u54c1\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n      <div class=\"fs-c-productList__list\" v-else-if=\"filterProductArray.length === 0\">\n        <article class=\"fs-c-productList__list__item\" v-for=\"article in [1,2,3,4,5,6,7,8,9]\">\n          <div class=\"fs-c-productListItem__imageContainer u-skeleton\" style=\"aspect-ratio: 1\/1\">\n          <\/div>\n          <h2 class=\"fs-c-productListItem__productName fs-c-productName u-skeleton\" style=\"height: 3.5em\">\n          <\/h2>\n          <div class=\"fs-c-productListItem__prices fs-c-productPrices u-skeleton\" style=\"height: 2.5em;margin-top: .5em;\">\n          <\/div>\n        <\/article>\n      <\/div>\n      <div class=\"fs-c-productList__controller\" v-if=\"visibleProducts.length > 0\">\n        <div class=\"fs-c-sortItems\">\n          <span class=\"fs-c-sortItems__label\">\u4e26\u3073\u66ff\u3048<\/span>\n          <ul class=\"fs-c-sortItems__list\">\n            <li class=\"fs-c-sortItems__list__item\" :class=\"{ 'is-active': sortOption === 'latest' }\">\n              <button class=\"fs-c-sortItems__list__item__label\" v-on:click=\"sortProducts('latest')\">\u65b0\u7740\u9806<\/button>\n            <\/li>\n            <li class=\"fs-c-sortItems__list__item\" :class=\"{ 'is-active': sortOption === 'price_low' }\">\n              <button class=\"fs-c-sortItems__list__item__label\" v-on:click=\"sortProducts('price_low')\">\u5b89\u3044\u9806<\/button>\n            <\/li>\n            <li class=\"fs-c-sortItems__list__item\" :class=\"{ 'is-active': sortOption === 'price_high' }\">\n              <button class=\"fs-c-sortItems__list__item__label\" v-on:click=\"sortProducts('price_high')\">\u9ad8\u3044\u9806<\/button>\n            <\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"fs-c-listControl__status\">\n          <div class=\"c-search-pagination\" v-if=\"totalPages >= 1\">\n            <button class=\"c-search-pagination__button\" aria-label=\"\u524d\u306e\u30da\u30fc\u30b8\u3078\" v-on:click=\"goToPage(currentPage - 1)\"\n                    :disabled=\"currentPage === 1\"><\/button>\n            <div class=\"c-search-pagination__count\"><span class=\"c-search-pagination__count--current\">{{ currentPage\n              }}<\/span> \/ <span class=\"c-search-pagination__count--current\">{{ totalPages }}<\/span><\/div>\n            <button class=\"c-search-pagination__button\" aria-label=\"\u6b21\u306e\u30da\u30fc\u30b8\u3078\" v-on:click=\"goToPage(currentPage + 1)\"\n                    :disabled=\"currentPage === totalPages\"><\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"search-result-buttons u-text-center\" v-if=\"searchOnly\">\n      <a :href=\"searchResultURLParams\" class=\"fs-c-button--primary search-result-button\">\u691c\u7d22\u7d50\u679c\u3092\u898b\u308b\uff08{{filterProductArray.length}}\uff09<\/a>\n    <\/div>\n  <\/div>\n<\/div>\n<style>\n    .fs-c-productList:not([id=\"app\"]) {\n        display: none;\n    }\n<\/style>\n<script>\n    const {computed} = Vue;\n\n    Vue.createApp({\n        setup() {\n            const urlParams = new URLSearchParams(window.location.search);\n            const searchCustomSettings = Vue.ref(searchSettings);\n            const storedData = sessionStorage.getItem('bicklyProductData');\n            const keywordParam = Vue.ref(urlParams.get('keyword'));\n            const sortParam = urlParams.get('sort');\n\n            const csvArray = Vue.ref([]);\n            const filterProductArray = Vue.ref([]);\n            const targetFilteredProductCount = Vue.ref(0);\n            const totalPages = Vue.ref(0);\n            const categoryArray = Vue.ref([]);\n            const subCategoryArray = Vue.ref([]);\n            const selectedCategories = Vue.ref([]);\n            const selectedSubCategories = Vue.ref([]);\n            const selectedTagsByGroup = Vue.ref({});\n            const searchOnly = Vue.ref(false);\n            const searchKeyword = Vue.ref(false);\n            const searchResultURL = Vue.ref('');\n            const searchResultURLParams = Vue.ref('');\n            const sortOption = sortParam ? Vue.ref(sortParam) : Vue.ref('latest');\n\n            \/\/ \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\n            const itemsPerPage = 100;\n            const currentPage = Vue.ref(1);\n\n            \/\/ \u30a2\u30a4\u30c6\u30e0\u306e\u7bc4\u56f2\u3092\u8a08\u7b97\n            const startIdx = computed(() => (currentPage.value - 1) * itemsPerPage);\n            const endIdx = computed(() => startIdx.value + itemsPerPage);\n\n            \/\/ \u30ad\u30fc\u30ef\u30fc\u30c9\u691c\u7d22\u3092\u884c\u3046\u304b\n            if(searchCustomSettings.value.hasOwnProperty('searchKeyword')) searchKeyword.value = searchCustomSettings.value.searchKeyword;\n\n            if (storedData && performance.getEntriesByType('navigation')[0].type !== 'reload') {\n                \/\/ \u30b9\u30c8\u30ec\u30fc\u30b8\u306b\u30c7\u30fc\u30bf\u304c\u3042\u308c\u3070\u305d\u308c\u3092\u4f7f\u7528\n                processData(JSON.parse(storedData), searchCustomSettings);\n            } else {\n                \/\/ \u30b9\u30c8\u30ec\u30fc\u30b8\u306b\u30c7\u30fc\u30bf\u304c\u306a\u3051\u308c\u3070\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\n                fetch('https:\/\/bickly.xsrv.jp\/api\/product\/get-product\/')\n                    .then((response) => response.json())\n                    .then((data) => {\n                        \/\/ \u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u3092\u30b9\u30c8\u30ec\u30fc\u30b8\u306b\u4fdd\u5b58\n                        sessionStorage.setItem('bicklyProductData', JSON.stringify(data));\n                        processData(data, searchCustomSettings);\n                    })\n                    .catch(error => console.error('Error fetching data:', error));\n            }\n\n            \/\/ \u30d1\u30e9\u30e1\u30fc\u30bf\u304b\u3089\u7d5e\u308a\u8fbc\u307f\u3092\u30bb\u30c3\u30c8\n            function readURLParams() {\n                \/\/ \u30ab\u30c6\u30b4\u30ea\n                const categoryParam = urlParams.get('category');\n                if (categoryParam) {\n                    selectedCategories.value = categoryParam.split(',');\n                    console.log(selectedCategories.value);\n                }\n\n                \/\/ \u30b5\u30d6\u30ab\u30c6\u30b4\u30ea\n                const subCategoryParam = urlParams.get('subcategory');\n                if(subCategoryParam) {\n                    selectedSubCategories.value = subCategoryParam.split(',');\n                    console.log(selectedSubCategories.value);\n                }\n\n                \/\/ \u30bf\u30b0\n                Object.keys(searchCustomSettings.value.tags).forEach(tagGroup => {\n                    const tagParam = urlParams.get(`tag:${tagGroup}`);\n                    console.log(tagParam);\n                    if (tagParam) {\n                        selectedTagsByGroup.value[tagGroup] = tagParam.split(',');\n                        console.log(selectedTagsByGroup);\n                    }\n                });\n                filterProducts();\n            }\n\n            function processData(data, searchCustomSettings) {\n                searchOnly.value = searchCustomSettings.value.searchOnly;\n                if (searchOnly.value) searchResultURL.value = searchCustomSettings.value.searchResultURL;\n                if (searchCustomSettings.value.setCategory) selectedCategories.value.push(searchCustomSettings.value.setCategory);\n                \/\/ \u30c7\u30fc\u30bf\u3092\u51e6\u7406\u3059\u308b\n                data.forEach(element => {\n                    element.tagList = element.tagList.split(',');\n                    element.subGroupList = element.subGroupList.split(',');\n                    if (searchCustomSettings.value.setCategory === '' && searchCustomSettings.value.setTag === '') {\n                        csvArray.value.push(element);\n                        if (!categoryArray.value.includes(element.groupName)) {\n                            categoryArray.value.push(element.groupName);\n                        }\n                    } else if (searchCustomSettings.value.setCategory === element.groupName && searchCustomSettings.value.setTag === '') {\n                        csvArray.value.push(element);\n                        if (!categoryArray.value.includes(element.groupName)) {\n                            categoryArray.value.push(element.groupName);\n                        }\n                    } else if (searchCustomSettings.value.setCategory === '' && element.tagList.includes(searchCustomSettings.value.setTag)) {\n                        csvArray.value.push(element);\n                        if (!categoryArray.value.includes(element.groupName)) {\n                            categoryArray.value.push(element.groupName);\n                        }\n                    } else if (searchCustomSettings.value.setCategory === element.groupName && element.tagList.includes(searchCustomSettings.value.setTag)) {\n                        csvArray.value.push(element);\n                        if (!categoryArray.value.includes(element.groupName)) {\n                            categoryArray.value.push(element.groupName);\n                        }\n                    }\n                });\n                \/\/ console.log(csvArray);\n                \/\/ console.log(searchCustomSettings.value.tags);\n\n                Object.keys(searchCustomSettings.value.tags).forEach((tagGroup) => {\n                    \/\/ console.log(tagGroup);\n                    if (!selectedTagsByGroup.value[tagGroup]) {\n                        selectedTagsByGroup.value[tagGroup] = Vue.ref([]);\n                    }\n                })\n                if (searchCustomSettings.value.addSubCategory && searchCustomSettings.value.addSubCategory.length > 0) {\n                    searchCustomSettings.value.addSubCategory.forEach(subCategory => {\n                        subCategoryArray.value.push(subCategory);\n                    })\n                }\n\n                filterProductArray.value = csvArray.value;\n                targetFilteredProductCount.value = filterProductArray.value.length;\n\n                totalPages.value = Math.ceil(targetFilteredProductCount.value \/ itemsPerPage);\n                \/\/ console.log(selectedTagsByGroup);\n                readURLParams();\n            }\n\n\n            \/\/ \u8868\u793a\u5bfe\u8c61\u306e\u5546\u54c1\u3092\u8a08\u7b97\n            const visibleProducts = computed(() => filterProductArray.value.slice(startIdx.value, endIdx.value));\n\n\n            function filterProducts() {\n                filterProductArray.value = csvArray.value.filter(product => {\n                    if (keywordParam.value) {\n                        const matchesName = product.name.includes(keywordParam.value);\n                        const matchesCategory = selectedCategories.value.length === 0 || selectedCategories.value.includes(product.groupName);\n\n                        let matchesTags = true;\n                        for(const [tagGroup, categoryTags] of Object.entries(selectedTagsByGroup.value)) {\n                            const tagOption = searchCustomSettings.value.tagsOption[tagGroup];\n                            if (categoryTags.length > 0) {\n                                if ((typeof(tagOption) === 'string' && tagOption === 'AND') || (typeof(tagOption) === 'object' && tagOption.searchType === 'AND')) {\n                                    matchesTags = categoryTags.every(tag => product.tagList.includes(tag));\n                                } else if ((typeof(tagOption) === 'string' && tagOption === 'OR') || (typeof(tagOption) === 'object' && tagOption.searchType === 'OR') || !tagOption) {\n                                    matchesTags = categoryTags.some(tag => product.tagList.includes(tag));\n                                }\n                                if (!matchesTags) break;\n                            }\n                        }\n\n                        const matchesSubCategory = selectedSubCategories.value.length === 0 || product.subGroupList.some(subCategory => selectedSubCategories.value.includes(subCategory));\n\n                        return matchesName && matchesCategory && matchesTags && matchesSubCategory;\n                    } else {\n                        const matchesCategory = selectedCategories.value.length === 0 || selectedCategories.value.includes(product.groupName);\n\n                        let matchesTags = true;\n                        for(const [tagGroup, categoryTags] of Object.entries(selectedTagsByGroup.value)) {\n                            const tagOption = searchCustomSettings.value.tagsOption[tagGroup];\n                            if (categoryTags.length > 0) {\n                                if ((typeof(tagOption) === 'string' && tagOption === 'AND') || (typeof(tagOption) === 'object' && tagOption.searchType === 'AND')) {\n                                    matchesTags = categoryTags.every(tag => product.tagList.includes(tag));\n                                } else if ((typeof(tagOption) === 'string' && tagOption === 'OR') || (typeof(tagOption) === 'object' && tagOption.searchType === 'OR') || !tagOption) {\n                                    matchesTags = categoryTags.some(tag => product.tagList.includes(tag));\n                                }\n                                if (!matchesTags) break;\n                            }\n                        }\n\n                        const matchesSubCategory = selectedSubCategories.value.length === 0 || product.subGroupList.some(subCategory => selectedSubCategories.value.includes(subCategory));\n\n                        return matchesCategory && matchesTags && matchesSubCategory;\n                    }\n                });\n\n                sortProducts(sortOption.value);\n                targetFilteredProductCount.value = filterProductArray.value.length;\n\n                \/\/ visibleProducts.value = computed(() => filterProductArray.value.slice(startIdx.value, endIdx.value));\n\n                \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u59cb\n                animateCount();\n                currentPage.value = 1;\n            }\n\n            \/\/ \u4e26\u3073\u66ff\u3048\n            function sortProducts(option) {\n                sortOption.value = option;\n                if (option === 'latest') {\n                    filterProductArray.value.sort((a, b) => new Date(b.dateCreated) - new Date(a.dateCreated));\n                } else if (option === 'price_low') {\n                    filterProductArray.value.sort((a, b) => a.unitPrice - b.unitPrice);\n                } else if (option === 'price_high') {\n                    filterProductArray.value.sort((a, b) => b.unitPrice - a.unitPrice);\n                }\n                updateURLParams();\n            };\n\n            function updateURLParams() {\n                const params = new URLSearchParams();\n\n                \/\/ \u30ab\u30c6\u30b4\u30ea\n                if (selectedCategories.value.length > 0) {\n                    params.set('category', selectedCategories.value.join(','));\n                }\n\n                \/\/ \u30b5\u30d6\u30ab\u30c6\u30b4\u30ea\n                if(selectedSubCategories.value.length > 0) {\n                    params.set('subcategory', selectedSubCategories.value.join(','))\n                }\n\n                \/\/ \u30bf\u30b0\n                Object.keys(selectedTagsByGroup.value).forEach(tagGroup => {\n                    if (selectedTagsByGroup.value[tagGroup].length > 0) {\n                        params.set(`tag:${tagGroup}`, selectedTagsByGroup.value[tagGroup].join(','));\n                    }\n                });\n\n                \/\/ \u30ad\u30fc\u30ef\u30fc\u30c9\n                if(keywordParam.value) {\n                    params.set('keyword', keywordParam.value);\n                }\n\n                \/\/ \u4e26\u3073\u66ff\u3048\n                if (sortOption.value !== '') {\n                    params.set('sort', sortOption.value);\n                }\n\n                \/\/ URL\u3092\u66f4\u65b0\n                const newURL = window.location.pathname + '?' + params.toString();\n                searchResultURLParams.value = `${searchResultURL.value}?${params.toString()}`;\n                window.history.pushState({}, '', newURL);\n            }\n\n            function animateCount() {\n\n                \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\n                animate();\n            }\n\n            function animate() {\n                \/\/ requestAnimationFrame(animate);\n                \/\/ TWEEN.update();\n            }\n\n            return {\n                searchCustomSettings,\n                filterProductArray,\n                categoryArray,\n                subCategoryArray,\n                selectedCategories,\n                selectedSubCategories,\n                selectedTagsByGroup,\n                searchOnly,\n                searchKeyword,\n                searchResultURLParams,\n                sortOption,\n                urlParams, filterProducts,\n                currentFilteredProductCount: animateCount,\n                sortProducts,\n                keywordParam,\n                visibleProducts,\n                itemsPerPage,\n                currentPage,\n                startIdx,\n                endIdx,\n                totalPages: computed(() => Math.ceil(targetFilteredProductCount.value \/ itemsPerPage)),\n                goToPage: page => {\n                    if (page >= 1 && page <= totalPages.value) {\n                        currentPage.value = page;\n                        const header = document.getElementById('header').clientHeight !== 0 ? document.getElementById('header').clientHeight : document.getElementById('header-branding').clientHeight;\n                        window.scrollTo({\n                            top: document.getElementById('productList-wrapper').getBoundingClientRect().top + window.scrollY - header,\n                            behavior: 'smooth'\n                        })\n                    }\n                },\n            }\n        }\n    }).mount('#app');\n<\/script>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-full\"\/>\n\n\n\n<br><center><font size=\"+2\"><b>\u3073\u3063\u304f\u308a\u30ab\u30fc\u30c6\u30f3\u306e\u30ec\u30fc\u30b9\u30ab\u30fc\u30c6\u30f3\u306f1\uff43\uff4d\u5358\u4f4d\u3067\u30aa\u30fc\u30c0\u30fc\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/b><\/font><\/center>\n\n\n\n<span style=\"background: linear-gradient(transparent 30%, #ffff00 0%);\"><font size=\"+1\">\u300e\u30c7\u30b6\u30a4\u30f3\u30ec\u30fc\u30b9\u300f\u307e\u305f\u306f\u300e\u6a5f\u80fd\u6027\u30ec\u30fc\u30b9\u300f\u306b\u5206\u3051\u3066\u3054\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u3002<\/span><br>\u753b\u50cf\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u5404\u7279\u96c6\u30da\u30fc\u30b8\u306b\u79fb\u52d5\u3057\u307e\u3059\u3002<\/font>\n\n\n\n<div class=\"c-row\">\n<div class=\"c-col-md--6 c-featured__item\">\n<!--\u30c7\u30b6\u30a4\u30f3\u6027\u30ec\u30fc\u30b9-->\n<center><a href=\"\/f\/613\"><img decoding=\"async\" src=\"https:\/\/bicklycurtain.itembox.design\/item\/free\/ct\/lace\/designlace_top2409.jpg\"width=\"100%\"  alt=\"\u30c7\u30b6\u30a4\u30f3\u6027\u30ec\u30fc\u30b9\" loading=\"lazy\"><\/a><br><h3 class=\"c-featured__title\">\u30c7\u30b6\u30a4\u30f3\u30ec\u30fc\u30b9\u7279\u96c6<\/h3><p class=\"c-featured__text\">\u4ed6\u306b\u306f\u306a\u3044\u30aa\u30ea\u30b8\u30ca\u30eb\u30c7\u30b6\u30a4\u30f3\u3092\u305f\u304f\u3055\u3093\u53d6\u308a\u63c3\u3048\u307e\u3057\u305f\u3002\u6700\u65ec\u30c7\u30b6\u30a4\u30f3\u306e\u30ec\u30fc\u30b9\u30ab\u30fc\u30c6\u30f3\u3092\u30e9\u30a4\u30f3\u30ca\u30c3\u30d7\uff01<\/p><\/center><\/div><br>\n<div class=\"c-col-md--6 c-featured__item\">\n<!--\u6a5f\u80fd\u6027\u30ec\u30fc\u30b9-->\n<center><a href=\"\/f\/612\"><img decoding=\"async\" src=\"https:\/\/bicklycurtain.itembox.design\/item\/free\/ct\/lace\/functionlace_top.jpg\" width=\"100%\" alt=\"\u6a5f\u80fd\u6027\u30ec\u30fc\u30b9\" loading=\"lazy\"><\/a><br><h3 class=\"c-featured__title\">\u6a5f\u80fd\u6027\u30ec\u30fc\u30b9\u7279\u96c6<\/h3><p class=\"c-featured__text\">\u69d8\u3005\u306a\u6a5f\u80fd\u306b\u7279\u5fb4\u306e\u3042\u308b\u30ec\u30fc\u30b9\u7279\u96c6\u3067\u3059\u3002\u7a93\u5468\u308a\u304b\u3089\u304a\u90e8\u5c4b\u3092\u5feb\u9069\u306b\u3057\u307e\u3057\u3087\u3046\uff01<\/p><\/center><\/div><br>\n<\/div>\n<ul class=\"fs-c-productMark\"><ul>","protected":false},"excerpt":{"rendered":"<p>\u3073\u3063\u304f\u308a\u30ab\u30fc\u30c6\u30f3\u306e\u30ec\u30fc\u30b9\u30ab\u30fc\u30c6\u30f3\u306f1\uff43\uff4d\u5358\u4f4d\u3067\u30aa\u30fc\u30c0\u30fc\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002 \u300e\u30c7\u30b6\u30a4\u30f3\u30ec\u30fc\u30b9\u300f\u307e\u305f\u306f\u300e\u6a5f\u80fd\u6027\u30ec\u30fc\u30b9\u300f\u306b\u5206\u3051\u3066\u3054\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u3002\u753b\u50cf\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u5404\u7279\u96c6\u30da\u30fc\u30b8\u306b\u79fb\u52d5\u3057\u307e\u3059\u3002 \u30c7\u30b6\u30a4\u30f3\u30ec\u30fc\u30b9\u7279\u96c6 \u4ed6\u306b\u306f\u306a\u3044&hellip; <a class=\"more-link\" href=\"https:\/\/www.bicklycurtain.com\/present\/2022\/01\/13\/lacecurtain-designfunction\/\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"screen-reader-text\">\u3073\u3063\u304f\u308a\u30ab\u30fc\u30c6\u30f3\u306e\u30ec\u30fc\u30b9\u30ab\u30fc\u30c6\u30f3\u7279\u96c6<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":47360,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[779],"tags":[],"class_list":["post-45276","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-feature","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bicklycurtain.com\/present\/wp-json\/wp\/v2\/posts\/45276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bicklycurtain.com\/present\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bicklycurtain.com\/present\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bicklycurtain.com\/present\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bicklycurtain.com\/present\/wp-json\/wp\/v2\/comments?post=45276"}],"version-history":[{"count":352,"href":"https:\/\/www.bicklycurtain.com\/present\/wp-json\/wp\/v2\/posts\/45276\/revisions"}],"predecessor-version":[{"id":70721,"href":"https:\/\/www.bicklycurtain.com\/present\/wp-json\/wp\/v2\/posts\/45276\/revisions\/70721"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bicklycurtain.com\/present\/wp-json\/wp\/v2\/media\/47360"}],"wp:attachment":[{"href":"https:\/\/www.bicklycurtain.com\/present\/wp-json\/wp\/v2\/media?parent=45276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bicklycurtain.com\/present\/wp-json\/wp\/v2\/categories?post=45276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bicklycurtain.com\/present\/wp-json\/wp\/v2\/tags?post=45276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}