• I use elementor form to create a custom search form and a custom query php code to place it in function.php to point to a post widget query id: my_custom_filter. The post widget was placed in a elementor search result template. The post widget has query id, the reason why it was used. I also use elementor custom skins pro to customize how the product items being sold should should look on search results page. After applying the php code in function.php, the results show up empty. Fist time applying the code, it wasn’t filtering the search results because the parameters and query id needed correction. The default elementor search widet work great filtering the products, but the custom form, idk why its turning up empty on the search results page instead of showing the product searched for. Please take a look and help me please. Here is the custom query code:

    add_action(‘elementor/query/my_custom_filter’, function ($query) {

    $meta_query = array('relation' => 'AND');
    
    // Check if CAS Number is provided, using '=' comparison
    if (!empty($_GET['cas_number'])) {
        $meta_query[] = array(
            'key' => 'CAS Number',  // Correct key name without underscore
            'value' => sanitize_text_field($_GET['cas_number']),
            'compare' => '='  // Exact match
        );
    }
    
    // Check if Supplier is provided, using LIKE comparison
    if (!empty($_GET['supplier'])) {
        $meta_query[] = array(
            'key' => 'Supplier',  // Correct key name for supplier
            'value' => sanitize_text_field($_GET['supplier']),
            'compare' => 'LIKE'  // Partial match
        );
    }
    
    // Check if Other Search Term is provided, using '=' comparison
    if (!empty($_GET['other_search_term'])) {
        $meta_query[] = array(
            'key' => 'Other Search Term',  // Correct key name without underscore
            'value' => sanitize_text_field($_GET['other_search_term']),
            'compare' => '='  // Exact match
        );
    }
    
    // Check if Estimated Delivery Time is provided, using LIKE comparison
    if (!empty($_GET['estimated_delivery_time'])) {
        $meta_query[] = array(
            'key' => 'Estimated Delivery Time',  // Correct key name for delivery time
            'value' => sanitize_text_field($_GET['estimated_delivery_time']),
            'compare' => 'LIKE'  // Partial match
        );
    }
    
    // Check if Minimum Price and Maximum Price are provided, using BETWEEN comparison
    if (!empty($_GET['min_price']) && !empty($_GET['max_price'])) {
        $meta_query[] = array(
            'key' => 'Price',  // WooCommerce standard price field
            'value' => array(sanitize_text_field($_GET['min_price']), sanitize_text_field($_GET['max_price'])),
            'type' => 'NUMERIC',
            'compare' => 'BETWEEN'
        );
    }
    
    // Only apply the meta query if it's not empty
    if (!empty($meta_query)) {
        $query->set('meta_query', $meta_query);
    }

    });

    this is the redirect url: https://nordchem.se/?elementor_library=search-results&cas_number=%5Bfield id=”cas_number”]&supplier=[field id=”supplier”]&other_search_term=[field id=”other_search_term”]&estimated_delivery_time=[field id=”estimated_delivery_time”]&min_price=[field id=”min_price”]&max_price=[field id=”max_price”]

    The only other custom code i have is to hide and reveal the hidden container of a product. It hide the details of the product by default and reveal it when a chevron arrow is toggled. It works sometimes and stop working. Here is the code:

    document.addEventListener(‘DOMContentLoaded’, function() {
    // Get all the buttons and chemical detail containers
    const detailsBtns = document.querySelectorAll(‘.details-btn’);
    const chemicalDetailsContainers = document.querySelectorAll(‘.chemical-details’);

    // Hide all chemical details containers by default
    chemicalDetailsContainers.forEach(function(container) {
    container.style.display = 'none';
    });

    // Attach click event to each button
    detailsBtns.forEach(function(btn, index) {
    btn.addEventListener('click', function() {
    const chemicalDetails = chemicalDetailsContainers[index];
    if (chemicalDetails.style.display === 'none') {
    chemicalDetails.style.display = 'block';
    } else {
    chemicalDetails.style.display = 'none';
    }
    });
    });

    });

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter beau321

    (@beau321)

    here is the form html code:

    <div class="elementor-form-fields-wrapper elementor-labels-">
    <div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-cas_number elementor-col-50">
    <label for="form-field-cas_number" class="elementor-field-label elementor-screen-only">
    CAS Number </label>
    <input size="1" type="text" name="form_fields[cas_number]" id="form-field-cas_number" class="elementor-field elementor-size-lg elementor-field-textual" placeholder="CAS Number">
    </div>
    <div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-supplier elementor-col-50">
    <label for="form-field-supplier" class="elementor-field-label elementor-screen-only">
    Supplier </label>
    <input size="1" type="text" name="form_fields[supplier]" id="form-field-supplier" class="elementor-field elementor-size-lg elementor-field-textual" placeholder="Supplier">
    </div>
    <div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-other_search_term elementor-col-100">
    <label for="form-field-other_search_term" class="elementor-field-label elementor-screen-only">
    Other Search Term </label>
    <input size="1" type="text" name="form_fields[other_search_term]" id="form-field-other_search_term" class="elementor-field elementor-size-lg elementor-field-textual" placeholder="Other Search Term">
    </div>
    <div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-estimated_delivery_time elementor-col-33">
    <label for="form-field-estimated_delivery_time" class="elementor-field-label elementor-screen-only">
    Estimated Delivery Time </label>
    <input size="1" type="text" name="form_fields[estimated_delivery_time]" id="form-field-estimated_delivery_time" class="elementor-field elementor-size-lg elementor-field-textual" placeholder="Estimated Delivery Time">
    </div>
    <div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-min_price elementor-col-33">
    <label for="form-field-min_price" class="elementor-field-label elementor-screen-only">
    Minimum Price </label>
    <input size="1" type="text" name="form_fields[min_price]" id="form-field-min_price" class="elementor-field elementor-size-lg elementor-field-textual" placeholder="Minimum Price">
    </div>
    <div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-max_price elementor-col-33">
    <label for="form-field-max_price" class="elementor-field-label elementor-screen-only">
    Maximum Price </label>
    <input size="1" type="text" name="form_fields[max_price]" id="form-field-max_price" class="elementor-field elementor-size-lg elementor-field-textual" placeholder="Maximum Price">
    </div>
    <div class="elementor-field-group elementor-column elementor-field-type-submit elementor-col-30 e-form__buttons">
    <button class="elementor-button elementor-size-lg" type="submit">
    <span class="elementor-button-content-wrapper">
    <span class="elementor-button-text">Search</span>
    </span>
    </button>
    </div>
    </div>
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.