<!doctype html>
<!--[if IE 6]><html id="ie6" dir="ltr" lang="zh-TW"><![endif]-->
<!--[if IE 7]><html id="ie7" dir="ltr" lang="zh-TW"><![endif]-->
<!--[if IE 8]><html id="ie8" dir="ltr" lang="zh-TW"><![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html dir="ltr" lang="zh-TW">
<!--<![endif]-->
<head>
<!--[if lt IE 9]><script src="/js/html5.js"></script><![endif]-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title><?# webTitle ?></title>	
<meta name="author" content="<?# webTitle ?>" />
<meta name="copyright" content="<?# webName ?>版權所有" />
<meta name="description" content="<?# webDescription ?>" />
<meta name="distribution" content="Taiwan" /> 
<meta name="keywords" content="<?# webKeyword ?>" />
<meta name="format-detection" content="telephone=no" />
<meta property="og:url" content="<?# RelLink ?><?# REQUESTURI ?>" />
<meta property="og:type" content="website" />
<meta property="og:title" content="<?# ogTitle ?>" />
<meta property="og:description" content="<?# ogDescription ?>" />
<meta property="og:image" content="<?# ogImage ?>" />
<link href="/css/<?# webTemplates ?>/main.css" rel="stylesheet">
<link href="/css/<?# webTemplates ?>/layout.css" rel="stylesheet">
<link href="/css/<?# webTemplates ?>/product.css" rel="stylesheet">
<link href="/jquery/aos/aos.css" rel="stylesheet">
<script src="/jquery/jquery-1.10.js"></script>
<script>
	if('<?# alertMsg ?>' != ''){
		alert('<?# alertMsg ?>');
		if('<?# goBack ?>' == 'Y'){
			history.back();
		}
	}
	if('<?# locationHref ?>' != ''){
		location.href = '<?# locationHref ?>';
	}
</script>
<?# headHTML ?>
</head>
<body<?# JumpBody ?>>
<?# bodyTopHTML ?>
<div class="webBox" style="margin: 0; padding: 0; border: 0; width: 100%;<?# JumpStyle ?>">
<?# JumpHTML ?>
<?# JumpScript ?>
<div class="wrapper">
    <?# header ?>
	<div id="topBanner">
		<?# banner ?>
		<div class="bar">
			<h1><?# ProductName ?></h1>
			<div class="waylink">
				<ol>
					<li><a title="首頁" href="/">首頁</a></li>
					<li><a href="<?# htLink4 ?>" title="產品">產品</a></li>
					<php:repeater id="listR">
					<template>
					<li><a href="<?# Link ?>" title="<?# Name ?>"><?# Name ?></a></li>
					</template>
					</php:repeater>
					<li><?# ProductName ?></li>
				</ol>
			</div>
		</div>
	</div>
	<div class="wrap">
		<div class="workframe">
			<ul id="sideNav">
				<li><h3><a href="<?# htLink4 ?>" title="全部產品">全部產品</a></h3></li>
				<php:repeater id="listC">
				<template>
				<li<?# className ?>>
					<h3><a href="<?# link ?>" title="<?# CategoryName ?>" data-type="1"><?# CategoryName ?></a><?# iLabel ?></h3>
					<?# SubList ?>
				</li>
				</template>
				</php:repeater>
			</ul>
		</div>
		<div id="content" class="workframe">
			<div id="main-products">
				<div id="productimg" class="row">
					<div><a class="photo" href="<?# IconImage ?>" data-fancybox="gallery" style="background-image:url(<?# IconImage ?>);"><img src="<?# IconImage ?>" alt="<?# ProductName ?>"><img src="/images/book-blank.png" alt="<?# ProductName ?>"></a></div>
					<php:repeater id="listPI">
					<template>
					<div><a class="photo" href="<?# Image ?>" data-fancybox="gallery" style="background-image:url(<?# Image ?>);"><img src="<?# Image ?>"><img src="/images/book-blank.png"></a></div>
					</template>
					</php:repeater>
				</div>
				<div id="productdetail" class="row">
					<h2><?# ProductName ?></h2>
					<?# GoogleSearch ?>
					<div class="price"<?# sellStyle ?>>
						<b<?# priceStyle ?>><?# Price ?></b>
						<font<?# oldPriceStyle ?>><?# OldPrice ?></font>
						<span<?# NoStyle ?>><?# ProductNO ?></span>
					</div>
					<article><?# Introduction ?></article>
					<div class="orderBox"<?# orderStyle ?>>
						<p>數量</p>
						<p class="quantity">
							<a class="limit" href="javascript:void(0);" data-action="plusBtn" data-type="1">-</a>
							<input type="text" id="q" name="q" value="1">
							<a href="javascript:void(0);" data-action="plusBtn" data-type="2">+</a>
							<a class="addcar" id="buy" href="javascript:void(0);" title="加入購物車">加入購物車</a>
						</p>
					</div>
					<p class="askbtn"><a class="ask" href="<?# askLink ?>" title="諮詢此商品">諮詢此商品</a></p>
					<div id="community">
						<ul>
							<li class="fbb"><div class="fb-like" data-href="<?# RelLink ?><?# REQUESTURI ?>" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div></li>
							<li><a href="https://twitter.com/share" class="twitter-share-button" data-lang="zh-tw" data-dnt="true">推文</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>
							<li><div class="line-it-button" data-lang="zh_Hant" data-type="like" data-url="<?# RelLink ?><?# REQUESTURI ?>" data-share="true" style="display: none;"></div></li>
						</ul>
					</div>
				</div>
			</div>
			<div id="productTabs">
				<ul class="listBtn">
					<php:repeater id="listT">
					<template>
					<li><a href="#tab<?# NO ?>"><font><?# NO ?></font><font><?# Title ?></font></a></li>
					</template>
					</php:repeater>
					<li<?# SpStyle ?>><a href="#tabSp"><font><i class="fas fa-ruler-combined"></i></font><font>規格</font></a></li>
				</ul>
				<div id="tabs_container">
					<php:repeater id="listTD">
					<template>
					<div id="tab<?# NO ?>" class="tab_content"><p class="title"><?# Title ?></p><article><?# Description ?></article></div>
					</template>
					</php:repeater>
					<div id="tabSp" class="tab_content"<?# SpStyle ?>><p class="title">規格</p><article><?# Specification ?></article></div>
				</div>
			</div>
			<div id="pagenav2">
				<p class="page-prev" <?# pageUpStyle ?>><a href="<?# pageUpLink ?>"><b><?# pageUpName ?></b></a></p>
				<p class="page-next" <?# pageDownStyle ?>><a href="<?# pageDownLink ?>"><b><?# pageDownName ?></b></a></p>
			</div>
		</div>
	</div>
    <?# sidePage ?>
    <?# footer ?>
</div>
</div>
</body>
</html>
<script src="/jquery/aos/aos.js"></script>
<script>
	$(function(){
		$("#productimg").slick({
			autoplay: true,
			dots: true,
			arrows: false,
			infinite: true,
			speed: 500,
			fade: true,
			cssEase: 'linear'
		});
		
		$('#productdetail .orderBox p.quantity a[data-action="plusBtn"]').click(function(){
			var num = $(this).parent().children('input').val();
			if($(this).data('type') == '1'){
				num = parseInt(num) - 1;
			}else{
				num = parseInt(num) + 1;
			}
			if(num < 1) num = 1;
			
			$(this).parent().children('input').val(num);
		});
		
		$('#buy').click(function(){
			var re = /^[0-9]+$/;
			if(!re.test($('#q').val()) || $('#q').val() == "0"){
				alert("購買數量只能輸入大於0的阿拉伯數字!!");
				$('#q').focus();
				return false;
			}
			$.ajax({
				url: '/ajax/cart.php',
				async: false,
				type: 'POST',
				data: {'do':'add','id':'<?# ProductID ?>','q':$('#q').val()},
				dataType: 'json',
				success: function(JData){
					alert(JData["msg"]);
					if(JData["err"] == "0"){
						location.href = '<?# htLink7 ?>';
					}else{
						location.href = location.href;
					}
				},
				error:function(){
					alert('系統異常!請重新整理頁面再試一次!');
					location.href = location.href;
				}
			});
		});
		
		$('#productTabs .listBtn >li').click(function(){
			var s = $('#productTabs .listBtn >li').index(this);
			$('body,html').animate({
				scrollTop: $('#tabs_container>.tab_content:eq(' + s + ')').offset().top - 196
			}, 1000);
		});
		var w = $(window).width(),
			hs = ($(window).height() / 4),
			hs2 = ($(window).height() / 4) + 196,
			DT = $('#productTabs .listBtn').offset().top;
		$(window).scroll(function(){
			var wt = $(window).scrollTop() + hs,
				wt2 = $(window).scrollTop() + hs2,
				l = $('#tabs_container>.tab_content'),
				s = l.length - 1;
			if(wt < DT || wt >= l.last().offset().top + l.last().height() + 50){
				$('#productTabs .listBtn').removeClass('fix');
				$('#productTabs .listBtn >li:first').addClass('chk').siblings().removeClass('chk');
			}else{
				if(wt2 > $('#pagenav2').offset().top){
					$('#productTabs .listBtn').removeClass('fix');
				}else{
					$('#productTabs .listBtn').addClass('fix');
				}
				for (var i = 0; i < s; i++){
					if(wt >= parseInt(l.eq(i).offset().top - 50) && wt < parseInt(l.eq(i + 1).offset().top - 50)){
						s = i;
						break;
					}
				}
				$('#productTabs .listBtn >li:eq(' + s + ')').addClass('chk').siblings().removeClass('chk');
			}
		});
	});
	AOS.init();
	document.body.oncopy = event => {
		event.preventDefault();
		let textFont,
		copyFont = window.getSelection(0).toString();
		if(copyFont.length > 10){
			textFont = copyFont + '\n\n' + '原文網址: <?# webTitle ?> <?# RelLink ?><?# REQUESTURI ?>\n' + '著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。';
		}else{
			textFont = copyFont;
		}
		if(event.clipboardData){
			return event.clipboardData.setData('text', textFont);
		}else{// 相容IE
			return window.clipboardData.setData('text', textFont);
		}
	};
</script>