Skip to content

Instantly share code, notes, and snippets.

@iamrobert
Last active February 16, 2021 07:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iamrobert/c6eeb324d4b32c9eba9704041e3188d3 to your computer and use it in GitHub Desktop.
Save iamrobert/c6eeb324d4b32c9eba9704041e3188d3 to your computer and use it in GitHub Desktop.
FLEXIcontent UCM:: Order by 2 fields. City.... Region: 2 DropDowns
<style>
*{
box-sizing: border-box;
}
.cell-items{
margin-right: 15px;
}
.cell-item{
width: 50%;
float: left;
padding: 0px 10px;
margin-top: 10px;
}
.cell-item .item-box{
background: #f7f7f7;
padding: 10px 20px;
}
.grid-container{
width: 100%;
float: left;
}
.cell-item h3 {
font-size: 14.5px;
line-height: 26px;
}
section h2{
margin: 10px;
}
.hide {
display: none;
}
.active {
background: #0fc;
}
</style>
<div id="dealers">
<?php
//ini_set('display_startup_errors', 1);
//ini_set('display_errors', 1);
//error_reporting(-1);
/*
* =======================================================================
+ DEALER TEMPLATE
-----------------------------------------------------------------------
FEB 2020
* =======================================================================
*/
defined( '_JEXEC' )or die( 'Restricted access' );
$hide_label_onempty_feat = ( int )$params->get( 'hide_label_onempty_feat', 0 );
$hide_label_onempty = ( int )$params->get( 'hide_label_onempty', 0 );
// *******************************
// Default image and image fitting
// *******************************
$mod_default_img_path = $params->get( 'mod_default_img_path', 'components/com_flexicontent/assets/images/image.png' );
$img_path = JURI::base( true ) . '/';
//IAMROBERT
$feat_image_alignment = $params->get( 'feat_image_alignment', 1 ); //LEFT RIGHT OR MIXED
$feat_heading_size = $params->get( 'feat_heading_size', 3 );
// Standard
$item_columns = $params->get( 'item_columns', 1 );
$item_placement_std = $params->get( $layout . '_item_placement', 0 ); // -1: other, 0: cleared, 1: as masonry tiles
$item_columns_std = $params->get( 'item_columns', 2 );
$cols_class_std = ( $item_columns_std <= 1 ) ? '' : 'cols_' . $item_columns_std;
$document = JFactory::getDocument();
$container_id = $module->id . ( count( $catdata_arr ) > 1 && $catdata ? '_' . $catdata->id : '' );
//IAMROBERT
$small_item_columns = $params->get( 'small_item_columns', "small-up-1" );
$medium_item_columns = $params->get( 'medium_item_columns', 'medium-up-2' );
$large_item_columns = $params->get( 'large_item_columns', 'large-up-3' );
$xlarge_item_columns = $params->get( 'xlarge_item_columns', 'xlarge-up-4' );
$standard_heading_size = $params->get( 'standard_heading_size', 3 );
/* + ISOTOPE
-----------------------------------------------------------------------
+ CATEGORY FILTERS
+ FILTER 1 FIELDS
+ FILTER 2 FIELDS
+ FILTER 3 FIELDS...
+ FILTER 11 FIELDS
======================================================================*/
// + SHOW FILTERS
/* + FILTER 1 FIELDS
======================================================================*/
$filter1_title = $params->get( 'filter1_title' );
//$filter1_name = $params->get('filter1_name','');
//$region_id = $params->get('filter1_id','');
$phone_id = $params->get( 'phone_id', '' );
$address_id = $params->get( 'address_id', '' );
$email_id = $params->get( 'email_id', '' );
$website_id = $params->get( 'website_id', '' );
$region_id = $params->get( 'region_id', '' );
$area_id = $params->get( 'area_id', '' );
/*
* =======================================================================
+ REGION
* =======================================================================
*/
// REGION FILTER
if ( !function_exists( 'pi_filter_list' ) ) {
function pi_filter_list( $items ) {
$final_items = array();
foreach ( $items as $item ) {
if ( isset( $item->_row->fieldvalues[ 359 ][ 0 ] ) && $item->_row->fieldvalues[ 359 ][ 0 ] != "" ) {
$final_items[ $item->_row->fieldvalues[ 359 ][ 0 ] ][] = $item;
}
}
return $final_items;
}
}
// AREA FILTER
if ( !function_exists( 'pi_filter_list2' ) ) {
function pi_filter_list2( $items ) {
$final_items2 = array();
foreach ( $items as $item ) {
if ( isset( $item->_row->fieldvalues[ 360 ][ 0 ] ) && $item->_row->fieldvalues[ 360 ][ 0 ] != "" ) {
$final_items2[ $item->_row->fieldvalues[ 360 ][ 0 ] ][] = $item;
}
}
return $final_items2;
}
}
if ( !function_exists( 'pi_filter_maker' ) ) {
function pi_filter_maker( $item ) {
?>
<div class="dealer-bkg">
<div class="grid-container max1800">
<div class="grid-x grid-padding-x grid-margin-x">
<div class="cell-items">
<input type="text" class="search" placeholder="Search"/>
<h3>Region:</h3>
<div class="category_div" id="category_div">
<select name="category" class="required-entry" id="category" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Choose Region</option>
<?php
$fieldname = 'region'; //REGIONS
if ( !isset( $item->fields[ $fieldname ]->parameters ) ) {
FlexicontentFields::loadFieldConfig( $item->_row->fields[ $fieldname ], $item );
}
$extra_props = array(); // use $extra_props = array('image'); // if radioimage or checkboximage field
$elements = FlexicontentFields::indexedField_getElements( $item->_row->fields[ $fieldname ], $item, $extra_props );
if ( !empty( $elements ) )
foreach ( $elements as $el ) {
if ( @unserialize( $el ) !== false || $el === 'b:0;' )$el = unserialize( $el );
echo '<option value="'.$el->value.'">' . $el->text . '</option>';
// var_dump($el);
$GLOBALS[ 'pi_region_filter_list' ][ $el->value ] = $el->text;
}
?>
</select>
</div>
</div>
<div class="cell-items">
<div class="sub_category_div" id="sub_category_div"><h3>Area:</h3>
<select name="subcategory" id="subcategory">
<option selected="selected" value="">Choose Area</option>
</select>
</div>
<button id="filter-none">RESET</button>
<?php
$fieldname = 'area'; //AREA
if ( !isset( $item->fields[ $fieldname ]->parameters ) ) {
FlexicontentFields::loadFieldConfig( $item->_row->fields[ $fieldname ], $item );
}
$extra_props = array(); // use
$elements = FlexicontentFields::indexedField_getElements( $item->_row->fields[ $fieldname ], $item, $extra_props );
if ( !empty( $elements ) )
$uniques = [];
foreach ( $elements as $el ) {
if ( @unserialize( $el ) !== false || $el === 'b:0;' )$el = unserialize( $el );
// if($el->valgrp==$_GET['region_id']){
// echo '<li value='.$el->value . '>' . $el->text. '</li>';
// var_dump($el->valgrp);
if ($el === reset($elements)) {
echo '<script> function dynamicdropdown(listindex)
{
document.getElementById("subcategory").length = 0;
switch (listindex)
{';
}
if(!in_array($el->valgrp, $uniques)){
$uniques[] = $el->valgrp;
$countjs = 0;
//BREAK at end
if ($el != reset($elements)) {
if ($countjs == 0) {
echo 'break;';
}
}
// REGION
echo 'case "'.$el->valgrp.'" :';
}
if ($countjs == 0) {
echo 'document.getElementById("subcategory").options[0]=new Option("Please select framework","");';
}
$countjs++;
echo 'document.getElementById("subcategory").options['.$countjs.']=new Option("'.$el->text.'","'.$el->value.'");';
if ($el === end($elements)) {
echo ' break;
}
return true;
}
</script>';
}
$GLOBALS[ 'pi_region_filter_list2' ][ $el->value ] = $el->text;
// $GLOBALS[ 'pi_region_filter_list2' ][ $el->value ] = $el->valgrp;
}
?>
</div>
</div>
</div>
</div>
<?php
}
}
?>
<?php
// Display FavList Information (if enabled)
// include( JPATH_SITE . '/modules/mod_flexicontent/tmpl_common/favlist.php' );
// Display Category Information (if enabled)
// include( JPATH_SITE . '/modules/mod_flexicontent/tmpl_common/category.php' );
$ord_titles = array(
'popular' => JText::_( 'FLEXI_UMOD_MOST_POPULAR' ), // popular == hits
'rhits' => JText::_( 'FLEXI_UMOD_LESS_VIEWED' ),
'author' => JText::_( 'FLEXI_UMOD_AUTHOR_ALPHABETICAL' ),
'rauthor' => JText::_( 'FLEXI_UMOD_AUTHOR_ALPHABETICAL_REVERSE' ),
'published' => JText::_( 'FLEXI_UMOD_RECENTLY_PUBLISHED_SCHEDULED' ),
'published_oldest' => JText::_( 'FLEXI_UMOD_OLDEST_PUBLISHED_SCHEDULED' ),
'expired' => JText::_( 'FLEXI_UMOD_FLEXI_RECENTLY_EXPIRING_EXPIRED' ),
'expired_oldest' => JText::_( 'FLEXI_UMOD_OLDEST_EXPIRING_EXPIRED_FIRST' ),
'commented' => JText::_( 'FLEXI_UMOD_MOST_COMMENTED' ),
'rated' => JText::_( 'FLEXI_UMOD_BEST_RATED' ),
'added' => JText::_( 'FLEXI_UMOD_RECENTLY_ADDED' ), // added == rdate
'addedrev' => JText::_( 'FLEXI_UMOD_RECENTLY_ADDED_REVERSE' ), // addedrev == date
'updated' => JText::_( 'FLEXI_UMOD_RECENTLY_UPDATED' ), // updated == modified
'alpha' => JText::_( 'FLEXI_UMOD_ALPHABETICAL' ),
'alpharev' => JText::_( 'FLEXI_UMOD_ALPHABETICAL_REVERSE' ), // alpharev == ralpha
'id' => JText::_( 'FLEXI_UMOD_HIGHEST_ITEM_ID' ),
'rid' => JText::_( 'FLEXI_UMOD_LOWEST_ITEM_ID' ),
'catorder' => JText::_( 'FLEXI_UMOD_CAT_ORDER' ), // catorder == order
'random' => JText::_( 'FLEXI_UMOD_RANDOM_ITEMS' ),
'field' => JText::sprintf( 'FLEXI_UMOD_CUSTOM_FIELD', $orderby_custom_field->label )
);
$separator = "";
$rowtoggler = 0;
foreach ( $ordering as $ord ):
pi_filter_maker( $list[ $ord ][ 'standard' ][ 0 ] );
echo $separator;
if ( isset( $list[ $ord ][ 'featured' ] ) || isset( $list[ $ord ][ 'standard' ] ) ) {
$separator = "<div class='ordering_separator' ></div>";
} else {
$separator = "";
continue;
}
// PREPEND ORDER if using more than 1 orderings ...
$order_name = $ord ? $ord : 'default';
$uniq_ord_id = ( count( $list ) > 1 ? $order_name : '' ) . $container_id;
?>
<div class="list">
<?php if (isset($list[$ord]['standard'])) : ?>
<?php
$grouped2 = pi_filter_list2($list[$ord]['standard']);
$grouped = pi_filter_list($list[$ord]['standard']);
?>
<?php
// $GLOBALS[ 'pi_region_filter_list2' ][ $el->value ] = $el->text;
// $GLOBALS[ 'pi_region_filter_list2' ][ $el->valgrp ] = $el->valgrp;
foreach ( $GLOBALS[ 'pi_region_filter_list' ] as $f_groupx => $f_titlex ) {
if ( isset( $grouped[ $f_groupx ] ) && count( $grouped[ $f_groupx ] ) > 0 ){
foreach ( $grouped[ $f_groupx ] as $item ){
?>
<?php
}
}
}
?>
<br>
<br>
<?php
$myarray = array();
foreach ( $GLOBALS[ 'pi_region_filter_list2' ] as $f_group => $f_title ):
if ( isset( $grouped2[ $f_group ] ) && count( $grouped2[ $f_group ] ) > 0 ):
if(!in_array($grouped2[ $f_group ][0]->fields[ 'region' ]->display, $myarray)){
echo '<h2 class="text-center">' . $grouped2[ $f_group ][0]->fields[ 'region' ]->display . '</h2>';
$myarray[] = $grouped2[ $f_group ][0]->fields[ 'region' ]->display;
}
echo '<section id="' . $f_group . '">';
echo '<h3 class="text-center">' . $f_title .'</h3>';
echo '
<div class="grid-container max1800">
<div class="grid-x grid-padding-x grid-margin-x grid-padding-y align-stretch ' . $small_item_columns . ' ' . $medium_item_columns . ' ' . $large_item_columns . ' ' . $xlarge_item_columns . '">';
foreach ( $grouped2[ $f_group ] as $item ):
?>
<?php
/*
+ REGION
========================================================================== */
$region_id = $region_id;
// Set Field ID
// SET REGION VALUE
$region_type = array();
// Use in ITEM view
if ( !empty( $item->_row->fieldvalues[ $region_id ] ) ) {
$rvals = $item->_row->fieldvalues[ $region_id ];
}
//VALUE
if ( !empty( $rvals ) )
foreach ( $rvals as $v ) {
if ( @unserialize( $v ) !== false || $v === 'b:0;' )$v = unserialize( $v );
$region_type[] = $v;
// var_dump($v);
}
/*
+ AREA
========================================================================== */
$area_id = $area_id;
// Set Field ID
// SET NEWS TYPE
$area_type = array();
// Use in ITEM view
if ( !empty( $item->_row->fieldvalues[ $area_id ] ) ) {
$avals = $item->_row->fieldvalues[ $area_id ];
}
//VALUE
if ( !empty( $avals ) )
foreach ( $avals as $v1 ) {
if ( @unserialize( $v1 ) !== false || $v1 === 'b:0;' )$v1 = unserialize( $v1 );
$area_type[] = $v1;
//var_dump($v1);
}
/*
+ ADDRESS
========================================================================== */
$address_id = $address_id;
$addvals = "";
// Use in ITEM view / Category (multi-items) view
if ( !empty( $item->_row->fieldvalues[ $address_id ] ) ) {
$addvals = $item->_row->fieldvalues[ $address_id ]; // or $items[$i] for category view
}
//***
//*** PRINT RAW values
//***
$addressPrint = "";
$addressMapUrl = "";
$addressLat = "";
$addressLon = "";
if ( !empty( $addvals ) )
foreach ( $addvals as $a1 ) {
if ( @unserialize( $a1 ) !== false || $a1 === 'b:0;' )$a1 = unserialize( $a1 );
// var_dump($a1);
//echo "hits:". $v['hits'];
$addressPrint = $a1[ "addr_display" ];
$addressMapUrl = $a1[ "url" ];
$addressLat = $a1[ "lat" ];
$addressLon = $a1[ "lon" ];
}
/*
+ PHONE NUMBER
========================================================================== */
$phone_id = $phone_id;
$phoneprint = "";
if ( $phone_id != "" ) {
// Use in ITEM view / Category (multi-items) view
$phonevals = "";
if ( !empty( $item->_row->fieldvalues[ $phone_id ] ) ) {
$phonevals = $item->_row->fieldvalues[ $phone_id ]; // or $items[$i] for category view
}
//***
//*** PRINT RAW values
//***
if ( !empty( $phonevals ) )
foreach ( $phonevals as $ph1 ) {
if ( @unserialize( $ph1 ) !== false || $ph1 === 'b:0;' )$ph1 = unserialize( $ph1 );
//var_dump($ph1);
$phonePrint = $ph1;
//FOR CALLING
$phoneRaw = preg_replace( '/\D+/', '', $phonePrint );
$phoneRaw = intval( $phoneRaw );
$phoneprint = '<p><i class="icon-classic-phone"></i><a href="tel:+886' . $phoneRaw . '" class="no-barba">' . $phonePrint . '</a></p>';
}
}
/* + EMAIL
======================================================================*/
$email_id = $email_id;
$emailPrint = "";
// Use in ITEM view / Category (multi-items) view
$emailvals = "";
if ( !empty( $item->_row->fieldvalues[ $email_id ] ) ) {
$emailvals = $item->_row->fieldvalues[ $email_id ];
}
//***
//*** PRINT RAW values
//***
$emailPrint = "";
if ( !empty( $emailvals ) )
foreach ( $emailvals as $email1 )
{
if ( @unserialize( $email1 ) !== false || $email1 === 'b:0;' )$email1 = unserialize( $email1 );
//var_dump($email1);
$emailPrint = '<p><i class="icon-mail"></i>' . JHtml::_( 'email.cloak', $email1[ "addr" ] ) . '</p>';
}
/* + WEBSITE
======================================================================*/
$web_id = $website_id;
$webPrint = "";
// Use in ITEM view / Category (multi-items) view
$webvals = "";
if ( !empty( $item->_row->fieldvalues[ $web_id ] ) ) {
$webvals = $item->_row->fieldvalues[ $web_id ];
}
//***
//*** PRINT RAW values
//***
$webPrint = "";
if ( !empty( $webvals ) )
foreach ( $webvals as $web1 )
{
if ( @unserialize( $web1 ) !== false || $web1 === 'b:0;' )$web1 = unserialize( $web1 );
// var_dump($web1);
$webPrint = '<p><i class="icon-world"></i><a href="' . $web1 . '" target="_blank" rel="noopener noreferrer" class="no-barba">' . $web1 . '</a></p>';
}
?>
<div class="cell-item">
<div class="item-box">
<?php ob_start(); ?>
<?php if ($display_title) : ?>
<h3 class="name"><?php echo $item->title; ?></h3>
<?php $captured_title = ob_get_clean(); $hasTitle = (boolean) trim($captured_title); ?>
<?php echo $captured_title; ?>
<?php endif; ?>
<?php
if ( $item->fields[ 'region' ] != "" ) {
echo '<div class="category">'.implode(' ', $region_type).'</div>';
}
?>
<?php
if ( $item->fields[ 'area' ] != "" ) {
echo '<div class="subcategory">'.implode(' ', $area_type).'</div>';
}
?>
<div class="grid-x align-middle address-box">
<div class="cell auto">
<p class="mr-p mb-0 address"><?php echo $addressPrint;?></p>
</div>
<?php if ($addressMapUrl != '') :?>
<div class="cell shrink"><a href="<?php echo $addressMapUrl;?>" class="no-barba map-link small" title="<?php echo $item->title;?>" target="_blank">服務據點</a></div>
<?php endif; ?>
</div>
<div class="digital"> <?php echo $phoneprint;?> <?php echo $emailPrint;?> <?php echo $webPrint;?> </div>
</div>
</div>
<?php endforeach; ?>
<?php echo '</div></div></section>'; ?>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
<!--/STANDARD ITEMS-->
</div>
<div class="hide" id="no-results" data-toggler=".hide">
NO RESULTS
</div>
<?php endforeach; ?>
</div>
<!--#dealers-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
<script>
var options = {
valueNames: ['name','address','category','subcategory']
};
var featureList = new List('dealers', options);
var filterNone = document.querySelector('#filter-none');
$('#category').change(function () {
var selection = this.value;
if (selection) {
featureList.filter(function(item) {
return (item.values().category == selection);
});
} else {
featureList.filter();
}
});
$('#subcategory').change(function () {
var selection = this.value;
if (selection) {
featureList.filter(function(item) {
return (item.values().subcategory == selection);
});
} else {
featureList.filter();
}
});
//NO LIST
/* + Return # of items & Display no results
======================================================================*/
var $count = $('.count');
$count.append(featureList.size());
//Update total via Filters
featureList.on('filterComplete', function () {
$count.text(featureList.update().matchingItems.length);
if (featureList.matchingItems.length == 0) {
filterNone.classList.add('active');
// NO RESULTS
$('#no-results').removeClass('hide');
} else {
$('#no-results').addClass('hide');
}
});
//Update total via Search
featureList.on('searchComplete', function () {
$count.text(featureList.update().matchingItems.length);
if (featureList.matchingItems.length == 0) {
filterNone.classList.add('active');
// NO RESULTS
$('#no-results').removeClass('hide');
} else {
$('#no-results').addClass('hide');
}
});
//RESET BUTTON
featureList.on('sortComplete', function () {
filterNone.classList.add('active');
});
//CLEAR FILTERS
filterNone.addEventListener('click', function (event) {
filterNone.classList.remove('active');
document.querySelector('#category [value=""]').selected = true;
document.querySelector('#subcategory [value=""]').selected = true;
document.querySelector(".search").value = ""
// $('.search').val('');
featureList.filter();
featureList.search();
return false;
});
//CLEAR FILTER IF SEARCH HAS NO VALUE
document.querySelector(".search").addEventListener('input', removeButtonFilter);
function removeButtonFilter(){
if(document.querySelector(".search").value.length == 0)
{
filterNone.classList.remove('active');
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment