Handlebars: disable some content based on the url - node.js

I have a basical layout with a sidebar. I want to hide the sidebar when I am on /users/profile. How can I do it using the if helper? Is there a way to get the current file name?
Here is the code:
<div class="wrapper">
{{#if user}}
<nav id="sidebar">
<div class="sidebar-header">
<h3>Options</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<h1>
Home
</h1>
</li>
<li>
<h1>
Chat
</h1>
</li>
<li>
<h1>
About us
</h1>
</li>
</ul>
</nav>
{{else}}
{{/if}}
With the current code if a user is logged in the sidebar is showed , otherwise it is hidden. I want the same behaviour also if I am on users/profile.

Your routing is handled by Node.js. Somewhere in your Node.js you probably have instructions on what to do when the user opens /users/chatlist or /users/search, e.g. you select which template to render. Once you know the request is for route /users/profile, you use a JSON payload for your handlebars to properly render the page. You can customize that payload as you wish, including adding some helper fields. For example it may look like:
{
user: { ... },
sidebar: {
visible: false
}
}
Then inside your template, you may use it for a conditional check, like:
{{#if sidebar.visible}}
<nav id="sidebar">
...
</nav>
{{/if}}

Related

Remove tracking URL parameters from WordLift Faceted Search (Related Articles)

Can we remove the tracking urls parameters ?utm_source=wordlift&utm_medium=wl_faceted&utm_campaign=recommendations used in the related article section?
Yes, WordLift Faceted Search uses a Handlebars template.
The default template looks like this:
<script id="faceted-search-template" type="text/x-handlebars-template">
<aside class="wl-cloud-widget-wrapper wl-faceted-wrapper wordlift-cloud-widget wordlift-faceted">
<h3>{{title}}</h3>
<nav class="chips">
{{#each entities}}
<span class="chip {{activeClass}}" data-referenced-posts="{{referencedPosts}}"
data-id="{{id}}">{{label}}</span>
{{/each}}
</nav>
<section class="cards">
{{#each posts}}
<article class="card" data-post-id="{{ID}}">
<a href="{{permalink}}?utm_source=wordlift&utm_medium=wl_faceted&utm_campaign=recommendations">
{{#if thumbnail}}
<div class="thumbnail" style="background-image: url('{{thumbnail}}');"></div>
{{/if}}
<div class="card-content">
<header class="title">{{post_title}}</header>
</div>
</a>
</article>
{{/each}}
</section>
<nav class="nav-links">
<span class="nav-link previous">❮</span>
<span class="nav-link next">❯</span>
</nav>
</aside>
</script>
A developer can create a new template and embed it into the page, then set the template_id property of the wl_faceted shortcode to the id of the new template.

navigating to handlebars files

I cannot navigate from my index.html file to a contact.handlebars HTML page that has a contact form.
Am I just misunderstanding how handlebars works?
I've tried taking away the extension completely.
<!-- Header -->
<header>
<img src="/Images/Small Logo.svg" alt="?" class="nav-logo">
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<!--NAVBAR-->
<nav>
<ul class="nav-ul">
<li class="nav-li">
Home<span class="sr-only">(current)</span>
</li>
<li class="nav-li">
Answers with Amy<span class="sr-only">(current)</span>
</li>
<li class="nav-li">
About<span class="sr-only">(current)</span>
</li>
<li class="nav-li">
Contact<span class="sr-only">(current)</span>
</li>
</ul>
</nav>
</header>
the file path is correct.
I expect to have it navigate me to the handlebars file, displaying as an HTML page, but the page displays "Cannot GET /contact.handlebars"

Node parse data from one view to another

Let's say I have one view
users.handlebars
{{#each users}}
<tr>
<td>{{this.id}}</td>
<td>{{this.profile.firstname}}</td>
<td>{{this.profile.lastname}}</td>
<td>{{this.profile.location}}</td>
<td>{{this.email}}</td>
<td>{{this.profile.status}}</td>
<td><i class="fas fa-user-edit"></i>
<a class="user-ban-btn" href="javascript:void(0)">
<i class="fas fa-hand-paper"></i>
</a>
<a class="user-delete-btn" href="javascript:void(0)"> // THIS IS DELETE BUTTTON
<i class="fas fa-trash"></i>
</a>
</td>
</tr>
{{/each}}
And another
main.handlebars
<div class="modal-box" id="user-delete-modal">
<div class="modal-box-message">
<p>Are you sure u want to delete this user?</p>
YES
NO
</div>
</div>
In first view, I click on button delete user but I need to parse data from this view to the second view where I choose YES or NO because yes have a link with ID parameter /users/delete/:id But i don't know to do it.
Note: Main.handlebars is template and users.handlebars is inserted into this template and that modal box is opened just with javascript there is no page refresh.
I will be thankful for any idea how to make it.
Solved by adding onClick="get_user_id(this.id)" to a element.
And then taking it with javascript.

Excluding products from shopify search

I am trying to exclude certain products with a specific tag. I was able to exclude products using {% unless result.tags contains 'wholesale' %} on the search page, but having trouble with the search header. The template I have been modifying is using the raw tag. Anyone got any suggestions?
{% raw %}
{{#if has_results}}
<ul class="header-search__products grid">
{{#each results}}
<li class="grid__cell 1/3--handheld-and-up 1/4--desk">
<div class="product-item product-item--push">
{{#if on_sale}}
<div class="product-item__labels labels"><span class="label label--on-sale">{{#root.on_sale_label}}</span></div>
{{/if}}
<figure class="product-item__image-container">
<a href="{{url}}" class="product-item__link">
<img class="product-item__image " src="{{image}}" alt="{{image_alt}}">
</a>
</figure>
<div class="product-item__info">
<h3 class="product-item__title">
{{title}}
</h3>
{{#if on_sale#}}
<span class="product-item__price product-item__price--new" data-money-convertible>{{price}}</span>
<span class="product-item__price product-item__price--old" data-money-convertible>{{compare_at_price}}</span>
{{else}}
<span class="product-item__price product-item__price--new" data-money-convertible>{{price}}</span>
{{/if}}
</div>
</div>
</li>
{{/each}}
</ul>
{{results_label}}
{{else}}
<p class="header-search__no-results h4">{{results_label}}</p>
{{/if}}
{% endraw %}
Thankfully, it’s pretty easy to hide a product from your shop’s search. It involves adding some custom metadata.
This is the data you want to add:
"namespace" : "seo"
"key" : "hidden"
"value" : 1
"value_type" : "integer"

how can I show car's details When click on their names

I am making a website with node.js and I am new ,I want to learn a method if there is.I list cars using ul and when I click on a car name i want to show car's details. How can I do it.
html
<template name="vehicles">
<section id="vehicles" class="container">
<div class="row">
<div class="col-md-12">
<h2 class="title wow fadeInDown" data-wow-offset="200">Vehicle Models - <span class="subtitle">Our rental fleet at a glance</span></h2>
</div>
<!-- Vehicle nav start -->
<div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
<div id="vehicle-nav-container">
<ul class="vehicle-nav">
{{#each showcarnames}}
<li class="active">{{aracmarka}}<span class="active"> </span></li>
{{/each}}
</ul>
</div>
<div class="vehicle-nav-control">
<a class="vehicle-nav-scroll" data-direction="up" href="#"><i class="fa fa-chevron-up"></i></a>
<a class="vehicle-nav-scroll" data-direction="down" href="#"><i class="fa fa-chevron-down"></i></a>
</div>
</div>
<!-- Vehicle nav end -->
<!-- Vehicle 1 data start -->
<div class="vehicle-data" id="vehicle-1">
<div class="col-md-6 wow fadeIn" data-wow-offset="100">
<div class="vehicle-img">
<img class="img-responsive" src="img/vehicle1.jpg" alt="Vehicle">
</div>
</div>
<div class="col-md-3 wow fadeInUp" data-wow-offset="200">
<div class="vehicle-price">$ 37.40 <span class="info">rent per day</span></div>
<table class="table vehicle-features">
<tr>
<td>Marka</td>
<td>{{carmark}}</td>
</tr>
<tr>
<td>Model</td>
<td>{{carmodel}}</td>
</tr>
</table>
<span class="glyphicon glyphicon-calendar"></span> Reserve now
</div>
</div>
js
Template.vehicles.helpers({
showcarnames: function() {
return cars.find();
}
});
I would approach this problem using Session. You could target the data using a click event:
Template.vehicles.events({
'click .vehicle-nav li': function(){
Session.set('selected-vehicle', this._id); // or however you id the docs in your app.
}
});
then create an event helper that gets the selected doc and returns it to the template.
Template.vehicles.helpers({
getSelectedVehicle: function() {
var selectedId = Session.get('selected-vehicle');
return cars.findOne(selectedId);
},
});
Session is a great and simple tool to manage user state, like what vehicle they have selected.
Finally, you would then need to get the values in your template somewhere
<!-- html-->
{{#if getSelectedVehicle}}
{{#with getSelectedVehicle}}
<!-- mark up, when using with you can access doc atts directly. -->
{{/with}}
{{else}}
<!-- tell the user to make a selection -->
{{/if}}
using with in this context can lead to more readable markup. But there are other ways to achieve the same result.
To recap, at a high level, You are targeting the users interactions with the UI, to set a global variable as a way to simplify managing state. Be sure to check out Session in the meteor docs, its very simple and powerful. (the above code is not tested, but hopefully conveys the idea)

Resources