自定义产品页Previous/Next事件处理器及相关功能实现问询

你可以在标准产品页实现该功能，无需从头创建自定义产品页，以下是具体实现步骤：

1. 添加并配置复选框元素 #

• 在编辑器中打开标准产品页，找到产品展示区块，添加一个复选框组件（命名为termsCheckbox），设置标签为“我同意相关条款”。
• 将复选框初始状态设为隐藏，仅当目标SKU产品加载时显示。

2. 编写代码监听产品切换与复选框状态 #

在产品页的代码面板中添加以下代码，替换其中的目标SKU值和提示灯箱名称：

import wixStores from 'wix-stores';
import wixWindow from 'wix-window';

$w.onReady(function () {
  const targetSKU = "TARGET_SKU_HERE"; // 替换为你的目标SKU
  const productDataset = $w('#productDataset'); // 确认产品区块的dataset ID，默认通常为productDataset

  // 监听产品切换（Previous/Next）时的当前项变化
  productDataset.onCurrentItemChanged((currentItem) => {
    toggleTermsCheckbox(currentItem.sku === targetSKU);
  });

  // 页面加载完成后初始化状态
  productDataset.onReady(() => {
    const currentItem = productDataset.getCurrentItem();
    if (currentItem?.sku === targetSKU) {
      toggleTermsCheckbox(true);
    }
  });

  // 监听复选框状态变化
  $w('#termsCheckbox').onChange((event) => {
    // 状态变化时自动触发后续拦截逻辑的判断
  });
});

// 切换复选框显示/隐藏，并同步初始化结账拦截状态
function toggleTermsCheckbox(show) {
  if (show) {
    $w('#termsCheckbox').show();
    $w('#termsCheckbox').checked = false; // 初始未勾选
  } else {
    $w('#termsCheckbox').hide();
  }
}

// 拦截结账/添加购物车动作，仅当勾选条款时允许执行
wixStores.onBeforeAddToCart((cartItem) => {
  const targetSKU = "TARGET_SKU_HERE";
  if (cartItem.sku === targetSKU && !$w('#termsCheckbox').checked) {
    wixWindow.openLightbox("TermsRequired"); // 弹出提示灯箱，需提前创建
    return false; // 阻止添加到购物车
  }
  return true;
});

wixStores.onBeforeCheckout(() => {
  const targetSKU = "TARGET_SKU_HERE";
  const currentItem = $w('#productDataset').getCurrentItem();
  if (currentItem?.sku === targetSKU && !$w('#termsCheckbox').checked) {
    wixWindow.openLightbox("TermsRequired");
    return false; // 阻止结账流程
  }
  return true;
});

3. 创建提示灯箱 #

• 在编辑器中创建一个名为TermsRequired的灯箱，添加提示文本（如“请先同意条款再继续结账”）和关闭按钮，用于在用户未勾选条款时给出提示。

关键说明 #

• 确认产品区块的dataset ID：在编辑器中选中产品区块，右侧属性面板中可查看dataset的ID，若不是productDataset需修改代码中的对应值。
• SKU匹配逻辑：确保产品库中目标产品的SKU与代码中设置的targetSKU完全一致。
• 拦截逻辑：通过onBeforeAddToCart和onBeforeCheckout事件拦截结账动作，替代直接操作Pay Now按钮（标准组件的按钮元素无法直接通过代码访问）。

内容的提问来源于stack exchange，提问作者Paul