custom form to open in lightbox

Permalink 1 user found helpful
I need to create an Enquiry form that opens in a light box when the text link 'Enquiry' is clicked.

Are there any built in features (Elemental; Concrete 5.7) that my allow me to do this?

Thanks

View Replies: View Best Answer
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi PJSAndo,

In concrete5 5.7, Magnific Popup is included as an asset.
http://dimsemenov.com/plugins/magnific-popup/...

You can require the asset in your theme or block.
PJSAndo replied on at Permalink Reply
Thanks
PJSAndo replied on at Permalink Reply
Re magnific-popup. I've had a look at the documentation, but can't quite figure out how to get the popup to show.

All I need to do is to have a link that opens the popup and includes a Google My Map.

What would be the first few steps to get this going?

Cheers
P
MrKDilkington replied on at Permalink Reply
MrKDilkington
This is only for demonstration. You should be making a block for this instead. Inlined code with hard coded links is fragile and limited.

- you need to require the Magnific Popup assets
<?php
View::getInstance()->requireAsset('javascript', 'core/lightbox/launcher');
View::getInstance()->requireAsset('javascript', 'core/lightbox');
View::getInstance()->requireAsset('css', 'core/lightbox');
?>

- a link to to the map
<!--
Google My Map embed code
<iframe src="https://www.google.com/maps/d/embed?mid=z-k-mg8oyDFg.kCEYlosJrcWc" width="640" height="480"></iframe>
- the src for the <iframe> is used as the href for the popup link
-->
<a class="popup-gmaps" href="https://www.google.com/maps/d/embed?mid=z-k-mg8oyDFg.kCEYlosJrcWc">Google Map Directions</a>

- the jQuery to call Magnific Popup
<script>
$(document).ready(function() {
    $('.popup-gmaps').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false
    });
});
</script>
PJSAndo replied on at Permalink Reply
Hi MrKDilkington,

Thanks for this. Just about got round to trying this out.

I'm pretty much up to speed with creating my own blocks, but struggling a touch with where this code should go.

The last bit of code I guess (from what I've read) can go in a sub-folder of the block folder called js and will be called automatically from there.

The second bit of code I can put in view.php

But what about the first chunk of code? I guess I can put it in either controller.php or view.php. If it were placed in view.php would the code be the same, as I notice that there is reference to view within the requireAsset (View:: getInstance() etc.

Thanks
P
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
The assets would be required in the controller using view().
public function view()
{
    $this->requireAsset('javascript', 'core/lightbox/launcher');
    $this->requireAsset('javascript', 'core/lightbox');
    $this->requireAsset('css', 'core/lightbox');
}

The Google My Map popup link would be put in view.php. Ideally you would add a form (form.php) to the block and include an input to enter the Google My Map iframe src. The iframe src would be echoed as the href value in the link in view.php. This would stop the link href value from being hard coded.
<a class="popup-gmaps" href="<?php echo $googleMyMap; ?>">Google Map Directions</a>

The script could be placed at the end of view.php.
byvictoria replied on at Permalink Reply
byvictoria
Hi @MrKDilkington,

Thank you for your tutorial...
I tried to apply this to the Image block, to make it work as a button, where when you click on it, a pop up window with another page opens.
The block is opening the page fine, but not in an iframe like expected...
Could you tell me if I did something wrong?
This is what I did:

I made a new block imagebutton, (which worked fine) and then I followed your directions:
in controller.php,
public function view() {
        $f = File::getByID($this->fID);
    $this->requireAsset('javascript', 'core/lightbox/launcher');
    $this->requireAsset('javascript', 'core/lightbox');
    $this->requireAsset('css', 'core/lightbox');
        if (!is_object($f) || !$f->getFileID()) {
            return false;
        }

in view.php
if ($linkURL):
        print '<a class="popup-gmaps" href="' . $linkURL . '">';
    endif;

and I added the script at the end like you said:
<script>
$(document).ready(function() {
    $('.popup-gmaps').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false
    });
});
</script>
<?php } ?>
byvictoria replied on at Permalink Reply
byvictoria
I think I know what it is, I forgot to call the script in here:
if ($linkURL):
        print '<a class="popup-gmaps" href="' . $linkURL . '">';
    endif;


Could anybody tell me the sintaxis for this?
Thank you!
MrKDilkington replied on at Permalink Reply 1 Attachment
MrKDilkington
@byvictoria

It is not recommended to modify core files.

You can instead create a custom template for the Image block.

I have created this custom template for you and attached it to this reply.

Unzip this file into your blocks folder:
application\blocks

You should have this path after unzipping:
application\blocks\image\templates\popup\view.php
byvictoria replied on at Permalink Reply
byvictoria
Thanks a lot!
I have downloaded the file and unzipped, but the page won't load, I get this error in the console:
NetworkError: 500 Internal Server Error
If I delete the block, the page loads fine...
I have cleared the cache, I don't know what else to try...
Do you know what can it be?
byvictoria replied on at Permalink Reply
byvictoria
Hi again @MrKDilkington,
For the record, I replaced the view.php in my image duplicated block, which I named imagebutton (application/blocks/imagebutton/view.php), and it worked, the link opens in a pop-up window.
But your way through the block template seems so much cleaner, I would like to do it like that if I could find out why I am getting the error.
Thanks again for your valuable input!
V.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@byvictoria

Do you have other files and folders inside the image folder?
application\blocks\image
byvictoria replied on at Permalink Reply
byvictoria
@MrKDilkington,
No, there is nothing but the templates folder...
MrKDilkington replied on at Permalink Reply
MrKDilkington
@byvictoria

"I have downloaded the file and unzipped, but the page won't load"

At what point does the page stop loading?

Is it after you apply the custom Popup template to an Image block?
byvictoria replied on at Permalink Reply
byvictoria
@MrKDilkington
as soon as I unzip the file, the page won't load. After unziping, when I refresh the page the site is blank, it wont load at all, and Firefox console would say server error 500...
MrKDilkington replied on at Permalink Reply
MrKDilkington
@byvictoria

Where are you unzipping the file?
byvictoria replied on at Permalink Reply
byvictoria
@MrKDilkington
I copied the path from the file manager:
/application/blocks/image/templates/popup/view.php
PJSAndo replied on at Permalink Reply
Thought you may be able to help with this...

I used magnific popup for an enquiry form which has been working fine for ages. But is now not working. Please seehttp://gotimetrekkers.com/gbg027-lost-monuments-peak-district... (click on Make an Enquiry). It goes to a 404.

I think it is something to do with the link putting gotimetrekkers/ before .ccm-page.popup-enquiry-form, as I remember I had a similar problem last year and I think the solution involved just having .ccm-page.popup-enquiry-form which seemed to work as I remember...

Help appreciated!