Tag: WooCommerce 图库过滤

在这篇指南中，将详细介绍如何在页面加载时自动应用 Elementor Gallery Pro 过滤器。通过以下步骤，可以实现在页面加载时自动过滤特定图库的效果。

如何在页面加载时将 Elementor Gallery Pro 元素过滤到特定的图库

要在页面加载时将 Elementor Gallery Pro 元素过滤到特定的图库，在URL 后面附加 ?data-gallery-index=1。这样，当页面加载时，特定的图库过滤器将自动打开。

Elementor Gallery Pro 页面加载代码上的过滤器

步骤1：需要在与Elementor Gallery Pro位于同一页面上添加一个 HTML 元素。按以下步骤操作：

1. 打开 Elementor 编辑器，选择你希望添加过滤器的页面。
2. 在页面上找到 Gallery Pro 元素的位置。
3. 在左侧面板中，拖动一个 HTML 元素到页面上，并将其放置在与 Gallery Pro 元素相同的位置。

步骤2：插入 JavaScript 代码

在 HTML 元素中插入以下 JavaScript 代码，以便在页面加载时应用特定的过滤器。

<script>
document.addEventListener("DOMContentLoaded", function() {
    // URL
    const urlParams = new URLSearchParams(window.location.search);
    const galleryIndex = urlParams.get('data-gallery-index');

    if (galleryIndex) {
        //Gallery Pro元素
        const galleryProElement = document.querySelector('.your-gallery-pro-class'); // 替换为你的Gallery Pro元素的实际类名
        if (galleryProElement) {
            // 模拟点击或选择操作来应用过滤器
            const filterButtons = galleryProElement.querySelectorAll('.gallery-filter-button'); // 替换为你实际过滤按钮类名
            if (filterButtons[galleryIndex]) {
                filterButtons[galleryIndex].click();
            }
        }
    }
});
</script>

确保将代码中的 .your-gallery-pro-class 和 .gallery-filter-button 替换为你实际使用的类名。

步骤3：更新页面 URL

在需要过滤的页面 URL 后附加 ?data-gallery-index=1（或其它索引值），例如：

https://yourwebsite.com/your-page?data-gallery-index=1

当页面加载时，特定的图库过滤器将自动打开。

总结：

获取每个 Elementor Gallery Pro 过滤器的 URL，它的工作方式是，重复使用 Elementor Gallery Pro 过滤器标题上的属性，其具有以下逻辑：

如果存在“全部”选项，则其值为“全部”。

对于所有其他的，它遵循索引值，从 0 开始。

第一个非“全部”过滤器的data-gallery-index=0。 下一个过滤器的data-gallery-index=1，依此类推。

只需在你的 URL 中添加?data-gallery-index=0即可在页面加载时打开该图库过滤器。