{product_name}

\r\n

\r\n \r\n {price_unit_01}{price_value_01}\r\n \r\n {l_parenthesis}{price_value}{price_unit}{r_parenthesis}\r\n \r\n \r\n

\r\n

\r\n \r\n

\r\n

\r\n \r\n {price_unit_01}{original_price_value_01}\r\n \r\n {l_parenthesis}{original_price_value}{price_unit}{r_parenthesis}\r\n \r\n \r\n

\r\n

\r\n\r\n

\r\n

\r\n \r\n {price_unit_01}{original_price_value_01}\r\n \r\n {l_parenthesis}{original_price_value}{price_unit}{r_parenthesis}\r\n \r\n \r\n

\r\n

\r\n\r\n

`,\r\n modalBody: `\r\n

\r\n

\r\n $\"\"$ \r\n

\r\n

\r\n {product_info}\r\n

{sku}\r\n

\r\n {quantity}\r\n

\r\n

\r\n \r\n

\r\n

{detail}

\r\n

{additions}\r\n

\r\n

\r\n `\r\n }\r\n\r\n \r\n\r\n const setCartInModule = (productId: number, $cartIn: JQuery, isDetailPage?: boolean) => {\r\n const cartInFormAction = `${ LC_PATH.cartin }${ productId }`;\r\n const $productMainSection = $cartIn.closest('.productMainSection');\r\n $cartIn.attr('action', cartInFormAction);\r\n $cartIn.html(template.loading);\r\n $.ajax({\r\n url: `${ LC_PATH.product }${ productId }/?api=1`,\r\n // url: `/moch/product.json`,\r\n dataType: 'text'\r\n })\r\n .done(response => {\r\n const responseData: ResponseData = typeof response === 'string' ? JSON.parse(response) : response;\r\n if (responseData.status === 'ok') {\r\n \r\n let defaultImage= responseData.results.defaultImage;\r\n let link= responseData.results.link;\r\n let detail= responseData.results.translatedText.detail;\r\n let htmlString = template.modalBody;\r\n htmlString = htmlString.replace(/\\{image\\}/g, defaultImage); \r\n htmlString = htmlString.replace(/\\{link\\}/g, link); \r\n if (isDetailPage) {\r\n htmlString = htmlString.replace(/\\{product_info\\}/g, '');\r\n } else {\r\n var originalPrice = responseData.results.productSkus[0].price.valueskuOriginal.toLocaleString(); \r\n var discountpercentPrice = responseData.results.productSkus[0].price.discountPercent.toLocaleString(); \r\n var curRatio = responseData.results.currencyRatio;\r\n if ( curRatio == 1){\r\n $('body').find('.productMainSection__price .js-lc--price').remove();\r\n $('body').find('.productMainSection__price .js-lc--price-01').remove();\r\n\r\n if (discountpercentPrice == '0'){\r\n htmlString = htmlString.replace(/\\{product_info\\}/g, template.product_info.replace(/\\{product_name\\}/g, responseData.results.name).replace(/\\{price_value\\}/g, responseData.results.productSkus[0].price.value.toLocaleString()).replace(/\\{original_price_value\\}/g, responseData.results.productSkus[0].price.value.toLocaleString()).replace(/\\{price_unit_01\\}/g, \"\").replace(/\\{price_unit\\}/g, responseData.results.productSkus[0].price.unit).replace(/\\{l_parenthesis\\}/g, \"\").replace(/\\{r_parenthesis\\}/g, \"\").replace(/class=\"productMainSection__info original_price_div percent_original_price_div\"/, 'class=\"productMainSection__info original_price_div percent_original_price_div\" style=\"display: none;\"').replace(/class=\"small_cus\"/, 'class=\"small_cus\" style=\"font-size: 2.4rem;margin-left: 0;\"'));\r\n }\r\n else{\r\n htmlString = htmlString.replace(/\\{product_info\\}/g, template.product_info.replace(/\\{product_name\\}/g, responseData.results.name).replace(/\\{price_value\\}/g, responseData.results.productSkus[0].price.value.toLocaleString()).replace(/\\{original_price_value\\}/g, responseData.results.productSkus[0].price.value.toLocaleString()).replace(/\\{price_unit_01\\}/g, \"\").replace(/\\{price_unit\\}/g, responseData.results.productSkus[0].price.unit).replace(/\\{l_parenthesis\\}/g, \"\").replace(/\\{r_parenthesis\\}/g, \"\").replace(/class=\"productMainSection__price color_cus\"/, 'class=\"productMainSection__price color_cus\" style=\"color: red;\"').replace(/class=\"small_cus\"/, 'class=\"small_cus\" style=\"font-size: 2.4rem;margin-left: 0;color: red;\"'));\r\n } \r\n\r\n if (originalPrice == ''){\r\n htmlString = htmlString.replace(/\\{product_info\\}/g, template.product_info.replace(/\\{product_name\\}/g, responseData.results.name).replace(/\\{price_value\\}/g, responseData.results.productSkus[0].price.value.toLocaleString()).replace(/\\{original_price_value\\}/g, responseData.results.productSkus[0].price.valueskuOriginal.toLocaleString()).replace(/\\{price_unit_01\\}/g, \"\").replace(/\\{price_unit\\}/g, responseData.results.productSkus[0].price.unit).replace(/\\{l_parenthesis\\}/g, \"\").replace(/\\{r_parenthesis\\}/g, \"\").replace(/class=\"productMainSection__info original_price_div\"/, 'class=\"productMainSection__info original_price_div\" style=\"display: none;\"').replace(/class=\"small_cus\"/, 'class=\"small_cus\" style=\"font-size: 2.4rem;margin-left: 0;\"'));\r\n }\r\n else{\r\n htmlString = htmlString.replace(/\\{product_info\\}/g, template.product_info.replace(/\\{product_name\\}/g, responseData.results.name).replace(/\\{price_value\\}/g, responseData.results.productSkus[0].price.value.toLocaleString()).replace(/\\{original_price_value\\}/g, responseData.results.productSkus[0].price.valueskuOriginal.toLocaleString()).replace(/\\{price_unit_01\\}/g, \"\").replace(/\\{price_unit\\}/g, responseData.results.productSkus[0].price.unit).replace(/\\{l_parenthesis\\}/g, \"\").replace(/\\{r_parenthesis\\}/g, \"\").replace(/class=\"productMainSection__price color_cus\"/, 'class=\"productMainSection__price color_cus\" style=\"color: red;\"').replace(/class=\"small_cus\"/, 'class=\"small_cus\" style=\"font-size: 2.4rem;margin-left: 0;color: red;\"'));\r\n }\r\n\r\n \r\n\r\n\r\n }\r\n else{ \r\n \r\n if (discountpercentPrice == '0'){\r\n htmlString = htmlString.replace(/\\{product_info\\}/g, template.product_info.replace(/\\{product_name\\}/g, responseData.results.name).replace(/\\{price_unit_01\\}/g, responseData.results.productSkus[0].price.unit.toString()).replace(/\\{price_unit\\}/g, responseData.results.productSkus[0].price.otherUnit.toString()).replace(/\\{price_value\\}/g, responseData.results.productSkus[0].price.value.toLocaleString()).replace(/\\{original_price_value\\}/g, responseData.results.productSkus[0].price.value.toLocaleString()).replace(/\\{l_parenthesis\\}/g, \"(\").replace(/\\{r_parenthesis\\}/g, \")\").replace(/class=\"productMainSection__info original_price_div percent_original_price_div\"/, 'class=\"productMainSection__info original_price_div percent_original_price_div\" style=\"display: none;\"'));\r\n }\r\n else{\r\n htmlString = htmlString.replace(/\\{product_info\\}/g, template.product_info.replace(/\\{product_name\\}/g, responseData.results.name).replace(/\\{price_unit_01\\}/g, responseData.results.productSkus[0].price.unit.toString()).replace(/\\{price_unit\\}/g, responseData.results.productSkus[0].price.otherUnit.toString()).replace(/\\{price_value\\}/g, responseData.results.productSkus[0].price.value.toLocaleString()).replace(/\\{original_price_value\\}/g, responseData.results.productSkus[0].price.value.toLocaleString()).replace(/\\{l_parenthesis\\}/g, \"(\").replace(/\\{r_parenthesis\\}/g, \")\").replace(/class=\"productMainSection__price color_cus\"/, 'class=\"productMainSection__price color_cus\" style=\"color: red;\"'));\r\n }\r\n \r\n\r\n if (originalPrice == ''){\r\n htmlString = htmlString.replace(/\\{product_info\\}/g, template.product_info.replace(/\\{product_name\\}/g, responseData.results.name).replace(/\\{price_unit_01\\}/g, responseData.results.productSkus[0].price.unit.toString()).replace(/\\{price_unit\\}/g, responseData.results.productSkus[0].price.otherUnit.toString()).replace(/\\{price_value\\}/g, responseData.results.productSkus[0].price.value.toLocaleString()).replace(/\\{original_price_value\\}/g, responseData.results.productSkus[0].price.valueskuOriginal.toLocaleString()).replace(/\\{l_parenthesis\\}/g, \"(\").replace(/\\{r_parenthesis\\}/g, \")\").replace(/class=\"productMainSection__info original_price_div\"/, 'class=\"productMainSection__info original_price_div\" style=\"display: none;\"'));\r\n }\r\n else{\r\n htmlString = htmlString.replace(/\\{product_info\\}/g, template.product_info.replace(/\\{product_name\\}/g, responseData.results.name).replace(/\\{price_unit_01\\}/g, responseData.results.productSkus[0].price.unit.toString()).replace(/\\{price_unit\\}/g, responseData.results.productSkus[0].price.otherUnit.toString()).replace(/\\{price_value\\}/g, responseData.results.productSkus[0].price.value.toLocaleString()).replace(/\\{original_price_value\\}/g, responseData.results.productSkus[0].price.valueskuOriginal.toLocaleString()).replace(/\\{l_parenthesis\\}/g, \"(\").replace(/\\{r_parenthesis\\}/g, \")\").replace(/class=\"productMainSection__price color_cus\"/, 'class=\"productMainSection__price color_cus\" style=\"color: red;\"'));\r\n }\r\n\r\n \r\n\r\n }\r\n }\r\n\r\n // SKU選択\r\n if (responseData.results.productSkus[0].sku1 || responseData.results.productSkus[0].sku2) {\r\n let sku1HtmlString = '';\r\n let sku2HtmlString = '';\r\n\r\n // SKU1\r\n if (responseData.results.productSkus[0].sku1) {\r\n sku1HtmlString = template.skuSection;\r\n const sku1Title = responseData.results.translatedText.select.replace('%s', responseData.results.productSkus[0].sku1.title);\r\n \r\n const sku1ItemsHtmlString = responseData.results.productSkus[0].attribute?.image ? remakeSkuItemsWithImages(responseData.results.productSkus, 'sku1', responseData.results.attribute) : remakeSkuItemsWithoutImages(responseData.results.productSkus, 'sku1');\r\n sku1HtmlString = sku1HtmlString.replace(/\\{title\\}/g, sku1Title).replace(/\\{items\\}/g, sku1ItemsHtmlString).replace(/\\{sku_key\\}/g, 'sku1');\r\n }\r\n\r\n // SKU2\r\n if (responseData.results.productSkus[0].sku2) {\r\n sku2HtmlString = template.skuSection;\r\n const sku2Title = responseData.results.translatedText.select.replace('%s', responseData.results.productSkus[0].sku2.title);\r\n const sku2ItemsHtmlString = remakeSkuItemsWithoutImages(responseData.results.productSkus, 'sku2');\r\n sku2HtmlString = sku2HtmlString.replace(/\\{title\\}/g, sku2Title).replace(/\\{items\\}/g, sku2ItemsHtmlString).replace(/\\{sku_key\\}/g, 'sku2');\r\n }\r\n\r\n htmlString = htmlString.replace(/\\{sku\\}/g, sku1HtmlString + sku2HtmlString);\r\n } else {\r\n htmlString = htmlString.replace(/\\{sku\\}/g, '');\r\n htmlString = htmlString.replace(/\\{product_sku_id\\}/g, String(responseData.results.productSkus[0].id));\r\n }\r\n\r\n // オプション商品選択\r\n if (responseData.results.additions.length) {\r\n const additions = reconstructAdditions(responseData.results.additions);\r\n let additionsHtmlString = getAdditionItemHtml(additions, Object.keys(additions));\r\n htmlString = htmlString.replace(/\\{additions\\}/g, additionsHtmlString);\r\n } else {\r\n htmlString = htmlString.replace(/\\{additions\\}/g, '');\r\n }\r\n\r\n htmlString = htmlString.replace(/\\{product_id\\}/g, String(productId));\r\n htmlString = htmlString.replace(/\\{favorite_class\\}/g, responseData.results.favorites.indexOf(productId) > -1 ? ' is-active' : '');\r\n\r\n const availabeleProductSkus = responseData.results.productSkus.filter(productSku => productSku.stock || productSku.stockUnlimited); \r\n\r\n if (availabeleProductSkus.length) {\r\n // 数量の有効化 \r\n // htmlString = htmlString.replace(/\\{quantity\\}/g, template.quantity);\r\n var regular_interval_label= responseData.results.translatedText.regular_interval_label;\r\n var regularIntervalOptions = '';\r\n var regularIntervalValue = '';\r\n \r\n\r\n if (responseData.results.regularInterval && responseData.results.regularInterval.length > 0) {\r\n responseData.results.regularInterval.forEach(function(interval) {\r\n regularIntervalOptions += ``;\r\n });\r\n\r\n regularIntervalValue = responseData.results.regularInterval[0].value.toString();\r\n htmlString = htmlString.replace(/\\{quantity\\}/g, template.quantity)\r\n .replace(/\\{regularIntervalOptions\\}/g, regularIntervalOptions)\r\n .replace(/\\{regular_interval_label\\}/g, regular_interval_label)\r\n .replace(/\\{regularIntervalValue\\}/g, ``); \r\n\r\n }\r\n else{\r\n htmlString = htmlString.replace(/\\{quantity\\}/g, template.quantity)\r\n .replace(/\\{regularIntervalOptions\\}/g, '')\r\n .replace(/\\{regularIntervalValue\\}/g, '');\r\n htmlString = htmlString.replace(/class=\"selectBox selectBox_01\"/, 'class=\"selectBox selectBox_01\" style=\"display: none;\"');\r\n } \r\n \r\n } else {\r\n // 売り切れの時の処理\r\n htmlString = htmlString.replace(/\\{quantity\\}/g, '');\r\n htmlString = htmlString.replace(/\\{add_to_cart\\}/g, '完售');\r\n }\r\n\r\n // 翻訳の適用\r\n htmlString = htmlString.replace(/\\{(.+?)\\}/g, (match, p1) => {\r\n for (const key in responseData.results.translatedText) {\r\n if (key === p1) {\r\n return responseData.results.translatedText[key]\r\n }\r\n }\r\n return match;\r\n });\r\n \r\n $cartIn.html(htmlString);\r\n const $cartInButton = $cartIn.find('.productActoins__cartin');\r\n const $productSkuIdInput = $cartIn.find('[name=\"product_sku_id\"]');\r\n let $CartInButtonPage: JQuery;\r\n if (responseData.results.productSkus.length === 1) {\r\n $cartInButton.prop('disabled', false);\r\n }\r\n if ($productMainSection.length) {\r\n $CartInButtonPage = $productMainSection.find('.productActoins__cartin--page');\r\n if (responseData.results.productSkus.length === 1) {\r\n $CartInButtonPage.prop('disabled', false);\r\n }\r\n }\r\n \r\n\r\n /**\r\n * イベントハンドラの設定\r\n */\r\n\r\n // Ajaxによるカートイン\r\n setCartInWithAjax($cartIn, $CartInButtonPage);\r\n\r\n // SKUの選択\r\n const $sku1Selects = $cartIn.find('select[name=\"sku1\"]');\r\n const $sku2Selects = $cartIn.find('select[name=\"sku2\"]');\r\n const onChangeSkuRadios = function () {\r\n let isEnableCartIn = false;\r\n const checkedSku1Name = $sku1Selects.length ? $sku1Selects.find('option:selected').attr('data-name') : '';\r\n const checkedSku2Name = $sku2Selects.length ? $sku2Selects.find('option:selected').attr('data-name') : '';\r\n const selectedSkuItem = responseData.results.productSkus.length > 1 ? responseData.results.productSkus.find(productSku => {\r\n if (productSku.sku1 && productSku.sku2) {\r\n return productSku.sku1.name === checkedSku1Name && productSku.sku2.name === checkedSku2Name;\r\n } else if (productSku.sku1) {\r\n return productSku.sku1.name === checkedSku1Name;\r\n } else if (productSku.sku2) {\r\n return productSku.sku2.name === checkedSku2Name;\r\n }\r\n return false\r\n }) : responseData.results.productSkus[0];\r\n if (selectedSkuItem) {\r\n isEnableCartIn = true;\r\n }\r\n if (isEnableCartIn) {\r\n $productSkuIdInput.val(selectedSkuItem.id);\r\n if ($productMainSection.length) {\r\n $productMainSection.find('.js-lc--basePrice').text((selectedSkuItem.price.value - selectedSkuItem.price.discountPercent).toLocaleString());\r\n+ $productMainSection.find('.js-lc--price').text(Math.floor((selectedSkuItem.price.value - selectedSkuItem.price.discountPercent) * responseData.results.currencyRatio).toLocaleString());\r\n $productMainSection.find('.js-lc--basePrice-01').text(selectedSkuItem.price.valueskuOriginal.toLocaleString());\r\n+ $productMainSection.find('.js-lc--price-01').text(Math.floor(selectedSkuItem.price.valueskuOriginal * responseData.results.currencyRatio).toLocaleString());\r\n $productMainSection.find('.js-lc--originalbasePrice').text(selectedSkuItem.price.value.toLocaleString());\r\n $productMainSection.find('.js-lc--originalPrice').text(Math.floor(selectedSkuItem.price.value * responseData.results.currencyRatio).toLocaleString());\r\n } else {\r\n var curRatio = responseData.results.currencyRatio;\r\n if ( curRatio == 1){\r\n $cartIn.find('.js-lc--basePrice').text((selectedSkuItem.price.value - selectedSkuItem.price.discountPercent).toLocaleString());\r\n + $cartIn.find('.js-lc--price').remove();\r\n $cartIn.find('.js-lc--basePrice-01').text(selectedSkuItem.price.valueskuOriginal.toLocaleString());\r\n $cartIn.find('.js-lc--originalbasePrice').text(selectedSkuItem.price.value.toLocaleString());\r\n + $cartIn.find('.js-lc--price-01').remove();\r\n $cartIn.find('.js-lc--originalPrice').remove();\r\n }\r\n else{\r\n $cartIn.find('.js-lc--basePrice').text((selectedSkuItem.price.value - selectedSkuItem.price.discountPercent).toLocaleString());\r\n + $cartIn.find('.js-lc--price').text(Math.floor((selectedSkuItem.price.value - selectedSkuItem.price.discountPercent) * responseData.results.currencyRatio).toLocaleString());\r\n $cartIn.find('.js-lc--basePrice-01').text(selectedSkuItem.price.valueskuOriginal.toLocaleString());\r\n + $cartIn.find('.js-lc--price-01').text(Math.floor(selectedSkuItem.price.valueskuOriginal * responseData.results.currencyRatio).toLocaleString()); \r\n $cartIn.find('.js-lc--originalbasePrice').text(selectedSkuItem.price.value.toLocaleString());\r\n $cartIn.find('.js-lc--originalPrice').text(Math.floor(selectedSkuItem.price.value * responseData.results.currencyRatio).toLocaleString()); \r\n } \r\n }\r\n $cartInButton.prop('disabled', false);\r\n if ($CartInButtonPage) {\r\n $CartInButtonPage.prop('disabled', false);\r\n }\r\n } else {\r\n $productSkuIdInput.val('');\r\n $cartInButton.prop('disabled', true);\r\n if ($CartInButtonPage) {\r\n $CartInButtonPage.prop('disabled', true);\r\n }\r\n }\r\n confirmSkuSelectionStatus(responseData.results.productSkus, $cartIn);\r\n setSelectedSkuQuantityMax(responseData.results.productSkus, $cartIn);\r\n }\r\n confirmSkuSelectionStatus(responseData.results.productSkus, $cartIn);\r\n setSelectedSkuQuantityMax(responseData.results.productSkus, $cartIn);\r\n $sku1Selects.on('change', onChangeSkuRadios);\r\n $sku2Selects.on('change', onChangeSkuRadios);\r\n if (availabeleProductSkus.length >= 1 ) {\r\n onChangeSkuRadios();\r\n if (availabeleProductSkus[0].sku1) {\r\n console.log($cartIn);\r\n // $cartIn.find(`[name=\"sku1\"][data-name=\"${ availabeleProductSkus[0].sku1.name }\"]`).prop('checked', true).trigger('change');\r\n // $cartIn.find(`select[name=\"sku1\"]`).val(availabeleProductSkus[0].sku1.name).trigger('change');\r\n // $('.selectBox__opt1').val(availabeleProductSkus[0].sku1.name).trigger('change');\r\n $cartIn.find(`select[name=\"sku1\"] option`).each(function() {\r\n if ($(this).text() === availabeleProductSkus[0].sku1.name) {\r\n $(this).prop('selected', true).trigger('change');\r\n }\r\n });\r\n }\r\n if (availabeleProductSkus[0].sku2) {\r\n // $cartIn.find(`[name=\"sku2\"][data-name=\"${ availabeleProductSkus[0].sku2.name }\"]`).prop('checked', true).trigger('change');\r\n $cartIn.find(`select[name=\"sku2\"]`).val(availabeleProductSkus[0].sku2.name).trigger('change');\r\n }\r\n }\r\n\r\n // オプション商品選択\r\n $cartIn.find('.l-cartinOption__select').on('change', function () {\r\n const $select = $(this);\r\n if ($select.find(':selected').attr('data-id')) {\r\n $select.attr('name', `addition_quantity[${ $select.find(':selected').attr('data-id')}]`);\r\n $select.find('option').val($cartIn.find('[name=\"quantity\"]').val());\r\n } else {\r\n $select.attr('name', '');\r\n $select.find('option').val(0);\r\n }\r\n });\r\n }\r\n })\r\n .fail(function (_jqXHR, textStatus, errorThrown) {\r\n console.error(textStatus + ': ' + errorThrown);\r\n });\r\n }\r\n \r\n /**\r\n * オプション商品データをキーごとに整理し直して返す\r\n */\r\n const reconstructAdditions = (additions: ProductAddition[]): ReconstructedProductAdditions => {\r\n const reconstructedProductAdditions: ReconstructedProductAdditions = {};\r\n additions.forEach(addition => {\r\n const [additionLabel, additionOptionName] = addition.name.split(':');\r\n const newOption = {\r\n id: addition.id,\r\n name: additionOptionName,\r\n price: addition.price\r\n };\r\n if (additionLabel in reconstructedProductAdditions) {\r\n reconstructedProductAdditions[additionLabel].options.push(newOption);\r\n } else {\r\n reconstructedProductAdditions[additionLabel] = {\r\n title: additionLabel,\r\n options: [newOption]\r\n };\r\n }\r\n });\r\n return reconstructedProductAdditions;\r\n }\r\n\r\n /**\r\n * オプション商品のHTMLを取得\r\n * @param additions オプション商品の一覧\r\n * @param keys オプション商品の対象となるキー（title:name の title 部分）\r\n * @param itemClass オプションに設定する class属性名\r\n * @returns オプション商品のHTML\r\n */\r\n const getAdditionItemHtml = (additions: ReconstructedProductAdditions, keys: string[], itemClass?: string): string => {\r\n let additionsHtmlString = '';\r\n keys.forEach(key => {\r\n let additionHtmlString = template.optionItem;\r\n let optionsHtmlString = '';\r\n additions[key].options.forEach(option => {\r\n optionsHtmlString += ``;\r\n });\r\n additionHtmlString = additionHtmlString.replace(/\\{item_class\\}/g, itemClass ? itemClass : '');\r\n additionHtmlString = additionHtmlString.replace(/\\{name\\}/g, key);\r\n additionHtmlString = additionHtmlString.replace(/\\{options\\}/g, optionsHtmlString);\r\n additionHtmlString = additionHtmlString.replace(/\\{note\\}/g, '');\r\n additionsHtmlString += additionHtmlString;\r\n });\r\n return additionsHtmlString;\r\n }\r\n\r\n /**\r\n * 画像つきのSKU選択一覧の作成\r\n * @param productSkus 商品SKU一覧\r\n * @param attribute 商品の拡張フィールド一覧\r\n * @returns SKU選択一覧のHTML\r\n */\r\n const remakeSkuItemsWithImages = (productSkus: ProductSku[], skuKey: 'sku1'|'sku2', attribute: { [k: string]: string; }): string => {\r\n\r\n let skuWithImagesHtmlString = '';\r\n let skuItemWithImagesHtmlString = template.skuItemWithImage;\r\n let nameList: string[] = [];\r\n let imageList: string[] = [];\r\n let skuItemList: {\r\n name: string;\r\n image: string;\r\n }[] = [];\r\n\r\n productSkus.forEach(productSku => {\r\n const name = productSku[skuKey].name;\r\n const image = productSku.attribute.image;\r\n if (nameList.indexOf(name) == -1 || imageList.indexOf(image) == -1) {\r\n skuItemList.push({name: name, image: image});\r\n nameList.push(name);\r\n imageList.push(image);\r\n }\r\n });\r\n\r\n skuItemList.forEach(skuItem => {\r\n if (attribute) {\r\n for (let key of Object.keys(attribute)) {\r\n if (key == skuItem.image) {\r\n skuItemWithImagesHtmlString = skuItemWithImagesHtmlString.replace(/\\{image\\}/g, attribute[key]);\r\n skuItemWithImagesHtmlString = skuItemWithImagesHtmlString.replace(/\\{name\\}/g, skuItem.name);\r\n skuWithImagesHtmlString += skuItemWithImagesHtmlString;\r\n skuItemWithImagesHtmlString = template.skuItemWithImage;\r\n }\r\n }\r\n }\r\n });\r\n // template.skuSection = template.skuSection.replace(/\\{sku_key\\}/g, skuKey);\r\n\r\n return skuWithImagesHtmlString;\r\n }\r\n\r\n /**\r\n * 画像なしのSKU選択一覧の作成\r\n * @param productSkus 商品SKU一覧\r\n * @returns SKU選択一覧のHTML\r\n */\r\n const remakeSkuItemsWithoutImages = (productSkus: ProductSku[], skuKey: 'sku1'|'sku2'): string => {\r\n\r\n let skuWithoutImagesHtmlString = '';\r\n let skuWithoutImagesItemHtmlString = template.skuItemWithoutImage;\r\n let nameList: string[] = [];\r\n\r\n productSkus.forEach(productSku => {\r\n const name = productSku[skuKey].name;\r\n if (nameList.indexOf(name) == -1) {\r\n nameList.push(name);\r\n }\r\n });\r\n\r\n for (let item of nameList) {\r\n skuWithoutImagesItemHtmlString = skuWithoutImagesItemHtmlString.replace(/\\{name\\}/g, item);\r\n skuWithoutImagesHtmlString += skuWithoutImagesItemHtmlString;\r\n skuWithoutImagesItemHtmlString = template.skuItemWithoutImage;\r\n }\r\n // skuWithoutImagesHtmlString = skuWithoutImagesHtmlString.replace(/\\{sku_key\\}/g, skuKey);\r\n // template.skuSection = template.skuSection.replace(/\\{sku_key\\}/g, skuKey);\r\n\r\n return skuWithoutImagesHtmlString;\r\n // return template.skuSection;\r\n }\r\n\r\n /**\r\n * SKU選択一覧の選択可能状態をチェックして設定\r\n * @param productSkus 商品SKU一覧\r\n * @param $cartIn jQueryの .cartIn 要素\r\n */\r\n const confirmSkuSelectionStatus = (productSkus: ProductSku[], $cartIn: JQuery) => {\r\n const $sku1Selects = $cartIn.find('select[name=\"sku1\"]');\r\n const $sku2Selects = $cartIn.find('select[name=\"sku2\"]');\r\n $sku1Selects.prop('disabled', false);\r\n $sku2Selects.prop('disabled', false);\r\n $sku1Selects.find('option').each(function() {\r\n const $sku1Select = $(this);\r\n const isChecked = $sku1Select.is(':selected'); \r\n const sku1SelectionName = $sku1Select.attr('data-name');\r\n const currentSku1Skus = productSkus.filter(productSku => productSku.sku1.name === sku1SelectionName);\r\n const disabledSkus = currentSku1Skus.filter(currentSku1Sku => currentSku1Sku.stockUnlimited === false && currentSku1Sku.stock === 0);\r\n if (isChecked && $sku2Selects.length) {\r\n $sku2Selects.find('option').each(function() {\r\n const $sku2Select = $(this);\r\n const sku2SelectionName = $sku2Select.attr('data-name');\r\n const skuCombination = productSkus.find(productSku => productSku.sku1.name === sku1SelectionName && productSku.sku2.name === sku2SelectionName);\r\n const currentDisabledSkuCombination = disabledSkus.find(disabledSku => disabledSku.sku1.name === sku1SelectionName && disabledSku.sku2.name === sku2SelectionName);\r\n if (!skuCombination || currentDisabledSkuCombination) {\r\n $sku2Select.prop('disabled', true);\r\n }\r\n });\r\n } else if (currentSku1Skus.length === disabledSkus.length) {\r\n $sku1Select.prop('disabled', true);\r\n }\r\n });\r\n $sku2Selects.find('option').each(function() {\r\n const $sku2Select = $(this);\r\n const isChecked = $sku2Select.is(':selected'); \r\n const sku2SelectionName = $sku2Select.attr('data-name');\r\n const currentSku2Skus = productSkus.filter(productSku => productSku.sku2.name === sku2SelectionName);\r\n const disabledSkus = currentSku2Skus.filter(currentSku2Sku => currentSku2Sku.stockUnlimited === false && currentSku2Sku.stock === 0);\r\n if (isChecked && $sku1Selects.length) {\r\n $sku1Selects.find('option').each(function() {\r\n const $sku1Select = $(this);\r\n const sku1SelectionName = $sku1Select.attr('data-name');\r\n const skuCombination = productSkus.find(productSku => productSku.sku2.name === sku2SelectionName && productSku.sku1.name === sku1SelectionName);\r\n const currentDisabledSkuCombination = disabledSkus.find(disabledSku => disabledSku.sku2.name === sku2SelectionName && disabledSku.sku1.name === sku1SelectionName);\r\n if (!skuCombination || currentDisabledSkuCombination) {\r\n $sku1Select.prop('disabled', true);\r\n }\r\n });\r\n } else if (currentSku2Skus.length === disabledSkus.length) {\r\n $sku2Select.prop('disabled', true);\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * 選択中のSKUのstockからquantityの最大値を設定\r\n * @param productSkus 商品SKU一覧\r\n * @param $cartIn jQueryの .cartIn 要素\r\n */\r\n const setSelectedSkuQuantityMax = (productSkus: ProductSku[], $cartIn: JQuery) => {\r\n const $checkedSku1Radio = $cartIn.find('[name=\"sku1\"]').find('option:selected');\r\n const $checkedSku2Radio = $cartIn.find('[name=\"sku2\"]').find('option:selected');\r\n const $quantityInput = $cartIn.find('[name=\"quantity\"]');\r\n let selectedSku: ProductSku;\r\n if (productSkus.length === 1) {\r\n selectedSku = productSkus[0];\r\n } else {\r\n if (productSkus[0].sku1 && productSkus[0].sku2) {\r\n if ($checkedSku1Radio.length && $checkedSku2Radio.length) {\r\n selectedSku = productSkus.find(productSku => productSku.sku1.name === $checkedSku1Radio.attr('data-name') && productSku.sku2.name === $checkedSku2Radio.attr('data-name'));\r\n }\r\n } else if (productSkus[0].sku1) {\r\n if ($checkedSku1Radio.length) {\r\n selectedSku = productSkus.find(productSku => productSku.sku1.name === $checkedSku1Radio.attr('data-name'));\r\n }\r\n } else {\r\n if ($checkedSku2Radio.length) {\r\n selectedSku = productSkus.find(productSku => productSku.sku2.name === $checkedSku2Radio.attr('data-name'));\r\n }\r\n }\r\n }\r\n if (selectedSku) {\r\n if (selectedSku.stockUnlimited) {\r\n $quantityInput.removeAttr('max');\r\n const selectElements = document.querySelectorAll('.l-cartinQuantity__input');\r\n selectElements.forEach((selectElement) => {\r\n let optionsHTML = '';\r\n for (let i = 1; i <= 10; i++) {\r\n optionsHTML += ``;\r\n }\r\n selectElement.innerHTML = optionsHTML;\r\n });\r\n } else {\r\n $quantityInput.attr('max', selectedSku.stock); \r\n \r\n const selectElement = document.querySelector('.l-cartinQuantity__input');\r\n\r\n let optionsHTML = '';\r\n if( selectedSku.stock > 10){\r\n for (let i = 1; i <= 10; i++) {\r\n optionsHTML += ``;\r\n }\r\n selectElement.innerHTML = optionsHTML;\r\n\r\n }\r\n else{\r\n for (let i = 1; i <= selectedSku.stock; i++) {\r\n optionsHTML += ``;\r\n }\r\n selectElement.innerHTML = optionsHTML;\r\n\r\n } \r\n\r\n if ($quantityInput.val() > selectedSku.stock) {\r\n $quantityInput.val(selectedSku.stock); \r\n\r\n }\r\n }\r\n }\r\n }\r\n\r\n const $cartInModal = $('#cartInModal');\r\n //@ts-ignore TS6133: 'isCanceledCloseModal' is declared but its value is never read.\r\n var isCanceledCloseModal = false;\r\n if ($triggersAddToCart.length && $cartInModal.length) {\r\n const $cartIn = $cartInModal.find('.l-cartin');\r\n\r\n var closeButtonDiv = $('

', {\r\n class: 'close-button-div'\r\n });\r\n \r\n var closeButton = $('