建立尺寸表程式碼片段
在「程式碼片段」 目錄中,按一下「新增程式碼片段」 。
將程式碼片段命名為 size-chart
,然後點擊「建立程式碼片段 」:
將下列內容複製到您的 size-chart
程式碼片段中:
<div class= "pop-up-modal" >
<div class= "pop-up-content" >
<span class= "close-button" > × </span>
<span class= "size-chart-content" > {{ pages.size-chart.content }}</span>
</div>
</div>
<script>
const modal = document . querySelector ( ' .pop-up-modal ' );
const trigger = document . querySelector ( ' .trigger-pop-up ' );
const closeButton = document . querySelector ( ' .close-button ' );
function toggleModal () {
modal . classList . toggle ( ' show-pop-up ' );
}
function windowOnClick ( event ) {
if ( event . target === modal ) {
toggleModal ();
}
}
trigger . addEventListener ( ' click ' , toggleModal );
closeButton . addEventListener ( ' click ' , toggleModal );
window . addEventListener ( ' click ' , windowOnClick );
</script>
<style>
.pop-up-modal {
position : fixed ;
left : 0 ;
top : 0 ;
width : 100% ;
height : 100% ;
background-color : rgba ( 0 , 0 , 0 , 0.5 );
opacity : 0 ;
display : none ;
transform : scale ( 1.1 );
transition : visibility 0s linear 0.25s , opacity 0.25s 0s , transform 0.25s ;
overflow : auto ;
}
.pop-up-content {
position : absolute ;
top : 8% ;
left : 50% ;
transform : translate ( -50% , 0 );
background-color : white ;
padding : 1rem 1.5rem ;
width : auto ;
border-radius : 0.5rem ;
}
.pop-up-content table {
table-layout : auto ;
}
.close-button {
float : right ;
width : 1.5rem ;
line-height : 1.5rem ;
text-align : center ;
cursor : pointer ;
border-radius : 0.25rem ;
background-color : lightgray ;
}
.close-button :hover {
background-color : darkgray ;
}
.show-pop-up {
z-index : 12 ;
opacity : 1 ;
display : block ;
transform : scale ( 1 );
transition : visibility 0s linear 0s , opacity 0.25s 0s , transform 0.25s ;
}
.trigger-pop-up {
margin : 10px 0 10px 0 ;
width : 100% ;
}
@media only screen and ( max-width : 749px ) {
.pop-up-content ,
.size-chart-content table {
width : 100% ;
}
.size-chart-content th ,
.size-chart-content td {
padding : 10px ;
}
}
</style>
{% block "note" %} 需要對 Simple 和 Minimal 佈景主題的 CSS 樣式進行些許變更。{% endblock %}
如果您使用的是 Simple 佈景主題,請使用此程式碼:
<div class= "pop-up-modal" >
<div class= "pop-up-content" >
<span class= "close-button" > × </span>
<span class= "size-chart-content" > {{ pages.size-chart.content }}</span>
</div>
</div>
<script>
const modal = document . querySelector ( ' .pop-up-modal ' );
const trigger = document . querySelector ( ' .trigger-pop-up ' );
const closeButton = document . querySelector ( ' .close-button ' );
function toggleModal () {
modal . classList . toggle ( ' show-pop-up ' );
}
function windowOnClick ( event ) {
if ( event . target === modal ) {
toggleModal ();
}
}
trigger . addEventListener ( ' click ' , toggleModal );
closeButton . addEventListener ( ' click ' , toggleModal );
window . addEventListener ( ' click ' , windowOnClick );
</script>
<style>
.pop-up-modal {
position : fixed ;
left : 0 ;
top : 0 ;
width : 100% ;
height : 100% ;
background-color : rgba ( 0 , 0 , 0 , 0.5 );
opacity : 0 ;
display : none ;
transform : scale ( 1.1 );
transition : visibility 0s linear 0.25s , opacity 0.25s 0s , transform 0.25s ;
overflow : auto ;
}
.pop-up-content {
position : absolute ;
top : 8% ;
left : 50% ;
transform : translate ( -50% , 0 );
background-color : white ;
padding : 1rem 1.5rem ;
width : auto ;
border-radius : 0.5rem ;
}
.pop-up-content table {
table-layout : auto ;
}
.close-button {
float : right ;
width : 1.5rem ;
line-height : 1.5rem ;
text-align : center ;
cursor : pointer ;
border-radius : 0.25rem ;
background-color : lightgray ;
}
.close-button :hover {
background-color : darkgray ;
}
.show-pop-up {
z-index : 12 ;
opacity : 1 ;
display : block ;
transform : scale ( 1 );
transition : visibility 0s linear 0s , opacity 0.25s 0s , transform 0.25s ;
}
.trigger-pop-up {
margin : 10px 0 10px 8px ;
width : 50% ;
}
@media only screen and ( max-width : 749px ) {
.pop-up-content ,
.size-chart-content table {
width : 100% ;
}
.size-chart-content th ,
.size-chart-content td {
padding : 10px ;
}
.trigger-pop-up {
width : 100% ;
}
}
</style>
如果您使用的是 Minimal 佈景主題,請使用下列程式碼:
<div class= "pop-up-modal" >
<div class= "pop-up-content" >
<span class= "close-button" > × </span>
<span class= "size-chart-content" > {{ pages.size-chart.content }}</span>
</div>
</div>
<script>
const modal = document . querySelector ( ' .pop-up-modal ' );
const trigger = document . querySelector ( ' .trigger-pop-up ' );
const closeButton = document . querySelector ( ' .close-button ' );
function toggleModal () {
modal . classList . toggle ( ' show-pop-up ' );
}
function windowOnClick ( event ) {
if ( event . target === modal ) {
toggleModal ();
}
}
trigger . addEventListener ( ' click ' , toggleModal );
closeButton . addEventListener ( ' click ' , toggleModal );
window . addEventListener ( ' click ' , windowOnClick );
</script>
<style>
.pop-up-modal {
position : fixed ;
left : 0 ;
top : 0 ;
width : 100% ;
height : 100% ;
background-color : rgba ( 0 , 0 , 0 , 0.5 );
opacity : 0 ;
display : none ;
transform : scale ( 1.1 );
transition : visibility 0s linear 0.25s , opacity 0.25s 0s , transform 0.25s ;
overflow : auto ;
}
.pop-up-content {
position : absolute ;
top : 8% ;
left : 50% ;
transform : translate ( -50% , 0 );
background-color : white ;
padding : 1rem 1.5rem ;
width : auto ;
border-radius : 0.5rem ;
}
.pop-up-content table {
table-layout : auto ;
}
.close-button {
float : right ;
width : 1.5rem ;
line-height : 1.5rem ;
text-align : center ;
cursor : pointer ;
border-radius : 0.25rem ;
background-color : lightgray ;
}
.close-button :hover {
background-color : darkgray ;
}
.show-pop-up {
z-index : 12 ;
opacity : 1 ;
display : block ;
transform : scale ( 1 );
transition : visibility 0s linear 0s , opacity 0.25s 0s , transform 0.25s ;
}
.trigger-pop-up {
margin : 10px 0 10px 0 ;
width : 100% ;
}
@media only screen and ( max-width : 749px ) {
.pop-up-content ,
.size-chart-content table {
width : 100% ;
}
.size-chart-content th ,
.size-chart-content td {
padding : 10px ;
}
}
@media only screen and ( min-width : 750px ) {
.trigger-pop-up {
width : 50% ;
}
}
</style>
將尺寸表程式碼片段新增至 theme.liquid
在「版面配置 」目錄中,點擊以開啟 theme.liquid
檔案。
找到結束標籤 </body>
。在結束標籤 </body>
正上方,貼上下列程式碼:
{% if request . page_type == 'product' %}
{% if product . options contains 'Size' %}
{% render 'size-chart' %}
{% endif %}
{% endif %}
新增「尺寸表 」按鈕
在「區段 」目錄中,點擊以開啟 product-template.liquid
檔案,或者如果沒有 product-template.liquid
檔案,則開啟 product.liquid
檔案。
在「加入購物車 」按鈕上方貼上下列程式碼:
{% if product . options contains 'Size' %}
<a class="trigger-pop-up btn">See Size Chart</a>
{% endif %}
「加入購物車」按鈕開頭通常類似「<button type="submit" name="add"
」。如果您商店的營運語言並非英文,請將 See Size Chart
取代為您偏好使用的文字。
product-form.liquid
在 Narrative 佈景主題中,您必須將上述程式碼插入位於「程式碼片段 」目錄的
建立尺寸表程式碼片段
在「程式碼片段」 目錄中,按一下「新增程式碼片段」 。
將程式碼片段命名為 size-chart
,然後點擊「建立程式碼片段 」:
將下列內容複製到您的 size-chart
程式碼片段中:
{% assign chart = product.type | handleize | append: "-size-chart" %} {% unless
pages[chart].empty? or pages[chart].content == blank %}
<div class= "pop-up-modal" >
<div class= "pop-up-content" >
<span class= "close-button" > × </span>
<span class= "size-chart-content" > {{ pages[chart].content }}</span>
</div>
</div>
{% endunless %}
<script>
const modal = document . querySelector ( ' .pop-up-modal ' );
const trigger = document . querySelector ( ' .trigger-pop-up ' );
const closeButton = document . querySelector ( ' .close-button ' );
function toggleModal () {
modal . classList . toggle ( ' show-pop-up ' );
}
function windowOnClick ( event ) {
if ( event . target === modal ) {
toggleModal ();
}
}
trigger . addEventListener ( ' click ' , toggleModal );
closeButton . addEventListener ( ' click ' , toggleModal );
window . addEventListener ( ' click ' , windowOnClick );
</script>
<style>
.pop-up-modal {
position : fixed ;
left : 0 ;
top : 0 ;
width : 100% ;
height : 100% ;
background-color : rgba ( 0 , 0 , 0 , 0.5 );
opacity : 0 ;
display : none ;
transform : scale ( 1.1 );
transition : visibility 0s linear 0.25s , opacity 0.25s 0s , transform 0.25s ;
overflow : auto ;
}
.pop-up-content {
position : absolute ;
top : 8% ;
left : 50% ;
transform : translate ( -50% , 0 );
background-color : white ;
padding : 1rem 1.5rem ;
width : auto ;
border-radius : 0.5rem ;
}
.pop-up-content table {
table-layout : auto ;
}
.close-button {
float : right ;
width : 1.5rem ;
line-height : 1.5rem ;
text-align : center ;
cursor : pointer ;
border-radius : 0.25rem ;
background-color : lightgray ;
}
.close-button :hover {
background-color : darkgray ;
}
.show-pop-up {
z-index : 12 ;
opacity : 1 ;
display : block ;
transform : scale ( 1 );
transition : visibility 0s linear 0s , opacity 0.25s 0s , transform 0.25s ;
}
.trigger-pop-up {
margin : 10px 0 10px 0 ;
width : 100% ;
}
@media only screen and ( max-width : 749px ) {
.pop-up-content ,
.size-chart-content table {
width : 100% ;
}
.size-chart-content th ,
.size-chart-content td {
padding : 10px ;
}
}
</style>
如果您使用 Simple 佈景主題,請將 </style>
右上方的 .trigger-pop-up
取代為此程式碼:
.trigger-pop-up {
margin : 10px 0 10px 8px ;
width : 50% ;
}
@media only screen and ( max-width : 749px ) {
.pop-up-content ,
.size-chart-content table {
width : 100% ;
}
.size-chart-content th ,
.size-chart-content td {
padding : 10px ;
}
.trigger-pop-up {
width : 100% ;
}
}
如果您使用 Minimal 佈景主題,請將下列程式碼新增至結束標籤 </style>
上方:
@media only screen and ( min-width : 750px ) {
.trigger-pop-up {
width : 50% ;
}
}
將尺寸表程式碼片段新增至 theme.liquid
在「版面配置 」目錄中,點擊以開啟 theme.liquid
檔案。
找到結束標籤 </body>
。在結束標籤 </body>
正上方,貼上下列程式碼:
{% if request . page_type == 'product' %}
{% if product . options contains 'Size' %}
{% assign chart = product . type | handleize | append : "-size-chart" %}
{% unless pages [ chart ]. empty? or pages [ chart ]. content == blank %}
{% render 'size-chart' %}
{% endunless %}
{% endif %}
{% endif %}
新增「尺寸表 」按鈕
在「區段 」目錄中,點擊以開啟 product-template.liquid
檔案,或者如果沒有 product-template.liquid
檔案,則開啟 product.liquid
檔案。
在「加入購物車 」按鈕上方貼上下列程式碼:
{% if product . options contains 'Size' %}
{% assign chart = product . type | handleize | append : "-size-chart" %}
{% unless pages [ chart ]. empty? or pages [ chart ]. content == blank %}
<a class="trigger-pop-up btn">See Size Chart</a>
{% endunless %}
{% endif %}
「加入購物車」按鈕開頭通常類似「<button type="submit" name="add"
」。如果您商店的營運語言並非英文,請將 See Size Chart
取代為您偏好使用的文字。
product-form.liquid
在 Narrative 佈景主題中,您必須將上述程式碼插入位於「程式碼片段 」目錄的
建立尺寸表程式碼片段
在「程式碼片段」 目錄中,按一下「新增程式碼片段」 。
將程式碼片段命名為 size-chart
,然後點擊「建立程式碼片段 」:
將下列內容複製到您的 size-chart
程式碼片段中:
{% assign chart = product.vendor | handleize | append: "-size-chart" %} {%
unless pages[chart].empty? or pages[chart].content == blank %}
<div class= "pop-up-modal" >
<div class= "pop-up-content" >
<span class= "close-button" > × </span>
<span class= "size-chart-content" > {{ pages[chart].content }}</span>
</div>
</div>
{% endunless %}
<script>
const modal = document . querySelector ( ' .pop-up-modal ' );
const trigger = document . querySelector ( ' .trigger-pop-up ' );
const closeButton = document . querySelector ( ' .close-button ' );
function toggleModal () {
modal . classList . toggle ( ' show-pop-up ' );
}
function windowOnClick ( event ) {
if ( event . target === modal ) {
toggleModal ();
}
}
trigger . addEventListener ( ' click ' , toggleModal );
closeButton . addEventListener ( ' click ' , toggleModal );
window . addEventListener ( ' click ' , windowOnClick );
</script>
<style>
.pop-up-modal {
position : fixed ;
left : 0 ;
top : 0 ;
width : 100% ;
height : 100% ;
background-color : rgba ( 0 , 0 , 0 , 0.5 );
opacity : 0 ;
display : none ;
transform : scale ( 1.1 );
transition : visibility 0s linear 0.25s , opacity 0.25s 0s , transform 0.25s ;
overflow : auto ;
}
.pop-up-content {
position : absolute ;
top : 8% ;
left : 50% ;
transform : translate ( -50% , 0 );
background-color : white ;
padding : 1rem 1.5rem ;
width : auto ;
border-radius : 0.5rem ;
}
.pop-up-content table {
table-layout : auto ;
}
.close-button {
float : right ;
width : 1.5rem ;
line-height : 1.5rem ;
text-align : center ;
cursor : pointer ;
border-radius : 0.25rem ;
background-color : lightgray ;
}
.close-button :hover {
background-color : darkgray ;
}
.show-pop-up {
z-index : 12 ;
opacity : 1 ;
display : block ;
transform : scale ( 1 );
transition : visibility 0s linear 0s , opacity 0.25s 0s , transform 0.25s ;
}
.trigger-pop-up {
margin : 10px 0 10px 0 ;
width : 100% ;
}
@media only screen and ( max-width : 749px ) {
.pop-up-content ,
.size-chart-content table {
width : 100% ;
}
.size-chart-content th ,
.size-chart-content td {
padding : 10px ;
}
}
</style>
如果您使用 Simple 佈景主題,請將 </style>
右上方的 .trigger-pop-up
取代為此程式碼:
.trigger-pop-up {
margin : 10px 0 10px 8px ;
width : 50% ;
}
@media only screen and ( max-width : 749px ) {
.pop-up-content ,
.size-chart-content table {
width : 100% ;
}
.size-chart-content th ,
.size-chart-content td {
padding : 10px ;
}
.trigger-pop-up {
width : 100% ;
}
}
如果您使用 Minimal 佈景主題,請將下列程式碼新增至結束標籤 </style>
上方:
@media only screen and ( min-width : 750px ) {
.trigger-pop-up {
width : 50% ;
}
}
將尺寸表程式碼片段新增至 theme.liquid
在「版面配置 」目錄中,點擊以開啟 theme.liquid
檔案。
找到結束標籤 </body>
。在結束標籤 </body>
正上方,貼上下列程式碼:
{% if request . page_type == 'product' %}
{% if product . options contains 'Size' %}
{% assign chart = product . vendor | handleize | append : "-size-chart" %}
{% unless pages [ chart ]. empty? or pages [ chart ]. content == blank %}
{% render 'size-chart' %}
{% endunless %}
{% endif %}
{% endif %}
新增「尺寸表 」按鈕
在「區段 」目錄中,點擊以開啟 product-template.liquid
檔案,或者如果沒有 product-template.liquid
檔案,則開啟 product.liquid
檔案。
在「加入購物車 」按鈕上方貼上下列程式碼:
{% if product . options contains 'Size' %}
{% assign chart = product . vendor | handleize | append : "-size-chart" %}
{% unless pages [ chart ]. empty? or pages [ chart ]. content == blank %}
<a class="trigger-pop-up btn">See Size Chart</a>
{% endunless %}
{% endif %}
「加入購物車」按鈕開頭通常類似「<button type="submit" name="add"
」。如果您商店的營運語言並非英文,請將 See Size Chart
取代為您偏好使用的文字。
product-form.liquid
在 Narrative 佈景主題中,您必須將上述程式碼插入位於「程式碼片段 」目錄的