Javascript OnClick 按钮触发 WordPress 上的预订覆盖

Question

我使用 ACF 作为我们的登陆页面模板，我们有 50 个位置页面，全部具有相同的设计，除了这个预订按钮问题之外，一切都很好。

目前预订按钮是可点击的，并将打开滑出预订覆盖层，但我不知道如何编辑 OnClick 的代码，每个位置都有一个唯一的代码来引导访客在其位置预订，但目前它打开显示所有内容的页面。

您可以在此处看到实时按钮： https://truereststg.wpenginepowered.com/locations/perrysburg/

这些是他们给我的支持链接，如果他们可以帮助解释的话： https://support.boulevard.io/en/articles/6720249-slide-out-self-booking-overlay-deep-linking-buttons https://support.boulevard.io/en/articles/5941343-installing-the-self-booking-overlay-wordpress https://support.boulevard.io/en/articles/5941527-self-booking-link-to-specific-items-or-categories

我们预订平台给出的代码是：

按钮：

<a href="blvd.openBookingWidget({urlParams: { locationId: b9fc1320-5250-4464-8
159…s d7f5ff9e-5159-43a8-ab63-c3343c022330',_visitType: 'SELF VISIT' }});">

小部件代码：

<!-- Boulevard Booking Widget -->
<script>
 (function (a) {
 var b = {
 businessId: 'BUSINESS ID',
 urlParams: {
 location_wl: ['LOCATION ID']
 }
 };
 var c = a.createElement('script');
 var d = a.querySelector('script');
 c.src = 'https://static.joinboulevard.com/injector.min.js';
 c.async = true;
 c.onload = function () {
 blvd.init(b);
 };
 d.parentNode.insertBefore(c, d);
 })(document);
</script>
<!-- End Boulevard Booking Widget -->

还有这个，这让我很困惑，因为它不同。

<!-- Boulevard Booking Widget -->
<script>
(function (a) {
var b = {
businessId: '0b8bc512-705d-4be9-90e4-2fad62a4e4f4'
};

var c = a.createElement('script');
var d = a.querySelector('script');

c.src = 'https://static.joinboulevard.com/injector.min.js';
c.async = true;
c.onload = function () {
blvd.init(b);
};

d.parentNode.insertBefore(c, d);
})(document);
</script>
<!-- End Boulevard Booking Widget -->

我尝试了一些事情：

• 向 ACF 添加 URL/链接字段，就像预订按钮旁边的推荐按钮一样，但它不允许我保存链接，因为它不是普通链接。

• 将 OnClick 代码直接添加到 WordPress 页面模板中也不起作用，也无法解决问题，因为每个位置都需要唯一的覆盖。

• 将代码添加到所见即所得并将其放置在按钮旁边，但无法正常显示。如果我将代码粘贴到页面另一部分的所见即所得，然后将其拖动到“推荐”按钮旁边的区域，则效果很好。这是我粘贴到 WYSIWYG 字段中的代码

<div class="bookbtn-test"><a class="btn btn-outline-light text-uppercase fs-4 me-3" title="BOOK NOW" href="#book-now" rel="noopener noreferrer">BOOK NOW</a></div>

当我再次请求支持时，他们说遵循此操作，但这似乎没有帮助： https://wordpress.stackexchange.com/questions/343771/how-do-i-add-this-onclick-event-script-to-a-custom-button-i-ve-created

自从按钮打开预订覆盖层以来，Javascript 就可以工作，但问题是将链接/代码添加到每个按钮。

既然 OnClick 功能有效，并且 #Book-Now 在所有页面上打开叠加层，有没有办法让 #book-now 根据其所在页面打开位置？ 例如每个地点的 comapnysite.com/location1/#Book-Now

总而言之，我需要每个位置页面都有一个唯一的预订按钮，并触发 OnClick 以打开其部分。

Answer 1

听起来您受到 WordPress 主题允许您执行的操作的限制。我的建议是将每个地点的预订链接保存到自定义字段，并将它们添加到页面构建器上的可点击按钮中。

对于您的情况，我建议通过 TinyURL 创建一个预订链接，并查看 WordPress 是否接受该链接。