https://youtu.be/ddk9OJ0lZTc
Прежде всего, я бы хотел, чтобы вы посмотрели это видео на YouTube, на этом веб-сайте, над которым я работаю.
Я работаю по умолчанию с системой фильтрации woocommerce, это чисто по умолчаниюwoocommerce filter html / css В html и javascript не было внесено никаких изменений, просто css.
Я здесь, чтобы попросить вас о помощи, ребята, потому что я не могу понять, как создать функцию с помощью JavaScript.После выбора «Автомобильная деталь» или любого из 4 вариантов (Автомобильная деталь> Марка> Модель> год) я хочу, чтобы после «Загрузка» появилось всплывающее окно с опциями, потому что теперь я выбираю, скажем «Выбрать Марка», всплывающее окно иЯ выбираю опцию «Мини-БМВ» после ее загрузки, и после завершения загрузки на экране ничего не появляется, я хочу, чтобы он выводил пользователя на следующий экран, который будет «Модель», а после «Модель» - «Год».Надеюсь, я проясню.
Я пытался изменить настройки через Woocommerce> Настройки, но не смог найти ничего, что могло бы помочь мне с этим.
Если у вас есть идеикак мне сделать эту работу, пожалуйста, дайте мне знать.
Большое спасибо!
ПРИМЕЧАНИЕ. Это базовая последняя версия системы фильтрации WooCommerce, как и на каждом веб-сайте WordPress WooCommerce.HTML и Javascript не были изменены только CSS.Если вам нужен CSS, который я кодировал, пожалуйста, дайте мне знать.
РЕДАКТИРОВАТЬ:
Вот HTML-код
<div class="section-filter section-filter-shortcode section-filter-price-no">
<div class="woof " data-shortcode="woof autosubmit='0' autohide='0' is_ajax='1' ajax_redraw='1' " data-redirect="" data-autosubmit="1" data-ajax-redraw="1">
<!--- here is possible drop html code which is never redraws by AJAX ---->
<div class="woof_redraw_zone" data-woof-ver="2.1.9">
<div data-css-class="woof_container_product_cat" class="woof_container woof_container_select_hierarchy woof_container_product_cat woof_container_1 woof_container_choosecarpart">
<div class="woof_container_overlay_item"></div>
<div class="woof_container_inner woof_container_inner_choosecarpart">
<h4>Choose Car Part <a href="javascript: void(0);" title="toggle" class="woof_front_toggle woof_front_toggle_opened" data-condition="opened">+</a>
</h4>
<div class="woof_block_html_items">
<select class="woof_select woof_select_product_cat woof_select_product_cat_0" name="product_cat" style="display: none;">
<option value="0">Choose Car Part</option>
<option value="clips">Clips (325)</option>
<option value="crash-parts" selected="selected">Crash Parts </option>
<option disabled="" value="fixing-elements">Fixing Elements (0)</option>
<option value="hose-joiners">Hose Joiners (165)</option>
<option value="metal-screws">Metal screws (48)</option>
<option value="protective-rubbers">Protective Rubbers (6)</option>
<option value="push-mount-ties">Push Mount Ties (9)</option>
<option value="rivets">Rivets (10)</option>
<option value="universal">Universal (134)</option>
</select><div class="chosen-container chosen-container-single" style="width: 210px;" title=""><a class="chosen-single" tabindex="-1"><span>Crash Parts</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div>
<input type="hidden" value="Clips" data-anchor="woof_n_product_cat_clips">
<input type="hidden" value="Crash Parts" data-anchor="woof_n_product_cat_crash-parts">
<input type="hidden" value="Fixing Elements" data-anchor="woof_n_product_cat_fixing-elements">
<input type="hidden" value="Hose Joiners" data-anchor="woof_n_product_cat_hose-joiners">
<input type="hidden" value="Metal screws" data-anchor="woof_n_product_cat_metal-screws">
<input type="hidden" value="Protective Rubbers" data-anchor="woof_n_product_cat_protective-rubbers">
<input type="hidden" value="Push Mount Ties" data-anchor="woof_n_product_cat_push-mount-ties">
<input type="hidden" value="Rivets" data-anchor="woof_n_product_cat_rivets">
<input type="hidden" value="Universal" data-anchor="woof_n_product_cat_universal">
</div>
<input type="hidden" name="woof_t_product_cat" value="Product categories"><!-- for red button search nav panel -->
</div>
</div>
<div data-css-class="woof_container_product_parts" class="woof_container woof_container_select_hierarchy woof_container_product_parts woof_container_2 woof_container_choosemakespanclassplus__spanmodelspanclassplus__spanyear">
<div class="woof_container_overlay_item"></div>
<div class="woof_container_inner woof_container_inner_choosemakespanclassplus__spanmodelspanclassplus__spanyear">
<h4>Choose Make<span class="\'plus__\'">+</span>Model<span class="\'plus__\'">+</span>Year</h4>
<div class="woof_block_html_items">
<select class="woof_select woof_select_product_parts woof_select_product_parts_0" name="product_parts" style="display: none;">
<option value="0">Choose Make</option>
<option disabled="" value="acura">Acura (0)</option>
<option value="alfa-romeo">ALFA ROMEO (7)</option>
<option value="audi">Audi (10)</option>
<option value="bmw">BMW (1)</option>
<option disabled="" value="cadillac">Cadillac (0)</option>
<option value="chevrolet">Chevrolet (12)</option>
<option disabled="" value="chrysler">Chrysler (0)</option>
<option value="citroen">Citroen (449)</option>
<option value="dacia">Dacia (26)</option>
<option value="daewoo">Daewoo (3)</option>
<option value="ds">DS (26)</option>
<option value="fiat">Fiat (365)</option>
<option value="ford">Ford (1)</option>
<option disabled="" value="gm">GM (0)</option>
<option value="honda">Honda (31)</option>
<option disabled="" value="hyundai">Hyundai (0)</option>
<option value="isuzu">Isuzu (1)</option>
<option value="iveco">Iveco (27)</option>
<option value="jaguar">Jaguar (6)</option>
<option value="jeep">Jeep (3)</option>
<option value="kia">Kia (43)</option>
<option value="land-rover">Land Rover (9)</option>
<option value="ldv">LDV (1)</option>
<option value="lexus">Lexus (3)</option>
<option disabled="" value="mercedes">Mercedes (0)</option>
<option value="mg">MG (4)</option>
<option value="mini">MINI (46)</option>
<option value="mini-bmw">MINI - BMW (17)</option>
<option value="mitsubishi">Mitsubishi (37)</option>
<option value="nissan">Nissan (25)</option>
<option disabled="" value="opel">Opel (0)</option>
<option value="peugeot">Peugeot (207)</option>
<option disabled="" value="pontiac">Pontiac (0)</option>
<option value="porsche">Porsche (1)</option>
<option value="reliant">Reliant (1)</option>
<option value="renault">Renault (26)</option>
<option value="rover-2">Rover (26)</option>
<option value="saab">Saab (2)</option>
<option value="seat">Seat (47)</option>
<option disabled="" value="signum">Signum (0)</option>
<option value="skoda">Skoda (23)</option>
<option value="smart">Smart (7)</option>
<option value="subaru">Subaru (15)</option>
<option value="suzuki">Suzuki (10)</option>
<option value="talbot">Talbot (3)</option>
<option value="taxi">Taxi (1)</option>
<option value="toyota">Toyota (45)</option>
<option value="vauxhall">Vauxhall (35)</option>
<option value="volkswagen">Volkswagen (158)</option>
<option value="volvo">Volvo (90)</option>
</select><div class="chosen-container chosen-container-single" style="width: 629px;" title=""><a class="chosen-single" tabindex="-1"><span>Choose Make</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div>
<select class="woof_select woof_select_product_parts woof_select_product_parts_1" name="product_parts" disabled="" style="display: none;">
<option value="0">Model</option>
</select><div class="chosen-container chosen-container-single chosen-disabled" style="width: 629px;" title=""><a class="chosen-single" tabindex="-1"><span>Model</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" disabled=""></div><ul class="chosen-results"></ul></div></div>
<select class="woof_select woof_select_product_parts woof_select_product_parts_2" name="product_parts" disabled="" style="display: none;">
<option value="0">Year</option>
</select><div class="chosen-container chosen-container-single chosen-disabled" style="width: 629px;" title=""><a class="chosen-single" tabindex="-1"><span>Year</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" disabled=""></div><ul class="chosen-results"></ul></div></div>
<input type="hidden" value="Acura" data-anchor="woof_n_product_parts_acura">
<input type="hidden" value="ALFA ROMEO" data-anchor="woof_n_product_parts_alfa-romeo">
<input type="hidden" value="Audi" data-anchor="woof_n_product_parts_audi">
<input type="hidden" value="BMW" data-anchor="woof_n_product_parts_bmw">
<input type="hidden" value="Cadillac" data-anchor="woof_n_product_parts_cadillac">
<input type="hidden" value="Chevrolet" data-anchor="woof_n_product_parts_chevrolet">
<input type="hidden" value="Chrysler" data-anchor="woof_n_product_parts_chrysler">
<input type="hidden" value="Citroen" data-anchor="woof_n_product_parts_citroen">
<input type="hidden" value="Dacia" data-anchor="woof_n_product_parts_dacia">
<input type="hidden" value="Daewoo" data-anchor="woof_n_product_parts_daewoo">
<input type="hidden" value="DS" data-anchor="woof_n_product_parts_ds">
<input type="hidden" value="Fiat" data-anchor="woof_n_product_parts_fiat">
<input type="hidden" value="Ford" data-anchor="woof_n_product_parts_ford">
<input type="hidden" value="GM" data-anchor="woof_n_product_parts_gm">
<input type="hidden" value="Honda" data-anchor="woof_n_product_parts_honda">
<input type="hidden" value="Hyundai" data-anchor="woof_n_product_parts_hyundai">
<input type="hidden" value="Isuzu" data-anchor="woof_n_product_parts_isuzu">
<input type="hidden" value="Iveco" data-anchor="woof_n_product_parts_iveco">
<input type="hidden" value="Jaguar" data-anchor="woof_n_product_parts_jaguar">
<input type="hidden" value="Jeep" data-anchor="woof_n_product_parts_jeep">
<input type="hidden" value="Kia" data-anchor="woof_n_product_parts_kia">
<input type="hidden" value="Land Rover" data-anchor="woof_n_product_parts_land-rover">
<input type="hidden" value="LDV" data-anchor="woof_n_product_parts_ldv">
<input type="hidden" value="Lexus" data-anchor="woof_n_product_parts_lexus">
<input type="hidden" value="Mercedes" data-anchor="woof_n_product_parts_mercedes">
<input type="hidden" value="MG" data-anchor="woof_n_product_parts_mg">
<input type="hidden" value="MINI" data-anchor="woof_n_product_parts_mini">
<input type="hidden" value="MINI - BMW" data-anchor="woof_n_product_parts_mini-bmw">
<input type="hidden" value="Mitsubishi" data-anchor="woof_n_product_parts_mitsubishi">
<input type="hidden" value="Nissan" data-anchor="woof_n_product_parts_nissan">
<input type="hidden" value="Opel" data-anchor="woof_n_product_parts_opel">
<input type="hidden" value="Peugeot" data-anchor="woof_n_product_parts_peugeot">
<input type="hidden" value="Pontiac" data-anchor="woof_n_product_parts_pontiac">
<input type="hidden" value="Porsche" data-anchor="woof_n_product_parts_porsche">
<input type="hidden" value="Reliant" data-anchor="woof_n_product_parts_reliant">
<input type="hidden" value="Renault" data-anchor="woof_n_product_parts_renault">
<input type="hidden" value="Rover" data-anchor="woof_n_product_parts_rover-2">
<input type="hidden" value="Saab" data-anchor="woof_n_product_parts_saab">
<input type="hidden" value="Seat" data-anchor="woof_n_product_parts_seat">
<input type="hidden" value="Signum" data-anchor="woof_n_product_parts_signum">
<input type="hidden" value="Skoda" data-anchor="woof_n_product_parts_skoda">
<input type="hidden" value="Smart" data-anchor="woof_n_product_parts_smart">
<input type="hidden" value="Subaru" data-anchor="woof_n_product_parts_subaru">
<input type="hidden" value="Suzuki" data-anchor="woof_n_product_parts_suzuki">
<input type="hidden" value="Talbot" data-anchor="woof_n_product_parts_talbot">
<input type="hidden" value="Taxi" data-anchor="woof_n_product_parts_taxi">
<input type="hidden" value="Toyota" data-anchor="woof_n_product_parts_toyota">
<input type="hidden" value="Vauxhall" data-anchor="woof_n_product_parts_vauxhall">
<input type="hidden" value="Volkswagen" data-anchor="woof_n_product_parts_volkswagen">
<input type="hidden" value="Volvo" data-anchor="woof_n_product_parts_volvo">
</div>
<input type="hidden" name="woof_t_product_parts" value="Parts Filter"><!-- for red button search nav panel -->
</div>
</div>
<div class="woof_submit_search_form_container">
<button style="float: right;" class="button woof_reset_search_form" data-link="">Reset</button>
<button style="float: left;" class="button woof_submit_search_form">Filter</button>
</div>
</div>
</div>
</div>