Why is my Wordpress Timber component breaking the page? - javascript

I'm currently building a website with a number of components in Timber, however I have one specific component that breaks the page entirely on mobile and I'm unsure why.
I can only assume it's something to do with either the WP loop or the ajax call. I've never had this issue in the past when running WP loops, however I'm fairly new to Timber itself so I'm wondering whether there is something specific that I'm missing that's Timber-related.
//functions.php
<?php
namespace Flynt\Components\Portfolio;
use Timber\Timber;
const POST_TYPE = 'portfolio';
add_filter('Flynt/addComponentData?name=Portfolio', function ($data) {
$postType = POST_TYPE;
$data['path'] = get_stylesheet_directory_uri() . '/Components/Portfolio';
$data['items'] = Timber::get_posts([
'post_status' => 'publish',
'post_type' => $postType,
'posts_per_page' => -1,
'ignore_sticky_posts' => 1,
'post__not_in' => array(get_the_ID())
]);
$data['go_to_market_options'] = Timber::get_terms([
'taxonomy' => 'Go To Market',
'hide_empty' => true,
'orderby' => 'name',
'order' => 'asc'
]);
$data['funding_stage_options'] = Timber::get_terms([
'taxonomy' => 'Funding Stage',
'hide_empty' => true,
'orderby' => 'name',
'order' => 'asc'
]);
$data['industry_options'] = Timber::get_terms([
'taxonomy' => 'Industry',
'hide_empty' => true,
'orderby' => 'name',
'order' => 'asc'
]);
return $data;
});
function filter_portfolio() {
$context = Timber::get_context();
$context['orderby'] = $_POST['orderby'];
$args = array(
'suppress_filters' => true,
'post_type' => 'portfolio',
'post_status' => 'publish',
'orderby' => $context['orderby'],
'posts_per_page' => -1,
'fields' => 'ids',
'cache_results' => false,
);
if($context['orderby'] == 'name'):
$args['order'] = 'ASC';
endif;
$context['items'] = Timber::get_posts($args);
Timber::render( 'Partials/portfolio-loop.twig', $context );
die();
}
add_action('wp_ajax_filter_portfolio', 'Flynt\Components\Portfolio\filter_portfolio');
add_action('wp_ajax_nopriv_filter_portfolio', 'Flynt\Components\Portfolio\filter_portfolio');
//scripts.js
...
const getPortfolioResults = () => {
$.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
dataType: "html",
data: {
action: "filter_portfolio",
orderby: orderby,
},
success: function (data) {
$loadingIcon.hide();
if (data.length) {
$(data).insertAfter($(".portfolio-grid div#insert"));
}
},
error: function () {
$loadingIcon.hide();
$(".no-results").fadeIn();
},
});
};
...
// portfolio-loop.twig
{% for item in items %}
{% include "Partials/portfolio-item.twig" %}
{% endfor %}

Related

Custom Facebook Event to Server

I am working on wordpress website with custom code , i am using pixel your site plugin to fire the facebook events but it is not working on the custom events so i tried to fire it on my one
here is the Code :
In Main.js file
fbq('trackCustom', 'View Review Page' , {
content_ids: ALL_Salad_Items ,
content_category: 'Salad',
content_type: 'product' ,
value: Selected_Salad_Full_Price ,
currency: 'EGP',} ,
{eventID: 'lychee.23'}); // Facebook Event for Browser
//console.log("Current Browser is " + navigator.userAgent);
//Facebook Event for Server
$.ajax({
type:'POST' ,
url: $('meta[name=ajax_url]').attr('content'),
data:{
action: 'fb_review_your_salad_event' ,
content_ids: ALL_Salad_Items ,
content_category: 'Salad',
content_type: 'product',
value: Selected_Salad_Full_Price ,
currency: 'EGP',
em: current_logged_in_user_email,
fn: current_logged_in_user_fname ,
ln: current_logged_in_user_lname ,
ph: current_logged_in_user_phone,
country: 'EG' ,
event_source_url: window.location.href ,
user_agent : navigator.userAgent
}
});
in the function.php file here is the ajax request :
add_action('wp_ajax_nopriv_fb_review_your_salad_event', 'fb_review_your_salad_event');
add_action('wp_ajax_fb_review_your_salad_event', 'fb_review_your_salad_event');
function fb_review_your_salad_event(){
global $pixel_id, $token, $event_id;
$curl = curl_init();
//Parameters
//Parameters
$event_source_url = $_POST['event_source_url'];
$content_category = $_POST['content_category'];
$content_type = $_POST['content_type'];
$User_agent = $_POST['user_agent'] ;
$content_ids = $_POST['content_ids'];
$value = $_POST['value'];
$currency = $_POST['currency'];
$em = $_POST['em'];
$fn = $_POST['fn'];
$ln = $_POST['ln'];
$ph = $_POST['ph'];
$data = json_encode(array(
"data" => array(
array(
// "event_id" => "gc.2-".$event_id."-".$content_ids,
"event_name" => "View Review Page",
"event_time" => strtotime(date('Y-m-d H:i:s')),
"event_id" => 'lychee.23' ,
"custom_data" => array(
"content_ids" => $content_ids ,
"content_type" => $content_type ,
"content_category" => $content_category,
"value" => $value ,
"currency" => $currency
),
"user_data" => array(
"client_ip_address" => $_SERVER['REMOTE_ADDR'],
"client_user_agent" => $User_agent ,
"em" => $em ,
"ph" => $ph ,
"fn" => $fn ,
"ln" => $ln ,
"country" => "EG" ,
"ct" => "cairo"
),
"event_source_url" => $event_source_url,
"action_source" => "website"
),
),
// "test_event_code" => "TEST10756"
));
curl_setopt_array($curl, array(
CURLOPT_URL => "https://graph.facebook.com/v9.0/".$pixel_id."/events?access_token=".$token,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => '',
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => 'POST',
CURLOPT_POSTFIELDS => $data,
CURLOPT_HTTPHEADER => array('Content-Type: application/json'),
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if($err){
return "cURL Error #:" . $err;
}else{
$response = json_decode($response,true);
var_dump($response);
}
wp_die();
}
it is currently working but gives me very low matching quality [Poor] despite of sending the advanced matching parameters to the server

Custom Texonomy not showing under the custom post type admin menu

Hi guys i have created the custom post and custom texonomy for that custom post type but dont know why the texonomy not showing under admin menu bar please look into the code .veirfy is my custom post type .
function pluginprefix_setup_post_taxonomy()
{
define( 'TLC_PLUGIN_PATH', plugin_dir_url( __FILE__ ) );
define( 'TLC_PLUGIN_FULL_PATH', plugin_dir_path( __FILE__ ) );
// PCI DSS certificates
$labels_taxonomy = array(
'name' => 'Lead Assessors',
'singular_name' => 'Lead Assessor',
'menu_name' => 'Lead Assessor',
'all_items' => 'All Lead Assessors',
'parent_item' => 'Parent type',
'view_item' => 'View Lead Assessor',
'add_new_item' => 'Add Lead Assessor',
'add_new' => 'Add New Lead Assessor',
'show_in_menu' => 'Lead Assessor',
'edit_item' => 'Edit Lead Assessor',
'update_item' => 'Update Lead Assessor',
'search_items' => 'Search Lead Assessor',
'not_found' => 'Lead Assessors',
'not_found_in_trash' => 'Not found in Trash',
);
$args_taxonomy = array(
'hierarchical'=>true,
'labels' => $labels_taxonomy,
'query_var' => true,
'show_ui' => true,
// 'show_admin_column' => true,
'public' => true,
'show_in_nav_menus' => true,
'rewrite' => array('slug' =>'lead_assessor'),
);
// Registering your Custom taxonomy Type
register_taxonomy( 'lead_assessor', 'verify', $args_taxonomy );
// added in v3.0
flush_rewrite_rules();
}
add_action( 'init', 'pluginprefix_setup_post_taxonomy' );
I think your post type name and taxonomy name is same, so please check.
Or
You can use below code to create post type and taxonomy.
/**
* Register a custom post type called "LA Posts".
*
* #see get_post_type_labels() for label keys.
*/
function cptui_register_my_cpts() {
/**
* Post Type: LA Posts.
*/
$labels = array(
"name" => __( "LA Posts" ),
"singular_name" => __( "LA Post" ),
);
$args = array(
"label" => __( "LA Posts" ),
"labels" => $labels,
"description" => "",
"public" => true,
"publicly_queryable" => true,
"show_ui" => true,
"delete_with_user" => false,
"show_in_rest" => true,
"rest_base" => "",
"rest_controller_class" => "WP_REST_Posts_Controller",
"has_archive" => true,
"show_in_menu" => true,
"show_in_nav_menus" => true,
"exclude_from_search" => false,
"capability_type" => "post",
"map_meta_cap" => true,
"hierarchical" => false,
"rewrite" => array( "slug" => "la_posts", "with_front" => true ),
"query_var" => true,
"supports" => array( "title", "editor", "thumbnail", "excerpt" ),
);
register_post_type( "la_posts", $args );
}
add_action( 'init', 'cptui_register_my_cpts' );
function cptui_register_my_taxes() {
/**
* Taxonomy: Lead Assessors.
*/
$labels_taxonomy = array(
'name' => 'Lead Assessors',
'singular_name' => 'Lead Assessor',
'menu_name' => 'Lead Assessor',
'all_items' => 'All Lead Assessors',
'parent_item' => 'Parent type',
'view_item' => 'View Lead Assessor',
'add_new_item' => 'Add Lead Assessor',
'add_new' => 'Add New Lead Assessor',
'show_in_menu' => 'Lead Assessor',
'edit_item' => 'Edit Lead Assessor',
'update_item' => 'Update Lead Assessor',
'search_items' => 'Search Lead Assessor',
'not_found' => 'Lead Assessors',
'not_found_in_trash' => 'Not found in Trash',
);
$args_taxonomy = array(
'hierarchical' =>true,
'labels' => $labels_taxonomy,
'query_var' => true,
'show_ui' => true,
'public' => true,
'show_in_nav_menus' => true,
'rewrite' => array('slug' =>'lead_assessor'),
);
register_taxonomy( "lead_assessor", array( "la_posts" ), $args_taxonomy );
}
add_action( 'init', 'cptui_register_my_taxes' );

wordpress custom query - orderby title will not work

I am having a problem getting a custom query to alphabetize. It keeps defaulting to displaying in the order of the date it was posted. Below is my php function.
function json_info2() {
// The $_REQUEST contains all the data sent via ajax
if ( isset($_REQUEST) ) {
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
// get values for all three drop-down menus
$status = $_REQUEST['status'];
$industry = $_REQUEST['services'];
$state = $_REQUEST['state'];
// array of values for each of the three drop-downs
$statusAll = array('complete','incomplete');
$industryAll = array('mining','textile','machinery');
$statesAll = array('SC','TX','WA');
// set $statusArray dependent on whether or not "all" is selected in the dropdown menu
if($status == "all") {
$statusArray = array( 'key' => 'status', 'value' => $statusAll, 'compare' => 'IN');
} else {
$statusArray = array( 'key' => 'status', 'value' => $status, 'compare' => '=');
}
if($industry == "all") {
$industryArray = array( 'key' => 'industry', 'value' => $industryAll, 'compare' => 'IN');
} else {
$industryArray = array( 'key' => 'industry', 'value' => $industry, 'compare' => '=');
}
if($state == "all") {
$stateArray = array( 'key' => 'state', 'value' => $statesAll, 'compare' => 'IN');
} else {
$stateArray = array( 'key' => 'state', 'value' => $state, 'compare' => '=');
}
$pages = array(
'post_type' => 'page',
'orderby' => 'title',
'order' => 'ASC',
'paged' => $paged,
'posts_per_page' => 5,
'meta_query' => array(
'relation' => 'AND',
$statusArray,
$industryArray,
$stateArray,
array(
'key' => '_wp_page_template',
'value' => 'template-individual-project.php',
'compare' => '='
)
)
);
// query results by page template
$my_query = new WP_Query($pages);
if($my_query->have_posts()) :
while($my_query->have_posts()) :
$my_query->the_post();
<li>
<?php the_title(); ?>
</li>
<?php
endwhile;endif;
wp_reset_query();
} // end of isset
?>
<?php
die();
}
add_action( 'wp_ajax_json_info2', 'json_info2' );
add_action( 'wp_ajax_nopriv_json_info2', 'json_info2' );
?>
This above function is called by the ajax function that follows:
function do_ajax() {
// Get values from all three dropdown menus
var state = $('#states').val();
var markets = $('#markets').val();
var services = $('#services').val();
$.ajax({
url: ajaxurl,
data: {
'action' : 'json_info2',
'state' : state,
'status' : markets,
'services' : services
},
success:function(moredata) {
// This outputs the result of the ajax request
$('#project-list').html( moredata );
$('#project-list').fadeIn();
}/*,
error: function(errorThrown){
var errorMsg = "No results match your criteria";
$('#project-list').html(errorMsg);
}*/
}); // end of ajax call
} // end of function do_ajax
Is there something simple that I'm missing here? I have a similar custom query on the page when it loads (although that initial load query doesn't have the select menu values as args), and they display in alphabetical order just fine. It's only after the ajax call to filter the list that they are no longer in order.
I have found the issue after googling the problem for quite a while. I read that some of the people who were having this problem found that their theme was using a plugin called Post Types Order. It overrides the ability to set the orderby arg.
I looked at the plugins, and sure enough, Post Types Order was there. Everything I read said that the problem could be solved by unchecking "auto sort" in the settings for the plugin. However, I did that, and orderby still didn't work. I had to completely deactivate the plugin to get orderby title to work.

How can I use callback use x-editable like yii extension

I try use callback. If data success update then i need to display modal window. But its not working! Help please! I dont know, how it works. Write me please.
In View
<?php
$this->widget('editable.EditableField', array(
'type' => 'select',
'params' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken),
'model' => $model,
'attribute' => 'category_id',
'url' => $this->createUrl('course/updateSameInfo'),
'source' => Editable::source(Coursecat::model()->findAll(), 'id', 'name'),
'placement' => 'right',
));
?>
In Controller
public function actionUpdateSameInfo()
{
$es = new EditableSaver('Course'); //'User' is name of model to be updated
$es->update();
}
Use success property. Here is the documentation http://x-editable.demopage.ru/index.php?r=site/widgets#Options
Try this
<?php
$this->widget('editable.EditableField', array(
'type' => 'select',
'params' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken),
'model' => $model,
'attribute' => 'category_id',
'url' => $this->createUrl('course/updateSameInfo'),
'source' => Editable::source(Coursecat::model()->findAll(), 'id', 'name'),
'placement' => 'right',
'success' => 'js: function(response, newValue) {
console.log(response); //Open the browser console to check the data
}'
));
?>

Trying to fix multiple category drop down

I'm having some problems trying to fix my category drop down on the website i'm developing. Basically one drop down filters has "Sort by Location" and the second one is "Sort by Price" The first one is working correctly which is "Sort by Location" but the second one doesn't. It is loading all the post and not filtering properly.
Here is the link -
http://digitalspin.ph/federalland/?page_id=23
Here is my code
HTML-
<div class="filter_container">
<?php wp_dropdown_categories( $args_cat1 ); ?>
</div>
<div class="filter_container">
<?php wp_dropdown_categories( $args_cat2 ); ?>
</div>
JS-
<!--DROPDOWN SORT CATEGORY 1 -->
<script type="text/javascript">
var dropdown = document.getElementById("cat1");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
</script>
<!--DROPDOWN SORT CATEGORY 2-->
<script type="text/javascript">
var dropdown = document.getElementById("cat2");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
</script>
Functions.php
//LOCATION FILTER
$args_cat2 = array(
'show_option_all' => '',
'show_option_none' => '',
'orderby' => 'ID',
'order' => 'ASC',
'show_count' => 0,
'hide_empty' => 1,
'child_of' => 0,
'exclude' => '1,2,3,4,32,33,34,35,36,37',
'echo' => 1,
'selected' => 0,
'hierarchical' => 0,
'name' => 'cat2',
'id' => 'cat2',
'class' => 'postform',
'depth' => 0,
'tab_index' => 0,
'taxonomy' => 'category',
'hide_if_empty' => false,
'walker' => ''
);
//PRICE FILTER
$args_cat1 = array(
'show_option_all' => '',
'show_option_none' => '',
'orderby' => 'ID',
'order' => 'ASC',
'show_count' => 0,
'hide_empty' => 1,
'child_of' => 0,
'exclude' => '1,2,3,4,23,24,25,26,27,28,29,30,31',
'echo' => 1,
'selected' => 0,
'hierarchical' => 0,
'name' => 'cat1',
'id' => 'cat1',
'class' => 'postform',
'depth' => 0,
'tab_index' => 0,
'taxonomy' => 'category',
'hide_if_empty' => false,
'walker' => ''
);
Here is a javascript error from firebug-
TypeError: dropdown is null
dropdown.onchange = onCatChange;
Whenever i pick a category in "Sort by Price" it display all the post from "Sort by Location" which is category ID 23
The main problem is that you think your 2 javascripts are executed in different contexts, they are not. They are executed in the same context so
<script type="text/javascript">
var dropdown = document.getElementById("cat1");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
var dropdown = document.getElementById("cat2");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
</script>
Would produce the exact same result. You need to change the names of some of your variables and functions so they dont collide or do something like:
document.getElementById("cat1").onChange = function(){
if ( this.options[this.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');?>/?cat="+this.options[this.selectedIndex].value;
}
}
document.getElementById("cat2").onChange = function(){
if ( this.options[this.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');?>/?cat="+this.options[this.selectedIndex].value;
}
}
Or maybe even better
var catChanger = function(){
if ( this.options[this.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');?>/?cat="+this.options[this.selectedIndex].value;
}
}
document.getElementById("cat1").onChange = catChanger;
document.getElementById("cat2").onChange = catChanger;

Categories

Resources