[Resolved] Using GB query loop to create a downloads section which requires email signup

[Gary]

Hi Support

I’m looking for a bit of guidance and wondering if this is possible within the realms of current versions of GP/GB.

I’ve got a custom post type called downloads and I’m using the query loop block to list out each download which is working great. What I’d like to do though is have a button in the query loop item to download a file which would open a form in a modal for the user to enter their email first.

I’ve got the form bit working and providing the correct file for download once they submit details successfully, but I can’t figure out how to achieve the popup modal part within the query loop. I was hoping to use the lity js library as it is lightweight and I’ve used it succesfully for other sites.

But for that to work inside the query loop each download would need a unique link ID (which I’ve mananged to do with a custom shortcode) and a corresponding element containing the form with the same ID to open it in a modal.

As it isn’t yet possible to dynamically populate classes or an ID in the editor I’m wondering if I’ve hit a limitation? I would therefore welcome any thoughts or ideas on how this could be acheived. For example I did wonder if there was any GB filters for the query block or it’s inner content that I could utilise to give each element I want to open in a modal a unique ID to allow lity js to work?

Any input would be really appreciated as I want to avoid more plugins if this can be acheived within the GP/GB ecosystem.

Thanks

[David]

Hi there,

what if you created a shortcode that grabbed the unique ID from the post meta and printed the button HTML?

[Gary]

Hi David

Sorry, when I said I’ve got a shortcode for the ID that was the button element as a modal trigger.

What I’m struggling with is adding that same ID to an element which contains the content I want to appear in the lity modal.

Hope that makes sense?

Thanks

[Fernando]

Hi Gary,

May we know what “adding the ID” specifically means?

IDs should be unique for HTML elements.

Moreover, to understand the context better, do you have a sample page we can look at where we can see how lity modal works?

Hope to hear from you soon.

[Gary]

Hi Fernando

The ID will be unique and in this instance what I’m trying to do is to add a unique ID to a gb container based on a dynamic value.

The shortcode I have for the button output will have the ID as an anchor link.

Lity js requires this setup so it can target a specific element to open in a modal, in this case the form to access the download.

Thanks

[Fernando]

How are you adding/retrieving this dynamic ID? Can you share the code?

We can try modifying the HTML of the Container Block through a filter.

[Gary]

Hi Fernando

I’ve only been able to get the ID via a shortcode to create button with an anchor link.

The bit I’m struggling with is how to add the same ID dynamically to the corresponding container.

If there’s any filters that could achieve this that would be perfect.

[Fernando]

Well, we’ll need to know where this ID is coming from or how it’s generated.

If this ID is a Post meta for instance, you can render_block filter for instance.

To add an ID to the Container Block, you can add class: add-dynamic-id to the class list of the Container Block, and then add this snippet:

function db_rerender_container_add_id( $block_content, $block ) {
	if ( ! is_admin() && ! empty( $block['attrs']['className'] ) && 'add-dynamic-id' === $block['attrs']['className']  ) {
			
			$my_search='class="';
			$my_id='testid';
			$my_replace='id="'. $my_id . '" class="';
			$new_content = str_replace($my_search, $my_replace, $block_content);
			return $new_content;
	} 
    return $block_content;
}
 
add_filter( 'render_block', 'db_rerender_container_add_id', 10, 2 );

Replace $my_id with your dynamic id.

Hope this clarifies!

[Gary]

Hi Fernando

Thanks, that filter works but there’s a slight problem in that it adds the id to the container and all children nested within it.

Do you know if there would be anyway to restrict the filter to just add the ID to parent container only?

Thanks

[Gary]

Hi Fernando

Just to update, I think I have this working now. I just made the search on the class more specific and included class of the specific gb-container I’m targeting e.g now updated to:

function gt_rerender_container_add_id( $block_content, $block ) {
	if ( ! is_admin() && ! empty( $block['attrs']['className'] ) && 'add-dynamic-id' === $block['attrs']['className']  ) {
			
			$my_search = 'class="gb-container gb-container-633f6be6';
			$download_id = get_field('download_id');
			$my_id = 'download-'. $download_id;
			$my_replace = 'id="'. $my_id . '" class="gb-container gb-container-633f6be6';
			$new_content = str_replace($my_search, $my_replace, $block_content);
			return $new_content;
	} 
    return $block_content;
}
 
add_filter( 'render_block', 'gt_rerender_container_add_id', 10, 2 );

As this container is within the query loop the container class should in theory stay the same for each item so this specific targeting should hopefully work for my needs.

I do think this highlights how it could be very handy to set attributes on GB blocks dynamically using the dynamic data settings. Hopefully this is something you guys will consider in a feature release?

Thanks for your help on this and great to know I can update block attributes in this way.

[David]

Glad to hear you found a solution.
Dynamic Attributes are real tricky, but its on our list 🙂

[Gary]

Hi David

Unfortunately I’ve not quite solved this due to what looks to be a bug with GB buttons and custom attributes when dynamic data is set inside the loop. I’ve flagged this on GB github.

In the meantime I’m turning back to my shortcode to print the button code. However I can’t seem to get the value from the post meta for the ID, it seems the shortcode is using the ID of the page the query loop is on and not the post items within the loop!

Do you know how I can get the ID of the query loop items in the shortcode? If it helps this is what I have currently:

function gt_download_id() {
	$postID = get_the_ID();
	$downloadID = get_field('download_id', $postID);
	$id = '#download-'.$downloadID;
	$buttonCode = '<div class="gb-button-wrapper gb-button-wrapper-download"><a href="' . $id . '" class="gb-button gb-button-primary" data-lity="">Download</a></div>';
	return $buttonCode;
}
add_shortcode('download_id', 'gt_download_id');

Thanks

[Fernando]

Hi Gary,

There’s already a fix scheduled for GB Pro 1.3.0.

For now, is it possible to add the attributes in your code here: https://generatepress.com/forums/topic/using-gb-query-loop-to-create-a-downloads-section-which-requires-email-signup/#post-2282376 instead of using a shortcode?

Kindly let us know.

[Gary]

Hi Fernando

Thanks for letting me know the fix is scheduled.

In meantime it also occurred ti me I could use the same solution as container for the button too until
there’s a fix, so I now have another filter adding the attributes I need and it is all working great now.

Thanks for your help and for bearing with me! Awesome support as always 🙂

[Fernando]

You’re welcome Gary! Hope you have a nice day! 🙂

[Author]

Posts