3 글 보임 - 1 에서 3 까지 (총 3 중에서)
-
글쓴이글
-
2023년 9월 6일 19:56 #97128
정재희참가자node.js강의 다 듣고 완성한거랑 javascript기본 답인데봐도 쓸모없음 파일(대회)과 섞어보려했는데요. $.get("store.json").then((data) => { 이게 도무지 안됩니다. 그 외에 로그인하고 글작성, 수정,삭제 ,마이페이등 등은 다 되는데요 요 store.json파일을 불러오는게 도무지 안됩니다. 아래 내용은 index.ejs 파일을 가져왔습니다.<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link href="/public/main.css" rel="stylesheet" /> <title>Document</title> </head> <body> <%- include('nav.html') %> <div class="container"> <input id="search" placeholder="검색어입력" /> </div> <div class="container"> <div class="search_box active"></div> </div> <div class="container"> <div class="row product-list"> <!-- <div class="col-md-3"> < img src=""> <h4>상품명 : </h4> <p>가격 : </p> </div> --> </div> </div><div class="container basket-wrap" style="background: #e2e2e2"> <h4>장바구니 (드래그 가능)</h4> <div class="row basket"></div> </div> <div class="container my-3"> <h4>최종가격</h4> <p class="final-price"></p> <button class="buy">구매하기</button> </div>
<div class="modal1" style="display: none"> <div class="white-bg"> <h4>성함</h4> <input type="text" id="name" /> <h4>연락처</h4> <input type="text" id="phone" /> <button class="show-receipt">입력완료</button> <div> <button class="close">닫기</button> </div> </div> </div>
<div class="modal2" style="display: none"> <div class="white-bg"> <h4>영수증</h4> <canvas id="canvas" width="350" height="350"></canvas> <div> <button class="close">닫기</button> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <script> let products = []; let cart = []; //==================== //상품진열기능 //==================== $.get("store.json").then((data) => { products = data.products; products.forEach((a) => { $(".product-list").append(` <div class="col-md-3"> <div class="item" draggable="true" data-id="${a.id}"> < img src="${a.photo}"> <h4>${a.title}</h4> <h4>${a.brand}</h4> <p>가격 : ${a.price}</p> <button class="add" data-id="${a.id}">담기</button> </div> </div>`); }); //==================== //장바구니 담는기능 //====================function add(id) { let i = cart.findIndex((cart) => { return cart.id == id; }); if (i == -1) { let product = products.find((a) => { return a.id == id; }); console.log(product); product.count = 1; cart.push(product); } else { cart[i].count++; } $(".basket").html(""); cart.forEach((a) => { $(".basket").append(` <div class="col-md-3 bg-white"> < img src="${a.photo}"> <h4>${a.title}</h4> <h4>${a.brand}</h4> <p>${a.price}</p> <input type="number" value="${a.count}" class="item-count w-100"> </div>`); });cal(); }
function cal() { let finalPrice = 0; cart.forEach((a) => { finalPrice += a.price * a.count; }); $(".final-price").text(finalPrice + "원"); } $(".add").on("click", function (e) { let id = e.target.dataset.id; add(id); }); //.add 버튼 클릭하면 끝 //==================== //드래그로 장바구니 추가기능 //==================== $(".item").on("dragstart", function (e) { e.originalEvent.dataTransfer.setData("id", e.target.dataset.id); });$(".basket").on("dragover", function (e) { e.preventDefault(); });$(".basket").on("drop", function (e) { let productId = e.originalEvent.dataTransfer.getData("id"); console.log(productId, `productId`); //신기한건 console.log 삭제하면 안됨 add(productId); }); //=========================== //검색기능 + 담기기능 추가 //=========================== $("#search").on("input", function () { let searchWord = $("#search").val(); let searchProducts = products.filter((a) => { return a.title.includes(searchWord) || a.brand.includes(searchWord); });$(".search_box").html(""); if (searchWord == "") { $(this).removeClass("active"); } else { $(this).addClass("active"); searchProducts.forEach((a) => { $(".search_box").append(` <div class="col-md-2"> <div class="item" draggable="true" data-id="${a.id}"> < img src="${a.photo}"> <h4>${a.title}</h4> <h4>${a.brand}</h4> <p>가격 : ${a.price}</p> <button class="add" data-id="${a.id}">담기</button> </div> </div>`); }); $(".item h4").each(function (i, html) { let title = html.innerHTML; title = title.replace( searchWord, `<span style="background:yellow">${searchWord}</span>` ); console.log(title); html.innerHTML = title; });$(".add").on("click", function (e) { let id = e.target.dataset.id; add(id); }); } }); }); //==================== //구매하기 기능 + 영수증 모달창 //==================== $(".buy").on("click", function () { $(".modal1").show(); $(".show-receipt").on("click", function () { $(".modal1").hide(); $(".modal2").show(); let name = $("#name").val(); let phone = $("#phone").val(); let finalPrice = $(".final-price").text(); let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); ctx.font = "20px Arial"; ctx.fillText(`이름 : ${name}`, 10, 50); ctx.fillText(`연락처 : ${phone}`, 10, 100); ctx.fillText(`최종가격 : ${finalPrice}`, 10, 150); }); }); $(".close").on("click", function () { $(".modal1").hide(); $(".modal2").hide(); });//$.get 끝 </script> </body> </html>
-
글쓴이글
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
- 답변은 로그인 후 가능합니다.