Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 5, 2021 at 5:05 pm #1278080
    stop0bit

    Hi,
    I’m using the TOC – Table of Contents widget inside a side bar for my site.

    The widget consists of these settings: I’ve populated my current settings in bold.

    • Title field: Table of Contents
    • Exclude headlines by class: woocommerce-loop-product__title
    • (provide a classname without a dot)
    • Select headlines to include: H1, H2 and H3 selected
    • Display On Single Blog Posts only (checkbox): Un-checked
    • Hierarchy Indentation (checkbox): Checked
    • Enable Smooth Scrolling (checkbox): Checked

    I have set the TOC settings to show for the required H-tags and populated a SINGLE class to exclude headings/headlines from the toc.

    I would like to set multiple classes in the Exclude headlines by class, how can I achieve this?

    Basically, there’s not enough flexibility with the current single class, in order for me to exclude other headings/headlines from other plugins for example, such as newsletter titles appearing in the TOC, etc. and its not possible to hide certain H-tags and achieve this with a single class only.

    I would appreciate any assistance or pointers where I might change the code to allow for multiple class exclusions in TOC.
    Thanks

    • This topic was modified 3 years, 7 months ago by stop0bit.
    February 9, 2021 at 12:56 pm #1279034
    Ismael

    Hey stop0bit,

    Thank you for the inquiry.

    I would like to set multiple classes in the Exclude headlines by class, how can I achieve this?

    This is not possible right now because the script uses the hasClass function, which can only check for a single class name. The code for this is in the enfold\js\avia-snippet-widget.js file around line 44.

                   if (!$(this).hasClass('av-no-toc') && !$(this).hasClass($excludeclass) && !$(this).parent().hasClass($excludeclass)) {
                    var $list_tag = '<a href="#' + $h_id + '" class="avia-toc-link avia-toc-level-' + $pos + '"><span>' + $txt + '</span></a>';
                }

    You may need to find a different way to add the “av-no-toc” class name for other headings that you want to exclude.

    Best regards,
    Ismael

    February 9, 2021 at 2:23 pm #1279067
    stop0bit

    So, I could re-right this javascript and place it in my child theme? Then provide some code in the child function.php to load the this specific modified javascript file from the child theme?

    Something like this maybe?

    
function wp_change_aviasnippetwidgetjs() {
	wp_dequeue_script('avia-default', get_template_directory().'/js/avia-snippet-widget.js', array('jquery'));
	wp_deregister_script('avia-default', get_template_directory().'/js/avia-snippet-widget.js', array('jquery'));
	wp_enqueue_script('avia-default', get_stylesheet_directory_uri().'/js/avia-snippet-widget.js', array('jquery'));

	}
	add_action( 'wp_enqueue_scripts', 'wp_change_aviajssnippetwidget', 100 );

    Would that work?

    February 10, 2021 at 1:07 pm #1279406
    Ismael

    Hi,

    Thank you for the update.

    Yes, that should work. Only thing is the script handle, the actual name of that script is “avia-widget-js”, avia-default is already taken and is attached to the js > avia.js file.

    Best regards,
    Ismael

    February 10, 2021 at 1:29 pm #1279426
    stop0bit

    Thanks, got it working.

    Steps taken to achieve this were:

    Create this file in child theme child-theme/php/Utils.php

    <?php

namespace SHEilds;

class Utils
{
    /**
     * Counts the number of active widget areas (widget areas that got a widget inside them are considered active)
     *
     * @return int $count
     */
    public static function get_active_widget_count()
    {
		global $_wp_sidebars_widgets;

		$count = 0;
		foreach($_wp_sidebars_widgets as $widget_area => $widgets)
		{
			if($widget_area == 'wp_inactive_widgets' || $widget_area == 'array_version')
			{
				continue;
			}

			if(!empty($widgets))
			{
				$count++;
			}
		}

		return $count;
    }
}

    Then copied /js/avia-snippet-widget.js to my child them directory and made code changes to allow for multiple classes to exclude. The code changes were not large, but hard to show to code difference here.

    Then Updated child theme functions.php

    require_once('php/Utils.php');

use SHEilds\Utils as SHEildsUtils;

add_action( 'wp_enqueue_scripts', 'wp_change_aviajs', 100 );
function wp_change_aviajs()
{
	$widget_count = SHEildsUtils::get_active_widget_count();

	wp_dequeue_script('avia-default');
	wp_deregister_script('avia-default');

	wp_enqueue_script(
		'avia-default',
		get_stylesheet_directory_uri().'/js/avia.js',
		array('jquery')
	);

	if ($widget_count)
	{
		wp_dequeue_script('avia-widget-js');
		wp_deregister_script('avia-widget-js');

		wp_enqueue_script(
			'avia-widget-js',
			get_stylesheet_directory_uri() . '/js/avia-snippet-widget.js',
			array('avia-default')
		);
	}
}

    Thanks

    February 10, 2021 at 2:17 pm #1279454
    Victoria

    Hi stop0bit,

    Glad you got it working for you and thank you for sharing! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.