[Resolved] Show custom post type content on a popup

[Author]

Posts

[marF]

Hi!
I would like to be able to display the content of a custom post type in a popup... is this possible? With which plugin?
If so, can I keep the template design of this custom post type?
On the website I have a workshop page, and each workshop has its own teacher related. I want the teacher's file to be displayed in a popup from the course page.
You will tell me if it is possible and how I should do it.
Thanks!

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

If I understand correctly, you'd like to keep the design/template for the single 'Workshop' post, that is coming from the theme. And in that display the related teacher posts, in the popup.

This is possible, but, I'll need to see exactly how the theme and different plugins are set up in the backend, to suggest the best way to achieve this.

Can you please share temporary admin login details, along with the link to an example workshop page?

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing the access details.

Looking into the installed theme and plugins, I couldn't find any built-in feature that could open a link/iframe into a popup.

If you'd like to add this feature, without using any extra plugins, you can use a script like the one used in this demo:
hidden link

These will be the steps:

1. In the 'Template for Products', include a 'Fields and Text' block at the bottom to include the following code:

<script src="<em><u>hidden link</u></em>" id="iframe-lightbox-js"></script>
<link rel="stylesheet" href="<em><u>hidden link</u></em>">
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
	
	[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) {
	el.lightbox = new IframeLightbox(el);
	});
	
});
</script>

This will load the scripts and styles needed for this popup to work.

2. Next, replace the 'Single Field' block that is currently showing the related teacher's link and in its place add a 'Fields and Text' block, to generate the related teacher's link manually, with attributes class="iframe-lightbox-link" data-scrolling="true":

<a class="iframe-lightbox-link" data-scrolling="true" href="[wpv-post-url item='@teacher-product.parent']">[wpv-post-title item='@teacher-product.parent']</a>

When this link will be clicked, it will show the single teacher's page, inside a popup.

I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

[marF]

Hi Waqar,

thank you for your reply.

I was trying to apply your idea to "Template for Products" it won't let me in... so far it was working fine and now I get a critical error.

What could be going on?

Thanks

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

I tried the same steps and the link is added and working as expected now.
( screenshot: hidden link )

Not sure what went wrong when you were editing the template, but I was able to make these changes, without any errors.