Trying to sort by price but not working in WordPress

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: truen";
                $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

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>";