Crocoblock Changelog using Tabs, CCT & Query Builder
  • ADD: Additional services for WooCommerce based booking mode;
  • ADD: Guests for WooCommerce based booking mode;
  • FIX: WooCommerce mode admin edit popup recalculation switcher appears on any change;
  • UPD: Booking product thumbnail in product cart (https://github.com/Crocoblock/suggestions/issues/7586);
  • UPD: Units manager. Better WPML compatibility;
  • FIX: Month & Year selects configuration options with WC based form;
  • FIX: Calendar widget and separate field datepicker sync view.

How to reproduce:

Create Plugins CCT, which will be used for the navigation and Releases CCT which will contain information about each release

Create Relation between Plugins and Releases – each plugin could contain many releases, but each release related to single plugin

Create a query to get all Plugins and use this query as source for Tabs widget to populate tabs list from the query items. More info on how to connect Tabs (or Accordion, Advanced Carousel, Timeline and other Crocoblock widgets where content is set by repeater control) widget to query you can find here (example is for the repeater query and Accordion widget but it works in similar way with any query and Tabs widget). Also you need to enable Carousel with Loop and Centered for tabs navigation

Now we need to get releases for each plugin and display them in a appropriate tab. To do this we’ll create a query to get related releases of the plugin, use this query for the releases listings, add this listing to the Elementor template and use this template as the content of the tab

The main trick in the query – is using the macro to get related children from current object ID. When we attaching Plugins query to the Tabs widget, it works in a similar way as Listing Grid. So for each tab Current Object will be an appropriate plugin so we can easily get the plugin releases using Related Items macro.

Two more interesting tricks we’ll use in the releases listing:

  1. First is creating a toggle with plain HTML+CSS
  2. Is getting Plugin color to highlight the releases

To create toggle-like layout for listing item we’ll use Timber/Twig views to get full control on HTML & CSS. And then use an old life-hack with input[type=”checkbox”]. In-depth tutorial you can find here (it’s a first example I found in Google, not sure it the best, but you can get an idea)

To get highlight color, we’ll use a Context feature. Color – is a field of Plugins CCT. We need to get color from the plugin related to the current tab. This plugin is the “parent” of this tab. So we need to use Parent Object context

Here HTML & CSS sources of this listing item to reproduce on your own installation.