1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
|
<?php
Global $use_cnt_info, $use_img_array, $prodinfo, $cateinfo;
$cur_img_url = $j3_img_url."/".$sk['sk_img_path'];
if($skin_css!=''){
echo $skin_css;
} else {
?>
<style>
.txt21 {font-size:21px;}
.review_score{display: inline-block;width: 100%;position: relative;margin-top:5px;}
/*사용자 총 평점*/
.review_score .review_score_box{text-align:center;float:left;margin-right: 3%;border-right: 1px dashed #ccc;padding-right: 3%;padding-left:1.5%;box-sizing:border-box;}
.review_score .review_score_box p{font-size:14px;font-weight:600;margin-bottom:10px;margin-top:3px;}
.review_score .review_score_box .review_score_gray{background: #f4f4f4;padding:5px 0 15px;width:90%;margin:0 auto;}
.review_score .review_score_box h4{font-size: 32px;margin:0;padding:0;}
.star-rating { width:100px;text-align: left;}
.star-rating,.star-rating div { display:inline-block;height:17px;overflow:hidden;background:url('<?php echo $cur_img_url;?>/review_star.png')no-repeat; }
.star-rating div{ background-position:left bottom; line-height:0; vertical-align:top; }
/*사용자 그래프*/
.review_score_ul{float:left;}
.review_score_ul li{display: inline-block;margin-bottom:5px;height:14px;width:100%;vertical-align: bottom;}
.review_score_ul li .review_scr{float:left;font-size:13px;}
.review_score_ul li .review_graph_bg{background:#f4f4f4;position: relative;height: 12px;width:60%;float:left;margin:0 3%;}
.review_score_ul li .review_graph_red{background:#f05350;height: 12px;}
.review_per{float:left;font-size:12px;;color:#f05350;font-weight: 400;}
/*사용후기 타이틀*/
.review_title{font-size: 13px;padding: 5px 0;margin: 0 auto;margin-left:13px;margin-bottom:5px;}
.review_title:before{content:'';width:5px;height:5px;background:#f05350;position:absolute;left:3px;top:10px;}
/*사용후기 이미지*/
.review_img li{float:left;margin-right: 1%;width:24%;margin-bottom:1%;}
.review_img li:nth-child(4n){margin-right:0;}
.review_img li:nth-child(n+5){margin-bottom:0;}
.review_img ul{width:100%;display: inline-block;}
.review_img_box{position:relative;margin-top:5px;}
</style>
<?php
}
?>
<div class="class_skin_idx_<?php echo $sk_idx;?>">
<!-- 상품상세 -->
<section class="separate_line">
<!--스크롤이 내려가면 상단에 붙도록~ 추가할스타일 style="position:fixed;top:0px;"-->
<ul class="relative width_full height50 align_c gray_line_t custom_line12 bg_white z10">
<li class="float_l height40" style="width:20%;"><a href="#tab1" class="in_block width_full black txt13 bold l_height50 space_1 ellipsis">상세설명</a></li>
<?php if($configshop['item_use_type']!='0'){ // 사용후기 사용 안하면 숨김?>
<li class="float_l height40" style="width:20%;"><a href="#tab2" class="in_block width_full black txt13 bold l_height50 space_1 ellipsis">상품후기</a></li>
<?php }?>
<li class="float_l height40" style="width:20%;"><a href="#tab3" class="in_block width_full black txt13 bold l_height50 space_1 ellipsis">상품문의</a></li>
<li class="float_l height40" style="width:20%;"><a href="#tab4" class="in_block width_full black txt13 bold l_height50 space_1 ellipsis">배송정보</a></li>
<li class="float_l height40" style="width:20%;"><a href="#tab5" class="in_block width_full black txt13 bold l_height50 space_1 ellipsis">교환/반품</a></li>
</ul>
<article class="gray_line_b2">
<h3><a name="tab1"><span class="screen_out">상세설명</span></a></h3>
<div class='com_explain_class mobile_explain_class'>
<?php echo $prodinfo['item_mobile_explain']; ?>
</div>
</article>
<article class="p15_0 p0_10 gray_line_b2 separate_line <?php if($configshop['item_use_type']=='0'){ echo "screen_out"; } // 사용후기 사용안하면 숨김?>">
<h3><a name="tab2"><span class="">상품후기</span></a></h3>
<div class="review_score">
<!--사용자 총 평점-->
<p class="review_title">사용자 총 평점</p>
<div class="review_score_box width_half2">
<div class="review_score_gray">
<h4><?php echo $use_cnt_info['use_pt'];?></h4>
<div class="star-rating">
<div style ="width:<?php echo round($use_cnt_info['use_pt']/5*100);?>%"></div>
</div>
</div>
</div>
<!--사용후기 그래프-->
<ul class="review_score_ul width_half2">
<li><a>
<p class="review_scr">5점</p>
<div class="review_graph_bg">
<div class="review_graph_red" style="width:<?php echo round($use_cnt_info['use_5']/$use_cnt_info['use_total']*100);?>%"></div>
</div>
<p class="review_per">(<?php echo $use_cnt_info['use_5'];?>)</p>
</a>
</li>
<li><a>
<p class="review_scr">4점</p>
<div class="review_graph_bg">
<div class="review_graph_red" style="width:<?php echo round($use_cnt_info['use_4']/$use_cnt_info['use_total']*100);?>%"></div>
</div>
<p class="review_per">(<?php echo $use_cnt_info['use_4'];?>)</p>
</a>
</li>
<li><a>
<p class="review_scr">3점</p>
<div class="review_graph_bg">
<div class="review_graph_red" style="width:<?php echo round($use_cnt_info['use_3']/$use_cnt_info['use_total']*100);?>%"></div>
</div>
<p class="review_per">(<?php echo $use_cnt_info['use_3'];?>)</p>
</a>
</li>
<li><a>
<p class="review_scr">2점</p>
<div class="review_graph_bg">
<div class="review_graph_red" style="width:<?php echo round($use_cnt_info['use_2']/$use_cnt_info['use_total']*100);?>%"></div>
</div>
<p class="review_per">(<?php echo $use_cnt_info['use_2'];?>)</p>
</a>
</li>
<li><a>
<p class="review_scr">1점</p>
<div class="review_graph_bg">
<div class="review_graph_red" style="width:<?php echo round($use_cnt_info['use_1']/$use_cnt_info['use_total']*100);?>%"></div>
</div>
<p class="review_per">(<?php echo $use_cnt_info['use_1'];?>)</p>
</a>
</li>
</ul>
</div>
<!--사용후기 이미지-->
<div class="review_img_box">
<p class="review_title">포토리뷰</p>
<div class="review_img">
<div>
<ul>
<?php
$cnt=0;
foreach($use_img_array as $key=>$href){
if($cnt%4==0 && $cnt>1){ echo "</ul><ul>"; }
?>
<li class='review_img_li'><a><img src="<?php echo $href;?>" class='use_img_class' data-idx="<?php echo $key;?>" class="width_full" style="width:100%;"></a></li>
<?php
$cnt++;
}
?>
</ul>
</div>
</div>
</div>
<!-- 상품후기:평점 끝-->
<p class="mb5 txt13 screen_out">구매 후 상품후기 작성 시 <span class="custom1 bold ">100p</span>가 적립됩니다.</p>
<table class="width_full txt12 normal black_line_t">
<colgroup>
<col class="width100"><col>
</colgroup>
<tbody class='prod_use_tbody_class'><!-- 후기 내용이 들어갈 영역 -->
</tbody>
</table>
<div class="mt7 width_full">
<a class="block height30 txt13 align_c l_height30 bg_custom1" href='<?php echo $j3_shop_url;?>/mypage.php'><span class="white bold">후기쓰기</span></a>
</div>
<div class='pg_wrap use_paging_class' style='padding-top:0px;'><!-- 후기 페이징 들어갈 영역 --></div>
</article>
<article class="p15_0 p0_10 gray_line_b2 separate_line">
<h3><a name="tab3"><span class="screen_out">상품문의</span></a><h3>
<p class="mb5 txt13 align_j">결제 및 배송, 주문취소, 교환/반품에 대한 문의는 <span class="custom1 bold">마이페이지의 1:1문의</span>를 이용해주세요.</p>
<table class="width_full txt12 normal black_line_t">
<colgroup>
<col><col class="width100">
</colgroup>
<tbody class='prod_qa_tbody_class'><!-- 후기 내용이 들어갈 영역 -->
</tbody>
</table>
<div class="mt7 width_full">
<a class="block height30 txt13 align_c l_height30 bg_custom1 prod_qa_new_class"><span class="white bold">상품문의하기</span></a>
</div>
<div class='pg_wrap qa_paging_class' style='padding-top:0px;'><!-- 문의 페이징 들어갈 영역 -->
</div>
</article>
<article class="p15_0 p0_10 gray_line_b2 separate_line" style='font-size:0.8em;'>
<a name="tab4"></a>
<?php echo $configshop['deli_info'];?>
</article>
<article class="p15_0 p0_10 gray_line_b2 separate_line" style='font-size:0.8em;'>
<a name="tab5"></a>
<?php echo $configshop['deli_return'];?>
</article>
</section>
<!-- //상품상세 -->
<!-- 관련상품 -->
<section class="p0_10 gray_line_b2 separate_line clearfix">
<h2 class="mb10 l_height40 align_c black_line_b">관련상품</h2>
<!-- 첫줄 -->
<!-- ul : 높이값 = (이미지높이 + 하단마진 + 하단패딩) * 상품갯수 -->
<ul class="width_full" id="sit_rel_list" style="">
</ul>
</section>
<!-- //관련상품 -->
</div>
<script>
$(function(){
$div_width = $(".mobile_explain_class").innerWidth();
setTimeout(function(){
$(".mobile_explain_class img").each(function(){
$img_width = $(this).width();
if($div_width<$img_width){
$(this).css("width","100%").css("max-width","800px").css("height","").attr("width","").attr("height","");
}
});
},700);
});
</script>
<script>
$(function(){
if($(".review_img .review_img_li").length>8){ // 8개 이상일때만 동작하게 처리
$(".review_img div").bxSlider({
mode: 'vertical',
auto : true,
pager:true,
controls:false,
minSlides:2,
maxSlides:2,
moveSlides:1,
preloadImages:'all'
});
} else {
$(".review_img ul").css("display","block");
}
});
</script>
|