Blocksy 主題 WooCommerce 產品頁新增下載與預覽彈窗實作筆記

前言

在 WooCommerce 產品頁面中，若產品包含可下載或預覽的檔案，提供使用者直覺的預覽與下載介面能提升購買體驗。本文適合熟悉 WordPress 主題開發與 WooCommerce 的工程師或自學者，說明如何利用 Blocksy 主題的特定 Hook，在產品頁購物車按鈕下方新增一個彈窗，顯示預覽與下載連結。

新增功能程式碼

透過 blocksy:woocommerce:product-single:add_to_cart:after Action Hook，將彈窗 HTML 結構插入產品頁。以下為關鍵程式碼片段：

add_action('blocksy:woocommerce:product-single:add_to_cart:after', function() {
  global $post;
  echo '<div class="ks_links_section">';
  echo '<div class="datasheet_btn"><button id="ks_show_links_modal">Datasheet ></button></div>';
  echo '<div id="ks_links_modal" class="ks_modal">';
  echo '<div class="ks_modal-content">';
  echo '<span class="ks_close">&times;</span>';

  // 預覽連結
  $preview_links = get_post_meta($post->ID, '_preview_links', true);
  if (!empty($preview_links)) {
    echo '<table class="file-table" border="0" width="100%">';
    foreach ($preview_links as $link) {
      echo '
<tr>';
      echo '
<td>' . esc_html($link['name']) . '</td>';
      echo '
<td>' . esc_html($link['date']) . '</td>';
      echo '
<td><a href="' . esc_url($link['url']) . '" target="_blank">Preview</a></td>';
      echo '</tr>';
    }
    echo '</table>';
  } else {
    echo '
<p>No preview files available.</p>';
  }

  // 下載連結（限已購買且登入用戶）
  if (is_user_logged_in() && wc_customer_bought_product('', get_current_user_id(), $post->ID)) {
    echo '
<h4>Download file</h4>';
    $download_links = get_post_meta($post->ID, '_download_links', true);
    if (!empty($download_links)) {
      echo '<table class="file-table" border="0" width="100%">';
      foreach ($download_links as $index => $link) {
        echo '
<tr>';
        echo '
<td>' . esc_html($link['name']) . '</td>';
        echo '
<td>' . esc_html($link['date']) . '</td>';
        echo '
<td>';
        echo "<button class='download-btn' data-product-id='{$post->ID}' data-index='{$index}' style='color: #0073aa; background: none; border: none; cursor: pointer;'>Download</button>";
        echo '</td>';
        echo '</tr>';
      }
      echo '</table>';
    } else {
      echo '
<p>No download links available.</p>';
    }
  }

  echo '</div></div></div>';
});

此段程式碼會在產品頁購物車按鈕下方插入一個按鈕，點擊後彈出包含預覽與下載連結的彈窗。下載連結僅對已購買且登入的用戶顯示。

新增前端樣式與行為

為了讓彈窗視覺與互動更友善，需要加入 CSS 與 JavaScript。

CSS – 彈窗樣式

.ks_modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.ks_modal-content {
  background-color: #fff;
  padding: 20px;
  margin: 15% auto;
  width: 50%;
  border-radius: 10px;
}

.ks_close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

JavaScript – 彈窗開關控制

jQuery(document).ready(function($) {
  $('#ks_show_links_modal').on('click', function() {
    $('#ks_links_modal').fadeIn();
  });

  $('.ks_close').on('click', function() {
    $('#ks_links_modal').fadeOut();
  });
});

這段 JS 透過 jQuery 綁定按鈕事件，控制彈窗的顯示與隱藏。

測試與調整

  1. 確認產品頁購物車按鈕下方是否出現「Datasheet >」按鈕。
  2. 點擊按鈕，檢查彈窗是否正常顯示預覽連結。
  3. 測試下載連結顯示條件：
    • 未登入或未購買用戶不應看到下載連結。
    • 已購買且登入用戶可看到並使用下載按鈕。

完整程式碼

// 在 WooCommerce 產品頁購物車按鈕區塊的下方新增彈窗顯示下載和預覽連結
add_action('blocksy:woocommerce:product-single:add_to_cart:after', function() {
  global $post;
  echo '<div class="ks_links_section">';
  echo '<div class="datasheet_btn"><button id="ks_show_links_modal">Datasheet ></button></div>';
  echo '<div id="ks_links_modal" class="ks_modal">';
  echo '<div class="ks_modal-content">';
  echo '<span class="ks_close">&times;</span>';

  // 顯示預覽連結
  echo '
<h4>Preview file</h4>';
  $preview_links = get_post_meta($post->ID, '_preview_links', true);
  if (!empty($preview_links)) {
    echo '<table class="file-table" border="0" width="100%">';
    foreach ($preview_links as $link) {
      echo '
<tr>';
      echo '
<td>' . esc_html($link['name']) . '</td>';
      echo '
<td>' . esc_html($link['date']) . '</td>';
      echo '
<td><a href="' . esc_url($link['url']) . '" target="_blank">Preview</a></td>';
      echo '</tr>';
    }
    echo '</table>';
  } else {
    echo '
<p>No preview files available.</p>';
  }

  // 顯示下載連結（僅限已購買並登入的用戶）
  if (is_user_logged_in() && wc_customer_bought_product('', get_current_user_id(), $post->ID)) {
    echo '
<h4>Download file</h4>';
    $download_links = get_post_meta($post->ID, '_download_links', true);
    if (!empty($download_links)) {
      echo '<table class="file-table" border="0" width="100%">';
      foreach ($download_links as $index => $link) {
        echo '
<tr>';
        echo '
<td>' . esc_html($link['name']) . '</td>';
        echo '
<td>' . esc_html($link['date']) . '</td>';
        echo '
<td>';
        echo "<button class='download-btn' data-product-id='{$post->ID}' data-index='{$index}' style='color: #0073aa; background: none; border: none; cursor: pointer;'>Download</button>";
        echo '</td>';
        echo '</tr>';
      }
      echo '</table>';
    } else {
      echo '
<p>No download links available.</p>';
    }
  }

  echo '</div></div></div>';
});

/* 彈窗樣式 */
.ks_modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.ks_modal-content {
  background-color: #fff;
  padding: 20px;
  margin: 15% auto;
  width: 50%;
  border-radius: 10px;
}

.ks_close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

// 控制彈窗開關
jQuery(document).ready(function($) {
  $('#ks_show_links_modal').on('click', function() {
    $('#ks_links_modal').fadeIn();
  });

  $('.ks_close').on('click', function() {
    $('#ks_links_modal').fadeOut();
  });
});

結論

透過 Blocksy 主題提供的 Hook，結合 WooCommerce 產品頁面，我們能輕鬆新增一個彈窗介面，提供使用者預覽與下載檔案的功能，提升產品資訊的呈現與使用者體驗，特別適合販售技術文件或數位內容的商店。

標籤
分享

相關文章