TYPO3 tx_news, issue with the position of widget.paginate - pagination

I have a problem with the widget.paginate position in the extension tx_news, i'm working in TYPO3 v. 6.1 FLUID/EXTBASE.
My problem is that it's showing the widget.paginate by default, inside the Templates/News/list.html in my list show UL tag. and i want it to be outside the UL tags, I have tryed to move it around, but then it make some big changes to my layout, or do not work at all.
see bottom of page - enter link description here
How can I show the paginate links/widget outside the UL and after it ?
My Templates/News/list.html code
{namespace n=Tx_News_ViewHelpers}
<f:layout name="General" />
<!--
=====================
Templates/News/List.html
-->
<f:section name="content">
<f:if condition="{news}">
<f:then>
<div class="news-list-view">
<ul class="cbp_tmtimeline {newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}">
<f:if condition="{settings.hidePagination}">
<f:then>
<f:for each="{news}" as="newsItem">
<f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}" />
</f:for>
</f:then>
<f:else>
<n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}">
<f:for each="{paginatedNews}" as="newsItem">
<f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}" />
</f:for>
</n:widget.paginate>
</f:else>
</f:if>
</ul>
</div>
</f:then>
<f:else>
<div class="no-news-found">
<f:translate key="list_nonewsfound" />
</div>
</f:else>
</f:if>
</f:section>

You can override the default Paginate Template and define your own Template
Add this to your TS template:
plugin.tx_news.settings.list.paginate.templatePath = YourNewTemplatePath.html
To know how the default template works, check out this Default Template for reference and modify your view accordingly.
If you trying to edit the default News List, change the default news path and write your FLUID template in that file:
plugin.tx_news.view.templateRootPath = YourNewTemplateNews.html
Close your tag before the widget. Of course, you'll have to make a few changes in your CSS to get what you want.
</ul>
<f:else>
<n:widget.paginate>.......

Hi i fix it in the Templates/News/list.html code
with this code.
{namespace n=Tx_News_ViewHelpers}
<f:layout name="General" />
<!--
=====================
Templates/News/List.html
-->
<f:section name="content">
<f:if condition="{news}">
<f:then>
<f:if condition="{settings.hidePagination}">
<f:then>
<f:for each="{news}" as="newsItem">
<f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}" />
</f:for>
</f:then>
<f:else>
<n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}">
<div class="news-list-view">
<ul class="cbp_tmtimeline {newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}">
<f:for each="{paginatedNews}" as="newsItem">
<f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}" />
</f:for>
</ul>
</div>
</n:widget.paginate>
</f:else>
</f:if>
</f:then>
<f:else>
<div class="no-news-found">
<f:translate key="list_nonewsfound" />
</div>
</f:else>
</f:if>
</f:section>

Related

react pagination for sections

Im using NodeJS with React and I have a problem. I didnt find a npm module or a code that allowed me to create a pagination for a list of results.
I have a variable called "jobs", that contains a list of job ads.
In my render function I call:
{this.state.jobs.map(this.renderClass)}
that map every job with a function.
This function is renderClass, that contains the render of:
<section key={c.id} className="panel panel-featured-left panel-featured-primary">
<Link to={'/job/'+c.id}>
<div className="panel-body">
<div className="widget-summary">
<div className="widget-summary-col widget-summary-col-icon">
<div className="summary-icon">
<img src={image} className="img-responsive" />
</div>
</div>
<div className="widget-summary-col">
<div className="summary">
<h4 className="title">{c.company}</h4>
<div className="info">
<strong className="amount"></strong><br/>
<p><i className="fa fa-map-marker"></i> {c.location}</p>
<p><i className="fa fa-suitcase"></i> {c.position}</p>
</div>
</div>
<div className="summary-footer">
<a className="text-muted text-uppercase"><i className="fa fa-calendar"></i> {day}/{month}/{year}</a>
</div>
</div>
</div>
</div>
</Link>
</section>
In this way I have a huge list of jobs, but I would a paging.
How can I do this?
Thanks
I would save the page in a state,
and do something like that (say each page has 10 jobs ) -
{this.state.jobs.slice(this.state.page * 10, this.state.page * 10 + 10)
.map(this.renderClass)}
I suggest your need to build a component for handling pagination. Some thing like that:
<Pagiantion
listLenght = {111}
selectedPage = {1}
itemPerPage = {10}
....
/>
I found the best component handling it, react-pagination-custom.
It allow you custom everything (number buttons, wrap container, spread,..). Its document is well, demo is also clear.

Pagination widget does not work

This is what I get when using the fluid pagination widget.
it try to jump to the 2nd page but without any success
it generates this URL which look like this
http://example.com/news-stories/essen/?tx__%5B%40widget_0%5D%5BcurrentPage%5D=2
This URL above won't work. It is generated by the Tag
I am using the Menu Type "Thumbnail" of Bootstrap Package. And this is the fluid tag which i use to generate it:
<f:widget.paginate objects="{menu}" as="paginatedItems" configuration="{itemsPerPage: 6, insertAbove: 1, insertBelow: 1}">
<f:for each="{paginatedItems}" as="page">
<div class="col-xs-6 col-sm-6">
<f:link.page pageUid="{page.data.uid}" title="{page.data.title}" class="thumbnail" data="{equalheight: 'item', toggle: 'tooltip'}">
<div class="thumbnail-image">
<f:if condition="{page.files.0}">
<f:if condition="{page.files.0.type} == 2">
<f:media file="{page.files.0}" width="{settings.media.width}" height="{settings.media.height}" />
</f:if>
</f:if>
</div>
<div class="thumbnail-caption">
<f:if condition="{page.data.title}">
<h3><f:format.crop maxCharacters="{settings.title.crop}">{page.data.title}</f:format.crop></h3>
</f:if>
<f:if condition="{page.data.abstract}">
<p><f:format.crop maxCharacters="{settings.abstract.crop}">{page.data.abstract}</f:format.crop></p>
</f:if>
</div>
</f:link.page>
</div>
</f:for>
</f:widget.paginate>
Can anybody help to make the pagination work, should I configure something?
The paginate widget needs a plugin context to work. Even the backend paginate widget needs a controller to function. It would be a nice feature to have paginate widget work with menus and other arrays.

How to show a message if there are no products inside a category with exp:resso store plugin?

I'm using the latest version of EE2 and a plugin called Exp:resso store.
I have products assigned to a category and for the most part all of this is working fine. Below is my code:
<div class="col-md-7">
{exp:channel:categories channel="products" style="linear"}
<section class="section accordion repeater">
<h3>
{category_name}
<div class="icon">
<img src="/assets/local/img/plus-icon.jpg" alt="">
</div>
</h3>
<div class="accordion-content">
{exp:store:search orderby="title" sort="asc" category="{category_id}"}
{exp:store:product entry_id="{entry_id}"}
<p class="accordion-download">
{title} - {price}
<span><img src="/assets/local/img/add-to-cart.jpg" alt="">Add to cart</span>
</p>
{/exp:store:product}
{/exp:store:search}
</div>
</section>
{/exp:channel:categories}
</div>
I'm trying to find a way to show a No products exist message if the category doesn't have anything inside of it. I've tried using {count}, {total_results} & {total_rows} to check if there aren't any products. Problem is everything I try is obviously wrong because nothing gets output :/
Thanks in advance
The store search tag is a wrapper for the channel entries tag pair so you would need to use the {if no_results} tag pair.
<div class="col-md-7">
{exp:channel:categories channel="products" style="linear"}
<section class="section accordion repeater">
<h3>
{category_name}
<div class="icon">
<img src="/assets/local/img/plus-icon.jpg" alt="">
</div>
</h3>
<div class="accordion-content">
{exp:store:search orderby="title" sort="asc" category="{category_id}"}
{exp:store:product entry_id="{entry_id}"}
<p class="accordion-download">
{title} - {price}
<span><img src="/assets/local/img/add-to-cart.jpg" alt="">Add to cart</span>
</p>
{/exp:store:product}
{if no_results}
There are no products
{/if}
{/exp:store:search}
</div>
</section>
{/exp:channel:categories}
</div>
Should also be mentioned if you are not creating a form for the to add the products to the cart you could use the {store_field_short_name:price} variable to reduce the number of queries on your page. Most store things such as sku, weight, measurements can all be access by using the field short name followed by :variable

How to display the publication date of a custom content item in its template

I need to display a publication date in an alternate template. I tried displaying the Model.Meta but it contains nothing.
I tried Model.Parts.Common.PublicationDate to no avail. So how can I access the publication date?
<li>
<a href="#displayUrl">
<div style="padding: 20px 20px 0 20px;">
#Display(Model.Meta) <!--contain nothing-->
#Model.Parts.Common.PublicationDate; <!-- contain nothing -->
<h2>#title</h2>
#shortenedDescription
</div>
<div class="texthover">
<div class="texthover-content">
#if(Model.ContentItem.News.Image.Url != null){
<img src="#Href(Model.ContentItem.News.Image.Url)" />
}
</div>
</div>
</a>
</li>
In the placement file in your theme, add the line:
<Match ContentType="MyType">
<Place Parts_Common_Metadata="Meta:1" />
</Match>

Override Orchard Blog Template

I'm building a custom theme. I need to override how the list of blog posts is rendered to match my desired look. I can't seem to figure out how to render the blog post's title( or any other piece of info for that matter ). All of my markup and hard coded info renders, but the dynamic data does not.
Inside of my theme folder "~/Views/Items/Content-BlogPost.cshtml":
<div class="media row-fluid">
<div class="span1 hidden-phone">
<!-- Date desktop -->
<div class="date-wrapper"><span class="date-m">Jan</span> <span class="date-d">20</span> </div>
<!-- Meta details desktop -->
<p class="meta muted"><i class="icon-user"></i>Alex </p>
</div>
<!-- PROBLEM IS HERE!!!!!!!!!!! Title does not render! -->
<div class="span11"><h1>#Display(Model.Content.Title)</h1>
<div class="media-body">
<div class="tags">coding / event</div>
<h4 class="title media-heading">a nec in sed hac ultrices cursus</h4>
<!-- Meta details mobile -->
<ul class="inline meta muted visible-phone">
<li><i class="icon-calendar"></i><span class="visible-desktop">Created:</span> Sun 20th Jan 2013</li>
<li><i class="icon-user"></i>Alex</li>
</ul>
<a href="blog-post.htm" class="media-object">
<img src="img/blog/ape.jpg" alt="Picture of frog by Ben Fredericson">
</a>
<p>#Display(Model.Content)</p>
<ul class="inline links">
<li><i class="icon-circle-arrow-right"></i>Read more</li>
<li><i class="icon-comment"></i>50 Comments</li>
</ul>
</div>
</div>
</div>
Thanks to Bertrand, I tracked down the way to do this.
Model.ContentItem.TitlePart.Title

Resources