【ニトリ】い草上敷き湯沢 (団地間)通販 (2023)

'; var titleHtml = '

'; if (window.outerWidth > 720) { BranchHtml.pc = { title: titleHtml, cart: cartHtml }; } else { BranchHtml.sp = { title: titleHtml, cart: cartHtml }; } return ( '

' ); }) .join(''); } function setTileSimHtml(sysData) { var x = 10; var y = 10; var simArea = ""; var sizeLimitSelect = $("#sizeLimitSelect :selected"); var limitSize = { "x": parseInt($(sizeLimitSelect).attr("data-x")), "y": parseInt($(sizeLimitSelect).attr("data-y")) }; for (var i = 0; i < x; i++) { simArea += '

"; handleClickSimTile(); } $("#p-variation-sim").html(simArea); $("#p-tile-modal-form .clickable").on("click", handleClickSimTile); $("#tileSize span").html(sysData[0].width); setSmoothSelect(); } const isTouch = window.ontouchstart !== undefined && 0 < navigator.maxTouchPoints; function isTileSimTop() { return document.documentElement.scrollTop <= 5; } function isTileSimBottom() { const mostBottom = document.documentElement.scrollHeight - window.innerHeight; const scrollTop = window.pageYOffset || document.documentElement.scrollTop; return scrollTop >= mostBottom; } function setTileSimulationMove() { const evs = isTouch ? ["touchstart", "touchend"] : ["mousedown", "mouseup"]; let timer; let isPress = false; const msDownFunc = (e, move) => { e.preventDefault(); if (isPress) return; isPress = true; timer = setInterval(() => { tileSimulationMoveBd.classList.add("move"); const distance = document.documentElement.scrollTop; window.scrollTo(0, distance + move); }); } tileSimulationUp.addEventListener(evs[0], e => msDownFunc(e, -10)); tileSimulationDown.addEventListener(evs[0], e => msDownFunc(e, 10)); const msUpFunc = e => { e.preventDefault(); tileSimulationMoveBd.classList.remove("move"); clearInterval(timer); isPress = false; } tileSimulationUp.addEventListener(evs[1], msUpFunc); tileSimulationDown.addEventListener(evs[1], msUpFunc); tileSimulationMoveBd.addEventListener(evs[1], e => { const event = new Event(evs[1]); tileSimulationUp.dispatchEvent(event); tileSimulationDown.dispatchEvent(event); }); window.addEventListener('scroll', ()=> { const event = new Event(evs[1]); const top = isTileSimTop(); const bottom = isTileSimBottom(); tileSimulationUp.setAttribute("aria-disabled", top); tileSimulationDown.setAttribute("aria-disabled", bottom); if (top) tileSimulationUp.dispatchEvent(event); if (bottom) tileSimulationDown.dispatchEvent(event); }); } function setSmoothSelect() { const tileCells = [...document.querySelectorAll("#p-variation-sim .clickable")]; let startPointForTile = {}; const variationSim = document.getElementById("p-variation-sim"); const chkXForTile = (start, eArg, cell) => { const rect = eArg.target.getBoundingClientRect(); const now = isTouch ? {x: eArg.targetTouches[0].clientX - touchPaddingX, y: eArg.targetTouches[0].clientY} : {x: eArg.x, y: eArg.y}; if (start.y === now.y) return false; if (start.x < now.x) { if (now.x < cell.left || cell.right < start.x) return false; } if (start.x > now.x) { if (cell.left > start.x || cell.right < now.x) return false; } return true; }; const chkYForTile = (start, eArg, cell) => { const rect = eArg.target.getBoundingClientRect(); const now = isTouch ? {x: eArg.targetTouches[0].clientX - touchPaddingX, y: eArg.targetTouches[0].clientY} : {x: eArg.x, y: eArg.y}; if (start.x === now.x) return false; if (start.y < now.y) { if (start.y > cell.bottom || now.y < cell.top) return false; } if (start.y > now.y) { if (now.y > cell.bottom || start.y < cell.top) return false; } return true; }; const evs = isTouch ? ["touchstart", "touchmove", "touchend"] : ["mousedown", "mousemove", "mouseup"]; let tileAction = false; variationSim.addEventListener(evs[0], e => { const rect = e.target.getBoundingClientRect(); startPointForTile.x = isTouch? e.targetTouches[0].clientX - touchPaddingX: e.x; startPointForTile.y = isTouch? e.targetTouches[0].clientY: e.y; tileAction = true; }); variationSim.addEventListener(evs[1], e => { e.preventDefault(); if (typeof e.buttons !== "undefined" && e.buttons !== 1) { tileCells.forEach(cell => { cell.classList.remove("choose"); cell.classList.remove("del"); }); return; } tileSimulationMove.classList.add("hidden"); if (!startPointForTile.x || !startPointForTile.y) return; for (let cell of tileCells) { const cData = cell.getBoundingClientRect(); if (!chkXForTile(startPointForTile, e, cData) || !chkYForTile(startPointForTile, e, cData)) { cell.classList.remove("choose"); cell.classList.remove("del"); continue; } if (cell.classList.contains("disabled")) continue; cell.classList.add("choose"); const mode = document.querySelector("#modeArea li a.select").parentElement; if (mode.classList.contains("delete")) cell.classList.add("del"); } if (!tileAction) handleSelectSimTile(tileCells); }); variationSim.addEventListener(evs[2], e => { handleSelectSimTile(tileCells); tileAction = false; tileSimulationMove.classList.remove("hidden"); }); variationSim.addEventListener("mouseleave", e => { tileSimulationMove.classList.remove("hidden"); if (tileAction) return; startPointForTile = {}; }); } function setTileSimPurchaseInfo(actPanel) { var sysData = getTileSimSysData(tileSimulationData); var calcPanel = {}; $.each(actPanel, function(idx, val) { var price = 0; $.each(sysData, function(sysIdx, sysVal) { if (sysVal.cd == val) { price = sysVal.price; return false; } }); if (!calcPanel[val]) { calcPanel[val] = { cd: val, qty: 0, color: $("[name=p-tile-select-color][value="+val+"]").attr("data-label"), price: price }; } calcPanel[val].qty++; }); tileSimPurchaseInfo = []; $.each(calcPanel, function (idx, val) { tileSimPurchaseInfo.push(val); }); reflectionTilePurchaseInfo($("#tileSimulationInfo"), tileSimPurchaseInfo); tileSimulationUp.setAttribute("aria-disabled", isTileSimTop()); tileSimulationDown.setAttribute("aria-disabled", isTileSimBottom()); } function handleSelectSimTile(tileCells) { var addDel = ($("#modeArea li a.select").parent().attr("class") == "placement"); var cd = $("[name=p-tile-select-color]:checked").val(); var bg = "none"; const choose = [...document.getElementsByClassName("choose")]; choose.forEach(choice => { var cell = $(choice).attr("id"); delete actPanel[cell]; if (addDel) { bg = "URL('" + imgPath + cd + ".jpg')"; actPanel[cell] = cd; } $(choice).css("background-image", bg).attr("data-color", $("[name=p-tile-select-color]:checked").attr("data-label")); }); setTileSimPurchaseInfo(actPanel); tileCells.forEach(cell => { cell.classList.remove("choose"); cell.classList.remove("del"); }); } function handleClickSimTile() { var addDel = ($("#modeArea li a.select").parent().attr("class") == "placement"); var cd = $("[name=p-tile-select-color]:checked").val(); var bg = "none"; var cell = $(this).attr("id"); delete actPanel[cell]; if (addDel) { bg = "URL('"+imgPath + cd +".jpg')"; actPanel[cell] = cd; } $(this).css("background-image", bg).attr("data-color", $("[name=p-tile-select-color]:checked").attr("data-label")); setTileSimPurchaseInfo(actPanel); } function reflectionTilePurchaseInfo(panel, purchaseInfo) { var cleanFlg = false; $.each(purchaseInfo, function (idx, val) { var trData = $(panel).find(".addedTr[data-cd='" + val.cd + "']"); if (!!$(trData).length) { $(trData).find("[name=tileQty]").val(val.qty); return true; } cleanFlg = true; return false; }); if (!cleanFlg) { if (purchaseInfo.length == $(panel).find(".addedTr").length) { handleChangeTilePurchaseInfo(purchaseInfo, panel); return; } } $(panel).find(".addedTr").remove(); var html = ""; var sortedData = sortColor(purchaseInfo); html += sortedData .map(function (data) { return ( '

' ); }) .join(''); $(panel).find(".settingTiles").append(html); handleChangeTilePurchaseInfo(purchaseInfo, panel); $(panel).find("[name=tileQty]").on("change", function () { handleChangeTilePurchaseInfo(purchaseInfo, $(this).parents(".panel")); }); $(panel).find("[name=tileQty]").on("focus", function () { this.select(); tileSimulationMove.classList.add("hidden"); }); $(panel).find("[name=tileQty]").on("blur", function () { tileSimulationMove.classList.remove("hidden"); }); } function handleClickMode() { var cClass = this.className; if (cClass == "allDel") { resetTile(); } else { setAddDelMode(this.className); } } function resetTile() { $("#p-variation-sim .clickable").css("background-image", "none"); actPanel = {}; tileSimPurchaseInfo = []; var sysData = getTileSimSysData(tileSimulationData); if (!sysData) return false; reflectionTilePurchaseInfo($("#tileSimulationInfo"), tileSimPurchaseInfo); $("#modeArea .placement").click(); } /* selected color event */ function handleChangeTileSystem() { $("#p-variation-system b").text(this.getAttribute("data-label")); $("#modeArea .placement").click(); } function handleChangeTilePurchaseInfo(purchaseInfo, panel) { var skucd = []; var qty = []; var tileTotalAreaInfo = { qty: 0, price: 0 }; $.each(purchaseInfo, function (idx, val) { var inputQty = $(panel).find(".addedTr[data-cd=" + val.cd + "] [name=tileQty]"); var textQty = parseInt($(inputQty).val()); if (isNaN(textQty) || textQty <= 0) { $(inputQty).val(0); return true; } $(inputQty).val(textQty); skucd.push(val.cd); qty.push(textQty); tileTotalAreaInfo.qty += textQty; tileTotalAreaInfo.price += parseInt(val.price) * textQty; }); $(panel).find(".tileTotalArea .totalQty").html(tileTotalAreaInfo.qty); $(panel).find(".tileTotalArea .totalNoTax b").html(tileTotalAreaInfo.price.toLocaleString()); $(panel).find(".multiAddToCartBtnForTile").attr({ "data-sku": skucd.join(","), "data-qty": qty.join(",") }); var disabledCart = true; if (tileTotalAreaInfo.qty >= minBuyCnt) { disabledCart = false; } $(panel).find(".multiAddToCartBtnForTile").attr("aria-disabled", disabledCart); saveListData(panel); } function saveListData(panel) { var panelId = $(panel).attr("id"); if (panelId != "tileListInfo") { return; } tileListPurchaseInfo = []; $(panel).find(".addedTr").each(function (trIdx, trVal) { tileListPurchaseInfo.push({ cd: $(trVal).children(".cdTd").text() , color: $(trVal).children(".colorTd").text() , price: $(trVal).children(".priceTd").text() , qty: $(trVal).children(".qtyTd").children("input").val() }); }); } function setTilePurchaseInfo(data, purchaseInfo, panel) { var saveData = []; $.each(data, function (idx, val) { var qty = 0; $.each(purchaseInfo, function (chkIdx, chkVal) { if (val.cd == chkVal.cd) { qty = chkVal.qty; return false; } }) saveData.push({ cd: val.cd, qty: qty, price: val.price, color: val.color }); }); purchaseInfo = saveData; reflectionTilePurchaseInfo(panel, purchaseInfo); } function setDialogForBasicSysData(sysData) { isHexagon = sysData[0].isHexagon; $(".simItemName").html(sysData[0].name); minBuyCnt = sysData[0].minBuyCnt; $(".minBuyCnt b").html(minBuyCnt); } function openTilePurchageDialog() { var dispBtnSelector = []; var selectedBtnSelector = ""; // リストから購入 var simFlg = tileList(); // シミュレーション if (simFlg) { dispBtnSelector.push(".typeArea .btnList"); selectedBtnSelector = ".typeArea .btnList"; if (tileSim()) { dispBtnSelector.push(".typeArea .btnSim"); } } // おすすめ if (tileRecommend()) { dispBtnSelector.push(".typeArea .btnRecommend"); if (!selectedBtnSelector) { selectedBtnSelector = ".typeArea .btnRecommend"; } } $(dispBtnSelector.join(",")).addClass("disp"); $(selectedBtnSelector).addClass("select"); clickTypeBtn($(selectedBtnSelector)); $("#tileSimulation .typeArea li a").on("click", function () { var btnLi = $(this).parent(); clickTypeBtn(btnLi); if (btnLi[0].dataset.id === "tileSimulationInfo") { tileSimulationUp.setAttribute("aria-disabled", isTileSimTop()); tileSimulationDown.setAttribute("aria-disabled", isTileSimBottom()); } }) return true; } function clickTypeBtn(cType) { $(".panel").hide(); $(".typeArea li").removeClass("select"); var panelId = $(cType).attr("data-id"); $("#" + panelId).show(); $(cType).addClass("select"); } function tileList() { var sysData = getTileSimSysData(tileSimulationData); if (!sysData) { return false; } setDialogForBasicSysData(sysData); var listArea = setListAreaHtml(); $(".listArea").html(listArea); setTilePurchaseInfo(sysData, tileListPurchaseInfo, $("#tileListInfo")); $(".multiAddToCartBtnForTile").off("click").on("click", function () { multiAddToCartForProductDetail(this, tileAddToCartCallBack); }); return true; } function setJoLimit(sysData) { var sizeLimitSelect = $("#sizeLimitSelect"); if (!sizeLimitSelect || $(sizeLimitSelect).children().length > 0) { return; } var width = sysData[0].width; op = tileTatamiLimitData[width].map(function (data) { return ( '

' ); }).join(''); op = '

' + op; $(sizeLimitSelect).html(op); } function tileSim() { var sysData = getTileSimSysData(tileSimulationData); if (!sysData) { return false; } setDialogForBasicSysData(sysData); reflectionTilePurchaseInfo($("#tileSimulationInfo"), tileSimPurchaseInfo); if (isHexagon) { return false; } var sysHtml = getTileSystemItemHtml(sysData); echo('system', sysHtml, handleChangeTileSystem); $(".p-customizetile dd li:first-child label").click(); setJoLimit(sysData); setTileSimControl(sysData); $("#modeArea").children("li:not('.sizeLimit')").off("click").on("click", handleClickMode); $("#sizeLimitSelect").off("change").on("change", function () { setTileSimControl(sysData); }); return true; } function setTileSimControl(sysData) { setAddDelMode("delete"); setTileSimHtml(sysData); setAddDelMode("placement"); } function setAddDelMode(cls) { $("#modeArea li a").removeClass("select"); $("#modeArea li." + cls + " a").addClass("select"); } function tileRecommend() { var sysData = getTileSimSysData(tileRecommendData); if (!sysData) return false; var sysHtml = getTileSystemRecommendHtml(sysData); $("#tileRecommendInfo").html(sysHtml); return true; } function createTileBtn(cls) { return '

' + '' + '' + 'ご購入はこちら' + '' + '' + '' + '

'; } function setListAreaHtml() { return '

' + '

' + '

' + '

' + '' + '

'; } function setTileBtns() { var sysData = getTileSimSysData(tileSimulationData); if (!sysData) { return false; } smProjectIsolation.setSmProjectStyleDisabled("tileStyle", false); document.getElementsByClassName("js-sku-details")[0].insertAdjacentHTML('afterbegin', '

'); var tileSimBtnArea = document.getElementById("tileSimBtnArea"); tileSimBtnArea.insertAdjacentHTML('beforeend', createTileBtn("default")); const sidebar = document.querySelector(".g-main .g-layout_sidebar"); sidebar.insertAdjacentHTML('afterbegin', createTileBtn("sidebar")); document.getElementById("p-tileSimulationModal").setAttribute("aria-modal", true); setTileSimulationMove(); } function tileAddToCartCallBack() { var ev = "customEV_false"; var ec = "商品詳細"; var ea = $("#productCode").val(); var el = $(".multiAddToCartBtnForTile:visible").attr("data-sku") + "_" + $(".totalQty:visible").text(); window.nnet_dataLayer.push({ event: ev, eventCategory: ec, eventAction: ea, eventLabel: el }); } smProjectIsolation.setSmProjectStyleDisabled("tileStyle", true); if (smProjectIsolationCD.indexOf(tileSimProjectIsolationCD) != -1) { var tileScript = document.createElement("script"); tileScript.id = "TileCarpetTrgtItemInfo"; tileScript.charset = "utf-8"; tileScript.src = "/ecstatic/front/product/CarpetRugMat/JointMatTileCarpetTile/TileCarpetTrgtItemInfo.js"; document.body.appendChild(tileScript); tileScript.addEventListener("load", setTileBtns); window.addEventListener("load", tileSimulationMove.classList.remove("hidden")); }