購物車系列商品圖/金額

willy800510 commented 3 years ago

在cart_lists 裡面，下方顯示我的收藏，我嘗試按[加入購物車]，上方的list會加入，可以顯現，但後方取消的X是失效

carts.js 第17行點選[加入購物車],上方加入購物項目

$('.addcarts').click(function(){
$(this).parent().parent('.reco-logo').remove();
var imgSrc = $(this).siblings().children('img').attr('src');
var productImg = imgSrc.replace('images/','')
$('#cartLists').prepend(
$('<ul/>')
.addClass('row bg-white align-items-center mt-1 mx-1 p-2 rounded')
.append(
$('<div/>')
.addClass('col-1 text-center px-0')
.append('<input type="checkbox" name="Checkbox[]" checked="true">'),
$('<img/>')
.addClass('logoIcon col-2 px-1')
.attr('src',imgSrc),
$('<input/>')
.attr('type','hidden')
.attr('name','productImg')
.attr('value',imgSrc),
$('<div/>')
.addClass('d-flex flex-column col-8 py-3')
.append(
$('<div/>')
.addClass('d-flex justify-content-around')
.append(
$('<div/>')
.addClass('text-center p-2')
.append(
$('<h6/>')
.html('商品規格'),
$('<li/>')
.html('png,ai')
),
$('<div/>')
.addClass('text-center p-2')
.append(
$('<h6/>')
.html('金額'),
$('<li/>')
.html('NT$200'),
$('<input/>')
.attr('type','hidden')
.attr('name','price')
.attr('value','200'),
),
$('<div/>')
.addClass('p-2 d-none d-md-block')
.append(
$('<h6/>')
.addClass('text-center')
.html('其他'),
$('<span/>')
.addClass('font-weight-lighter text-black-50 text-center pt-3')
.html('備註說明:備註說明備註說明備註說明')
),
),
$('<span/>')
.addClass('font-weight-lighter text-black-50 text-center pt-3 d-block d-md-none')
.html('備註說明:備註說明備註說明備註說明')
),
$('<span/>')
.addClass('btn col-1 px-0 clear')
.html('<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>')
)
)
});

carts.js 第82行要執行按X取消此筆購物項目

$('.clear').click(function(){
$(this).parent('ul').remove();
})

另外cart_list 的選項若導向cart_payPick 預想要與cart_list選的相同（包括金額與logo圖），目前他只會聽命於list中最後一個購物選項

圖片的src試著用次方法傳送給carts_payPick.php

<img src="<?php echo 'images/logo.svg'?>" alt="" class="logoIcon col-2 px-1">
<input type="hidden" name="productImg" value="<?php echo 'images/logo.svg'?>">

金額試著用次方法傳送給carts_payPick.php

<h6>金額</h6>
<li >NT$<?php echo'200'?></li>
<input type="hidden" name="price" value="<?php echo'200' ?>" >

carts_payPick.php 我寫這樣想接收carts_list的value

<div class="row justify-content-between align-items-center px-3 py-lg-3 border-bottom bg-white">
<img src="<?php echo $_POST['productImg'] ?>" alt="" class="logoIcon col-2">
<div class="col-5">商品名稱</div>
<div class="col-5 text-right text-alert">金額 NT$<?php echo $_POST['price'] ?></div>
</div>

joyuhuang commented 3 years ago

因為這個項目(ul)是新增的，所以這個
```
$('.clear').click(function(){
$(this).parent('ul').remove();
})
```
執行的時候不會包含到它，也就是它不會被註冊到這個click監聽事件 (只要是之後新增的元件都無法作用)。

改成這樣寫就可以做到動態事件綁定了：

$('#cartLists').on('click', '.clear', function () {
    $(this).parent('ul').remove();
});

這篇有簡單易懂的說明XD http://skaih.logdown.com/posts/712464-jquery-click-on-the-where-different ps.就我所知 ul裡好像只能放li，li裡才能再放div等等，雖然這個規範並不影響瀏覽器的顯示 ............................ 不過這個功能會牽涉到購物車內容(後端)，也許交由後端處理就好 (按[加入購物車]會經過後端處理然後刷新頁面)，或是也可以不刷新頁面(繼續用你目前的做法) 但要用ajax和後端同步，不過這樣就會複雜很多的感覺:thinking:

只會聽命於list中最後一個購物選項是因為你input的name都是一樣的，所以前面的值都被重複覆蓋了，最後後只留下最後一項的值就我所知一般應該是會用 checkbox 傳選取的各商品的id 到下一頁(carts_payPick.php)，再用id去資料庫撈這些資料來顯示，這樣就可以避免傳一堆資料的麻煩

willy800510 commented 3 years ago

同意，交給後端去撈資料庫

willy800510 / logoWeb

購物車系列商品圖/金額 #14

willy800510 / logoWeb

購物車系列 商品圖/金額 #14

購物車系列商品圖/金額 #14