Last active
February 16, 2021 07:10
-
-
Save iamrobert/9a81d8bfc9c3c8d47d1155df0372d600 to your computer and use it in GitHub Desktop.
FLEXIcontent UCM: Dealer with City > Region
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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 | |
foreach ( $GLOBALS[ 'pi_region_filter_list2' ] as $f_group => $f_title ): | |
if ( isset( $grouped2[ $f_group ] ) && count( $grouped2[ $f_group ] ) > 0 ): | |
$countDealer = 0; | |
foreach ( $grouped2[ $f_group ] as $item ): | |
if ( $countDealer == 0 ) { | |
echo '<section id="' . $f_group . '">'; | |
echo '<h2 class="text-center">' . $item->fields[ 'region' ]->display . ' > ' . $f_title . '</h2>'; | |
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 . '">'; | |
} | |
/* | |
+ 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_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 | |
$countDealer++; | |
if ( $item === end( $grouped2[ $f_group ] ) ) { | |
echo '</div></div></section>'; | |
} | |
?> | |
<?php endforeach; ?> | |
<?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