Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to pass Query Params?

See original GitHub issue

Hey guys,

I’ve been working on a project using Zoid for a bit now but I’m a bit hung up on how to properly pass query parameters.

Do I pass them in the URL of the page that the xcomponent is being rendered on? I’m passing them on the parent page where the component is being rendered such as: www.example.com/index.htm?make=honda&model=civic&maxprice=20000

However, I’m getting an error the make is required so doesn’t seem like the props are being consumed.

What am I missing here?

var MyLoginXComponent = xcomponent.create({
    // The html tag used to render my component

    tag: 'my-login-component',

    // The url that will be loaded in the iframe or popup, when someone includes my component on their page

    url: xcomponent.getCurrentScriptDir() + '/login.htm',

    dimensions: {
        width: '500px',
        height: '1000px'
    },

    props: {
        make: {
            type: 'string',
            queryParam: true // ?email=foo@bar.com
        },

        model: {
            type: 'string',
            queryParam: true
        },

        maxprice: {
            type: 'string',
            queryParam: true
        }
    },


    scrolling: true,
    autoResize: true
});

JS File

<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
    <link rel="stylesheet" href="../../common/login.css" />

    <!-- Pull in xcomponent and the login component we defined -->

    <script src="../../../dist/xcomponent.js"></script>
    <script src="./login.js"></script>
</head>

<body>
        <div id="vehicleDisplay"></div>
    <script>
        var make = window.xprops.make;
        var model = window.xprops.model;
        var maxPrice = window.xprops.maxprice;
        console.log("Hey - Value: ", {
            make: make,
            model: model,
            maxPrice: maxPrice
        });
    </script>

</body>

Parent Page rendering xComponent

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
    <link rel="stylesheet" href="./common/index.less" />
	<script src="example.com/xcomponent.min.js"></script>
    <script src="example.com/login.js"></script>
</head>

<body>

    <h3>Best bang for your buck | Honda Vehicles</h3>

    <div id="container">
		<script type="application/x-component" data-component="my-login-component"></script>
	</div>
</body>

Issue Analytics

State:
Created 5 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

1reaction

bluepnumecommented, Jun 7, 2018

You’d probably want to do something like:

<script>
    window.queryParams = parseQueryParams(window.location.search);
</script>

<script type="application/x-component" data-component="my-login-component">
{
    make: window.queryParams.make,
    model: window.queryParams.model,
    maxprice: window.queryParams.maxprice
}
</script>

(I know this is a little janky. I’m not the hugest fan of the <script> style integration; considering removing it in a future major release in favor of just MyLoginXComponent.render() since it doesn’t add a whole lot of value)

0reactions

bluepnumecommented, Jun 8, 2018

Cool! Let me know if any more questions come up 😃