WordPress Elementor 中产品卡片按钮联动外部内容显示教程-html教程-PHP中文网

WordPress Elementor 中产品卡片按钮联动外部内容显示教程

本教程旨在指导用户如何在 WordPress Elementor 中，通过自定义产品卡片上的按钮触发动态内容的显示，例如嵌入式的 Calendly 预约组件。文章将详细介绍如何利用 HTML、CSS 和 JavaScript 结合，实现按钮点击后切换隐藏/显示外部内容的交互逻辑，并提供完整的代码示例及注意事项，帮助用户优化网站功能和用户体验。

1. 背景与问题分析

在 wordpress 网站上，特别是使用 elementor 等页面构建器时，我们经常会创建自定义的产品卡片或信息展示模块。有时，我们需要卡片上的某个按钮不仅仅是跳转链接，而是能动态地显示或隐藏一段复杂的外部内容，例如一个预约表单、一个弹出窗口或一个嵌入式组件。

传统的标签通过 href 属性可以直接跳转到新页面或锚点。但当目标是“在当前页面显示/隐藏一段内容”时，就需要借助 JavaScript 来实现这种动态交互。本例中，用户希望产品卡片上的“BRONEERI”按钮能显示一个 Calendly 预约组件，而不是跳转。

2. 解决方案概述

核心思路是利用 JavaScript 来控制目标内容的 display 样式属性，实现其在“隐藏”（display: none;）和“显示”（display: block; 或其他合适的值）之间的切换。

具体步骤包括：

修改按钮：为产品卡片上的按钮添加一个 onclick 事件，使其在点击时调用一个 JavaScript 函数。
封装目标内容：将需要动态显示/隐藏的 Calendly 嵌入代码（或其他外部内容）包裹在一个 div 容器中，并为其设置一个唯一的 id，初始状态设为隐藏。
编写 JavaScript 逻辑：创建一个 JavaScript 函数，通过 id 获取到该容器，并切换其 display 属性。

3. 实现步骤与代码示例

3.1 调整 HTML 结构

首先，我们需要对产品卡片的 HTML 代码进行修改，并引入 Calendly 嵌入内容。

原产品卡片按钮部分：

<a href="#" class="buy">BRONEERI</a>

修改后的按钮和 Calendly 嵌入部分：

将 Calendly 嵌入代码放入一个带有 id="showandhide" 的 div 容器中，并将其初始样式设置为 display:none;。同时，修改按钮的 href 为 #（防止页面跳转），并添加 onclick="showelement()" 事件。

<div class="card">
  <div class="imgBox">
    @@##@@
  </div>

  <div class="contentBox">
    <h3>Mouse Corsair M65</h3>
    <h2 class="price">61.<small>98</small> €</h2>
    <!-- 按钮修改：添加 onclick 事件 -->
    <a href="#" class="buy" onclick='showelement()'>BRONEERI</a>
  </div>

  <!-- Calendly 嵌入内容，初始隐藏 -->
  <div id="showandhide" class="calendly-inline-widget" style="min-width:320px;height:630px;display:none;">
    <!-- 直接使用 iframe 嵌入 Calendly 链接 -->
    <iframe src='https://calendly.com/mokez/neace?hide_gdpr_banner=1' style="width:100%;height:100%;border:none;"></iframe>
  </div>
  <!-- 注意：如果仅使用 iframe 方式，Calendly 的 widget.js 脚本在此处可能不是必需的，因为它主要用于解析 data-url 属性。 -->
  <!-- 如果需要 Calendly 官方 widget 的完整功能，应确保其脚本加载并作用于 div.calendly-inline-widget。 -->
  <!-- <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script> -->
</div>

说明：

有道智云AI开放平台

下载

我们将 Calendly 的 URL 直接放入的 src 属性中，这样可以确保内容被正确加载。
div 容器 id="showandhide" 及其 style="display:none;" 是实现隐藏/显示的关键。
onclick='showelement()' 会在按钮被点击时触发名为 showelement 的 JavaScript 函数。

3.2 编写 JavaScript 逻辑

接下来，创建 showelement() 函数来控制 #showandhide 元素的显示状态。

<script>
function showelement() {
    const calendlyWidget = document.querySelector('#showandhide');
    if (calendlyWidget.style.display === "none") {
        // 如果当前是隐藏状态，则显示
        calendlyWidget.style.display = "block";
        // 调整父元素高度以适应新内容，如果需要
        // document.querySelector('.card').style.height = 'auto'; 
    } else {
        // 如果当前是显示状态，则隐藏
        calendlyWidget.style.display = "none";
        // 恢复父元素高度，如果需要
        // document.querySelector('.card').style.height = '480px'; 
    }
}
</script>

说明：

document.querySelector('#showandhide') 用于获取 ID 为 showandhide 的 HTML 元素。
通过检查 calendlyWidget.style.display 的值，判断当前元素的显示状态。
calendlyWidget.style.display = "block"; 将元素设置为块级显示。
calendlyWidget.style.display = "none"; 将元素设置为隐藏。
代码中注释掉的部分展示了如何根据需要调整父容器（如 .card）的高度，以避免内容溢出或留白过多。这在内容动态显示后改变了整体布局时非常有用。

3.3 保持 CSS 样式

原有的产品卡片 CSS 样式可以保持不变，以确保卡片的视觉效果。

<style>
/* 保持原有产品卡片样式 */
* {
  margin: 0;
  padding: 0;
  font-family: "Istok Web", sans-serif;
}

.body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #212121;
}

.card {
  position: relative;
  width: 320px;
  height: 480px; /* 注意：当 Calendly 显示时，可能需要调整此高度 */
  background: #0f1923;
  border-radius: 20px;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: -50%;
  width: 100%;
  height: 100%;
  background: #ff4655;
  transform: skewY(345deg);
  transition: 0.5s;
}

.card:hover::before {
  top: -70%;
  transform: skewY(390deg);
}

.card::after {
  content: "CORSAIR";
  position: absolute;
  bottom: 0;
  left: 0;
  font-weight: 600;
  font-size: 6em;
  color: rgba(0, 0, 0, 0.1);
}

.card .imgBox {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  z-index: 1;
}

.card .contentBox {
  position: relative;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 2;
}

.card .contentBox h3 {
  font-size: 18px;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card .contentBox .price {
  font-size: 24px;
  color: white;
  font-weight: 700;
  letter-spacing: 1px;
}

.card .contentBox .buy {
  position: relative;
  top: 100px;
  opacity: 0;
  padding: 10px 30px;
  margin-top: 15px;
  color: #FFFFFF;
  text-decoration: none;
  background: #ff4655;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.5s;
}

.card:hover .contentBox .buy {
  top: 0;
  opacity: 1;
}

.mouse {
  height: 300px;
  width: auto;
}
</style>

注意： 当 Calendly 嵌入内容显示时，如果其高度超过了 .card 元素的固定高度（例如 height: 480px;），可能会导致内容溢出或被截断。此时，您可能需要调整 .card 的 height 属性为 auto，或者在 Calendly 显示时动态调整 .card 的高度，如 JavaScript 示例中注释所示。

4. 在 Elementor 中集成代码

将上述 HTML、CSS 和 JavaScript 代码集成到 Elementor 页面中，通常有以下几种方式：

HTML 小部件：将 HTML 结构（包括
PHP学习
技术支持
返回顶部