Passing a variable to popup page (using magnific popup api))


I am using minimal-mistakes theme which supports pretty awesome features.

I would like to use popup (magnific popup) window which can be used in multiple different pages as an template that shows different text depending on page’s frontmatter variables.
The workflow as below
Main page (There is popup link using Magnific popup API with the “Ajax” type) > Popup (containing an Include fragment with passing variable from the Main page’s front matter variable) > the include fragment.

I has encountered one issue. I want the popup page to refer to the Main page’s frontmatter variable such as tab_ref.ref1.model, but it is not acceptable to take this variable to the popup page as the popup page also has front matter (layout: popup).

So, my question is that, is there way to pass the Main page variable to the popup page other than directly defining the variable to the popup page’s front matter? Because a single popup pages is used in over 20 pages as template and there are at lease 30 popup layout pages.

For your reference, I copied and pasted my code here.

Thank you for reading, and have a great day.

Main page which Popup page should refer to

layout: archive
lang: en
ref: xl430-w250
        model: xl430-w250
        product_group: dxl_xl430
        model: xc430-w150
        product_group: dxl_x430
        model: xh430-w210
        product_group: dxl_x430


layout: popup

# Return Delay Time

{{ page.tab_ref.ref1.model }}
{{ page.tab_ref.ref1.product_group }}

{% include en/dxl/ passed_ref =page.tab_ref.ref1.model %}

Include fragment

{% assign dxl_model = include.passed_model %}

{{ dxl_model }}

{% if page.product_group=='dxl_mx2' or page.product_group=='xl330' or page.product_group=='dxl_x430' or page.product_group=='dxl_xl430' or page.product_group=='dxl_xw540' or page.product_group=='dxl_x540' or page.product_group=='dxl_pro' or page.product_group=='dxl_pro_a' or page.product_group=='dxl_p' or page.product_group=='rh_p12_rn' or page.product_group=='rh_p12_rna' %}
{% assign return_delay = "9" %}
{% else %}
{% assign return_delay = "5" %}
{% endif %}

After the DYNAMIXEL receives an Instruction Packet, it delays transmitting the Status Packet for Return Delay Time({{ return_delay }}).
For instance, if the Return Delay Time({{ return_delay }}) is set to ‘10’, the Status Packet will be returned after 20[μsec] when the Instruction Packet is received.

|Unit| Value Range    | Description     |
| :------------: | :------------: | :------------: |
| 2[μsec] | 0 ~ 254 | Default value ‘250’(500[μsec]), Maximum 508[μsec] |

It sounds like the key bit is you want to define data on one page and reference it on another. I would avoid talking about layouts here.

If you have with frontmatter

And you want to use a value on and display it or pass to includes etc.

Any data shared across pages like that make sense to put in a data file.

Like in your config.

my_shared_value: 123

Then reference on any page or layout or includes as

{{ site.my_shared_value }}

Or store it in a _data/my_shared_values.yml data file

my_shared_value: 123

So you can do

{{ }}

I hope I understand correctly. There is a lot of info in your question so if you could narrow it down to one sentence that helps. Like how to share data across pages.

It is possible to lookup a page another way

Something like


But that is an array so you have to use a where filter to get the page you want.

It is cleaner to store in a central place and use on each page that needs that data as in my previous answer

Hi Michael,

Thank you for your advice, that was very useful advice. Unfortunately, the data file may not work for my site, as the popup page is reusable and should show different information depending on the variable from one another page where call the popup page.

I narrowed down the question below.

So I want to know how to pass a defined variable on one page (i.e, )to one another page (i.e, Pop by just directly passing variables.

[Background information (You don’t have to read)]

My goal is to pass variables from one page to popup page via link which open the popup window.

When I click Return Delay Time link, popup window (using Ajax magnificPopup API in JavaScript) will be displayed on the same page.

The main issue is that the popup page can not use the variables defined on Front Matter (such as page.url) or any variables used in the page where the popup link is clicked.

Front Matter

    model: xl430-w250
    product_group: dxl_xl430

[Return Delay Time](/docs/en/popup/x/control_table_return_delay_time){: .popup}

Thank you,

Okay thanks.

Are you sure you need a separate popup page?

It looks like based on what you linked that you use JS to add a popup to any page so when you click a button you get a popup window without leaving the page. If you send the user to another page that is not really a popup.
And you can use a layout or includes file to put your popup gallery for example on all pages.

Can you explain why you want a dedicated popup page?

If you have one pop up page but many pages that link to it, a statically generated pop up page can’t know which page linked to it and show different content.
Think of your site in terms of HTML. A static pop-up.html page can’t know where you came alone without JS.

If you want a page to change content depending on where you came from, there are a few ways you can do it like passing a variable in query params and looking up using JS. Or having the pop up display on each page itself without a navigation step, as covered above.