https://medipeel.co.kr/musign/js/mu_prd.js

1$(document).ready(function(){
2
3    /* ************************************* 
4    **                                    **
5    **            Product List            **
6    **                                    **
7    ************************************* */
8
9    let prdDep01 = $(".menuCategory > li.dep01");
10    prdDep01.each(function(){
11        
12        // 각 prdDep01카테고리 클릭 시 prdDep02의 첫번째 카테고리로 url로 이동
13        let dep01Url = $(this).find('.dep02').eq(0).find('> a').attr('href');
14        $(this).find('> a').attr('href',dep01Url);
15
16        // prdDep02카테고리 선택됐을 때 해당하는 부모 prdDep01카테고리도 선택됨
17        let prdDep02 = $(this).find('li.dep02');
18        prdDep02.each(function(){
19            let prdDep03 = $(this).find('li.dep03');
20            prdDep03.each(function(){
21                if ($(this).hasClass("selected")) {
22                    $(this).closest(prdDep02).addClass("selected");
23                }
24            });
25            if ($(this).hasClass("selected")) {
26                $(this).closest(prdDep01).addClass("selected");
27            }
28        });
29    });
30
31
32    /* ************************************* 
33    **                                    **
34    **           Product Detail           **
35    **                                    **
36    ************************************* */
37
38    // 상품상세페이지 금액 표기란 커스텀
39    $("#span_product_price_text").addClass("prdViewPrc");
40    var prdDetailOri = $("#span_product_price_custom").text(); //소비자가
41    var prdDetailSell = $("#span_product_price_text").parent().html(); //판매가
42    var prdDetailSale = $("#span_product_price_sale").html(); //할인판매가
43
44    $("#muDetailOri").html(prdDetailOri);
45    $("#muDetailSell").html(prdDetailSell);
46    $("#muDetailSale").html(prdDetailSale);
47    var prdDetailSaleBox = $("#muDetailSale > span");
48    prdDetailSaleBox.remove();
49    $("#muDetailSell").find('.sale_box').remove();
50
51    // 상세페이지 할인율
52    var detailOriEl = $("#muDetailOri");
53    var detailSellEl = $("#span_product_price_text");
54    var detailSaleEl = $("#muDetailSale");
55
56    var detailOri = 0; //소비자가 추출
57    var detailOriText = "";
58    if (detailOriEl && detailOriEl.length > 0) {
59        var detailOriText = detailOriEl.text().trim();
60        if (detailOriText) {
61            detailOri = parseInt(detailOriText.replace(",", ""));
62        }
63    }
64
65    var detailSell = 0; //판매가 추출
66    var detailSellText = "";
67    if (detailSellEl && detailSellEl.length > 0) {
68        var detailSellText = detailSellEl.text().trim();
69        if (detailSellText) {
70            detailSell = parseInt(detailSellText.replace(",", ""));
71        }
72    }
73
74    var detailSale = 0; //할인판매가 추출
75    var detailSaleText = "";
76    if (detailSaleEl.length > 0) {
77        detailSaleText = detailSaleEl.text().trim();
78        if (detailSaleText && detailSaleText.length > 0) {
79            detailSale = parseInt(detailSaleText.replace(",", ""));
80        }
81    }
82
83    var OfftoFixed = 0, // 할인율 소수점자릿수
84        saleText = "";
85    if (detailOri > 0 && (detailSale > 0 || detailSell > 0)) {
86        var iDiscountPrice = detailSale > 0 ? detailSale : detailSell; // 할인 판매가가 있는 경우 그 값을 사용, 없으면 판매가를 사용
87        saleText = (((detailOri - iDiscountPrice) / detailOri) * 100).toFixed(OfftoFixed) + "%";
88        if ($("#muSaleBox").find(".sale_box").length === 0) {
89            $("#muSaleBox").html("<span class='sale_box'>" + saleText + "</span>");
90        }
91    }
92    // 할인판매가가 있을 경우 판매가 미노출
93    if ($("#muDetailSale").text().length > 0) {
94        $("#muDetailSell").hide();
95    }else if(detailOri === detailSell){
96        // 소비자가와 판매가가 같을 경우 소비자가 미노출
97        $('#muDetailOri').hide();
98        $('#muSaleBox').hide();
99    }
100
101    detailTab();
102

103    $('.detailView').on('click',function(){
104        $(this).closest('.productDetail').removeClass('hide');
105    });
106
107    
108    /* ************************************* 
109    **                                    **
110    **             Ingredient             **
111    **                                    **
112    ************************************* */
113    const ingredientWr = $('.ingredientWr');
114    if(ingredientWr.length > 0){
115        let  ingredientList = $('.ingredientLi');
116		ingredientList.each(function(){
117			let $param = $(this).attr('value');
118			let $LayerWr = $(this).find('.ingredientLayerWr');
119			$(this).on('click',function(){
120				$LayerWr.show().prepend('<iframe id="ingredientLayer" title="ingredient info" src="' + $param + '"></iframe>');
121			});
122		});
123    }
124});
125function closeIframe() {
126    window.parent.ingredientClose();
127}
128function ingredientClose(){
129    let iframeWr = $('.ingredientLayerWr');
130    let iframe = $("#ingredientLayer");
131    iframe.remove();
132    iframeWr.hide();
133}
134
135function detailTab(){
136    let tabBtn = $('.detail_tab ul li');
137    let topReviewBtn = $('.topReviewBtn');
138    
139    tabBtn.each(function(idx,item){
140        let tabCont = $(this).closest('.additionalArea').find('.tabContWr > div');
141
142        $(this).on('click',function(){
143            tabBtn.removeClass('tab_open');
144            $(this).addClass('tab_open');
145
146            tabCont.removeClass('tab_view');
147            tabCont.eq(idx).addClass('tab_view');
148        });
149
150        topReviewBtn.on('click',function(){
151            tabBtn.removeClass('tab_open');
152            $('.reviewTabBtn').addClass('tab_open');
153
154            $('.tabContWr > div').removeClass('tab_view');
155            $('.reviewTabCont').addClass('tab_view');
156        });
157    });
158}
159
160/* ************************************* 
161**                                    **
162**               Swiper               **
163**                                    **
164************************************* */
165// 상세페이지 - 이미지
166var imgSlide = new Swiper('.imgArea .swiper', {
167    slidesPerView: 1,
168    pagination: {
169        el: ".swiper-pagination",
170        type: "progressbar",
171      },
172});
173
174
175// 상세페이지 - 관련상품
176var relationSlide = new Swiper('.relationArea .swiper', {
177    slidesPerView: 3,
178    spaceBetween: 16,
179    pagination: {
180        el: ".relation-pagination",
181        type: "progressbar",
182    },
183});