[Closed] Problems with directory setup

[Author]

Posts

[jennZ]

I'm trying to set up a directory with Divi + Toolset. I understand that they're not fully compatible because of their pagebuilder differences, but I bought Toolset because it was specifically stated that it worked with Divi. I've been able to recreate most of the elements of my current directory (hidden link), but I'm stumped with the accordions. I know that there are no longer accordions in the Toolset options, but based on the documentation, I should be able to create a Divi accordion layout and paste in shortcodes for the dynamic content.

However, this doesn't seem to work. I'm not sure if it isn't connecting the Current [post type] with that data in the accordion shortcodes, but nothing shows up. I tried using HTML/CSS/JS in a code block with shortcodes as well, but that doesn't show up at all. Is there another way to create an accordion effect within a Toolset View? This is pretty much the last thing I need in order to be fully on board with Toolset...

[Nigel]

I'm not familiar with the Divi accordions, do they offer dynamic sources for the tab titles and content? If so and you wanted to populate those with data coming from Toolset custom fields, it should be possible to specify those fields as sources (Toolset custom fields are WordPress custom fields), bearing in mind that Toolset stores its custom fields with a 'wpcf-' prefix, so a custom field "description" has a post meta key of "wpcf-description".

From your description it sounds like Divi doesn't expand shortcodes in the context of its accordions.

If that doesn't work then you will need to roll-your-own solution.

If you use the legacy version of Views, you have more control over the markup that is generated and it is possible to mix HTML and shortcodes for the dynamic elements to produce an accordion.

However, where we have suggested this previously it has been with Bootstrap (which Toolset ships with and which includes an accordion: hidden link), but Divi is not compatible with Bootstrap, which should be disabled in the settings when working with Divi. In which case you would need to either code a bespoke solution or find and enqueue an alternative to Bootstrap accordions.

If you need some direction on how to use the classic Views editor, we can help with that.

[jennZ]

Yes, I literally gave a link to an example that displays the accordion module of Divi prominently. It does not give me the Toolset custom fields as an option to populate the data in Divi either.

Am I able to insert a legacy View into a current View? It's unclear if I can have the legacy version of Toolset installed at the same time as the current version. If so, I'm happy to custom-code my accordions and use a nested legacy View, but if not, I need an alternative option.

[Christian Cox]

Am I able to insert a legacy View into a current View?
Yes, you can nest a View created in the legacy editor inside a View created in the Block editor by placing a wpv-view shortcode in the Block editor using a custom HTML block. The wpv-view shortcode is designed to display a View in any arbitrary location. The simplest syntax for displaying a View is as follows:

[wpv-view name="your-view-slug"]

You would replace your-view-slug with the slug of the View you want to display in the Block editor design.
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-view

It's unclear if I can have the legacy version of Toolset installed at the same time as the current version.
Technically it is possible to have both installed at the same time, but it's not necessary. There is no need to install both Toolset Blocks and Toolset Views plugins, and in fact is is not possible to have both plugins active simultaneously. Activating one will automatically deactivate the other. If you already have Toolset Blocks active, you can use the legacy editor experience in Toolset Blocks without the legacy Toolset Views plugin, and vice versa with Views active. Both editing experiences are available in both plugins. In Toolset Blocks, the Block editor experience is active by default. In legacy Views, the legacy experience is active by default. To activate the legacy editor experience in any case, you would go to Toolset > Settings > General and find the Editing experience settings. I suggest you select the option that enables both block and legacy experiences, so you will have the option to choose editing experience per View, per template, per archive, etc. After selecting that option, you will begin to have a new main menu item: wp-admin > Toolset > Views. You can create and edit Views here using the legacy experience.

[jennZ]

I'm giving this a try, but there any documentation on legacy views? I've done a search for "legacy" in the support documentation articles and nothing came up. (I can see why the switch was made - the current Views are much more intuitive, haha!) Thanks!

[jennZ]

I was finally able to get my accordion code to work on the legacy view, but when I inserted the legacy view into my main view, it did not work at all. Only two fields showed (though the shortcodes did work, so that's something!) and it didn't function as an accordion - it just showed the text and then repeated the two fields over and over again. I'm not sure if I'm missing something?

[Shane]

Hi Jen,

As Christian is currently on vacation I will be handling his tickets for him.

Would you mind providing me with admin access to the site so that I can have a look at the accordion ?

Please also let me know the link of the page as well.

Thanks,
Shane

[Shane]

Hi Jenn,

Thank you for the credentials. I noticed that you're using this code below for the accordion.

<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
}

body{
  background: transparent;
}

.accordion{
    width: 450px;
    height: 60px;
    background: transparent;
    overflow: hidden;
    transition: height 0.3s ease;
}

.accordion .accordion_tab{
  padding: 20px;
  cursor: pointer;
  user-select: none;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
}

.accordion .accordion_tab .accordion_arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  width: 15px;
  height: 15px;
  transition: all 0.3s ease;
}

.accordion .accordion_tab .accordion_arrow img{
  width: 100%;
  height: 100%;
}

.accordion .accordion_tab.active .accordion_arrow{
  transform: translateY(-50%) rotate(180deg);
}

.accordion.active{
  height: auto;
}

.accordion .accordion_content{
  padding: 20px;
}

.accordion .accordion_content .accordion_item{
  margin-bottom: 20px;
}

.accordion .accordion_content .accordion_item p.item_title{
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 18px;
  color: #36363d;
}

.accordion .accordion_content .accordion_item p:last-child{
  color: #36363d;
  font-size: 14px;
  line-height: 20px;
}
</style>

<div class="wrapper">
  <div class="accordion active">
    <div class="accordion_tab active">
        Primary Audience:
        <div class="accordion_arrow">
          <img src="<em><u>hidden link</u></em>" alt="arrow">
      </div>
    </div>
    <div class="accordion_content">
        <p>[types field='primary-audience'][/types]</p>
    </div>
  </div>
  <div class="accordion">
    <div class="accordion_tab">
        Website:
        <div class="accordion_arrow">
          <img src="<em><u>hidden link</u></em>" alt="arrow">
      </div>
    </div>
    <div class="accordion_content">
        <p>[types field='website'][/types]</p>
    </div>
  </div>
    </div>
  
  <div class="accordion">
    <div class="accordion_tab">
        Contact Email:
        <div class="accordion_arrow">
          <img src="<em><u>hidden link</u></em>" alt="arrow">
      </div>
    </div>
    <div class="accordion_content">
        <p>[types field='email'][/types]</p>
    </div>
  </div>
<div class="accordion">
    <div class="accordion_tab">
        Past Speaking Experience:
        <div class="accordion_arrow">
          <img src="<em><u>hidden link</u></em>" alt="arrow">
      </div>
    </div>
    <div class="accordion_content">
        <p>[types field='past-experience' separator='; '][/types]</p>
    </div>
  </div>


<script>
$(".accordion_tab").click(function(){
    $(".accordion_tab").each(function(){
      $(this).parent().removeClass("active");
      $(this).removeClass("active");
    });
    $(this).parent().addClass("active");
    $(this).addClass("active");
});
</script>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

I believe it would be easier to edit this view without the use of the block editor and then added the JS section into the JS editor and the CSS section into the css editor.

Before I make any changes would you also mind letting me know where you got this code from as well.

Thanks,
Shane

[jennZ]

Ah, that makes sense. I've moved the JS and CSS into those sections and removed the block editor portions from the loop editor.

The JS code? I have some HTML and CSS background, so I did those myself, but I had to cobble together the JS portion in order to get it to work as intended in the test environments I've put it through. I don't remember exactly where I pulled them from, but I can try to find the sources again if need be.

[Shane]

Hi Jenn,

Given that its not the bootstrap accordion, I will need to understand the original context of the code to compare and see what is wrong and why its not working.

Thanks,
Shane

[jennZ]

I'm still trying to hunt down the resources I used for the code, so I'll update this as soon as I find them.

[Shane]

Hi Jenn,

Any update here for me ?

Thanks,
Shane

[jennZ]

I'm sorry for the delay. For the past week, I'd been combing my browsing history from that timespan and couldn't find anything... and I just realized tonight that I'd used a different browser. I finally found my sources in there, though!

A chunk of it was pulled from hidden link
I believe that was most of my base and then I modified some of that code. Let me know if that helps. Thank you!

[Shane]

Hi Jenn

Thank you, now that I have the original code to compare it against. It would seem that some heavy modifications were made on the javascript section of the code.

Can you re-add your code to the page so that I can see what it appears like and we can take it from there.

Thanks,
Shane