298 lines
14 KiB
HTML
298 lines
14 KiB
HTML
{extend name="public/base" /}
|
|
{block name="title"}
|
|
{notempty name="product.seo_title"}<title>{$product.seo_title}</title>{else /}{__BLOCK__}{/notempty}
|
|
{/block}
|
|
{block name="seo"}
|
|
{notempty name="product.seo_keywords"}
|
|
<meta name="keywords" content="{$product.seo_keywords}" />
|
|
<meta name="description" content="{$product.seo_desc}" />
|
|
{else/}
|
|
{__BLOCK__}
|
|
{/notempty}
|
|
{/block}
|
|
{block name="style"}
|
|
<link rel="stylesheet" type="text/css" href="__CSS__/product_detail.css" />
|
|
{/block}
|
|
{block name="main"}
|
|
<div class="orico_Page_prdetail">
|
|
<!--产品详情内容 -->
|
|
<div class="oriprdetail">
|
|
<!--产品路径-->
|
|
<div class="product_address">
|
|
<a class="pathname" href="/">首页</a>
|
|
{volist name="product_categorys" id="ca"}
|
|
<div class="arrow"></div>
|
|
<a class="pathname" href="{:url('product/category', ['id' => $ca.id])}">{$ca.name}</a>
|
|
{/volist}
|
|
</div>
|
|
<!-- 产品主图切换和参数详情-->
|
|
<div class="cp">
|
|
<!--左边图片 -->
|
|
<div class="cpfl">
|
|
{volist name="product_skus" id="sku" key="idx"}
|
|
<div class="preview" id="preview{$sku.id}" {neq name="idx" value="1"}style="display:none"{/neq}>
|
|
<div class="smallImg">
|
|
<!-- 左边切换按钮 -->
|
|
<div class="scrollbutton smallImgUp disabled"></div>
|
|
<!-- 小图片预览 -->
|
|
<div id="imageMenu">
|
|
<ul class="image_list">
|
|
{if condition="!empty($product.video_img) && !empty($product.video_url) && $idx == 1"}
|
|
<!-- 产品视频 -->
|
|
<li id="onlickImg"><img src="{:thumb($product.video_img)}" data-url="{$product.video_url}" /></li>
|
|
{/if}
|
|
{volist name="sku.photo_album" id="photo"}
|
|
<li id="onlickImg"><img src="{:thumb($photo)}" data-url="{$photo}" /></li>
|
|
{/volist}
|
|
</ul>
|
|
</div>
|
|
<!-- 右边切换按钮 -->
|
|
<div class="scrollbutton smallImgDown"></div>
|
|
</div>
|
|
<!-- 产品大图 -->
|
|
<div class="bigImg" id="vertical">
|
|
<!-- 主图 -->
|
|
{if condition="!empty($product.video_img) && !empty($product.video_url) && $idx == 1"}
|
|
<!-- 如果有视频情况下默认先显示视频 -->
|
|
<video poster="{$product.video_img}" autoplay="autoplay" muted="muted" loop="loop" id="video" controls>
|
|
<source src="{$product.video_url}" type="video/mp4" />
|
|
</video>
|
|
{else/}
|
|
{notempty name="sku.photo_album[0]"}
|
|
<img src="{$sku.photo_album[0]}" id="midimg" />
|
|
{/notempty}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
<!-- 右边产品详情 -->
|
|
<div class="cprh">
|
|
<div class="cpcon">
|
|
<p class="ctit1">{$product.name|default=''}</p>
|
|
<p>{$product.short_name|default=''}</p>
|
|
<div class="proTfg">
|
|
<ul class="swt-Table">
|
|
{volist name="product_params" id="pp"}
|
|
<li class="Table-Row">
|
|
<div class="ms3 Table-Cell">{$pp.name}</div>
|
|
<div class="ms2 Table-Cell"></div>
|
|
<div class="ms4 Table-Cell">{$pp.value}</div>
|
|
</li>
|
|
{/volist}
|
|
</ul>
|
|
</div>
|
|
<!-- 颜色-->
|
|
{volist name="product_sku_attrs" id="ps"}
|
|
<div class="prcolors">
|
|
<div class="dt">{$ps.attr_name}</div>
|
|
<ul class="dowebok">
|
|
{volist name="ps.attr_values" id="pv" key="k"}
|
|
{assign name="attr_value_type" value=":rgb_or_image($pv.attr_value)" /}
|
|
<a {eq name='k' value='1'}class="on"{/eq} data-sku_id="{$pv.sku_id}">
|
|
{eq name="attr_value_type" value="IMAGE"}
|
|
<span class="itemcolor"><img src="{$pv.attr_value}" /></span>
|
|
{elseif condition="$attr_value_type == 'RGB'" /}
|
|
<span class="itemcolor" {:style(['background-color'=>$pv.attr_value])}></span>
|
|
{else /}
|
|
<span>{$pv.attr_value}</span>
|
|
{/eq}
|
|
</a>
|
|
{/volist}
|
|
</ul>
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
<!-- 按钮-->
|
|
<div class="buy">
|
|
{volist name="product_purchase_links" id="ppp" key="k"}
|
|
<a class="thebt bttype{$k}" href="{$ppp.link}">{$ppp.platform_name}</a>
|
|
{/volist}
|
|
<a class="thebt bttype3" id="open_form_modal">{:lang('product_detail.display_form')}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 产品介绍详情-->
|
|
<div class="oriprInfo">
|
|
<div class="titleprinfo">
|
|
<a href="#detail" class="checkshow">{:lang('product_detail.detail_section_title')}</a>
|
|
{notempty name="product_related"}
|
|
<span>|</span>
|
|
<a href="#related">{:lang('product_detail.related_products')}</a></div>
|
|
{/notempty}
|
|
<!-- 富文本渲染-->
|
|
<div class="products_des" id="detail">
|
|
{$product.detail|default=''|raw}
|
|
</div>
|
|
</div>
|
|
<!-- 相关产品 -->
|
|
{notempty name="product_related"}
|
|
<div id="related">
|
|
<p>{:lang('product_detail.related_products')}</p>
|
|
<div>
|
|
<ul>
|
|
{volist name="product_related" id="related"}
|
|
<li>
|
|
<a href="{:url('product/detail', ['id' => $related.id])}">
|
|
<img src="{$related.cover_image}" alt="{$related.name}" />
|
|
<p>{$related.name}</p>
|
|
<p>{$related.spu}</p>
|
|
</a>
|
|
</li>
|
|
{/volist}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{/notempty}
|
|
<!-- 弹框-->
|
|
<div id="form_modal" class="XJmodal">
|
|
<div class="XJmodal-content">
|
|
<span class="close">×</span>
|
|
<h2>{:lang('product_detail.display_form')}</h2>
|
|
<form action="" method="post" autocomplete="off">
|
|
<div class="tkitem">
|
|
<div class="form-group">
|
|
<label for="firstName">
|
|
<strong style="color: red; margin-right: 0.3125rem;"> * </strong> {:lang('product_detail.form_name')}</label>
|
|
<div>
|
|
<input type="text" name="first_name" id="firstName" placeholder="{:lang('product_detail.form_first_name_placeholder')}" class="detail-w">
|
|
<input type="text" name="last_name" id="lastName" placeholder="{:lang('product_detail.form_last_name_placeholder')}" class="detail-w">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="corp">
|
|
<strong style="color: red; margin-right: 0.3125rem;"> * </strong>
|
|
{:lang('product_detail.form_corp')}
|
|
</label>
|
|
<input type="text" name="corp_name" id="corp" class="detail-w01">
|
|
</div>
|
|
</div>
|
|
<div class="tkitem">
|
|
<div class="form-group">
|
|
<label for="email">
|
|
<strong style="color: red; margin-right: 0.3125rem;"> * </strong> Email
|
|
{:lang('product_detail.form_email')}
|
|
</label>
|
|
<input type="text" name="email" id="email" class="detail-w01">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone">
|
|
<strong style="color: red; margin-right: 0.3125rem;"> * </strong> Phone
|
|
{:lang('product_detail.form_phone')}
|
|
</label>
|
|
<input type="text" name="phone" id="phone" class="detail-w01">
|
|
</div>
|
|
</div>
|
|
<div class="tkitem">
|
|
<div class="form-group">
|
|
<label for="country">
|
|
<strong style="color: red; margin-right: 0.3125rem;"> * </strong>
|
|
{:lang('product_detail.form_country')}
|
|
</label>
|
|
<select name="country_name" id="country">
|
|
<option value="">{:lang('product_detail.form_country_placeholder')}</option>
|
|
{volist name="country_list" id="country"}
|
|
<option value="{$country}">{$country}</option>
|
|
{/volist}
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="industry">
|
|
<strong style="color: red; margin-right: 0.3125rem;"> * </strong>
|
|
{:lang('product_detail.form_industry')}
|
|
</label>
|
|
<input type="text" name="industry" id="industry" class="detail-w01">
|
|
</div>
|
|
</div>
|
|
<div class="tkitem">
|
|
<div class="form-group" style="width: 100%;margin-right: 0px;">
|
|
<label for="message">
|
|
<strong style="color: red; margin-right: 0.3125rem;"> * </strong>
|
|
{:lang('product_detail.form_inquiry')}
|
|
</label>
|
|
<textarea name="message" id="message"></textarea>
|
|
</div>
|
|
</div>
|
|
<button type="button" id="send" class="submit-btn">{:lang('product_detail.form_submit')}</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/block}
|
|
{block name="script"}
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
// 切换图册
|
|
$('.prcolors .dowebok a').click(function() {
|
|
// 移除所有 .on 类
|
|
$(this).addClass('on').siblings('a').removeClass('on');
|
|
// 获取当前点击的元素的 data-sku_id 值
|
|
var skuId = $(this).data('sku_id');
|
|
// 根据 skuId 显示对应的预览
|
|
$('#preview' + skuId).show().siblings('.preview').hide();
|
|
})
|
|
|
|
// 获取模态框和打开按钮以及关闭按钮
|
|
var modal = $("#form_modal");
|
|
var openBtn = $("#open_form_modal");
|
|
var closeBtn = $(".close");
|
|
// 打开模态框
|
|
openBtn.click(function() {
|
|
modal.show();
|
|
});
|
|
// 关闭模态框
|
|
closeBtn.click(function() {
|
|
modal.hide();
|
|
});
|
|
// 当用户点击模态框外部时，关闭模态框
|
|
$(window).click(function(event) {
|
|
if (event.target === modal[0]) {
|
|
modal.hide();
|
|
}
|
|
});
|
|
// 处理表单提交
|
|
modal.find("form").submit(function(e) {
|
|
e.preventDefault();
|
|
var formData = $(this).serialize();
|
|
// 这里可以添加代码将formData发送到服务器
|
|
// 例如通过AJAX
|
|
console.log("提交的数据: " + formData);
|
|
// 提交成功后可以选择关闭模态框
|
|
modal.hide();
|
|
});
|
|
|
|
// 提交询盘
|
|
$('#send').click(function() {
|
|
var form = $(this).parents('form');
|
|
$.ajax({
|
|
url: "{:url('product/inquiry')}",
|
|
type: 'POST',
|
|
data: form.serialize(),
|
|
success: function(r) {
|
|
if (r.code == 0) {
|
|
form[0].reset(); // 重置表单
|
|
modal.hide();
|
|
}
|
|
alert(r.msg);
|
|
},
|
|
error: function(e) {
|
|
console.error(e);
|
|
}
|
|
})
|
|
});
|
|
// 产品详情切换
|
|
$('.titleprinfo a').click(function(e) {
|
|
e.preventDefault();
|
|
$('.titleprinfo a').removeClass('checkshow');
|
|
$(this).addClass('checkshow');
|
|
var targetId = $(this).attr('href');
|
|
if($(targetId).length) {
|
|
$('html, body').animate({
|
|
scrollTop: $(targetId).offset().top
|
|
}, 500);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{/block} |