Introduction

AI 智慧商品推薦 PLUS (購物車)，是基於 PLUS 擴展的功能，開啟之後會在購物車側邊欄位、購物車頁面，顯示智慧商品推薦，提高商品的曝光量，進一步提高營收。

以下文件是提供給 Layout Engine 商家，如何透過自行更新，使用智慧商品推薦 PLUS (購物車) 功能，提供以下幾個步驟來協助商家開啟。

另提醒 Layout Engine 店家，若要開啟 AI 智慧商品推薦 PLUS (購物車)，請先完成 AI 智慧商品推薦教學文件 AI 智慧商品推薦 PLUS 的教學文件設定。

加入智慧商品推薦 liquid

到後台選擇左邊的目錄，點選網店設計 -> 編輯 HTML/CSS

點擊搜尋框，輸入 theme.css.liquid，篩選出檔案，並且點擊進入編輯。

滾動到最後區塊加上以下 css，確保 loading 顯示正確樣式。


.cart-related-products-title {
    padding: 24px 20px 16px;
    font-size: calc(20px * var(--font-size-paragraph, 1));
}

.cart-related-products-loading {
    display: flex;
    width: 100%;
    gap: 10px;
    padding: 15px;
    padding-bottom: 0;
}

.cart-related-products-loading-image {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    margin-bottom: 40px;
}

.cart-related-products-loading-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.cart-related-products-loading-price-details {
    width: 50px;
}

.cart-related-products-list {
    display: flex;
    flex-direction: column;
}

.cart-related-products-item {
    padding: 15px;
    padding-bottom: 0;
    border: none;
}

.cart-related-products-item .product-link {
    display: flex;
    width: 100%;
    gap: 10px;
}

.cart-related-products-item-image-container {
    padding-bottom: 40px;
    flex-shrink: 0;
}

.cart-related-products-item-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.cart-related-products-item-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-related-products-item-title {
    padding-bottom: 2px;
}

.cart-related-products-item-price-details {
    padding-bottom: 10px;
}

.cart-related-products-hide {
    display: none;
}

.cart-panel-empty-wrapper.has-related-products {
    overflow-y: auto;
}

.cart-related-products-list:not(.has-cart-related-products-horizontal-scroll)>.cart-related-products-item:not(:first-child) {
    border-top-width: 1px;
    border-top-style: solid;
    border-color: hsla(var(--page-background-h, 0deg), var(--page-background-s, 0%), 80%, 0.5);
}

.cart-related-products-list.has-cart-related-products-horizontal-scroll {
    padding: 0 15px;
}

.cart-related-products-horizontal-scroll {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 10px;
}

.cart-related-products-horizontal-scroll:after {
    content: '';
    display: block;
    flex: 0 0 50px;
}

.cart-related-products-horizontal-scroll .cart-related-products-item {
    width: calc(100% - 50px);
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 0;
}

.cart-related-products-horizontal-scroll .cart-related-products-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1199px) {
    .cart-panel-empty-wrapper.has-related-products .CartPanel-hint {
        min-height:420px;
    }
}

完成後要點擊保存，再來點選 出版 才會完成套用更新。

編輯 cart_panel.js.liquid

同樣在編輯 HTML/CSS 頁面，

點擊搜尋框，輸入 cart_panel.js，篩選出檔案，並且點擊進入編輯。

搜尋 $('.sl-cart-toggle').sidr(new SidrOptions({ ，或是往下上滾動視窗尋找下方的原程式碼，選取原程式碼。

原程式碼

$('.sl-cart-toggle').sidr(new SidrOptions({
  name: 'cart-panel',
  onOpen: function() {
    $('.js-cart-panel').addClass('is-open');
    $mask.css({'display': 'block' });
    angular.element('body').scope().$broadcast('cart.reload');
    adjustCartPanel();
    lockBody();
  },
  onClose: function() {
    $('.js-cart-panel').removeClass('is-open');
    $mask.css({'display': 'none'});
    unlockBody();
    clearTimeout(keepCart);
  }
}));

取代貼上以下 JavaScript。請複製 更新後程式碼 的程式碼貼上。

更新後程式碼

$('.sl-cart-toggle').sidr(new SidrOptions({
  name: 'cart-panel',
  onOpen: function() {
    window.shopline.slEventBus.once('cart.miniCartLoadData', miniCartLoadedProduct);
    $('.js-cart-panel').addClass('is-open');
    $mask.css({'display': 'block' });
    angular.element('body').scope().$broadcast('cart.reload');
    adjustCartPanel();
    lockBody();
  },
  onClose: function() {
    $('.js-cart-panel').removeClass('is-open');
    $mask.css({'display': 'none'});
    unlockBody();
    window.shopline.slEventBus.off('cart.miniCartLoadData', miniCartLoadedProduct);
    clearTimeout(keepCart);
    $('#cart-panel').removeAttr('data-manual-open');
  }
}));
  
function miniCartLoadedProduct(cartData) {
  adjustCartPanel();
  const injector = angular.element(document.body)?.injector();
  const trackerService = injector?.get('trackerService');
  const showType = $('#cart-panel').attr('data-manual-open') === 'true' ? 'manual_click' : 'automatic';
  const productIds = cartData?.items?.map(item => (item.product_id)) || [];
  const productIdsUnique = [...new Set(productIds)];
  trackerService?.track({
    type: trackerService?.generalEventType?.MiniCartImpression,
    data: {
      page_type: window.mainConfig.pageIdentifier,
      show_type: showType,
      cart_item_list: productIdsUnique,
      cart_unique_item_count: productIdsUnique.length,
      cart_total_item_count: cartData?.items?.reduce((total, item) => total + item.quantity, 0) || 0,
    },
  });
}