在產品頁面上顯示產品推薦
此頁面列印時間為 May 14, 2024。如須最新版本,請至 https://help.shopify.com/zh-TW/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-recommendations。
此教學課程說明如何在 Debut 佈景主題中,將產品推薦新增至產品頁面。若要深入瞭解產品推薦如何運作,請參閱在產品頁面上顯示產品推薦 。
步驟 1:建立 product-recommendations.liquid
區段
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「區段 」目錄中,點擊「新增區段 」。
將新的區段命名為 product-recommendations
,然後點擊「建立區段 」。
請用下列程式碼取代所有內容:
{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes . product_recommendations_url }} " data-product-id="{{ product . id }} " data-limit="{{ limit }} " data-section-id="{{ section . id }} " data-section-type="product-recommendations" data-intent="related">
{% if recommendations . performed %}
{% if recommendations . products_count > 0 %}
<div class="section-header text-center">
{% if recommendations . intent == 'related' %}
<h2> You may also like</h2>
{% elsif recommendations . intent == 'complementary' %}
<h2>Pair it with</h2>
{% endif %}
</div>
<ul class="grid grid--uniform grid--view-items">
{% for product in recommendations . products %}
<li class="grid__item small--one-half medium-up--one-quarter">
{% include 'product-card-grid' , max_height : 250 %}
</li>
{% endfor %}
</ul>
{% endif %}
{% else %}
<div class="product-recommendations__loading-dots">
<div class="product-recommendations__loading-dot"></div>
<div class="product-recommendations__loading-dot"></div>
<div class="product-recommendations__loading-dot"></div>
</div>
{% endif %}
</div>
點擊「儲存 」。
若以產品頁面轉譯區段時,recommendations.performed
將為 false
,且產生的 HTML 會顯示載入動畫:
<div class= "page-width product-recommendations" data-base-url= "/recommendations/products" data-product-id= "123" data-limit= "4" data-section-id= "product-recommendations" data-section-type= "product-recommendations" data-intent= "related" >
<div class= "product-recommendations__loading-dots" >
<div class= "product-recommendations__loading-dot" ></div>
<div class= "product-recommendations__loading-dot" ></div>
<div class= "product-recommendations__loading-dot" ></div>
</div>
</div>
如果您不想顯示載入動畫,請改為使用此程式碼:
{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes . product_recommendations_url }} " data-product-id="{{ product . id }} " data-limit="{{ limit }} " data-section-id="{{ section . id }} " data-section-type="product-recommendations" data-intent="related">
{% if recommendations . products_count > 0 %}
<div class="section-header text-center">
{% if recommendations . intent == 'related' %}
<h2> You may also like</h2>
{% elsif recommendations . intent == 'complementary' %}
<h2>Pair it with</h2>
{% endif %}
</div>
<ul class="grid grid--uniform grid--view-items">
{% for product in recommendations . products %}
<li class="grid__item small--one-half medium-up--one-quarter">
{% include 'product-card-grid' , max_height : 250 %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
以產品頁面轉譯上述區段時,產生的 HTML 將是一個 div
元素且沒有內容:
<div class= "page-width product-recommendations" data-base-url= "/recommendations/products" data-product-id= "123" data-limit= "4" data-section-id= "product-recommendations" data-section-type= "product-recommendations" data-intent= "related" >
如果使用者使用替代語言代碼,則該語言代碼將包含在 div 的 data-base-url
中 (例如 /fr/recommendations/products
)。
在 Shopify 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「區段 」目錄中,點擊「新增區段 」。
將新的區段命名為 product-recommendations
,然後點擊「建立區段 」。
請用下列程式碼取代所有內容:
{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes . product_recommendations_url }} " data-product-id="{{ product . id }} " data-limit="{{ limit }} " data-section-id="{{ section . id }} " data-section-type="product-recommendations" data-intent="related">
{% if recommendations . performed %}
{% if recommendations . products_count > 0 %}
<div class="section-header text-center">
{% if recommendations . intent == 'related' %}
<h2> You may also like</h2>
{% elsif recommendations . intent == 'complementary' %}
<h2>Pair it with</h2>
{% endif %}
</div>
<ul class="grid grid--uniform grid--view-items">
{% for product in recommendations . products %}
<li class="grid__item small--one-half medium-up--one-quarter">
{% include 'product-card-grid' , max_height : 250 %}
</li>
{% endfor %}
</ul>
{% endif %}
{% else %}
<div class="product-recommendations__loading-dots">
<div class="product-recommendations__loading-dot"></div>
<div class="product-recommendations__loading-dot"></div>
<div class="product-recommendations__loading-dot"></div>
</div>
{% endif %}
</div>
點擊「儲存 」。
若以產品頁面轉譯區段時,recommendations.performed
將為 false
,且產生的 HTML 會顯示載入動畫:
<div class= "page-width product-recommendations" data-base-url= "/recommendations/products" data-product-id= "123" data-limit= "4" data-section-id= "product-recommendations" data-section-type= "product-recommendations" data-intent= "related" >
<div class= "product-recommendations__loading-dots" >
<div class= "product-recommendations__loading-dot" ></div>
<div class= "product-recommendations__loading-dot" ></div>
<div class= "product-recommendations__loading-dot" ></div>
</div>
</div>
如果您不想顯示載入動畫,請改為使用此程式碼:
{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes . product_recommendations_url }} " data-product-id="{{ product . id }} " data-limit="{{ limit }} " data-section-id="{{ section . id }} " data-section-type="product-recommendations" data-intent="related">
{% if recommendations . products_count > 0 %}
<div class="section-header text-center">
{% if recommendations . intent == 'related' %}
<h2> You may also like</h2>
{% elsif recommendations . intent == 'complementary' %}
<h2>Pair it with</h2>
{% endif %}
</div>
<ul class="grid grid--uniform grid--view-items">
{% for product in recommendations . products %}
<li class="grid__item small--one-half medium-up--one-quarter">
{% include 'product-card-grid' , max_height : 250 %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
以產品頁面轉譯上述區段時,產生的 HTML 將是一個 div
元素且沒有內容:
<div class= "page-width product-recommendations" data-base-url= "/recommendations/products" data-product-id= "123" data-limit= "4" data-section-id= "product-recommendations" data-section-type= "product-recommendations" data-intent= "related" >
如果使用者使用替代語言代碼,則該語言代碼將包含在 div 的 data-base-url
中 (例如 /fr/recommendations/products
)。
在 Shopify 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「區段 」目錄中,點擊「新增區段 」。
將新的區段命名為 product-recommendations
,然後點擊「建立區段 」。
請用下列程式碼取代所有內容:
{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes . product_recommendations_url }} " data-product-id="{{ product . id }} " data-limit="{{ limit }} " data-section-id="{{ section . id }} " data-section-type="product-recommendations" data-intent="related">
{% if recommendations . performed %}
{% if recommendations . products_count > 0 %}
<div class="section-header text-center">
{% if recommendations . intent == 'related' %}
<h2> You may also like</h2>
{% elsif recommendations . intent == 'complementary' %}
<h2>Pair it with</h2>
{% endif %}
</div>
<ul class="grid grid--uniform grid--view-items">
{% for product in recommendations . products %}
<li class="grid__item small--one-half medium-up--one-quarter">
{% include 'product-card-grid' , max_height : 250 %}
</li>
{% endfor %}
</ul>
{% endif %}
{% else %}
<div class="product-recommendations__loading-dots">
<div class="product-recommendations__loading-dot"></div>
<div class="product-recommendations__loading-dot"></div>
<div class="product-recommendations__loading-dot"></div>
</div>
{% endif %}
</div>
點擊「儲存 」。
若以產品頁面轉譯區段時,recommendations.performed
將為 false
,且產生的 HTML 會顯示載入動畫:
<div class= "page-width product-recommendations" data-base-url= "/recommendations/products" data-product-id= "123" data-limit= "4" data-section-id= "product-recommendations" data-section-type= "product-recommendations" data-intent= "related" >
<div class= "product-recommendations__loading-dots" >
<div class= "product-recommendations__loading-dot" ></div>
<div class= "product-recommendations__loading-dot" ></div>
<div class= "product-recommendations__loading-dot" ></div>
</div>
</div>
如果您不想顯示載入動畫,請改為使用此程式碼:
{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes . product_recommendations_url }} " data-product-id="{{ product . id }} " data-limit="{{ limit }} " data-section-id="{{ section . id }} " data-section-type="product-recommendations" data-intent="related">
{% if recommendations . products_count > 0 %}
<div class="section-header text-center">
{% if recommendations . intent == 'related' %}
<h2> You may also like</h2>
{% elsif recommendations . intent == 'complementary' %}
<h2>Pair it with</h2>
{% endif %}
</div>
<ul class="grid grid--uniform grid--view-items">
{% for product in recommendations . products %}
<li class="grid__item small--one-half medium-up--one-quarter">
{% include 'product-card-grid' , max_height : 250 %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
以產品頁面轉譯上述區段時,產生的 HTML 將是一個 div
元素且沒有內容:
<div class= "page-width product-recommendations" data-base-url= "/recommendations/products" data-product-id= "123" data-limit= "4" data-section-id= "product-recommendations" data-section-type= "product-recommendations" data-intent= "related" >
如果使用者使用替代語言代碼,則該語言代碼將包含在 div 的 data-base-url
中 (例如 /fr/recommendations/products
)。
步驟 2:在 product.liquid
範本中包含此區段 若要在產品頁面最下方顯示產品推薦,請在 templates/product.liquid
檔案的最下方包含此區段:
在「範本 」目錄中,開啟 product.liquid 檔案。
將下列程式碼新增至檔案最下方:
{% section 'product-recommendations' %}
點擊「儲存 」。
步驟 3:編輯 theme.js
檔案,並以非同步方式載入產品建議 您必須將推薦產品載入至該區段在產品頁面上產生的空容器。使用 JavaScript 提出 HTTP GET 要求至 <base_url>?section_id=<section_id>&product_id=<product_id>
。
在「資產 」目錄中,開啟 theme.js 檔案。
找到此程式碼行:
sections . register ( ' hero-section ' , theme . HeroSection );
在該行下方,新增此程式碼:
sections . register ( ' product-recommendations ' , theme . ProductRecommendations );
將下列程式碼新增至檔案最下方:
theme . ProductRecommendations = ( function () {
function ProductRecommendations ( container ) {
var $container = ( this . $container = $ ( container ));
var baseUrl = $container . data ( ' baseUrl ' );
var productId = $container . data ( ' productId ' );
var limit = $container . data ( ' limit ' );
var intent = $container . data ( ' intent ' );
var productRecommendationsUrlAndContainerClass = baseUrl + ' ?section_id=product-recommendations&limit= ' + limit +
' &product_id= ' + productId + ' &intent= ' + intent +
' .product-recommendations ' ;
$container . parent (). load ( productRecommendationsUrlAndContainerClass );
}
return ProductRecommendations ;
})();
點擊「儲存 」。
步驟 4:編輯 theme.scss.liquid
檔案,以建立載入動畫 (選用) 如果您在產品推薦區段中使用顯示載入動畫的程式碼片段,請於 assets/theme.scss.liquid
檔案最下方新增下列程式碼:
在「資產 」目錄中,開啟 theme.scss.liquid 檔案。
在檔案最下方,新增此程式碼:
.product-recommendations {
padding-top : $section-spacing-small ;
padding-bottom : $section-spacing-small ;
@include media-query ( $medium-up ) {
padding-top : $section-spacing ;
padding-bottom : $section-spacing ;
}
}
.product-recommendations__loading-dots {
height : 350px ;
display : flex ;
align-items : center ;
justify-content : center ;
}
.product-recommendations__loading-dot {
animation : dot-keyframes 1 .5s infinite ease-in-out ;
background-color : $color-text ;
border-radius : 10px ;
display : inline-block ;
height : 10px ;
width : 10px ;
margin : 0 3px ;
& :nth-child ( 2 ) {
animation-delay : 0 .5s ;
}
& :nth-child ( 3 ) {
animation-delay : 1s ;
}
}
@keyframes dot-keyframes {
0 % {
opacity : 0 .4 ;
transform : scale ( 1 , 1 );
}
50 % {
opacity : 1 ;
transform : scale ( 1 .2 , 1 .2 );
}
100 % {
opacity : 0 .4 ;
transform : scale ( 1 , 1 );
}
}
點擊「儲存 」。