Trying to sort by price but not working in WordPress

Question

I have a function that group the products and I want to sort in ascending order by the price. I even tried to use "sort() function but display any output. I have several options with Array_multisort(), asort().

function display_model($postid) {

    $price = get_field ('starting_price',$postid);
    print_r(asort($price));

    $sqft = get_field ('square_footage',$postid);
    $garages = get_field ('garages',$postid);
    $bathrooms = get_field ('bathrooms',$postid);
    $bedrooms = get_field ('bedrooms',$postid);


    $retContentModel = "<div class='img-hover-zoom'>";
    //$retContentModel = "<div class='col-xs-3'>";
        $retContentModel .= "<a href='" . get_permalink($postid) . "'>";
        $retContentModel .= "<img class='model-image-slider' src='" . get_the_post_thumbnail_url($postid) . "' alt='" . get_the_title($postid) . "' />";
        $retContentModel .= "</a>";
    $retContentModel .= "</div>";

    $retContentModel .= "<h4 class='model_name'><a href='" . get_permalink($postid) . "'>" . get_the_title($postid) . "</a></h4>";

    $retContentModel .= "<div class='row home-stats'>";
        $retContentModel .= "<div class='col-sm-7 price'><p>Starting at $" . number_format($price) . "</p></div>";
        $retContentModel .= "<div class='col-sm-5 sqft'><p>" . $sqft . " Sq. Ft.</p></div>";
    $retContentModel .= "</div>";

    $retContentModel .= "<div class='row home-icons'>";

        $retContentModel .= "<div class='col-sm-4'>";
            $retContentModel .= "<img src='/wp-content/themes/activa/img/icon-garage.png' />";
            $retContentModel .= "<p>" . $garages . "</p>";
        $retContentModel .= "</div>";

        $retContentModel .= "<div class='col-sm-4'>";
            $retContentModel .= "<img src='/wp-content/themes/activa/img/icon-bathrooms.png' />";
            $retContentModel .= "<p>" . $bathrooms->name . "</p>";
        $retContentModel .= "</div>";

        $retContentModel .= "<div class='col-sm-4'>";
            $retContentModel .= "<img src='/wp-content/themes/activa/img/icon-bedrooms.png' />";
            $retContentModel .= "<p>" . $bedrooms->name . "</p>";
        $retContentModel .= "</div>";

    $retContentModel .= "</div>";

    return $retContentModel;
}

The function that calls the DISPLAY_MODEL function

function add_homes_for_home_type( $postid, $hometype, $counter) {
    $retContent = "";
    $myCount = 0;
    $carousel_counter = 4; // number of items to show on screen at once

    $posts1 = get_field('homes',$postid);

//  $modListPrice = get_field('starting_price',$postid);
//  print $modListPrice;
    //print $postid;

    if( have_rows('homes', $postid) ) {

    $retContent .= "<div id='" . $hometype . "' class='tab-pane fade";

        if ($counter < 1) { $retContent .= " active in"; }
        $retContent .= "' aria-labelledby='" . $hometype . "-tab' role='tabpanel'>";

    $retContent .= add_site_plan_button_for_community_home_type (get_field('home_type_list'), $hometype);
    $retContent .= add_price_list_button_for_community_home_type (get_field('home_type_list'), $hometype);
    $retContent .= add_amenities_button_for_community_home_type (get_field('home_type_list'), $hometype);


$retContent .= "<div id='swiper-container-" . $hometype . "' class='swiper-container swiper-container-" . $hometype . "'>";
$retContent .= "<ul class=\"swiper-wrapper\">\n";

        //$active = 'active';

        foreach( $posts1 as $p ) {

                $thisType = get_field('home_type',$p->ID);

                if ($thisType->slug == $hometype) {
                    //$active = 'active';
                    $homecounter = 1;
                    $firstrun = 1;
                    $retContent .= "<li class='swiper-slide'>";
                    $retContent .= display_model($p->ID);                   
                    $retContent .= "</li>";
                }
                $myList[] = $p->ID;
            }

// End Slider
$retContent .= "</ul>";

    $retContent .= "<div class='swiper-pagination swiper-pagination-" . $hometype . "' ></div>";

    $retContent .= "<div class='swiper-button-next swiper-button-next-" . $hometype . "'></div>";
    $retContent .= "<div class='swiper-button-prev swiper-button-prev-" . $hometype . "'></div>";

$retContent .= "</div>\n";

        $hometypeClean = str_replace("-","",$hometype);

        $retContent .= "<script>\n";
        $retContent .= "var modelsSwiper" . $hometypeClean . ";\n";
        $retContent .= "var self = this;\n";
        $retContent .= "jQuery(document).ready(function ($) {\n";

            $retContent .= "modelsSwiper" . $hometypeClean . " = new Swiper('.swiper-container-" . $hometype . "', {\n";
                $retContent .= "containerModifierClass: 'swiper-container-" . $hometype . "-',\n";
                //$retContent .= "slideClass: 'swiper-slide-" . $hometype . "',\n";
                //$retContent .= "slideActiveClass: 'swiper-slide-active-" . $hometype . "',\n";
                //$retContent .= "slideDuplicateActiveClass: 'swiper-slide-duplicate-active-" . $hometype . "',\n";
                //$retContent .= "slideVisibleClass: 'swiper-slide-visible" . $hometype . "',\n";
                //$retContent .= "wrapperClass: 'swiper-wrapper-" . $hometype . "',\n";
        $retContent .= "slidesPerView: 4,\n";
      $retContent .= "slidesPerGroup: 4,\n";
      $retContent .= "spaceBetween: 40,\n";

      $retContent .= "breakpoints: {\n"; 
        $retContent .= "520: {\n";
          $retContent .= "slidesPerView: 1,\n";
          $retContent .= "slidesPerGroup: 1,\n";
          $retContent .= "spaceBetween: 40},\n";
        $retContent .= "960: {\n";
          $retContent .= "slidesPerView: 2,\n";
          $retContent .= "slidesPerGroup: 2,\n";
          $retContent .= "spaceBetween: 40},\n";
        $retContent .= "1200: {\n";
          $retContent .= "slidesPerView: 3,\n";
          $retContent .= "slidesPerGroup: 3,\n";
          $retContent .= "spaceBetween: 40}\n";
        $retContent .= "},\n";

                $retContent .= "watchOverflow: true,\n";
                $retContent .= "observer: true,\n";
                $retContent .= "observeParents: true,\n";
                $retContent .= "pagination: {\n";
                    $retContent .= "el: '.swiper-pagination-" . $hometype . "',\n";
                    $retContent .= "clickable: true\n";
                $retContent .= "},\n";
                $retContent .= "navigation: {\n";
                    $retContent .= "nextEl: '.swiper-button-next-" . $hometype . "',\n";
                    $retContent .= "prevEl: '.swiper-button-prev-" . $hometype . "',\n";
                $retContent .= "},";
            $retContent .= "});\n";
      $retContent .= "});\n";

        $retContent .= "jQuery('a[data-toggle=\"tab\"]').on('shown.bs.tab', function(e) {\n";
            $retContent .= "setTimeout(function() {\n";
            $retContent .= "modelsSwiper" . $hometypeClean . ".update();\n";
        //$retContent .= "alert('loaded".$hometypeClean."');";
            $retContent .= "}, 400);\n";
        $retContent .= "});\n";

        $retContent .= "</script>\n";


            // AGENTS CODE
    $retContent .= add_homes_agents($postid, $hometype);

    // End Tab
    $retContent .= "</div>\n";


    $myCount++;
    }


    $myList[] = $p->ID;

    //print $retContent;
    return array($retContent,$myCount);


}

From the page template, I called the function add_homes_for_home_types() The code below:

<div class="tab-content col-sm-12" id="myTabContent">
                        <?php

                            $tabCounter = 0;
                            foreach ($homesResp[1] as &$homes) {


                                $homesList = add_homes_for_home_type(get_the_id(),$homes,$tabCounter);

                                print $homesList[0];

                                $tabCounter++;
                                //print $tabCounter;
                            }

                        ?>
                    </div>

I will appreciate if anyone can help out. I have tried to handle the sorting at each level but not working. That is why I tried to look elsewhere.

Thank you

Answer 1

You can sort the output using JQuery, it is really simple and straightforward. The code below will only work if you make some adjustments in your function. Don't worry, I will guide you to achieving that.

jQuery(document).ready(function($) {
    $(window).load(function() {
    $('#condo #swiper-container-condo .swiper-wrapper li.swiper-slide').sort(function(a, b) {
            var $field = $('#condo div#swiper-container-condo .swiper-wrapper li.swiper-slide .home-stats .price p span');
            var aValue = parseFloat($(a).find($field).text());
            var bValue = parseFloat($(b).find($field).text());
            if (aValue > bValue)
              return 1;
            if (aValue < bValue)
              return -1;
            return 0;
  }).appendTo('#swiper-container-condo .swiper-wrapper');

});

});

Back to your function, look for this line and replace with this; (you have the line in the first function pasted above)

$retContentModel .= "<div class='col-sm-7 price'><p>Starting at $ <span style='font-size:16px;'>" . number_format($price) . "</span></p></div>";