3

I'm creating a product finder using a CPT called "Products", which is already used for displaying products separately on the site. The product finder is based on a answer and question idea, where the user is presented with a list of product categories (within a taxonomy called: "Categories").

When the user clicks on of the categories, they then get presented with a question, which can have multiple answers. So, for example, the user clicks on the category: "Mattress" and then the question would be : "what type of mattress", then you select an answer. As you go through each step, the products filter down as you do this.

My initial thoughts into achieving this was to create two additional taxonomies within the Products CPT. First one being called: "Questions" and the second being called: "Answers". These would be linked to each other and the categories taxonomy via the Advanced Custom Fields taxonomy field. So, you create a question term, link it to an answer term, then you link the answer to another question. My idea is that this would create a loop, so you could dynamically keep adding questions and answers for each category. Also, you can add the product posts themselves to the taxonomies, so you could build a post query perhaps.

To display the data on the front-end, I thought an html form, with the method of "GET" would work. It should be noted that form is submitted after each checkbox being selected, by using a bit of jQuery. Here is some of my code so far:

$taxonomy = 'products_tax';
$taxonomy_questions = 'products_question';
$taxonomy_answers = 'products_answer';
$terms = '';

$products_tax = get_terms( array(
    'taxonomy' => $taxonomy,
    'parent' => 0
) );

if (isset($_GET[$taxonomy]) && ($_GET[$taxonomy] != '')) {

    $tax_products = $_GET[$taxonomy];

    if (!is_array($tax_products))
    {
        $tax_products = array($tax_products);
    }
    $product_id = get_term_by('slug', $tax_products[0], 'products_tax');
    $product_question = get_field('product_finder_cat_select', $taxonomy . '_' . $product_id->term_id);
}

if (isset($_GET['products_question']) && ($_GET['products_question'] != '')) {
    $tax_questions = $_GET['products_question'];

    if (!is_array($tax_questions))
    {
        $tax_questions = array($tax_questions);
    }
}


$product_answer = get_field('product_finder_questions_select', $taxonomy_questions . '_' . $product_question->term_id);

$product_id = get_term_by('slug', $tax_products[0], 'products_tax');

$product_answer_question = array();
foreach($tax_questions as $answer):
$product_question = get_term_by('slug', $answer, $taxonomy_answers);
$product_answer_question[] = get_field('product_finder_answer_question_select', $taxonomy_answers . '_' . $product_question->term_id);
endforeach;



if (isset($_GET['products_answer']) && ($_GET['products_answer'] != '')) {
    $tax_answers = $_GET['products_answer'];

    if (!is_array($tax_answers))
    {
        $tax_answers = array($tax_answers);
    }
}

    <form method="get" name="downloads-lib" class="product-finder-filters">


    <div class="filters">

        <div class="<?php echo esc_attr($container); ?>">

    <?php function filter($selector, $tax, $name, $type = 'checkbox') {
        if (!($selector || $tax || $name)):
            return;
        endif;
    $count = count($selector);
    $col = 'col-md-';
    if ($count === 1):$col_class = false;elseif ($count === 2):$col_class = $col.'6';elseif ($count === 3):$col_class = $col.'4';elseif ($count >= 4):$col_class = $col.'3';else:$col_class = false;endif;
    $content = '';
    $content .= '<ul class="pl-0 row filter">';
    foreach($selector as $each):
    if ($each):
    $term_icon = get_field('product_cat_icon', 'products_tax' . '_' . $each->term_id);

    $content .= '<li class="col-12'.($col_class ? ' '.$col_class : '').' d-block'.(($tax && in_array($each->slug, $tax)) ? ' selected' : '').'"><input class="position-absolute h-100" type="'.$type.'" name="'.$name.'" value="'.$each->slug.'" id="filter'.$each->term_id.'"'.(($tax && in_array($each->slug, $tax)) ? ' checked' : '').'><div class="inner h-100 w-100 d-flex align-items-center">'.($term_icon ? wp_get_attachment_image($term_icon, 'full') : '').'<label class="mb-0'.($term_icon ? ' pl-3' : '').'" for="filter'.$each->term_id.'">'.$each->name.'</label></div></li>';
    endif;    
    endforeach;

    $content .= '</ul>';  

    echo $content;    

    } ?>



    <?php if ($products_tax): ?>

                <h4>What products are you interested in?</h4>

                <?php filter($products_tax, $tax_products, $taxonomy); ?>

    <?php endif; ?>


    <?php if ($product_question && $products_tax && $product_answer): ?>

                <h4><?php echo $product_question->name; ?></h4>

                <?php filter($product_answer, $tax_questions, $taxonomy_questions); ?>

    <?php endif; ?>


    </div>

    </div>

    </form>

As you can see, I have only got as far as to display the categories and the first level of question and answers. I'm not sure where to go from here to meet the brief of the build. So, my question is, how do I create a kind of loop where I can keep adding questions and answers in the back-end and display them dynamically on the front-end as form elements. I hope this makes sense.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.