반응형
이전 시간에는 옵션을 선택하면 옵션의 이미지를 보여주었었는데 이번에는 옵션을 보여줄때 아예 이미지를 뿌려주도록 바꿔보자.
/admin/product/product_view.php
<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/header.php";
if(!$_SESSION['AUID']){
echo "<script>alert('권한이 없습니다.');history.back();</script>";
exit;
}
$pid = $_GET['pid'];
$query="select * from products where pid=".$pid;
$result = $mysqli->query($query) or die("query error => ".$mysqli->error);
$rs = $result->fetch_object();
$query2="select * from product_options where pid=".$pid;
$result2 = $mysqli->query($query2) or die("query error => ".$mysqli->error);
while($rs2 = $result2->fetch_object()){
$options[]=$rs2;
}
?>
<style>
.col{
border: 1px solid #f1f1f1;
}
[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
[type=radio] + span {
cursor: pointer;
}
[type=radio]:checked + span {
outline: 5px solid indigo;
}
</style>
<link
rel="stylesheet"
/>
<div class="container">
<div class="row">
<div class="col" style="text-align:center;">
<img id="pimg" src="<?php echo $rs->thumbnail;?>" style="max-width:200px;">
</div>
<div class="col">
<h3><?php echo $rs->name;?></h3>
<div>
가격 : <span id="price"><?php echo number_format($rs->price);?></span>원
</div>
<?php if($options){?>
<br>
<div>
옵션 :
<select name="poption" id="poption">
<option value="">선택하세요</option>
<?php foreach($options as $op){?>
<option value="<?php echo $op->poid;?>"><?php echo $op->option_name;?></option>
<?php }?>
</select>
</div>
<br>
<div>
<?php foreach($options as $op){?>
<input type="radio" name="poption" class="optradio" id="poption_<?php echo $op->poid;?>" value="<?php echo $op->poid;?>">
<span onclick="jQuery('#poption_<?php echo $op->poid;?>').click();" style="content:url(<?php echo $op->image_url;?>);height:100px;width:100px;"></span>
</input>
<?php }?>
</div>
<?php }?>
</div>
</div>
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$("input[name='poption']:radio").change(function () {
var poid = $('input:radio[name="poption"]:checked').val();
var data = {
poid : poid
};
$.ajax({
async : false ,
type : 'post' ,
url : 'option_change.php' ,
data : data ,
dataType : 'json' ,
error : function() {} ,
success : function(data) {
var price=parseInt(data.option_price)+<?php echo $rs->price;?>;
$("#pimg").attr("src", data.image_url);
$("#price").text(number_format(price));
}
});
});
function number_format(num){
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g,',');
}
$("#poption").change(function(){
var poid = $("#poption option:selected").val();
var data = {
poid : poid
};
$.ajax({
async : false ,
type : 'post' ,
url : 'option_change.php' ,
data : data ,
dataType : 'json' ,
error : function() {} ,
success : function(data) {
var price=parseInt(data.option_price)+<?php echo $rs->price;?>;
$("#pimg").attr("src", data.image_url);
$("#price").text(number_format(price));
}
});
});
</script>
<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/footer.php";
?>
지난번에 했던 select박스도 그대로 두었다. 옵션 이미지를 클릭하면 역시 가운데 이미지가 바뀐다. select박스도 반응시키기 위해 그부분 소스도 json으로 바꾸고 ajax파일도 수정했다
ajax처리 파일을 확인해보자
/admin/product/option_change.php
<?php session_start();
include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php";
ini_set( 'display_errors', '0' );
$poid = $_POST['poid'];
$query="select * from product_options where poid='".$poid."'";
$result = $mysqli->query($query) or die("query error => ".$mysqli->error);
$rs = $result->fetch_object();
$image_url = $rs->image_url;
$option_price = $rs->option_price;
$data = array("image_url"=>$image_url,"option_price"=>$option_price);
echo json_encode($data);
?>
이렇게 json으로 리턴하도록 수정했다. 이미지 경로와 가격을 리턴해주도록 수정했다.
뷰 파일에서는 그 값을 받아서 이미지도 보여주고 기존의 가격에 플러스해서 가격도 바뀌도록 했다.
이부분은 가격이 다른 옵션에서 한번더 다룰 예정이다.
반응형
'PHP강좌 > 쇼핑몰만들기강좌' 카테고리의 다른 글
| php+mysql 쇼핑몰 만들기 강좌 - #12 WMS 시스템 연동하기(재고관리) (0) | 2022.03.26 |
|---|---|
| php+mysql 쇼핑몰 만들기 강좌 - #11 제품 옵션분류가 2개이상이고 가격이 다를때 (0) | 2022.03.23 |
| php+mysql 쇼핑몰 만들기 강좌 - #9 제품 상세 페이지 간략 (0) | 2022.03.22 |
| php+mysql 쇼핑몰 만들기 강좌 - #8 제품 옵션분류가 한개일때 (0) | 2022.03.21 |
| php+mysql 쇼핑몰 만들기 강좌 - #7 상품 리스트에서 한꺼번에 수정하기 (1) | 2022.03.17 |