把 sections / product_description.liquid 替换为以下代码
{% assign open_full_page = section.settings.open_full_page %}
{% if section.blocks.size > 0 %}
<style>
@media (min-width: {{ settings.breakpoint }}px) {
.full__page-spacing {
padding: 0 {{ section.settings.spacing }}px;
}
}
.tab-pc{
display: flex;
justify-content: center;
width: 100%;
border-bottom: 1px solid var(--color-borders);
margin-bottom: 10px;
}
.tab-pc .product-info__desc-wrap-pc{
margin: 0 2rem;
}
.tab-pc .product-info__desc-tab-header:hover{
border-bottom: 5px solid var(--color-borders);
}
.tab-pc .product-info__desc-tab-header{
border-bottom: 5px solid #fff;
box-shadow: none;
}
.tab-pc .is-open .product-info__desc-tab-header{
border-bottom: 5px solid #000;
}
@media (min-width: 450px){
.product-info__desc-wrap label{
display:none;
}
}
@media (max-width: 450px){
.product-info__desc-wrap label{
display:flex;
}
.tab-pc{
display:none;
}
}
</style>
<div class="lg:tw-mx-auto {% unless open_full_page %} lg:tw-w-[56%] {% else %} lg:tw-container {% endunless %} product-info__desc product-info__desc-tab">
<div class="tab-pc">
{% for block in section.blocks %}
{% assign type = block.type %}
{% assign tab_page = block.settings.page.id %}
{% if type == 'custom_tab' %}{% unless tab_page %}{% continue %}{% endunless %}{% endif %}
<div class="product-info__desc-wrap-pc">
<label class="md:tw-px-4 tw-flex tw-py-4 tw-cursor-pointer product-info__desc-tab-header" for="r-{{ section.id }}-{{ forloop.index }}">
<span class="tw-flex-1 tw-font-semibold tw-body-plus-3">
{% if type == "desc" %}
{{ 'i18n.product.product_detail.product_description' | t }}
{% else %}
{{ pages[tab_page.id].title }}
{% endif %}
</span>
</div>
{% endfor %}
</div>
{% for block in section.blocks %}
{% assign type = block.type %}
{% assign tab_page = block.settings.page.id %}
{% if type == 'custom_tab' %}{% unless tab_page %}{% continue %}{% endunless %}{% endif %}
<div class="product-info__desc-wrap {% if open_full_page %}full__page-spacing{% endif %} {% if block.settings.desc_style == 'visible' %}is-open{% endif %}" >
<label class="md:tw-px-4 tw-flex tw-py-4 tw-cursor-pointer product-info__desc-tab-header" for="r-{{ section.id }}-{{ forloop.index }}">
<span class="tw-flex-1 tw-font-semibold tw-body-plus-3">
{% if type == "desc" %}
{{ 'i18n.product.product_detail.product_description' | t }}
{% else %}
{{ pages[tab_page.id].title }}
{% endif %}
</span>
<i class="tw-flex tw-items-center">{% include 'icon_right', icon_class: 'tw-transform tw-rotate-90 tw-transition-transform tw-duration-300 product-info__desc-icon' %}</i>
</label>
<input autocomplete="off" type="checkbox" name="r-{{ section.id }}-{{ forloop.index }}" class="tw-hidden product-info__desc-tab-cb" id="r-{{ section.id }}-{{ forloop.index }}" data-index={{ forloop.index }} {% if block.settings.desc_style == 'visible' %}checked{% endif %}/>
<div class="md:tw-px-4 hide-scrollbar {% unless block.settings.desc_style == 'visible' %} tw-hidden {% endunless %} {% if type =='desc' %}tw-overflow-hidden{% endif %} {% if type == 'desc' or tab contains 'page' %}mce__content{% endif %} product-info__desc-tab-content product_detail_{{tab}}_content">
{% if type == 'desc' %}
{{ product.description | lazysizes }}
{% else %}
{{ pages[tab_page.id].content }}
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endif %}
<div class="tw-container tw-mt-[30px] lg:tw-mt-15 empty:tw-hidden plugin__reviews"></div>
<script>
jQuery(function($){
var tabpc = $('.product-info__desc-wrap-pc');
if(tabpc.length>0){
$(".product-info__desc-tab-cb").first().trigger('click');
tabpc.first().addClass('is-open')
// tabpc.each(function(){
tabpc.on('click',function(i){
$('.product-info__desc-tab-cb').prop('checked',false)
$('.product-info__desc-wrap').removeClass('is-open');
$('.product-info__desc-tab-content').hide()
$('.product-info__desc-tab-cb:eq('+i+')').trigger('click');
tabpc.removeClass('is-open');
$(this).addClass('is-open')
})
// })
}
})
</script>
{% schema %}
{
"name": "product_description",
"templates": ["product"],
"contentType": [
"products"
],
"limit": 1,
"class": "card-spacing",
"max_blocks": 3,
"settings": [
{
"type": "checkbox",
"id": "open_full_page",
"label": {
"en-US": "Full page width",
"zh-CN": "全屏宽度"
},
"default": false
},
{
"type": "range",
"id": "spacing",
"label": {
"en-US": "Spacing",
"zh-CN": "间距"
},
"unit": "px",
"step": 1,
"min": 0,
"max": 40,
"default": 20
}
],
"blocks": [
{
"type": "desc",
"limit": 1,
"allow_delete": false,
"name": {
"en-US": "Description",
"zh-CN": "描述"
},
"settings": [
{
"type": "select",
"id": "desc_style",
"label": {
"en-US": "Description style",
"zh-CN": "描述风格"
},
"options": [
{
"label": {
"en-US": "Expandable",
"zh-CN": "可展开"
},
"value": "expand"
},
{
"label": {
"en-US": "Always visible",
"zh-CN": "一直可见"
},
"value": "visible"
}
],
"default": "expand"
}
]
},
{
"type": "custom_tab",
"name": {
"en-US": "Custom Tab",
"zh-CN": "自定义Tab内容"
},
"settings": [
{
"type": "page",
"id": "page",
"label": {
"zh-CN": "扩展内容",
"en-US": "Additional content"
}
},
{
"type": "select",
"id": "desc_style",
"label": {
"en-US": "Description style",
"zh-CN": "描述风格"
},
"options": [
{
"label": {
"en-US": "Expandable",
"zh-CN": "可展开"
},
"value": "expand"
},
{
"label": {
"en-US": "Always visible",
"zh-CN": "一直可见"
},
"value": "visible"
}
],
"default": "expand"
}
]
}
],
"presets": [
{
"name": "product_description",
"cname": {
"en-US": "Product description",
"zh-CN": "商品描述"
},
"category": {
"en-US": "Page",
"zh-CN": "页面"
},
"ccategory": {
"en-US": "Page",
"zh-CN": "页面"
},
"display": true,
"blocks": [
{
"type": "desc",
"settings": {
"desc_style": "expand"
}
}
]
}
]
}
{% endschema %}