I'm building a small app within meteor, using the yogiben favourites package to allow users to favourite select items in a collection.
Currently the below code only shows the ID of the favourite/post, rather than the corresponding title.
How can I show the title?
<template name="favoritesSidebar">
<div class="template-favorites-sidebar">
{{#if myFavorites.count}}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{_ "favorites"}}</h3>
</div>
<div class="panel-body">
<ul>
{{#each myFavorites collection="Posts"}}
<li>
<a>{{_id}}</a>
</li>
<li>
<a>{{_title}}</a>
</li>
<li>
<a>{{Post._title}}</a>
</li>
{{/each}}
</ul>
</div>
</div>
{{/if}}
</div>
</template>
Related
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.
So I have a local project running ExpressJS and I'm using ejs as my template engine. Whenever I start the server and go to the home page the index.html file renders properly, but every subsequent load of the index gives me the un-rendered index.html file and the status is 304. All other pages render fine everytime. If I restart the server, the first time I hit the home page it is rendered correctly, but still serves the un-rendered file after every page load after that. If I put a breakpoint in the route (I'm using WebStorm) I can hit the break point the first time, but never again. I assume this is because of the 304. I also have app.disable('etag'). Any help is much appreciated.
UPDATE
This is what is the browser will display when receiving a 304 status.
<%- include('includes/header.html'); %>
<%- include('includes/navigation.html'); %>
<!-- Top Slider and Booking form -->
<div id="home-top-section">
<!-- Main Slider -->
<div id="main-slider">
<div class="items">
<a href="http://google.com">
<img src="assets/img/slider/1.jpg" alt="3"/><!-- Change the URL section based on your image\'s name -->
</a>
</div>
<div class="items">
<a href="http://google.com">
<img src="assets/img/slider/3.jpg" alt="3"/>
</a>
</div>
<div class="items">
<a href="http://google.com">
<img src="assets/img/slider/4.jpg" alt="4"/>
</a>
</div>
<div class="items">
<a href="http://google.com">
<img src="assets/img/slider/2.jpg" alt="2"/>
</a>
</div>
</div>
<!-- Booking Form -->
<div class="booking-form-container container">
<div class="booking-form-inner-container">
<div id="main-booking-form" class="style-2">
<h2>Find A <span>Room</span></h2>
<form class="booking-form clearfix" action="#"><!-- Do Not remove the classes -->
<div class="input-daterange clearfix">
<div class="booking-fields col-xs-6 col-md-12">
<input placeholder="Choose check in date" class="datepicker-fields check-in" type="text" name="start" /><!-- Date Picker field ( Do Not remove the "datepicker-fields" class ) -->
<i class="fa fa-calendar"></i><!-- Date Picker Icon -->
</div>
<div class="booking-fields col-xs-6 col-md-12">
<input placeholder="Choose check out date" class="datepicker-fields check-out" type="text" name="end" />
<i class="fa fa-calendar"></i>
</div>
</div>
<div class="booking-fields col-xs-6 col-md-12">
<!-- Select boxes ( you can change the items and its value based on your project's needs ) -->
<select name="room-type">
<option value="">How Many Adult?</option><!-- Select box items ( you can change the items and its value based on your project's needs ) -->
<option value="2">1</option>
<option value="3">2</option>
<option value="4">3</option>
<option value="5">4</option>
<option value="6">5</option>
</select>
<!-- End of Select boxes -->
</div>
<div class="booking-fields col-xs-6 col-md-12">
<select name="guest">
<option value="">How Many Children ?</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="booking-button-container">
<input class="btn btn-default" value="Check Availability" type="submit"/><!-- Submit button -->
</div>
</form>
</div>
</div>
</div>
</div>
<!-- End of Top Slider and Booking form -->
<!-- Luxury Rooms -->
<div id="luxury-rooms">
<!-- Heading box -->
<div class="heading-box">
<h2>Luxury <span>Rooms</span></h2><!-- Title -->
<div class="subtitle">Best rooms with Best services</div><!-- Subtitle -->
</div>
<!-- Room Box Container -->
<div class="room-container container">
<!-- Room box -->
<div class="room-boxes">
<img src="assets/img/rooms/1.jpg" alt="King Suit" class="room-img"><!-- Room Image -->
<div class="room-details col-xs-6 col-md-4">
<div class="title">King Suit</div><!-- Room title -->
<div class="description"><!-- Room Description -->
Short description of rooms will be located in this section that you can describe some special features and equipment of rooms. Visitors can get more information about this rooms by clicking on "Details" button.
</div>
Details<!-- Detail link -->
</div>
<div class="price-container col-xs-6 col-md-8">
<div class="price">
<span>$550</span>
- Per Night
</div>
</div>
</div>
<!-- Room box -->
<div class="room-boxes right">
<img src="assets/img/rooms/2.jpg" alt="Royal Suit" class="room-img">
<div class="room-details col-xs-6 col-md-4">
<div class="title">Royal Suit</div>
<div class="description">
Short description of rooms will be located in this section that you can describe some special features and equipment of rooms. Visitors can get more information about this rooms by clicking on "Details" button.
</div>
Details
</div>
<div class="price-container col-xs-6 col-md-8">
<div class="price">
<span>$490</span>
- Per Night
</div>
</div>
</div>
<!-- Room box -->
<div class="room-boxes">
<img src="assets/img/rooms/3.jpg" alt="Deluxe Two-bedroom Suite" class="room-img">
<div class="room-details col-xs-6 col-md-4">
<div class="title">Deluxe Two-bedroom Suite</div>
<div class="description">
Short description of rooms will be located in this section that you can describe some special features and equipment of rooms. Visitors can get more information about this rooms by clicking on "Details" button.
</div>
Details
</div>
<div class="price-container col-xs-6 col-md-8">
<div class="price">
<span>$370</span>
- Per Night
</div>
</div>
</div>
</div>
</div>
<!-- End of Luxury Rooms -->
<!-- Special Packages -->
<div id="special-packages" class="container">
<!-- Heading box -->
<div class="heading-box">
<h2>Special <span>Packages</span></h2><!-- Title -->
<div class="subtitle">Choose one of our special offers</div><!-- Subtitle -->
</div>
<!-- Package Container -->
<div class="package-container clearfix">
<!-- Package Box -->
<div class="package-box wow fadeInUp col-sm-6 col-md-4">
<div class="package-inner">
<div class="title">Diamond</div>
<div class="price"><span>$450</span>per night</div>
<div class="package-details">
<ul>
<li>Flight Ticket</li>
<li>Restaurant ( Lunch / Dinner )</li>
<li>Music Concert</li>
<li>Airport Pick-up</li>
<li>Sport Activities</li>
</ul>
</div>
Select Package
</div>
</div>
<!-- Package Box -->
<div class="package-box wow fadeInUp col-sm-6 col-md-4" data-wow-delay="0.5s">
<div class="package-inner">
<div class="title">Gold</div>
<div class="price"><span>$340</span>per night</div>
<div class="package-details">
<ul>
<li>Flight Ticket</li>
<li>Restaurant ( Lunch )</li>
<li>Music Concert ( 50% off )</li>
<li>Airport Pick-up</li>
<li>Sport Activities</li>
</ul>
</div>
Select Package
</div>
</div>
<!-- Package Box -->
<div class="package-box wow fadeInUp col-sm-6 col-md-4" data-wow-delay="1s">
<div class="package-inner">
<div class="title">Silver</div>
<div class="price"><span>$230</span>per night</div>
<div class="package-details">
<ul>
<li>Flight Ticket</li>
<li>Restaurant ( 20% off Lunch )</li>
<li>Music Concert ( 30% off )</li>
<li>Airport Pick-up</li>
<li>Sport Activities</li>
</ul>
</div>
Select Package
</div>
</div>
</div>
</div>
<!-- End of Special Packages -->
<!-- Gallery -->
<div id="gallery">
<!-- Heading box -->
<div class="heading-box">
<h2>Pinar <span>Gallery</span></h2><!-- Title -->
</div>
<!-- Gallery Container -->
<div class="gallery-container">
<div class="sort-section">
<div class="sort-section-container">
<div class="sort-handle">Filters</div>
<ul class="list-inline">
<li>All</li>
<li>Restaurant</li>
<li>Bars</li>
<li>Pool</li>
<li>Rooms</li>
<li>Lobby</li>
</ul>
</div>
</div>
<ul class="image-main-box clearfix">
<li class="item col-xs-6 col-md-3 lobby">
<figure>
<img src="assets/img/gallery/1.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Great</span> View</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-6 pool">
<figure>
<img src="assets/img/gallery/2.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Outdoor</span> Pool</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 bars">
<figure>
<img src="assets/img/gallery/3.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Delicious</span> Foods</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 restaurant">
<figure>
<img src="assets/img/gallery/4.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>International</span> Foods</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 pool">
<figure>
<img src="assets/img/gallery/5.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Cozy</span> Spaces</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 rooms">
<figure>
<img src="assets/img/gallery/6.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Comfortable </span> Rooms</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 pool">
<figure>
<img src="assets/img/gallery/7.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Relaxation</span> Spaces</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-6 pool">
<figure>
<img src="assets/img/gallery/8.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Indoor</span> Pool</h4>
</figcaption>
</figure>
</li>
</ul>
More ...
</div>
</div>
<!-- End of Gallery -->
<%- include('includes/footer.html'); %>
instead of the rendered version. Notice the includes at the top and bottom of the page.
So, the issue was simply because I was using .html templates instead of .ejs. Word to the wise, if you buy a template that has static .html files and want to use a templating engine such as .ejs, make sure you change .html to .ejs or you will run into all types of issues.
I was writing this for the express Hbs engine, but I would like to convert it to Jade. This piece of code worked on another one of my works, but I need to have it in Jade, I have problems with the handlerbars.
{{# each products}}
<div class="row">
{{#each this}}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="{{this.imagePath}}" title="ImagePreview" alt="My shopping car">
<div class="caption">
<h3>{{this.title}}</h3>
<p>{{this.description}}</p>
<div class="clearfix">
<div class="price pull-left">{{this.price}}</div>
Add to car
</div>
</div>
</div>
</div>
{{/each}}
</div>
{{/each}}
Here is the pug 2 syntax:
each productRow in products
.row: each product in productRow
.col-sm-6.col-md-4: .thumbnail
img(src=product.imagePath title="ImagePreview" alt="My shopping car")
.caption
h3=product.title
p=product.description
.clearfix
.price.pull-left=product.price
a(href="#" class="btn btn-success pull-right" role="button") Add to car
Add a - before each and , between attributes for old pug versions.
I have a express handlebar application with main.hbs as the layout file.
//main.hbs
<html>
<head></head>
<body>
{{> header}}
{{{body}}}
<script src='/js/jquery-2.2.4.min.js'></script>
<script src='/js/bootstrap.min.js'></script>
</body>
</html>
When i click a link let's say "settings" in dashboard page then it redirects to settings page where i have sidebar and main content page.
This page also uses main.hbs as layout.
//settings.hbs
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Account<span class="sr-only">(current)</span></li>
<li>Views</li>
<li>Users</li>
<li>Sites</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li class="active">Settings</li>
</ol>
<div id="settingsContainer">
//Content should be rendered here just like the {{{body}}}
</div>
</div>
</div>
So how can i able to render the desired content inside the "settingsContainer".
As per my understanding in layout file {{{body}}} is used as a placeholder for where the main content should be rendered.
But this is a different page. Is there a way i can render the content based on the link clicked from sidebar.
Any help and pointer will be much appreciated!
i don't know much about handlebars but you can achieve the same with bootstrap tabs.
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div class="tabbable">
<ul class="nav nav-sidebar">
<li class="active">Account<span class="sr-only">(current)</span></li>
<li class="">Views</li>
</ul>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li class="active">Settings</li>
</ol>
<hr>
<div id="settingsContainer">
<div class="tabbable">
<div class="tab-content">
<div class="tab-pane active" id="account">
//render partial for account
</div>
<div class="tab-pane" id="views">
//render partial for views
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps
I have a site I'm working on at the moment, in which I have a sidebar displaying the 10 most recent posts (titles as links). I'm calling this in with the Embed function.
Though when I am looking on the individual post itself, the list only displays the post title that I'm on.
My embedded code calls all 10 of the recent posts in a exp:channels entry normal way.
Is there something I've done wrong? Below is the code for the main blog page:
{embed="embeds/html_header"}
<!-- content -->
{embed="embeds/html_blog_top"}
<div class="container">
<div class="row">
{embed="embeds/html_blog_sidebar"}
{exp:channel:entries channel="blog" limit="1"}
<div class="span8">
<article>
<header class="postHeader">
<div class="row-fluid">
<div class="span3 postDate">{entry_date format="%d"}<span>{entry_date format="%F"}</span></div>
<div class="span9 postPic">
<div class="imgWrapper">
{blog_image}
</div>
</div>
</div>
</header>
<div class="row">
<section class="span6 offset2">
<h2>{title}</h2>
<p>{full_entry}</p>
<p><span class='st_sharethis' displayText='ShareThis'></span>
<span class='st_facebook' displayText='Facebook'></span>
<span class='st_twitter' displayText='Tweet'></span>
</p>
</section>
</div>
</article>
</div>
{/exp:channel:entries}
</div>
</div>
</section>
<!-- footer -->
{embed="embeds/html_footer"}
This is the sidebar embed:
<aside class="span4" style="float:right;">
<section class="widget search clearfix">
<h3>news</h3>
<p>
{exp:channel:entries channel="blog" limit="10" orderby="date"}
{title}<br>
{/exp:channel:entries}
</p>
</section>
<section class="widget">
<h3>Archives</h3>
<ul>
<li>
{exp:channel:month_links channel="blog"}
{month} {year}<br>
{/exp:channel:month_links}
</li>
</ul>
</section>
</aside>
Its just the bit with the news section that I can't seem to get as a full list on the individual page.
Add dynamic="no" to your embed entries loop and you should be good.
Also, if you want answers on ExpressionEngine questions more quickly, try posting to expressionengine.stackexchange.com