Ben @ Team Tangible

Thanks for the heads up @contemplate! This was a bug that’s been fixed in version 4.1.1 which was released yesterday.

• ACF integration
  • Repeater: Correctly set up subfield loop

Unrelated fun fact given your username: early on we considered calling L&L “contemplate.”

Hi @gbordormor22, it looks like you’ve already got some good responses on your identical post in the Facebook group. Building a dynamic accordion in L&L is going to be exactly like building a standard HTML accordion, but instead of specifying each accordion row manually as you would if you were working with plain HTML, you’d create a single accordion item, wrap it in an L&L Loop tag, and then replace the static content with L&L’s dynamic tags like Field. So if you used something like this example as your starting point, you’d instead write something like this in your template instead of the static HTML, with the query parameters and tags changed based on your data:

<Loop type=post count=5>
  <button class="accordion"><Field title /></button>
  <div class="panel">
    <p><Field excerpt auto=true words=35 /></p>
  </div>
</Loop>

The real challenge here is this part of your request:

So that all Headings within a particular part of the Post Body will be a new Accordion Heading, and all contents below that Heading will form the Accordion Content.

L&L can easily loop through data that are saved on your site in an array, but the content field in WordPress is just one big block of text. L&L does have the ability to use regex to match a pattern and return an array, which you could theoretically then loop through, but it’s somewhat limited, and getting your regex to work reliably is going to be a massive pain.

The way I’d approach this would be to use something like ACF to add this data to a separate field, such as a repeater field, and then use L&L to loop through that ACF repeater.

Alternatively, I’d simply use a tool like SimpleTOC to achieve this since it’s designed to work with headings and content within a WordPress post’s content field.

I hope that helps point you in the right direction as to how/if to use L&L to accomplish this!

Also, I can see that you’re already aware of this, but I thought I’d highlight that there’s an L&L support forum that’s browsed by a lot more people than this official WordPress directory forum so in the future, that might be a good place to request help if you want broader community input.

hum, actually, if I use the L&L template in a wordpress shortcode block it works, but I use the L&L template in “custom layouts” plugin template (that I use to display search and filter results), and there it do not work !

@jbonlinea

So you have a dynamic Field id tag rendering inside a third-party shortcode rendering inside an L&L template rendering inside an L&L shortcode rendering inside a third-party “custom layouts” templating plugin block. Shortcodes in WordPress are known to go through some pretty sketchy text filters when rendering them so it sounds like there might just be too many layers of parsing and rendering and at some point along the way, things are getting broken. From the testing we’ve done so far, you seem to have determined that this isn’t an issue with L&L and is instead something happening with your custom layout plugin, so you’ll likely want to reach out to their support to resolve this. Realistically though, a better approach would be to simply cut down on the number of layers involved in your setup.

If you just put <span class="dashicons dashicons-email-alt"></span> by itself in an L&L template and try displaying that, does that work or does it show a square? If it works, then that means this isn’t an issue with dashicons and is an issue with the rest of your template. If it still displays a square even when that’s all you have in your template, then you’ll want to try the troubleshooting tests I described above to see if there’s a conflict with some other plugin or theme on your site.

If the dashicon works when it’s on its own but doesn’t work when it’s in your template, then you’ll want to troubleshoot the rest of your template. Looking at the loop in your template (<Loop type=event id="{Field id /}">) I’m assuming you intend to place this template on an event post and then you want to be able to display its fields, is that correct? If so, there’s no need for the loop, since L&L can just display fields from the current post in the base of the template. You can take a look at the getting started guide in the docs, specifically this part, for more info.

I’m noticing a couple other potential issues in your template. First, you’ve got an h6 tag inside your shortcode tag, which I don’t think is supported. Be sure to use the syntax noted in the docs when working with shortcodes. Second, I noticed you’ve got a tag inside an attribute, in p="<Field id />". That might be fine in this case since I’m not sure how L&L would be interpreting dynamic parts of a shortcode, but you might try using the curly brace syntax or some of the other syntaxes noted on that docs page.

So all that to say, test out this template to see if it works and if not, test everything I’ve explained above to see what the issue might be.

<span class="dashicons dashicons-email-alt"></span>

<h6>
  <Shortcode>
    [eo_events p="<Field id />"]%start{l j F Y à H:i}{}% - %event_venue%[/eo_events]
  </Shortcode>
</h6>

Or try this alternative shortcode syntax:

<span class="dashicons dashicons-email-alt"></span>

<h6>
  <Shortcode eo_events p="{Field id /}">
    %start{l j F Y à H:i}{}% - %event_venue%
  </Shortcode>
</h6>

Any news here @jbonlinea? If it’s still not working for you even when you use the syntax in my screenshot above in L&L, maybe you can try testing this out on a staging site by deactivating other plugins and changing your theme to something default and reactivating things one at a time to see whether some other part of your site is causing this issue for you. The fact that I seem to be able to work with dashicons in L&L seems to suggest that this isn’t an L&L issue and is instead something else going on in your template or site.

Just following up here to let you know that I’ve tested this with the latest version of L&L in both the Twenty Twenty-Three and Twenty Twenty-Four themes and I seem to be able to display the dashicons in both HTML and L&L.

Hi @jbonlinea, I haven’t played around with dashicons in L&L yet myself, but I’d be happy to help figure out what’s going on here. To speed up the process, could you share the HTML block where you’re able to successfully display the icon as well as the L&L template that’s causing you issues?

Hi @marc_o, sorry for all the delayed responses on this thread, it seems some other members of our team had a tough time figuring out how to replicate your issue.

I’ve just tested this out myself by installing L&L and the Divi theme on a barebones WordPress site and I was able to replicate the issue you’re describing. The thing with themes though is that they affect the way the whole site is displayed, not just pages where you’re using the Divi builder or a Divi template. To confirm that Divi was the root of the issue here, I deactivated my Divi theme and switched back to the default Twenty Twenty-Three theme, and then srcset in my L&L template worked as expected.

I’m not a developer so I might be wrong about this, but my hypothesis here is that Divi is doing something nonstandard with these responsive image attributes. Based on this blog post from 2019, it sounds like Divi explicitly added support for srcset on images added through their builder instead of just piggybacking on the default WordPress functionality that seems to exist in standard themes.

Even though I’m pretty sure this is a Divi issue, I’ve still passed this information along to one of our devs in case we can identify what’s unique about the way Divi handles responsive image attributes. L&L can’t support all the unique ways that other themes and plugins differ from the “WordPress way” but maybe there’s something we can do to help, or at least give you some info so that you can pass that along to Divi support.

Again, I’m not a dev, so this is all my hypothesis, but I’ll keep you informed when our dev team has a chance to look into this to see if I can shed a bit more light on the situation.

Thanks for your patience and helpful responses!

if there is a variable to have the output as links, and my problem with konstn?r looping out okay, but not beeing visible for the search tool

@niwin

Keep in mind that variables are their own thing in L&L and in any templating/programming language. In the case of L&L, variables are handled by the Set and Get tags. But I don’t think that relates to what you’re actually asking about.

It sounds like you’re hoping to work with a URL field and make that work as a link. You may want to read about how loops work as a refresher but basically, in your case, once you’ve opened your taxonomy term loop, you can display any fields you want that are supported by that loop type, like the title as you’ve already done, or the URL of the term’s archive page. Remember that L&L is just an extension of HTML, so you’d just use regular HTML syntax and fill the attribute values dynamically with L&L’s dynamic tags. The getting started guide goes through that along with some syntax tips if you need a refresher.

In your case, it might look like this:

<If loop exists taxonomy=portfolio-category post=current>
  <Loop>
    <a href="{Field url}" ><Field title  /></a>
  </Loop>
<Else />
  Do something else.
</If>

As far as data “not being visible for the search tool,” I don’t think that’s something L&L can help you with. L&L doesn’t create data, it just allows you to adjust how it’s displayed. If your taxonomy terms aren’t showing up in your search, it sounds like you’ll want to modify your site’s search settings.

• This reply was modified 1 year, 1 month ago by Ben @ Team Tangible. Reason: added a note about search functionality

Hi @niwin, kudos on doing some serious troubleshooting there! Sorry our folks ghosted you on this thread after Eliot’s initial reply.

I think the source of this mix-up is probably the fact that Eliot introduced the concept of the Taxonomy loop shortcut which can be useful and succinct, but kind of obscures what’s going on. If you’re just starting out, that obscuration can make it a little tough to figure out what’s going on and troubleshoot it. I’d recommend playing around with the Loop tag syntax rather than the Taxonomy tag for now.

It seems like what you’re trying to do with <If check="{Taxonomy teknik}"> is to check if a taxonomy term loop exists and, if so, display the term(s). I see that Eliot suggested that syntax, but if I’m understanding the docs right, the Taxonomy tag is a “shortcut for creating a taxonomy term loop” so you couldn’t just use Taxonomy teknik as-is. Since Eliot suggested it, I imagine it’s an undocumented feature, but I couldn’t help with that since only Eliot knows how that works haha!

In any case, I’d ignore that shortcut for now and take a look at the Loop tag documentation, specifically the feature that allows you to check whether a loop exists. Using that non-shortcut syntax, you’d end up with a conditional part of your template that probably looks something like this:

<If loop exists taxonomy=portfolio-category post=current>
  <Loop>
    <Field title  />
  </Loop>
<Else />
  Do something else.
</If>

What I’m doing there is instead of just directly looping through the taxonomy terms as you mentioned you were able to successfully do with <Loop taxonomy=portfolio-category post=current>, I’m instead passing that same information to the If tag to first check if the loop returns anything and if it does, then I actually start the loop and display stuff, and do something else if there’s no data in the loop.

Hope that helps get you back on track with this!

By the way, if you need help with other issues down the road, another option is to make a post on the official L&L forum. It’s a much more active community so you might get faster support there on future support requests.

Thanks for the clarification, I thought you were specifically referring to the sorting dropdown based on your screenshot.

As far as how you’d create a full WooCommerce product grid, you might want to check out this video since there are some examples in there of several of the ways you could create and customize a product loop.

To really quickly go over the pieces you mentioned, WooCommerce calls its custom post type product so you’d simply loop through all your products with the Loop tag with <Loop type=product />. Getting the data itself just requires knowing the field names so I found a list of them here that might be helpful to you. Within the Loop tag, you’d just write <Field title /> or <Field price /> to get the data about your products and then you can wrap those in some divs with CSS classes or anything you’d like to get the layout just the way you’d like it. I mentioned some of your options as to how you might achieve the sorting drop-down in my comment above. In the video linked to, I mentioned how you could add a dynamic add-to-cart link so definitely check that out. The only other thing that might be complicated would be the quantity counter, which I imagine would need to be done in JS.

You asked how you’d go abut creating a “custom design” and while I’d love to help you there, L&L simply handles getting the data from your database. The layout and styling with this plugin are done using regular HTML and CSS. I can’t give you a full front-end development course within this plugin’s support forum so you’ll have to do some Googling to learn how to work with those languages.

After you’ve watched the video I linked and gotten an idea of how you could go about creating your product grid, you can download the pre-styled template from the video using the instructions at this link. The template you’re looking for is called “Advanced – Styled blog post grid.”

On the other hand, if you’re not interested in learning the L&L language, then this plugin might simply not be for you. If that’s the case, then you might want to look into other plugins that handle all the layout and styling for you within the builder interface. There are hundreds of no-code plugins that are specifically designed to create WooCommerce product grids so you’ve got lots of options. L&L is really intended for those moments when you need total control and customization.

I hope that helps get you on the right track!

Thanks for your thorough and thoughtful response! I think that to some extent we’re on the same page; we recognize that the majority of WordPress users are interested in drag-and-drop no-code solutions. That’s why we’re working on Tangible Blocks which is going to offer a library of blocks that work across many of the popular WordPress page builders and that includes much of the dynamic functionality of Loops & Logic. These blocks will be built using L&L code, but there will be a library of ready-made blocks for people who don’t want to touch a single line of code. We’re also working on a solution that would allow the creation of site-wide style options (similar to those available on FSE themes but page builder agnostic) so that users will be able to get pre-styled dynamic blocks without needing to mess around with HTML or CSS. It sounds like that’s the type of solution that you’re looking for, so you might want to sign up for the beta at the link I shared above.

In contrast, Loops & Logic itself was never intended to be a no-code tool. Loops & Logic is built around code and will never be useful to someone who isn’t interested in learning any code at all. The main benefit of the L&L templating language is that it makes it possible to do things that simply aren’t possible with no-code solutions. Essentially, it allows you to do things that used to require learning PHP and React, but instead of spending weeks or months becoming proficient in those languages, L&L can be learned in a matter of hours.

So what I’m trying to say is that I hear you loud and clear and I also recognize the fact that there are far more users interested in no-code products than there are who are interested in low-code solutions like L&L. That’s why we’re working on Tangible Blocks to meet that need. Tangible Blocks will be the no-code option, Loops & Logic will be the low-code solution that provides slightly more flexibility for those who are willing to learn the language.

I hope that all makes sense and I apologize if it sounded like I was arguing with your request! I agree with you and we are planning on implementing a variety of solutions. We hope to continue to lower the barrier to entry for dynamic site-building by adding more snippets, adding helpful recommendations within the code editor to make it easier to write L&L markup, and developing Tangible Blocks as a separate no-code plugin for users that simply want drag-and-drop convenience. I hope that all makes sense and thanks again for your feedback!

Hi @gamicord! All of those components you linked to are static, meaning that they generally use a mix of HTML, CSS, and Javascript to display some content on a page of your site. The good news is that the L&L templating language also uses HTML, CSS, and JS to display and style items on a page, so if you like any of the components you shared in your links, you can probably use them inside your L&L templates! The real power of L&L doesn’t come from just placing static pre-styled components on your site but instead from being able to make your site’s content dynamic. In other words, if you like one of the button components listed on that Bootstrap site, you can already just copy-paste the HTML and CSS for that button and then use L&L to make the button’s text dynamically display the title of the current post with a dynamic tag like <Field title /> or you could make its URL dynamically link to the profile of the current user with something like <User edit_url />. You might want to take a look at the getting started guide if you want to get a more solid idea of where L&L will fit into your workflow.

That being said, even though Loops & Logic will never be primarily intended for users who don’t want to touch code at all, we certainly hope to add more snippets in the future so we’ll take your feedback to heart. We’re also working on a plugin that uses the power of the L&L language to create page builder blocks, so those will be incredibly useful if you don’t want to learn to write L&L code; you can just use other people’s blocks. You can sign up to be notified when that launches on the L&L site.

Thanks for your interest and best of luck as you learn to work with Loops & Logic!

Hi @gamicord, thanks for giving L&L a try and I’m sorry to hear that you’re 100% confused! The main purpose of this plugin is to more easily work with the data that’s in your site’s database and display it or work with it on the front end of your site. It essentially takes a lot of the stuff you’d usually do with PHP (querying data from the database, evaluating logic, rendering data, etc.) and allow you to do that with simple HTML syntax instead. Each of the dynamic tags in L&L offers different functionality, so if you want an overview of what each tag can do, you can see an overview in the documentation here.

I assume the functionality you’re trying to replicate in the screenshot is the dropdown that allows users to filter content on the front end of your site. L&L templates get rendered when the page loads, so when it comes to adding interactivity to the front end of your site, that’s generally something you’d use Javascript for or another plugin. In other words, you can use L&L to create a dynamic grid of all your posts and then you can use Javascript to hide or show certain of those items based on how the user interacts with your site. If you’re not familiar with JS, I’ve also seen people use L&L to create their dynamic post grid and then use a plugin like?FacetWP?to handle the front-end filtering side of things. This requires some PHP tinkering to get it set up so it’s not the simplest approach, but FacetWP is really powerful so you get lots of functionality there. The other approach I’ve seen people use is instead of using a dropdown, you could create buttons that link to a page (maybe even the current page) with URL query parameters like?mysite.com/page/?category=type1. Then in your L&L template, you could use the?Url?tag’s?query?attribute?to modify your L&L template based on the value of the parameter in the current URL.

I hope that helps explain what parts of this you will be able to use L&L for and what parts you won’t. Thanks for your question!

@birous I heard back from the dev, it seems that this behavior wasn’t intended/anticipated and a fix has been implemented. It will make its way into the plugin version on the WordPress repo eventually but if you want to grab the latest version of the plugin that includes the fix to your issue before it comes out through a version update, you can use this link to download the zip file. I’ve just tested it on my end and it seems to be working as expected. Let me know if that fixes your issue!

Also, I thought you might be interested in knowing that the issue you initially noted with the old ignore_sticky_posts parameter wasn’t actually an oversight in the development of L&L, it’s actually an issue with the WordPress core. Even Gutenberg itself doesn’t make sticky posts sticky anywhere other than when is_home() is true. So I guess with this new sticky feature, L&L works more sensibly than WordPress itself. Crazy! Anyway, I just thought I’d share since I thought that was interesting.