בשלב הראשון נייצר לטופס של אלמנטור הרחבה לרשימה (סלקט) של כל הקטגוריות האב.
שלב ראשון – נייצר פילדס טייפ חדש לטופס אלמנטור
נפתח סניפט חדש עם הקוד הבא: category_list
add_filter('elementor_pro/forms/field_types', function ($types){
$types['category_list'] = "בחר קטגוריה";
return $types;
});
נקרא לפילדס טייפ החדש שיצרנו עם לולאה של כל קטגוריות האב
add_filter('elementor_pro/forms/render/item/category_list', function ($item, $item_index, $instance){
$get_parents_category_list = get_terms( array(
'taxonomy' => 'product_cat',
'parent' => 0,
'orderby' => 'name',
'order' => 'DESC',
) );
# term_id
# name
###########################
$field_options = []; // ניצור שוב מערך במבנה הרצוי שאלמנטור דורש
$field_options[] = "בחר קטגוריה ראשית";
foreach ( $get_parents_category_list as $art) {
$field_options[] = $art->name . "|" . $art->term_id ; // מבנה המערך החדש
}
############################
## המבנה שצריך כדי להזין נתונים
## value | value
## value | value
## $item['field_options'] = "Red|red\nGreen|green\nBlue|blue";
#################
$item['field_options'] = implode("\n", $field_options); // נפרק את המערך לסטרינג כל נתון בשורה נפרדת -
$item['field_type'] = "select";
// $item['field_type'] = "checkbox";
return $item;
},99,3);
נגרור טופס אלמנטור ונפעיל את מה שיצרנו עכשיו.
- נבטל את הפעולה שאחרי הלחיצה על הכפתור
- ניתן שם ייחודי מזהה לשדה category_q
- וגם שם מזהה לכפתור category_btn
- לבסוף נוסיף שדה בחירה רגיל עם שם מזהה second_category
ללא נתונים רק כותרת "בחר קטגורייה משנית"
למעשה זה ישמש מעין קונטיינר
ניצור וידגט HTML ונכניס לשם קוד גאוה סקריפט
הסלקטור הוא:
$('.elementor-field-group-category_q')
אפשרי גם
$('#form-field-category_q')
עכשיו בעזרת ALERT נוכל לראות שזה עובד
<script>
jQuery(document).ready(function( $ ){
$('.elementor-field-group-category_q').change(function(){
var category = $(".elementor-field-group-category_q option").filter(":selected").val();
alert(category);
});
});
</script>
השלב הבא הוא לייצר קוד ajax
שיקח את הערך בסלקט יעביר אותו בקוד מאחורי הקלעים ויוציא לנו פלט חדש
הממשך קוד הגאוה סקריפ יהיה כזה
לשים לב למשתנים
– הערך המספרי של הקטגוריה שנבחרה מהסלקט
category
שם האקשן לביצוע
/wp-admin/admin-ajax.php?action=set_first_cat
data: { category_id: category },
שם המזהה סלקטור של הדרופ דאון השני שמתפקד כקונטיינר
אליו נכניס ערכים של כל הקטגוריות משנה שבחרנו
$("#form-field-second_category").html(data);
<script>
jQuery(document).ready(function( $ ){
$('#form-field-category_q').change(function(){
// var category = $(".elementor-field-group-category_q option").filter(":selected").val();
var category = $("#form-field-category_q option").filter(":selected").val();
// alert(category);
$.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php?action=set_first_cat",
data: { category_id: category },
success: function(data){
// // $("#state-list-2").html(data);
$("#form-field-second_category").html(data);
}
});
});
});
</script>
נמשיך עם הסניפט – נכתוב את הקוד שירוץ מאחורי הקלעים.
כלומר נקבל את הערך של הקטגוריה הראשית וממנה נוציא את רשימת הקטגוריות המשניות ונציג אותה בסלקט השני שיצרנו באלמנטור
/wp-admin/admin-ajax.php?action=set_first_cat
add_action('wp_ajax_set_first_cat', 'set_first_cat_func');
add_action('wp_ajax_set_first_cat', 'set_first_cat_func');
function set_first_cat_func(){
if (! empty($_POST["category_id"])) {
$categoryId = $_POST["category_id"]; // זה הערך שנלקח מטופס האלמנטור של רשימת הקטגוריות הראשיות
## העכשיו נחלץ את הילדים של הקטגוריה הראשית
$stateResult = get_terms( array(
'taxonomy' => 'product_cat',
'parent' => $categoryId,
'orderby' => 'name',
'order' => 'DESC',
) );
?>
<option value="">עכשיו ניתן לבחור קטגוריה משנית</option>
<?php
foreach ($stateResult as $state) {
?>
<option value="<?php echo $state->term_id; ?> "><?php echo $state->name; ?> </option>
<?php
}
}
}
#### כדי שהקוד ירוץ למשתמשים שלא מחוברים
add_action('admin_init', function(){
add_action('wp_ajax_nopriv_set_first_cat', 'set_first_cat_func');
});
השלב הבא זה ליצור קוד ברגע שלוחצים על הכפתור של אלמנטור.
ניקח את שני הערכים של השדות (סלקט) ונשלח שוב קוד מאחורי הקלעים
אבל הפעם חד צדדי, כלומר אני לא אמור לקבל בחזרה שינוי ב HTML
$.post("/wp-admin/admin-ajax.php?action=set_category"
אופציה שניה, זה עדיין להשאר בקוד הגאוה סקריפט ולעשות כל מיני דברים,
כמו למשל אחרי לחיצת הכפתור אני מנותב לקישור מסויים עם הערכים של הקטגוריות
אופציה שלישי זה AJAX
שולח את הערכים מאחורי הקלעים ומקבל בחזרה קישור מותאם ואז רידיירקט לקישור המותאם
/// קוד לכפתור
$('#category_btn').click(function(){
// alert("click");
var elementor_select_1 = $("#form-field-category_q option").filter(":selected").val();
var elementor_select_2 = $("#form-field-second_category option").filter(":selected").val();
// alert( elementor_select_2 );
$.post("/wp-admin/admin-ajax.php?action=set_category", {
category_id_1: elementor_select_1,
category_id_2: elementor_select_2
} );
});
בגלל שיש באג בפילטר של ג'ט צריך לחלץ רק נתון אחד מהשדות של הקטגוריה.
כלומר – אם אין פרמטרים (ערכים) בקטגוריות, לא לעשות כלום.
אם השדה של הקטגוריה המשנית ריקה (אין ערך מוגדר) אז יש לשלוח רק את הפרמטר של הקטגוריה הראשית. (ברור)
ואם הקטגוריה המשנית עם ערך אז לשלוח רק את הקטגוריה המשנית, כלומר אין צורך לשלוח גם את הפרמטר של הקטגוריה הראשית
/// קוד לכפתור
$('#category_btn').click(function(){
// alert("click");
var elementor_select_1 = $("#form-field-category_q option").filter(":selected").val();
var elementor_select_2 = $("#form-field-second_category option").filter(":selected").val();
var send_value;
if(elementor_select_2 == ''){
send_value = elementor_select_1;
} else {
send_value = elementor_select_2;
}
$.post("/wp-admin/admin-ajax.php?action=set_category", {
category_id: send_value,
} );
});