WP-Property with Supermap - options.md

WP-Property with Supermap - options YouTube

Website root directory

shortcode

<section id="properties" class="js-properties properties">[supermap zoom=13 price=all sort_by=price sort_order=ASC bedrooms=all baths=all municipality=all neighborhood_and_nearby=all center_on='38.641312,-90.295525']</section>

Options:
center_on='38.641312,-90.295525'
zoom=11
map_width=300
map_height=300
price='all'
bedrooms=all
baths=all
municipality=all
neighborhood_and_nearby=all
per_page=1000 
sort_by=price (highest price first)
sort_order=DESC (highest price first)
sort_order=ASC (lowest price first)

app.js

  var $properties = $('.js-properties');
  var $superMapListProperty = $properties.find('.super_map_list_property');

  if ($properties.length) {    
    $superMapListProperty.on( 'click', '.js-button-view-property-on-map', function() {
      $("body,html").animate({
          scrollTop: $('body').offset().top
        },
        500
      );
    });
  }

supermap-item.php (copied from plugin to root directory of child theme) update only belwo section

if(in_array('view_property', $supermap_configuration['display_attributes'])) {
  $attributes[] =  
  '<li class="js-view-property-on-map supermap_list_view_property">
    <a href="' . get_permalink($property['ID']) . '" class="btn btn-info btn-small">
      <span>'  . sprintf( __('View %s', ud_get_wpp_supermap()->domain), WPP_F::property_label() ) . '</span>
    </a>
    <button class="js-button-view-property-on-map btn btn-info btn-small" onclick="showInfobox_' . $rand . '(' . $property['ID'] . ')' . '">View Property on Map</button>
  </li>';
}

app.scss

$breakpoint-small: 480px;
$breakpoint-medium: 768px;
$breakpoint-large: 1024px;
$breakpoint-xlarge: 1280px;
$breakpoint-xxlarge: 1600px;

#infowindow {
  .wpp_google_maps_attribute_row_property_title {
    a {
      font-size: 20px;
    }
  }

  .wpp_google_maps_infobox_table {
    max-width: calc(100% - 10px); 
  }

  .wpp_google_maps_infobox,
  .infobox_child_property_list {
    margin-left: 0;
    margin-bottom: 0;

    li {
      list-style: none;
    }  

    .wpp_google_maps_attribute_row {
      display: flex;
      flex-direction: column;
      margin-bottom: 5px;

      .attribute {
        font-weight: 600;
      }

      .value{

      }
    }  
  }

  .infobox_child_property_list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    a {
      text-decoration: underline;
    }
  }

  .gm-ui-hover-effect {
    top: 0 !important;
    right: 0 !important;
  }
}

#properties {
  .wpp_supermap_wrapper {

  }

  .super_map {
    height: 550px;
  }

  .super_map_list {
    .supermap_filter_wrapper {
      margin-bottom: 50px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.14), 0 10px 40px rgba(0,0,0,0.12);
      padding: 20px;
      border-top: 3px solid #f4c322;
    }

    .hide_filter {
      a {        
        font-weight: 600;
      }
    }

    .map_filters {

    }

    .class_wpp_supermap_elements { 
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;

      @media screen and (min-width: $breakpoint-medium) {          
          
      }
      
      @media screen and (min-width: $breakpoint-xlarge) {          
        flex-direction: row;
      }

      ul {
        display: flex; 
        flex-direction: column;
        margin-left: 0;
        margin-bottom: 0;  

        @media screen and (min-width: $breakpoint-medium) {          
          flex-direction: row;
        }
        
        @media screen and (min-width: $breakpoint-xlarge) {          
          
        }
      }

        li {
          list-style-type: none;
          margin-bottom: 20px;

          @media screen and (min-width: $breakpoint-medium) {                      
            margin-right: 20px;
          }
          
          @media screen and (min-width: $breakpoint-xlarge) {         
            margin-bottom: 0;            
          }
        }

          .seach_attribute_price.field_range_input {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;            
          }

          .class_wpp_supermap_label {
            font-size: 75%;
            font-weight: 600;
          }

          .class_wpp_supermap_label_price {
            flex: 0 1 100%;
          }

          .wpp_search_input_field_min,
          .wpp_search_input_field_max {
            flex: 0 1 calc(50% - 10px);              
          }

          .wpp_search_input_field,
          .wpp_search_select_field {
            border: 1px solid #333;
            box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px 0px;
            background-color: rgba(0,0,0,0.04);
            border-radius: 4px;
            height: 40px;
          }
          
          .wpp_dash {
            flex: 0 1 20px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        
      .search_b.btn {
        height: 40px;        
        flex: 1 1 auto;
        width: 100%;
        max-width: 350px;
        
        @media screen and (min-width: $breakpoint-xlarge) {          
          align-self: flex-end;
          width: auto;
        }
      }
    }
  
    .super_map_list_property {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 50px;

      .property_in_list {
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 20px;           
        flex: 0 1 calc(100% - 20px);  
        
        @media screen and (min-width: $breakpoint-medium) {          
          flex: 0 1 calc(50% - 20px);   
        }
        
        @media screen and (min-width: $breakpoint-large) {          
          flex: 0 1 calc(33.3333% - 20px); 
        }
      }

      .property_in_list_items {        
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-left: 0;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.05), 0 3px 10px rgba(0,0,0,0.05);
        
        li {
          list-style-type: none;
          font-size: 16px;

          &.supermap_list_thumb {
            display: flex;
            justify-content: center;

            .wpp_supermap_thumb {

            }
          }

          &.wpp_supermap_attribute_row {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
  
            .attribute {
              font-weight: 600;
            }
          }

          &.supermap_list_view_property {
            margin-top: auto;           

            .btn.btn-info {
              display: block;
              background-color:#f4c322;
              padding: 7px 11px;
              text-align: center;
              color: white;
              font-weight: 400;
              font-size: 16px;
              border: 0;
              width: 100%;
              cursor: pointer;
              line-height: 1;

              &:first-child {
                margin-bottom: 10px;
              }

              &:hover {
                opacity: 0.85;
              }
            }
          }
        }        
      }
    }
  
    .show_more.btn {
      display: block;
      background-color:#333;
      margin: 0 auto !important;
      padding: 7px 11px;
      text-align: center;
      color: white;
      font-weight: 400;
      font-size: 16px;
      cursor: pointer;
      max-width: 350px;

      &:hover {
        opacity: 0.85;
      }
    }

    .search_loader {

    }
  } 
}