购物车空时动态提示设置方法

本文详细介绍了如何在电商网站中实现购物车无商品时的动态提示功能，有效提升用户体验和网站专业度。通过HTML搭建商品列表和空购物车提示两种表格结构，并利用CSS进行初始样式配置，默认隐藏空购物车提示。核心在于JavaScript逻辑，通过监听商品移除事件，实时检测购物车商品数量，当数量为零时，自动隐藏商品列表，显示友好的“购物车为空”提示。此外，还强调了页面加载时的初始状态设置以及注意事项，确保在各种情况下界面显示正确。掌握此技巧，可灵活应用于各种需要根据数据状态动态显示UI组件的场景，打造更智能、更友好的用户界面。

本教程详细阐述如何在电子商务网站中，根据购物车商品数量动态显示或隐藏不同的表格。我们将通过JavaScript实现当购物车商品数量为零时，隐藏商品列表表格并显示“购物车为空”的提示表格，反之亦然。内容涵盖HTML结构分析、CSS样式配合及核心JavaScript逻辑，确保用户界面在不同状态下保持清晰和专业。

在构建电子商务网站的购物车功能时，一个常见的需求是根据购物车中是否有商品来动态显示不同的内容。例如，当购物车有商品时，展示一个包含商品详情的表格；而当购物车为空时，则显示一个友好的提示信息。本教程将指导您如何通过HTML、CSS和JavaScript实现这一交互逻辑。

1. HTML结构概述

首先，我们需要在HTML中定义两个主要的表格区域：一个用于显示购物车中的商品列表，另一个用于在购物车为空时显示提示信息。

<div class="sepet">
  <!-- 商品列表表格 -->
  <table id="sepettablo" align="center" class="roundedCorners">
    <thead>
      <tr>
        <th>Ürün</th>
        <th>Açıklama</th>
        <th>Adet</th>
        <th>Birim Fiyatı</th>
        <th>Fiyat</th>
      </tr>
    </thead>
    <tbody>
      <!-- 商品行将在此处动态添加或删除 -->
      <tr>
        <td><img src="images\5.jpg" style="height:100px;" alt="商品图片" /></td>
        <td id="aciklama"><span class="opener" style="cursor:pointer;">商品描述示例</span></td>
        <td>
          <i style="cursor:pointer;" onclick="arttir()" class="fa-solid fa-circle-plus"></i>
          &lt;input type=&quot;button&quot; id=&quot;sonuc&quot; value=&quot;1&quot; /&gt;
          <i onclick="azalt()" style="cursor:pointer;" class="fa-solid fa-circle-minus"></i>
          <i style="cursor:pointer;" class="fa-solid fa-trash-can" onclick="urunsilme(event)"></i>
        </td>
        <td><span class="shop-price" style="cursor:default">129.99 TL</span></td>
        <td>4</td>
      </tr>
      <!-- 更多商品行... -->
      <tr class="toplam">
        <td colspan="4">总计:</td>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>

  <!-- 购物车为空时的提示表格 -->
  <table class="sepetbos" align="center">
    <tbody>
      <tr>
        <td><span>您的购物车是空的。想添加一些商品吗？</span></td>
      </tr>
    </tbody>
  </table>
</div>

在这个结构中：

• #sepettablo 是商品列表表格，包含商品详情行。
• .sepetbos 是购物车为空时的提示表格。

为了实现动态切换，我们通常会默认隐藏其中一个表格，并通过JavaScript来控制它们的显示状态。

2. CSS样式配置

为了确保表格的正确显示和初始状态，我们需要在CSS中进行相应的配置。通常，我们会将“购物车为空”的表格默认隐藏。

table.roundedCorners {
  /* 样式省略，与原CSS保持一致 */
  display: table; /* 默认显示商品列表表格 */
}

table.sepetbos {
  /* 样式省略，与原CSS保持一致 */
  display: none; /* 默认隐藏购物车为空表格 */
}

通过将 .sepetbos 的 display 属性设置为 none，我们确保在页面加载时，如果购物车中有商品，用户不会看到“购物车为空”的提示。

3. JavaScript动态控制逻辑

核心逻辑在于当商品从购物车中移除时，我们需要检查剩余的商品数量。如果商品数量为零，则隐藏商品列表表格并显示“购物车为空”的提示表格。

我们将修改现有的 urunsilme() 函数，使其在删除行后执行此检查。

/**
 * 移除购物车中的商品行，并根据剩余商品数量动态切换表格显示。
 * @param {Event} event - 触发此函数的事件对象，用于获取被点击的元素。
 */
function urunsilme(event) {
  // 获取被点击的删除图标所在的<td>和<tr>元素
  var td = event.target.parentNode;
  var tr = td.parentNode;

  // 从父节点中移除当前商品行
  tr.parentNode.removeChild(tr);

  // 获取购物车商品表格中所有商品行（不包括表头和总计行）
  // 注意：这里需要精确选择代表商品的行，例如通过tbody下的tr，或者排除特定的class
  // 假设所有商品行都在tbody中，且没有其他非商品行
  var rowCount = document.querySelectorAll('#sepettablo tbody tr:not(.toplam)');

  // 检查商品行的数量
  if (rowCount.length === 0) {
    // 如果商品数量为0，隐藏商品列表表格
    document.querySelector('#sepettablo').style.display = "none";
    // 显示购物车为空的提示表格
    document.querySelector('.sepetbos').style.display = "table"; // 表格元素通常使用'table'作为display值
  }
}

/**
 * 页面加载时或购物车数据初始化后，检查并设置表格的初始显示状态。
 */
function initializeCartDisplay() {
  var sepettablo = document.querySelector('#sepettablo');
  var sepetbos = document.querySelector('.sepetbos');
  var rowCount = document.querySelectorAll('#sepettablo tbody tr:not(.toplam)'); // 同样排除非商品行

  if (rowCount.length === 0) {
    sepettablo.style.display = "none";
    sepetbos.style.display = "table";
  } else {
    sepettablo.style.display = "table";
    sepetbos.style.display = "none";
  }
}

// 在页面加载完成后调用此函数，设置初始显示状态
document.addEventListener('DOMContentLoaded', initializeCartDisplay);

代码解析：

1. urunsilme(event) 函数：

   • 通过 event.target.parentNode 获取到点击的删除图标的父级 ，再获取其父级 。
   • tr.parentNode.removeChild(tr) 移除该商品行。
   • document.querySelectorAll('#sepettablo tbody tr:not(.toplam)') 用于获取购物车商品表格中所有非总计行的 元素。这里使用 tbody 来更精确地定位商品行，并排除可能存在的总计行 (.toplam)。
   • if (rowCount.length === 0) 判断商品行数量是否为零。
   • 如果为零，将 #sepettablo 的 display 样式设置为 "none" 隐藏它。
   • 同时，将 .sepetbos 的 display 样式设置为 "table" 显示“购物车为空”的提示。

2. initializeCartDisplay() 函数：

   • 这个函数至关重要，它负责在页面首次加载时，根据购物车中商品的初始数量来设置两个表格的正确显示状态。
   • 它执行与 urunsilme 函数中相同的行数检查逻辑，并相应地设置 display 属性。
   • 通过 document.addEventListener('DOMContentLoaded', initializeCartDisplay); 确保在DOM完全加载后执行此初始化。

4. 注意事项与最佳实践

• 准确计算行数： 在计算商品行数时，务必确保只计算代表商品的行，排除表头 () 和总计行 () 等非商品内容。使用 tbody 结合 :not() 选择器可以提高准确性。
• 事件参数： 修改 urunsilme() 函数以接受 event 参数，这样在HTML中调用时，如 onclick="urunsilme(event)"，可以正确获取事件对象。
• 初始状态处理： 确保在页面加载时（例如通过 DOMContentLoaded 事件），根据购物车当前的商品数量，正确设置两个表格的初始显示状态。否则，用户可能在加载时看到错误的表格。
• CSS display 值： 对于表格元素，当需要显示时，display 属性应设置为 "table"，而不是 "block" 或 "flex"，以保持其固有的表格布局行为。
• 用户体验： 考虑在商品数量变化时添加过渡效果（通过CSS transition 属性），使表格的显示/隐藏更加平滑。
• 后端同步： 在实际应用中，删除商品的操作通常会与后端进行数据同步。在后端确认删除成功后，再更新前端界面。

总结

通过上述步骤，我们成功实现了一个动态控制购物车表格显示的功能。当购物车中的商品数量发生变化，尤其是减少到零时，系统能够自动切换显示“商品列表”表格或“购物车为空”的提示表格，从而提升了用户体验和界面的响应性。这种模式不仅适用于购物车，也可推广到任何需要根据数据状态动态显示不同UI组件的场景。

今天关于《购物车空时动态提示设置方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！