WooCommerce + Masonry 产品栏的 Bricks 主题

Question

我对 Bricks 几乎是全新的，所以请原谅我的无知。我正在尝试使页面上的产品模块显示为砖石效果。

我正在将我需要的所有文件排入队列。

    // Enqueue scripts and styles
function bricks_masonry_products_enqueue_scripts() {
    // Enqueue Masonry library from WordPress
    wp_enqueue_script('masonry');
    // Enqueue imagesLoaded library from CDN
    wp_enqueue_script('imagesloaded', 'https://cdnjs.cloudflare.com/ajax/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js', array('jquery'), '5.0.0', true);
    // Enqueue custom Masonry initialization script
    wp_enqueue_script('bricks-masonry-init', plugins_url('masonry-init.js', __FILE__), array('jquery', 'masonry', 'imagesloaded'), '1.0', true);

    // Enqueue custom styles
    wp_enqueue_style('bricks-masonry-products-style', plugins_url('masonry.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'bricks_masonry_products_enqueue_scripts');

然后我搅拌一些JS（masonry-init.js）

jQuery(document).ready(function($) {
console.log('Masonry script loaded');

var $grid = $('.brxe-woocommerce-products ul.products');

$grid.imagesLoaded(function() {
    console.log('Images loaded');

    // Ensure bricks container is visible before initialising Masonry
    $grid.addClass('masonry-ready');

    $grid.masonry({
        itemSelector: '.product',
        columnWidth: '.product',
        percentPosition: true,
        gutter: 15 // Adjust based on your grid gap
    });
}).progress(function(instance, image) {
    console.log('Image loaded, recalculating Masonry layout');
    $grid.masonry('layout'); // Recalculate layout for each image loaded
});

// Recalculate layout on window resize
$(window).on('resize', function() {
    console.log('Window resized, recalculating Masonry layout');
    $grid.masonry('layout');
});
});

最后。一些CSS

    /* masonry.css */
.brxe-woocommerce-products ul.products {
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0; /* Hide the container initially */
    transition: opacity 0.3s ease-in-out; /* Smooth transition for showing the grid */
}

.brxe-woocommerce-products ul.products.masonry-ready {
    opacity: 1; /* Show the container when Masonry is ready */
}

.brxe-woocommerce-products ul.products .product {
    width: calc(25% - 30px); /* Adjust this to your desired column width */
    margin-bottom: 30px;
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .brxe-woocommerce-products ul.products .product {
        width: calc(33.33% - 30px); /* Adjust for medium screens */
    }
}

@media (max-width: 768px) {
    .brxe-woocommerce-products ul.products .product {
        width: calc(50% - 30px); /* Adjust for small screens */
    }
}

@media (max-width: 480px) {
    .brxe-woocommerce-products ul.products .product {
        width: calc(100% - 30px); /* Adjust for extra wee screens */
    }
}

我突然意识到，由于我无法从其他 Bricks 用户那里找到很多信息，所以我会在这里问这个问题......是否有更简单的方法来做到这一点。上面的代码没有产生很大的效果，产品相互平铺，并且窗口调整大小时出现其他混乱。有什么想法吗？

希望我能深入了解这一点，并将其作为一个小插件添加到 WordPress 存储库中，因为如果它有效的话，它一定是人们会觉得有用的东西！

Answer 1

覆盖默认样式可以让我找到一些方法，对于将来可能会陷入困境的其他人

/* Overwrite Bricks Builder Grid Layout */
#brxe-home-product-module .products {
    display: block !important;
    position: relative !important;
}

/* Masonry Item Styles */
#brxe-home-product-module .product {
    position: absolute !important;
    width: calc(25% - 10px) !important;  /* Adjust the width for four columns and include margin */
    box-sizing: border-box !important;
    margin: 5px !important;  /* Set margin to control spacing */
    height: auto !important;
}

/* Ensure the Section and Container are flexible */
#brxe-home-product-section {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: 860px !important;
    width: 100% !important;
}

#brxe-home-product-container {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
}

/* Ensure images fill their containers */
#brxe-home-product-module .product img {
    width: 100%;
    height: auto;
}

我创建了自己的 div 名称，但我希望它们是不言自明的。