BigCommerce Stencil
I totally winged the below snippet. But i need a hint on doing that the correct way. I basically need to get the top 4 products from each toptier category sorted by date-added (to bigcommerce)
{{#each categories}}
{{#each products sort:date-added limit:4}}
{{name}}
{{/each}}
{{/each}}
To add, the syntax I would use is the following. However, I don't have any evidence that such a way exists yet.
home.html
{{> components/product/all-products grid=products.all default_image=theme_settings.default_image}}'
all-products.html being a custom file.
all-products.html
{{#if grid}}
<section class="products-new {{theme_settings.background-for-new-products}}">
<div class="layout-container">
<h1 class="section-title">{{lang 'product.product_blocks.new_products.heading'}}</h1>
<div class="product-grid">
{{#each grid}}
{{> components/product/product-item this show_quickshop=true show_rating=true default_image=../default_image}}
{{/each}}
</div>
</div>
</section>
{{/if}}
Related
I have this array:
{{#each weather.today }}
<p class="VNAelement timeStamp">BlaBla</p>
<p class="VNAelement">{{ rr }}mm</p>
{{/each}}
Now there will be three loops and on each loop the text BlaBla should be replaced. What is the best way to do this? The data comes from a json API but that string is set manuall.
The best solution is to write a custom helper to check the array index during traversal.
But here, as you are sure of the number of loops (which is 3 array items), you can rely on the #first and #last data-variables.
{{#each weather.today}}
<p class="VNAelement timeStamp">
{{#if #first}}
BlaBla-1 <!-- First item -->
{{else}}
{{#if #last}}
BlaBla-3 <!-- Third item -->
{{else}}
BlaBla-2 <!-- Second item -->
{{/if}}
{{/if}}
</p>
<p class="VNAelement">{{ rr }}mm</p>
{{/each}}
I'm trying to create a comments component with Blaze but i don't know how to handle the replies.
This is the schema for the 'comment' element:
_id, authorId, message, replies (those are comment ids), isReply (boolean).
Then I created a template with html
{{#each message}}
<div class="message">
<h2>{{author}}</h2>
<p>{{message</p>
<a class="button">Reply</a>
</div>
{{#each replies}}
<div class="message">
<h2>{{author}}</h2>
<p>{{message</p>
<a class="button">Reply</a>
</div>
{{/each}}
{{/each}}
Well, how do I handle the replies of the replies? Any Idea?
You need to use the templates recursively! An example
In your case, something like the following:
{{#each message}}
<div class="message">
<h2>{{author}}</h2>
<p>{{message</p>
<a class="button">Reply</a>
</div>
{{#each replies}}
{{> reply}}
{{/each}}
{{/each}}
<template name="reply">
<div class="message">
<h2>{{author}}</h2>
<p>{{message</p>
<a class="button">Reply</a>
{{#each replies}}
{{> reply}}
{{/each}}
</div>
</template>
You'll need a replies helper for the reply template that gets the replies to that reply.
when I generate subtemplate in #each helper and i add parameter, then i lose data context, what is normally visible.
I found workaround by passing data fields to template by
{{> productItem parameter="test" name=name details=details}}
, but for more complicated collections that would be very tiresome... isn't there better option to solve that problem ?
<template name="main">
{{#each products}}
{{> productItem parameter="test"}}
{{/each}}
</template>
<template name="productItem">
<div class="product">
<p>{{name}}</p>
<p>{{details}}</p>
<p>{{parameter}}</p>
</div>
</template>
And javascript :
Template.main.helpers({
products: function(){
return Products.find({});
}
});
you are creating a new context ( it doesn't magically merge everything ), but its easy enough to include the original context.
you go :-
{{> productItem product=this parameter="test"}}
then
<template name="productItem">
<div class="product">
<p>{{product.name}}</p>
<p>{{product.details}}</p>
<p>{{parameter}}</p>
</div>
</template>
or
<template name="productItem">
<div class="product">
{{#with product}}
<p>{{name}}</p>
<p>{{details}}</p>
{{/with}}
<p>{{parameter}}</p>
</div>
</template>
So I'm building my first app with meteor, and I feel like I'm repeating myself with my templates more than I should be.
I have multiple parent views, an example of which is the user contacts view, and the add group members view. (simplified examples below.)
<template name="GroupMembers">
{{#each contacts}}
{{> contact }}
{{/each}}
</template>
<template name="contacts">
{{#each contacts}}
{{> contact }}
{{/each}}
</template>
<template name="contact">
//... single contact template stuff
</template>
When the contact is displayed in the contacts list, I want to display a remove from contacts link in the single contact template, but in the group members list I'd like an 'add to group' link in its place. I know I could probably achieve this with either session variables or by invoking the iron-router controller obj, but I'd like to know if there is a simple way to do this in the template helper(s). Or put another way can these template partials become context aware?
Any help would be great.
Thanks.
I would solve it this way:
<template name="GroupMembers">
{{#each contacts}}
{{> contact groupMembers=true}}
{{/each}}
</template>
<template name="contacts">
{{#each contacts}}
{{> contact }}
{{/each}}
</template>
<template name="contact">
<p>
{{#if groupMembers}}
{{../name}}
<button>add to group</button>
{{else}}
{{name}}
<button>delete</button>
{{/if}}
</p>
</template>
Live demo: http://meteorpad.com/pad/LDTvHC787kJ6e9JQA/Leaderboard
Im trying to build a related info widget, based on the data from the YAML front-matter.
Each page on my collection has some tags associated, and the idea would be to only show those pages who have tags in common with the currently viewed page.
I've managed to get the complete tags outputting the existent pages with the following code:
<section class="see-also">
{{#each tags}}
<p>In <span class="tag">{{tag}}</span>:</p>
{{#each pages}}
<li>{{data.title}}</li>
{{/each}}
{{/each}}
</section>
Can I apply some sort of filter on {{#each tags}} ?
Thanks.
There's an inArray helper that you can use to test if the current tag is in the tags collection on the page being currently rendered:
<section class="see-also">
{{#each tags}}
{{#inArray ../page.tags tag }}
<p>In <span class="tag">{{tag}}</span>:</p>
{{#each pages}}
<li>{{data.title}}</li>
{{/each}}
{{/inArray}}
{{/each}}
</section>
You might have to modify the parent path syntax to account for the additional block helper:
<section class="see-also">
{{#each tags}}
{{#inArray ../page.tags tag }}
<p>In <span class="tag">{{tag}}</span>:</p>
{{#each ../pages}}
<li>{{../data.title}}</li>
{{/each}}
{{/inArray}}
{{/each}}
</section>