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

This topic has 14 replies, 3 voices, and was last updated 3 years, 9 months ago by Fernando.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
July 13, 2022 at 7:46 am #2281561

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

July 13, 2022 at 9:25 am #2281832

David
Staff
Customer Support

Hi there,

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

July 13, 2022 at 10:51 am #2281875

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

July 13, 2022 at 5:12 pm #2282070

Fernando
Customer Support

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.

July 14, 2022 at 1:00 am #2282287

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

July 14, 2022 at 1:12 am #2282297

Fernando
Customer Support

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.

July 14, 2022 at 1:30 am #2282307

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.

July 14, 2022 at 1:51 am #2282319
Fernando
Customer Support
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!
July 14, 2022 at 2:30 am #2282355

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

July 14, 2022 at 2:55 am #2282376
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.
July 14, 2022 at 3:35 am #2282403

David
Staff
Customer Support

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

July 14, 2022 at 5:05 am #2282493
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
July 14, 2022 at 8:53 pm #2283152

Fernando
Customer Support

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.

July 15, 2022 at 12:21 am #2283258

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 🙂

July 15, 2022 at 12:30 am #2283265

Fernando
Customer Support

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

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

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

Popular Articles

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

Popular Articles

Start building better websites today.