feat: 产品

refactor: 产品详情页seo
This commit is contained in:
2025-04-24 10:21:45 +08:00
parent b64b1ef02a
commit 96ee2dda93
43 changed files with 592 additions and 63 deletions

View File

@@ -0,0 +1,71 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_category.css" type="text/css" />
{/block}
{block name="main"}
<div class="orico_Page_products">
{notempty name="focus_image"}
<div class="focus_image">
{volist name="focus_image" id="fimg"}
<a {notempty name="fimg.link"}href="{$fimg.link}"{/notempty}><img src="{$fimg.image}" alt="" /></a>
{/volist}
</div>
{/notempty}
<!-- 首页主题内容 -->
<div class="pageMain">
{notempty name="categorys_data"}
{volist name="categorys_data" id="vo"}
<h1 class="ori-pd-title">
<span>{$vo.name}</span>
{eq name="vo.level" value="2"}
<a href="{:url('product_category', ['id' => $vo.id])}">查看更多</a>
{/eq}
</h1>
{notempty name="vo.products"}
<div class="ori-pd-list">
{volist name="vo.products" id="vp"}
<a class="oripditem" href="{:url('product_detail', ['id' => $vp.id])}">
<div>
{volist name="vp.sku" id="vs" key="vs_idx"}
<img src="{$vs.main_image}" id="sku_image_{$vs.id}" class="prdimg {eq name='vs_idx' value='1'}prdimg-show{/eq}" />
{/volist}
</div>
<div class="prdName">{$vp.name}</div>
<div class="prddec">{$vp.short_name}</div>
{notempty name="vp.colors"}
<div class="prd-colors">
{volist name="vp.colors" id="vc" key="vc_idx"}
<div class="prdolorit {eq name='vc_idx' value='1'}on{/eq}" data-sku_id="{$vc.sku_id}">
{assign name="color_type" value=":rgb_or_image($vc.attr_value)" /}
{eq name="color_type" value="IMAGE"}
<img src="{$vc.attr_value}" />
{elseif condition="$color_type == 'RGB'" /}
<span class="rgb_hex" {:style(['background-color'=>$vc.attr_value])}></span>
{/eq}
</div>
{/volist}
</div>
{/notempty}
</a>
{/volist}
</div>
{/notempty}
{/volist}
{/notempty}
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(function () {
$('.prd-colors .prdolorit').click(function(event) {
event.stopPropagation();
event.preventDefault();
var sku_id = $(this).data('sku_id');
$('#sku_image_' + sku_id).addClass('prdimg-show').siblings().removeClass('prdimg-show');
$(this).addClass('on').siblings().removeClass('on');
});
})
</script>
{/block}

View File

@@ -3,9 +3,9 @@
{notempty name="product.seo_title"}<title>{$product.seo_title}</title>{else /}{__BLOCK__}{/notempty}
{/block}
{block name="seo"}
{notempty name=""}
{notempty name="product.seo_keywords"}
<meta name="keywords" content="{$product.seo_keywords}" />
<meta name="description" content="{$product.seo_description}" />
<meta name="description" content="{$product.seo_desc}" />
{else/}
{__BLOCK__}
{/notempty}
@@ -29,13 +29,14 @@
<div class="cp">
<!--左边图片 -->
<div class="cpfl">
{if condition="!empty($product.video_img) && !empty($product.video_url)"}
<div class="preview" id="preview{$sku.id}">
{volist name="product_skus" id="sku" key="idx"}
<div class="preview" id="preview{$sku.id}" {neq name="idx" value="1"}style="display:none"{/neq}>
{if condition="!empty($product.video_img) && !empty($product.video_url) && $idx == 1"}
<div class="smallImg">
<!-- 小图片预览 -->
<div id="imageMenu">
<ul class="image_list">
<li id="onlickImg"><img src="{$product.video_img}" /></li>
<li id="onlickImg"><img src="{:thumb($product.video_img)}" /></li>
</ul>
</div>
</div>
@@ -45,20 +46,13 @@
<source src="{$product.video_url}" type="video/mp4"/>
</video>
</div>
</div>
{/if}
{volist name="product_skus" id="sku" key="idx"}
{if condition="!empty($product.video_img) && !empty($product.video_url)"}
<div class="preview" id="preview{$sku.id}" style="display:none">
{else /}
<div class="preview" id="preview{$sku.id}" {neq name="idx" value="1"}style="display:none"{/neq}>
{/if}
{/if}
<div class="smallImg">
<!-- 小图片预览 -->
<div id="imageMenu">
<ul class="image_list">
{volist name="sku.photo_album" id="thumb_image"}
<li id="onlickImg"><img src="{$thumb_image}" /></li>
{volist name="sku.photo_album" id="photo"}
<li id="onlickImg"><img src="{:thumb($photo)}" /></li>
{/volist}
</ul>
</div>
@@ -125,12 +119,34 @@
</div>
<!-- 产品介绍详情-->
<div class="oriprInfo">
<div class="titleprinfo">{:lang('product_detail.detail_section_title')}</div>
<div class="titleprinfo">
<a href="#detail">{:lang('product_detail.detail_section_title')}</a>
<span>|</span>
<a href="#related">{:lang('product_detail.related_products')}</a></div>
<!-- 富文本渲染-->
<div class="products_des">
<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_img}" 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">