商品一覧画面機能、非同期通信途中

src/main/resources/static/css/style.css

@@ -1879,7 +1879,7 @@ th, td {
 
 /* list画面 */
 #listBox {
-    /*background-color: #FDF5E6;*/
+    background-color: #FDF5E6;
     height: 100%;
     display: flex;
     flex-direction: row;
@@ -1887,18 +1887,19 @@ th, td {
 }
 
 .productBox {
-	background-color: #FDF5E6;
+	/*background-color: #FDF5E6;*/
     height: 400px;
-    width: 30%;
+    width: 33%;
     /*border: 1px solid black;*/
-    margin: 5px;
+    box-sizing: border-box;
+    padding: 5px;
 }
 
 
 
 /* listモーダル */
 #modal-content {
-	width: 50% ;
+	width: 30% ;
 	margin: 0 ;
 	padding: 10px 20px ;
 	border: 2px solid #aaa ;
@@ -1945,12 +1946,12 @@ th, td {
     color: #000;	
 }
 
-.detailsBtn, .shoeImage, .shoeName, .shoePrice, .shoeImageDiv{
+.detailsBtn, .shoeImage, .shoeName, .shoePrice, .shoeImageDiv, .modalShow{
 	text-align: center;
 }
 
 .productBox {
-	margin: 0 auto;
+	/*margin: 0 auto;*/
 }
 
 .shoeImageDiv{	
@@ -1959,4 +1960,19 @@ th, td {
 
 .shoeName {
 	margin-top: 10px;
+}
+
+.cart-close-btn, .cartBtn {
+	width: 150px;
+    height: 50px;
+    font-weight: bold;
+    font-size: small;
+    background-color: #1abc9c;
+    border-radius: 3px;
+    border:none;
+    color: #000;
+}
+
+#showQuantity {
+	margin-bottom: 10px;
 }
\ No newline at end of file

src/main/resources/static/js/list.js

@@ -27,15 +27,20 @@ $(function(){
 		    let priceField = document.createElement("p");
 		    let idField = document.createElement("input");
 		    idField.setAttribute("type", "hidden");
-		    let name = $(event.target.parentNode.children[1].textContent);
-		    let price =$(event.target.parentNode.children[2].textContent);
-		    let id =$(event.target.parentNode.children[3].value);
+//		    let name = $(event.target.parentNode.children[1].textContent);
+//		    let price =$(event.target.parentNode.children[2].textContent);
+//		    let id =$(event.target.parentNode.children[3].value);
+		    let src = $(event.target.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling).children('img').attr('src');
+		    let name = $(event.target.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.textContent);
+		    let price =$(event.target.parentNode.previousElementSibling.previousElementSibling.textContent);
+		    let id =$(event.target.parentNode.previousElementSibling.value);
 		    nameField.textContent = name.selector;
 		    $('#showName').append(nameField);
 		    priceField.textContent = price.selector;
 		    $('#showPrice').append(priceField);
 		    idField.value = id.selector;
 		    $('#showId').append(idField);
+		    $('#showImage').attr('src', src);
 		
 			//[#modal-overlay]、または[#modal-close]をクリックしたら…
 			$( "#modal-overlay,#modal-close" ).unbind().click( function(){
@@ -49,6 +54,32 @@ $(function(){
 				} ) ;
 	
 			} ) ;
+			
+			//カートに追加
+			$('.cartBtn').on('click', function(event){
+				let data = {
+						shoesId: $(event.target.previousElementSibling.previousElementSibling.previousElementSibling).children('input').val(),
+						quantity: $(event.target.previousElementSibling.previousElementSibling).children('select').val()
+				};
+				console.log(data);
+				$.ajax({
+				      type: "POST",
+				      url: "/limited/inputCart",
+				      contentType: 'application/json',
+				      dataType: "json",
+				      data: JSON.stringify(data)
+				    }).done(function() {
+				    	$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
+				    		
+							//[#modal-overlay]を削除する
+							$('#modal-overlay').remove() ;
+			
+						} ) ;
+				    }).fail(function() {
+				      alert("Failed.");
+				  });
+			});
+			
 		} ) ;
 	
 	});
@@ -77,29 +108,3 @@ $(function(){
 
 } ) ;
 
-
-
-
-
-//モーダル表示
-//let details = document.getElementsByClassName("js-modal-open");
-//$(".js-modal-open").each(function() {	
-//	$(".js-modal-open").on("click", function(){
-//		$('.js-modal').fadeIn();
-//		return false;
-//	});
-//	$(".js-modal-close").on("click", function(){
-//		$('.js-modal').fadeIn();
-//		return false;
-//	});
-//});
-
-
-
-//モーダル内情報表示
-
-//モーダルフォーム送信
-//$('#ok-btn').on('click', function(){
-//	
-//});
-

src/main/resources/templates/list.html

@@ -16,17 +16,31 @@
         <![endif]-->
     </head>
     <body>
-    
 	<!-- モーダル中身 -->
    	<div id="modal-content">
 		<div id="modal-content-innar">
 	        <!-- モーダルウィンドウのコンテンツ開始 -->
-	        <img class="shoeImage" alt="productImage"/>
-	        <div id="showName"></div>
-	        <div id="showPrice"></div>
-	        <div id="showId"></div>
-	        <p><a id="modal-close" class="button-link">閉じる</a></p>
-	        <button type="button" class="cartBtn">cartへ入れる</button>
+	        <img class="modalShow" id="showImage" alt="productImage" width="300" height="200"/>
+	        <div class="modalShow" id="showName"></div>
+	        <div class="modalShow" id="showPrice"></div>
+	        <div class="modalShow" id="showId"></div>
+	        <div class="modalShow" id="showQuantity">
+		        <span>Quantity</span>
+		        <select name="quantity">
+		        	<option value="1">1</option>
+		        	<option value="2">2</option>
+		        	<option value="3">3</option>
+		        	<option value="4">4</option>
+		        	<option value="5">5</option>
+		        	<option value="6">6</option>
+		        	<option value="7">7</option>
+		        	<option value="8">8</option>
+		        	<option value="9">9</option>
+		        	<option value="10">10</option>
+		        </select>
+	        </div>
+	        <a id="modal-close" class="button-link"><button class="cart-close-btn">Close</button></a>
+	        <button type="button" class="cartBtn">Add Cart</button>
 	      </div>
     </div>
     <!-- モーダルウィンドウのコンテンツ終了 -->
@@ -120,7 +134,6 @@
                 </div>
             </div>
         </footer>
-​
         <!-- JQUERY -->
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
         <script src="js/list.js" th:src="@{/js/list.js}"></script>