Incompatibility with TimberMenu

[nkmaurya-dev]

Hi Team,

I'm using TimberMenu for my navigation layout. But non of plugins, which are built for tweaking navigation , are working with navigation layout.

I have seen the TImberMenu class and observed that there is no filter hook is used which are required by plugins, like
1. wp_nav_menu_items
2. wp_nav_menu_{$menu->slug}_items

So please suggest me here that, how plugins can tweak my layout.

WordPress 4.8.1,
PHP 7.1,
Timber 1.4.1 (installed via WordPress.org)

Thanks,
Neeraj Maurya

[gchtr]

These two filter that you mentioned are applied in the wp_nav_menu() function, which generates HTML output for a menu. As we can read in the filter description, they "filter the HTML list content for navigation menus".

With Timber\Menu, we don’t want to get the final HTML, but build our own HTML with Twig, by looping over arrays of menu items. The goal of this is that we don’t have to work with a Walker class to tweak certain HTML output, which can be quite complicated. That’s why Timber uses the wp_get_nav_menu_items() function to get menu items based on the menu ID. This function applies the wp_get_nav_menu_items filter, which is the preferred way to filter menu items present in a menu.

If you want to tweak the HTML output of a menu with a plugin, then probably Timber\Menu is not what you’re looking for. Remember that with Timber you can still use WordPress functions, including the standard way of displaying menus with wp_nav_menu.

So which plugins did you try to use? Or what do you want to achieve exactly?

[nkmaurya-dev]

Hi gchtr,

Thanks for the response.

Yeah, I'm totally agree with you regarding filters and the TimberMenu concept, as I have been already observed these.

Actually, I have a template for navigation which has complete HTML/Twig structure and I'm including this template into extended template could say page.twig. I'm passing the complete menu item object with the help of TimberMenu from page.twig to navigation template where looping is happening. So just like any generic WordPress theme, I'm building a theme with the help of Timber/Twig, to submit on .org or could sell on themeforest.

Its obvious that anyone can install plugins according to their own requirement. So I was just listing the plugins for maximum support from my theme and I have found that no menu related plugin is working with my theme.

I have mentioned those filters, because most of plugins are using those hooks for tweaking the navigation. Let me put an example here. Suppose a user is going to use the plugin WooCommerce Menu Cart, it would not work due to non existence of those hooks.

So, please could you suggest me, how can I achieve my purpose. Obviously, TimberMenu would not work here, but I can't use wp_nav_menu(array("echo" => false)) too, because my theme must consist a navigation template file.

Thanks,
Neeraj Maurya

[jake46a]

@nkmaurya-dev

I am sorry to hear you are having this issue, and maybe in the time for me to get to this (as I recently started contributing back by answering some of these issues) you have found a solution.

When I integrated WooCommerce into my Timber theme, I ran across several posts concerning the behavior you link to where a "minicart" is shown in the nav-bar.

I decided not to put mine in the nav-bar, but here is the code I used. You can place it anywhere including call the function in the nav-bar.

Mini Cart Them

In my woocommerce.php file right after
$context = Timber::get_context();
I have:
$woocommerce_context['cart'] = WC()->cart;

This can also be put in any other pages where you want the 'minicart' to show.

This is the code to add your own mini cart theme that will update automatically when an item is added to the cart. Add this code in your template's functions.php file directly or use a plugin like Code Snippets.

require get_template_directory() . '/inc/minicarttheme.php';

The code for /inc/minicarttheme.php

<?php

use Timber\Timber;

class Theme_Mini_Cart {
    public function __construct() {
        add_filter( 'woocommerce_add_to_cart_fragments', [ $this, 'cart_link_fragment' ] );
    }

    /**
     * Cart Fragments.
     *
     * Ensure cart contents update when products are added to the cart via AJAX.
     *
     * @param  array $fragments Fragments to refresh via AJAX.
     * @return array            Fragments to refresh via AJAX.
     */
    public function cart_link_fragment( $fragments ) {
        global $woocommerce;

        $fragments['a.cart-mini-contents'] = Timber::compile(
            'woo/fragment-link.twig',
            [ 'cart' => WC()->cart ]
        );

        return $fragments;
    }
}

new Theme_Mini_Cart();

The code for woo/fragment-link.twig

{% do action( 'woocommerce_cart_totals_before_shipping' ) %}
<a
class="cart-mini-contents"
href="{{ fn('wc_get_cart_url') }}"
title="{{'View Cart'}}"
>
 <span class="amount">{{ cart.get_cart_subtotal }}</span>{{'/'}}
    <span class="count">{{ cart.get_cart_contents_count }}</span>{{' items'}}
</a>

Then create this file woo/partials/cart.twig

    <div class="container-fluid  text-center "> 
    <img src = '/wp-content/uploads/2018/06/cart.png'>
       {% include 'woo/fragment-link.twig' %}
    </div>

The image above will change depending on the card image you use. Then in your template, where you want the minicart to be, use this code:
{% include 'woo/partials/cart.twig'%}

[gchtr]

There will be improved compatibility with the WordPress menu filters to some degree in Timber 2.0. But we’ll never be able to have full compatibility.

If you depend on plugins for your navigation, then you should maybe use the native WordPress functions to display a menu instead of using Timber.

I’m going to close this issue.