Show CPT with ACF | Search & Filters

shortcode.php

<?php

function featured_product_search_ajax_shortcode() {
    ob_start();
    ?>
    <div id="product-search-wrap">
        <input type="text" id="product-search" placeholder="Search for products I posted by name or keyword..">
    </div>
    <h3 class="product_heading">Featured Products</h3>
    <div id="product-results">Loading products...</div>
    <div id="load-more-wrap" style="text-align:center;margin-top:20px;">
        <button id="load-more" class="loadmore">Show More</button>
    </div>

    <script>
    jQuery(document).ready(function($) {
        let page = 1;
        let searchTerm = '';

        function fetchProducts(loadMore = false) {
            $.ajax({
                url: '<?php echo admin_url('admin-ajax.php'); ?>',
                type: 'POST',
                data: {
                    action: 'filter_featured_products',
                    search: searchTerm,
                    page: page
                },
                success: function(response) {
                    if (loadMore) {
                        $('#product-results').append(response.html);
                    } else {
                        $('#product-results').html(response.html);
                    }

                    if (response.has_more) {
                        $('#load-more').show();
                    } else {
                        $('#load-more').hide();
                    }
                },
                error: function() {
                    $('#product-results').html('Error loading products.');
                }
            });
        }

        // Initial load
        fetchProducts();

        // On typing
        $('#product-search').on('input', function() {
            searchTerm = $(this).val();
            page = 1;
            fetchProducts();
        });

        // Load more
        $('#load-more').on('click', function() {
            page++;
            fetchProducts(true);
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('featured_product_search_ajax', 'featured_product_search_ajax_shortcode');

add_action('wp_ajax_filter_featured_products', 'filter_featured_products_ajax');
add_action('wp_ajax_nopriv_filter_featured_products', 'filter_featured_products_ajax');

function filter_featured_products_ajax() {
    $search = sanitize_text_field($_POST['search'] ?? '');
    $paged = intval($_POST['page'] ?? 1);
    $per_page = 8;

    $args = [
        'post_type' => 'product',
        'posts_per_page' => $per_page,
        'paged' => $paged,
        's' => $search,
        'orderby' => 'date',
        'order' => 'ASC',
        'tax_query' => [[
            'taxonomy' => 'product_categories',
            'field' => 'slug',
            'terms' => 'featured',
        ]],
    ];

    $query = new WP_Query($args);

    ob_start();

    if ($query->have_posts()) {
        echo '<div class="product-grid" style="display:flex;flex-wrap:wrap;gap:20px;">';

        while ($query->have_posts()) {
            $query->the_post();

            $amazon_url = get_field('amazon_url');
            $affiliate_logo = get_field('affiliate_logo');

            echo '<div class="product-item">';

            if ($amazon_url) {
                echo '<a href="' . esc_url($amazon_url) . '" target="_blank">';
            }

            if (has_post_thumbnail()) {
                the_post_thumbnail('medium');
            }

            if ($amazon_url) {
                echo '</a>';
            }

            if (!empty($affiliate_logo)) {
                echo '<img src="' . esc_url($affiliate_logo) . '" alt="Affiliate Logo" style="max-width:100%;height:auto;margin-top:10px;" class="affiliate_logo">';
            }

            echo '<p class="product_title">' . get_the_title() . '</p>';

            echo '</div>';
        }

        echo '</div>';
    } else {
        echo '<p>No products found.</p>';
    }

    $html = ob_get_clean();

    // Check if more posts exist
    $total_pages = $query->max_num_pages;
    $has_more = $paged < $total_pages;

    wp_send_json([
        'html' => $html,
        'has_more' => $has_more,
    ]);
}


/* Shortcode Show All Products */
function show_all_products() {
    ob_start();
    ?>
    <div class="product-section" style="display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;">
        <!-- LEFT -->
        <div class="product-left" style="flex:1 1 60%;">
            <h3 class="product_heading">Shop My Post</h3>
        </div>

        <!-- RIGHT -->
        <div class="product-right" style="flex:1 1 10%;">
            <h3 class="category_heading">Categories:</h3>
            <select id="product-category-filter">
                <option value="">All Categories</option>
                <?php
                $terms = get_terms([
                    'taxonomy' => 'product_categories',
                    'hide_empty' => false,
                ]);
                foreach ($terms as $term) {
                    echo '<option value="' . esc_attr($term->slug) . '">' . esc_html($term->name) . '</option>';
                }
                ?>
            </select>
        </div>
    </div>

    <div id="product-results-2" class="product-grid" style="display:flex;flex-wrap:wrap;gap:20px;margin-top:30px;"></div>

    <div id="load-more-wrap-2" style="text-align:center;margin-top:20px;display:none;">
        <button id="load-more-products-2" class="loadmore">Show More</button>
    </div>

    <script>
    jQuery(document).ready(function($) {
        let page = 1;
        const perPage = 8;
        let currentCategory = '';

        function fetchProducts2(reset = false) {
            $.ajax({
                url: '<?php echo admin_url('admin-ajax.php'); ?>',
                type: 'POST',
                data: {
                    action: 'filter_show_all_products',
                    category: currentCategory,
                    paged: page,
                    per_page: perPage
                },
                success: function(response) {
                    if (reset) {
                        $('#product-results-2').html(response);
                    } else {
                        $('#product-results-2').append(response);
                    }

                    const productCount = $(response).filter('.product-item').length;

                    if ($.trim(response) === '' || productCount < perPage) {
                        $('#load-more-wrap-2').hide();
                    } else {
                        $('#load-more-wrap-2').show();
                    }
                },
                error: function(xhr, status, error) {
                    $('#product-results-2').html('Error loading products: ' + error);
                    $('#load-more-wrap-2').hide();
                }
            });
        }

        // Initial load
        fetchProducts2(true);

        // Filter by category
        $('#product-category-filter').on('change', function() {
            currentCategory = $(this).val();
            page = 1;
            fetchProducts2(true);
        });

        // Show More button
        $('#load-more-products-2').on('click', function() {
            page++;
            fetchProducts2(false);
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('show_all_products', 'show_all_products');

// AJAX callback
function filter_show_all_products() {
    $category = sanitize_text_field($_POST['category'] ?? '');
    $paged = intval($_POST['paged'] ?? 1);
    $per_page = intval($_POST['per_page'] ?? 8);

    $args = [
        'post_type' => 'product',
        'post_status' => 'publish',
        'posts_per_page' => $per_page,
        'paged' => $paged,
        'orderby' => 'date',
        'order' => 'DESC',
    ];

    if (!empty($category)) {
        $args['tax_query'] = [[
            'taxonomy' => 'product_categories',
            'field' => 'slug',
            'terms' => $category,
        ]];
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();

            $amazon_url = get_field('amazon_url');
            $affiliate_logo = get_field('affiliate_logo');
            $product_image = get_field('image');

            echo '<div class="product-item">';

            if ($amazon_url) echo '<a href="' . esc_url($amazon_url) . '" target="_blank">';

            if (!empty($product_image)) {
                echo '<img src="' . esc_url($product_image) . '" alt="' . esc_attr(get_the_title()) . '" style="width:100%;height:auto;">';
            } elseif (has_post_thumbnail()) {
                the_post_thumbnail('medium');
            }

            if ($amazon_url) echo '</a>';

            if (!empty($affiliate_logo)) {
                echo '<img src="' . esc_url($affiliate_logo) . '" alt="Affiliate Logo" class="affiliate_logo" style="max-width:80px;margin-top:10px;">';
            }

            echo '<p class="product_title" style="margin-top:10px;">' . get_the_title() . '</p>';
            echo '</div>';
        }
    } else {
        echo '<p>No products found.</p>';
    }

    wp_die();
}
add_action('wp_ajax_filter_show_all_products', 'filter_show_all_products');
add_action('wp_ajax_nopriv_filter_show_all_products', 'filter_show_all_products');

/**/

function category_products_only_shortcode() {
    if (!is_tax('product_categories')) {
        return '<p>This shortcode should be used only on product category archive pages.</p>';
    }

    $current_category = get_queried_object();
    $category_slug = $current_category->slug;

    ob_start();
    ?>
    <div id="product-results-category" class="product-grid" style="display:flex;flex-wrap:wrap;gap:20px;margin-top:30px;"></div>

    <div id="load-more-wrap-category" style="text-align:center;margin-top:20px;display:none;">
        <button id="load-more-products-category">Show More</button>
    </div>

    <script>
    jQuery(document).ready(function($) {
        let page = 1;
        const perPage = 8;
        const category = '<?php echo esc_js($category_slug); ?>';

        function fetchCategoryProducts(reset = false) {
            $.ajax({
                url: '<?php echo admin_url('admin-ajax.php'); ?>',
                type: 'POST',
                data: {
                    action: 'filter_category_products_only',
                    category: category,
                    paged: page,
                    per_page: perPage
                },
                success: function(response) {
                    if (reset) {
                        $('#product-results-category').html(response);
                    } else {
                        $('#product-results-category').append(response);
                    }

                    const productCount = $(response).filter('.product-item').length;

                    if ($.trim(response) === '' || productCount < perPage) {
                        $('#load-more-wrap-category').hide();
                    } else {
                        $('#load-more-wrap-category').show();
                    }
                },
                error: function(xhr, status, error) {
                    $('#product-results-category').html('Error loading products: ' + error);
                    $('#load-more-wrap-category').hide();
                }
            });
        }

        // Initial load
        fetchCategoryProducts(true);

        // Show More button
        $('#load-more-products-category').on('click', function() {
            page++;
            fetchCategoryProducts(false);
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('category_products_only', 'category_products_only_shortcode');

// AJAX handler
function filter_category_products_only() {
    $category = sanitize_text_field($_POST['category'] ?? '');
    $paged = intval($_POST['paged'] ?? 1);
    $per_page = intval($_POST['per_page'] ?? 8);

    $args = [
        'post_type' => 'product',
        'post_status' => 'publish',
        'posts_per_page' => $per_page,
        'paged' => $paged,
        'orderby' => 'date',
        'order' => 'DESC',
    ];

    if (!empty($category)) {
        $args['tax_query'] = [[
            'taxonomy' => 'product_categories',
            'field' => 'slug',
            'terms' => $category,
        ]];
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();

            $amazon_url = get_field('amazon_url');
            $affiliate_logo = get_field('affiliate_logo');
            $product_image = get_field('image');

            echo '<div class="product-item">';

            if ($amazon_url) echo '<a href="' . esc_url($amazon_url) . '" target="_blank">';

            if (!empty($product_image)) {
                echo '<img src="' . esc_url($product_image) . '" alt="' . esc_attr(get_the_title()) . '" style="width:100%;height:auto;">';
            } elseif (has_post_thumbnail()) {
                the_post_thumbnail('medium');
            }

            if ($amazon_url) echo '</a>';

            if (!empty($affiliate_logo)) {
                echo '<img src="' . esc_url($affiliate_logo) . '" alt="Affiliate Logo" class="affiliate_logo" style="max-width:80px;margin-top:10px;">';
            }

            echo '<p class="product_title" style="margin-top:10px;">' . get_the_title() . '</p>';
            echo '</div>';
        }
    } else {
        echo '<p>No products found in this category.</p>';
    }

    wp_die();
}
add_action('wp_ajax_filter_category_products_only', 'filter_category_products_only');
add_action('wp_ajax_nopriv_filter_category_products_only', 'filter_category_products_only');