Создание вкладок с помощью Ajax с WordPress, Woocommerce и Divi - PullRequest
Новая
       89

Создание вкладок с помощью Ajax с WordPress, Woocommerce и Divi

0 голосов
/ 15 апреля 2020

У меня есть веб-сайт, над которым я работаю, используя Divi и Woocommerce. Поскольку категории Divi и Woocommerce не ладят друг с другом, я нашел учебник по созданию вкладок для категорий. Вот как это выглядит:

enter image description here

Когда вы выбираете продукт, меняется содержимое непосредственно под ним, а продукты ниже меняются, чтобы соответствовать вкладка, на которую вы нажали.

Я хочу изменить область содержимого на ajax при загрузке другого продукта. В настоящее время я использую Divi Theme Builder для этого с пользовательскими CSS и JavaScript.

Вот мой код: 

<script>
jQuery(document).ready(function($) {
	/* Blurbs as Tabs */
	$('.tab-title').each(function () {	
		var section_id = $(this).find("a").attr("href");
		$(this).find("a").removeAttr("href");	
		$(this).click(function() {
			$(this).siblings().removeClass("active-tab");
	                $(this).addClass("active-tab");
			$('.tab-content').hide();
			$(section_id).show();
		});
	});
});
</script>
/* Product Headers */
/* Divi Lover Blog Categories Headers Custom CSS */
.dl-blurbs-row .et_pb_column {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.dl-blurbs-row .et_pb_blurb {
  flex-basis:20%; /* Change this value if you'd like to have different number of items in a row */
}
/* Decrease the Blurb image bottom margin */
.dl-blurbs-row .et_pb_blurb .et_pb_main_blurb_image {
  margin-bottom:15px;
}
/* Add hover effect to Blurbs */
.dl-blurbs-row .et_pb_blurb .et_pb_main_blurb_image img {
  transition:all .3s ease-in-out;
}
.dl-blurbs-row .et_pb_blurb .et_pb_main_blurb_image:hover img {
  transform:scale(1.1);
}
@media (max-width:800px) {
	/* Hide the Blurb title on mobile 
	.dl-blurbs-row .et_pb_blurb .et_pb_module_header {
		display:none;
	}*/
	/* Change Blurb apperance on mobile */
	.dl-blurbs-row .et_pb_blurb.et_pb_module {
		padding:15px 0 0!important;
		margin-bottom:0!important;
		margin-top: 0!important;
		border-radius: 0!important;
	}
}

<div class="et_pb_section et_pb_section_1_tb_body et_pb_with_background et_section_regular">




  <div class="et_pb_row et_pb_row_1_tb_body dl-blurbs-row">
    <div class="et_pb_column et_pb_column_4_4 et_pb_column_1_tb_body  et_pb_css_mix_blend_mode_passthrough et-last-child">


      <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_0_tb_body  et_pb_text_align_center  et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style="">


        <div class="et_pb_blurb_content">
          <div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/3-thin-series/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2020/01/883-Nubio.png" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/883-Nubio.png 1200w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/883-Nubio-980x980.png 980w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/883-Nubio-480x480.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1200px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
          <div class="et_pb_blurb_container">
            <h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/3-thin-series/">3" Thin Line Series</a></h4>

          </div>
        </div>
        <!-- .et_pb_blurb_content -->
      </div>
      <!-- .et_pb_blurb -->
      <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_1_tb_body  et_pb_text_align_center  et_pb_blurb_position_top et_pb_bg_layout_dark">


        <div class="et_pb_blurb_content">
          <div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-series/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-cortina_l.jpg" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-cortina_l.jpg 240w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-cortina_l-100x100.jpg 100w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-cortina_l-150x150.jpg 150w" sizes="(max-width: 240px) 100vw, 240px" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
          <div class="et_pb_blurb_container">
            <h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-series/">4" Premier Series</a></h4>

          </div>
        </div>
        <!-- .et_pb_blurb_content -->
      </div>
      <!-- .et_pb_blurb -->
      <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_2_tb_body  et_pb_text_align_center  et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style="">


        <div class="et_pb_blurb_content">
          <div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-fire-rated/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Clarity.png" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Clarity.png 800w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Clarity-480x480.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
          <div class="et_pb_blurb_container">
            <h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-fire-rated/">4" Fire Rated</a></h4>

          </div>
        </div>
        <!-- .et_pb_blurb_content -->
      </div>
      <!-- .et_pb_blurb -->
      <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_3_tb_body  et_pb_text_align_center  et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style="">


        <div class="et_pb_blurb_content">
          <div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-x8-albend/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2019/08/4x8-Albend-Nubio.png" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2019/08/4x8-Albend-Nubio.png 800w, https://glassblockwarehouse.com/wp-content/uploads/2019/08/4x8-Albend-Nubio-480x480.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
          <div class="et_pb_blurb_container">
            <h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-x8-albend/">Albend</a></h4>

          </div>
        </div>
        <!-- .et_pb_blurb_content -->
      </div>
      <!-- .et_pb_blurb -->
      <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_4_tb_body  et_pb_text_align_center  et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style="">


        <div class="et_pb_blurb_content">
          <div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/8-double-end/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2020/01/8_Double-End-Nubio.jpg" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/8_Double-End-Nubio.jpg 1000w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/8_Double-End-Nubio-980x980.jpg 980w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/8_Double-End-Nubio-480x480.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1000px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
          <div class="et_pb_blurb_container">
            <h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/8-double-end/">8" Double End</a></h4>

          </div>
        </div>
        <!-- .et_pb_blurb_content -->
      </div>
      <!-- .et_pb_blurb -->
      <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_5_tb_body  et_pb_text_align_center  et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style="">


        <div class="et_pb_blurb_content">
          <div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/8-end/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2020/01/822-End-Block-Cortina.jpg" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/822-End-Block-Cortina.jpg 1000w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/822-End-Block-Cortina-980x980.jpg 980w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/822-End-Block-Cortina-480x480.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1000px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
          <div class="et_pb_blurb_container">
            <h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/8-end/">8" End</a></h4>

          </div>
        </div>
        <!-- .et_pb_blurb_content -->
      </div>
      <!-- .et_pb_blurb -->
      <div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_6_tb_body  et_pb_text_align_center  et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style="">


        <div class="et_pb_blurb_content">
          <div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/8-corner/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Nubio-90-degree-Corner-glass-block-1.png" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Nubio-90-degree-Corner-glass-block-1.png 1200w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Nubio-90-degree-Corner-glass-block-1-980x980.png 980w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Nubio-90-degree-Corner-glass-block-1-480x480.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1200px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
          <div class="et_pb_blurb_container">
            <h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/8-corner/">8" Corners</a></h4>

          </div>
        </div>
        <!-- .et_pb_blurb_content -->
      </div>
      <!-- .et_pb_blurb -->
    </div>
    <!-- .et_pb_column -->


  </div>
  <!-- .et_pb_row -->


</div>

<div class="et_pb_section et_pb_section_2_tb_body et_pb_with_background et_section_regular">




  <div class="et_pb_row et_pb_row_2_tb_body">
    <div class="et_pb_column et_pb_column_4_4 et_pb_column_2_tb_body  et_pb_css_mix_blend_mode_passthrough et-last-child">


      <div class="et_pb_module et_pb_text et_pb_text_1_tb_body  et_pb_text_align_left et_pb_bg_layout_light">


        <div class="et_pb_text_inner">
          <h1>4″ Premier Series</h1>
          <div class="wpb_column vc_column_container vc_col-sm-6">
            <div class="vc_column-inner ">
              <div class="wpb_wrapper">
                <div class="wpb_text_column wpb_content_element ">
                  <div class="wpb_wrapper"><strong>Fully versatile</strong> glass blocks designed for vertical structures in a<strong> wide variety of formats and thicknesses</strong>, to increase maximum&nbsp;<strong>flexibility</strong> with wall compositions.<br> Realize vertical
                    structures that are lighter, thinner, more structurally stable, and solid. Create angles, curves, or finished jambs and/ or heads.</div>
                </div>
              </div>
            </div>
          </div>
          <div class="wpb_column vc_column_container vc_col-sm-6">
            <div class="vc_column-inner ">
              <div class="wpb_wrapper"></div>
            </div>
          </div>
          <div class="wpb_column vc_column_container vc_col-sm-6">
            <div class="vc_column-inner vc_custom_1517167391313">
              <div class="wpb_wrapper">
                <div class="wpb_text_column wpb_content_element ">
                  <div class="wpb_wrapper">
                    <p>&nbsp;</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- .et_pb_text -->
    </div>
    <!-- .et_pb_column -->


  </div>
  <!-- .et_pb_row -->


</div>

Я хочу, чтобы клиент щелкнул по вкладке (например, 3 «Серия тонких линий»), и описание и продукты будут соответствовать нажатой вкладке без обновления вся страница.

URL-адрес https://glassblockwarehouse.com/product-category/us-imperial-line/3-thin-series/

1 Ответ

1 голос
/ 19 апреля 2020

Вы должны использовать return false внутри функции щелчка, иначе она будет пытаться вести себя как ссылка. 

$(this).click(function() {
        $(this).siblings().removeClass("active-tab");
                $(this).addClass("active-tab");
        $('.tab-content').hide();
        $(section_id).show();
        return false;
    });
...