A friend asked me a demo to use iFrame in PUG file. To make the session short I used zomato widgets code and very little of PowerShell scripts. All I used is Invoke-RestMethod cmdlet to retrieve information. This is just a start – so all we have is a Zomato API and
With no wait let us explore the solution. First and foremost get the API Credentials – I opted for free through which I can use 1000 calls per day and placed the key in config.xml file (For Demo). Using the below snippet
$Key = [xml](Get-Content .\config.xml) $Header = @{ 'User-Key' = $Key.production.key } $r = Invoke-RestMethod -Method Get -Uri "https://developers.zomato.com/api/v2.1/categories" -Headers $Header $r.categories.categories
we get the illustrated output
Okay, I need to show something fancy right? And for that I didn’t do much coding,. instead I grabbed the widget and used the iFrame element. GO GET YOURS (Zomato Widgets)
Restaurant Search
doctype html head meta(charset='UTF-8') meta(name='viewport', content='width=device-width, initial-scale=1.0') meta(http-equiv='X-UA-Compatible', content='ie=edge') title Document body(style="text-align: center") h1 Restaurant Search .widget_wrap(style='width:800px;height:400px;display:inline-block;') iframe(src='https://www.zomato.com/widgets/res_search_widget.php?city_id=604&theme=dark&widgetType=custom&sort=popularity', style='position:relative;width:100%;height:100%;', border='0', frameborder='0')
Nearby Restaurants
doctype html head meta(charset='UTF-8') meta(name='viewport', content='width=device-width, initial-scale=1.0') meta(http-equiv='X-UA-Compatible', content='ie=edge') title Document body(style="text-align: center") h1 Nearby Restautants .widget_wrap(style='width:800px;height:400px;display:inline-block;') iframe(src='https://www.zomato.com/widgets/res_search_widget.php?entity_id=4&entity_type=city&city_id=4&theme=dark&hideCitySearch=on&hideResSearch=on&widgetType=custom&sort=rating', style='position:relative;width:100%;height:100%;', border='0', frameborder='0')
Restaurant Collection
doctype html head meta(charset='UTF-8') meta(name='viewport', content='width=device-width, initial-scale=1.0') meta(http-equiv='X-UA-Compatible', content='ie=edge') title Document body(style="text-align: center") h1 Restaurant Collections .widget_wrap(style='width:800px;height:400px;display:inline-block;') iframe(src='https://www.zomato.com/widgets/all_collections.php?city_id=4&theme=dark&widgetType=custom', style='position:relative;width:100%;height:100%;', border='0', frameborder='0')
Excited to see the output? Okay, here is a sneak peak!
Cool Right? Thats an example to use the iFrame! Now, let’s come to PowerShell and Query Categories and City Information.
Get Categories
$Key = [xml](Get-Content .\config.xml) $Header = @{ 'User-Key' = $Key.production.key } $r = Invoke-RestMethod -Method Get -Uri "https://developers.zomato.com/api/v2.1/categories" -Headers $Header $r.categories.categories
Get City Information
param ( $CityName ) $Key = [xml](Get-Content .\config.xml) $Header = @{ 'User-Key' = $Key.production.key } $r = Invoke-RestMethod -Method Get -Uri "https://developers.zomato.com/api/v2.1/cities?q=$($CityName)" -Headers $Header $r.location_suggestions
Let me show you how to search by city and showcase the country flag
City Info (Get)
doctype html style. input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } h3 Your City Name div form(action='/CityInformation' method="post") label(for='cityName') Search City input#loginID(type='text', name='CityName', placeholder='City Name...') input(type='submit', value='Submit')
City Information (Post)
doctype html style. #myStyle { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } #myStyle td, #myStyle th { border: 1px solid #ddd; padding: 8px; } #myStyle tr:nth-child(even) { background-color: #f2f2f2; } #myStyle tr:hover { background-color: #ddd; } #myStyle th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #4CAF50; color: white; } h3 Zomato City Information table#myStyle tbody tr th ID th City Name th Country Name th Flag each r in result tr td=r.id td=r.name td=r.country_name td img(src=r.country_flag_url, alt="Red-X")
Here we go!
Sample Code is available in Github
Enjoy PowerShell – In my next blog I will try to get Uber Eats 🙂