I tried the same code as mentioned in the link below, but for some reason on my end it loads (clones) only the items from the current page, not the ones from the next page ???? Any ideas why ?
How to add Infinite Scroll to BigCommerce Category page
<ul class="productGrid" data-infinite-scroll='{ "path": ".pagination-link", "append": ".product", "history": false }'>
{{#each products}}
<li class="product">
{{>components/products/card show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer}}
</li>
{{/each}}
</ul>
<script src="https://unpkg.com/infinite-scroll#3/dist/infinite-scroll.pkgd.js"></script>
It looks like all pagination links have the class .pagination-link, including the numbered ones (1,2,3 etc). What's happening is that the Infinite Scroll library is grabbing the first element with that class, which happens to be page=1, so that's the first page that's being appended.
Try updating your code to this to specify that the path link should be the 'Next' pagination link:
<ul class="productGrid" data-infinite-scroll='{ "path": ".pagination-item--next .pagination-link", "append": ".product", "history": false }'>
{{#each products}}
<li class="product">
{{>components/products/card settings=../settings show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer event=../event position=(add #index 1)}}
</li>
{{/each}}
</ul>
Thanks for the heads up--I'll update my previous answer on the post you linked to :)
Related
Below is the file structure
I have default Index page under Pages folder, which has layout as _LayoutHarman.cshmtl
Code : Pages/Shared/_LayoutHarman.chtml
header menu : pages are in subfolder.ie category folder in this case
<a asp-route-cat_slug="electronic" asp-page="./category/Index">Electronic</a>
<a asp-route-cat_slug="beauty-care" asp-page="./category/index" >Beauty Care</a>
<a asp-route-cat_slug="toy" asp-page="./category/index" >Toy</a>
footer menu : pages are on root folder
<a asp-page="./Contact" >Contact</a>
<a asp-page="./terms" >Terms</a>
<a asp-page="./privacy" >Privacy</a>
Code : Pages/category/Index.cshtml
#page "{cat_slug?}/{pageIndex:int?}"
#model bList.Pages.category.IndexModel
#{
}
<nav aria-label="Page navigation example">
<ul class="pagination text-center">
#if(Model.prev_no!=0){
<li><a asp-page="category" asp-route-cat_slug="#Model.cat_url" asp-route-pageIndex="#Model.prev_no"> Previous</a></li>
}
#if (Model.no_more_record != "YES")
{
<li><a asp-page="category" asp-route-cat_slug="#Model.cat_url" asp-route-pageIndex="#Model.next_no">Next</a></li>
}
</ul>
</nav>
Here Next/ previous button generate url as follow
https://localhost:8080/category/toy/1
https://localhost:8080/category/toy/2
https://localhost:8080/category/toy/3
respective on selected category
Issue : When i visit on category page and click on prev or next button and then try to click on link Contact,Terms,Privacy i.e (which is on _LayoutHarman.cshtml) or on header menu then href become blank.
Edited One:
Code: On _LayoutHarman.cshtml
HeaderMenu:
<a href="./category/toy" >toy</a>
Footer Menu
<a asp-page="./Contact" >Contact</a>
<a asp-page="./terms" >Terms</a>
Code: On Category/Index.html page
Prev</li>
Next
Now on Next/ Prev button click , header menu generates url as
https://localhost:44382/category/toy/category/toy hence error page occurs. but for footer menu contact/term/privacy works properly
I did reproduce your problem, you need to delete the point(.) in asp-page attribute in your _LayoutHarman.cshmtl.
Changed like this:
<a asp-route-cat_slug="electronic" asp-page="/category/Index">Electronic</a>
<a asp-route-cat_slug="beauty-care" asp-page="/category/index" >Beauty Care</a>
<a asp-route-cat_slug="toy" asp-page="/category/index" >Toy</a>
<a asp-page="/Contact" >Contact</a>
<a asp-page="/terms" >Terms</a>
<a asp-page="/privacy" >Privacy</a>
And you don't need to add asp-page="category" in Pages/category/Index.cshtml, just delete this attribute in this page.
Here is my test result:
Do you really need all this extra server side processing, asp-route-cat_slug asp-page?
Can't you just use plain old fashion HTML hyperlink? As for the dynamic parameters maybe you can set only them...
View category
Just an idea to think on...
Cheers
I'm trying to display the thumbnail images of each product on category page in Stencil CLI - BigCommerce with the option to slide. The most logical thing to do was to take the snippet from product-view.html and just paste it in card.html, unfortunately, it was to easy to be true.
I've tried changing the handlebars multiple times and replacing the a href url, but still no luck.
<ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
"infinite": false,
"mobileFirst": true,
"slidesToShow": 5,
"slidesToScroll": 1
}'{{/gt}}>
{{#each product.images}}
<li class="productView-thumbnail">
<a
class="productView-thumbnail-link"
href="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-item
data-image-gallery-new-image-url="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-zoom-image-url="{{getImage this 'zoom_size' (cdn ../theme_settings.default_image_product)}}">
<img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage this 'productview_thumb_size' (cdn ../theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
</a>
</li>
{{/each}}
</ul>
Any ideas ? Thanks.
I believe it's not possible using handlebars helpers. according to documentation, product thumbnails is not assigned as global attributes. so it won't work if you copy the code to category template.
i got a simple static site with a main navigation. working with the metalsmith generator.
Is there a native way to set current menu items active?
My current unautomated solution:
I just made a workaround like following.
A MD file page1.md as source of content with some variables i can define at top:
---
title: this is the site title
currentPage1: current
layout: main.html
---
<article class="featurette">
<p class="lead">Some content text...</p>
</article>
and my layout HTML file main.html. Where handlebars is used as engine.
i just post the part of the menu here:
<ul class="nav">
<li>
Link to Page1
</li>
<li>
Link to Page2
</li>
</ul>
both are going through the metalsmith rendering.
I got a current class on the Page1 in the menu.
Question
My solution is working so far, but as my site scales. I need to define the "current" for every site again and again. If I don't watch out this will lead to misconfiguration...
I do like to have freedom on my main navigation markup, as there are some specialities in. So I'm fine with creating this for new pages by myself.
Can i set active menu items somehow with the metalsmith-permalinks or metalsmith-canonical plugin or does there exists a metalsmith plugin suited for this case or maybe with another clever JS manipulation?
Use metalsmith-collections to create a collection of pages
.use(collections({
pages: {
pattern: '*.html'
}
}))
Then in your template loop through them to create your links:
{{#each collections.pages}}
<li>
<a href="{{path}}" {{#if_eq ../id this.id}} class="active" {{/if_eq}}>{{title}}</a>
</li>
{{/each}}
You will need to register a block helper like this: Handlebars.js if block helper ==
Make sure each page ID is unique.
For example:
---
id: phillip
layout: base.hbs
tagline: I haven't thought of one.
pagename: phils page
href: /phil/
navorder: 3
private: true
---
In inspiration from Sarah Drasner's Smashing Magazine article Replacing jQuery with Vue, I've replaced all of my jQuery with Vue in my Wordpress theme. Things are going nicely as I've already replaced functionality for modals, form validation/submission, at the like. I even got a boost in my page speed grade from Google's page speed insights tool.
The last piece of my puzzle is finishing off my navigation menu. The menu is built and working, but I'm not happy with it. My primary dissatisfaction is in conditionally rendering submenus better. For example, menu items without children receive an empty child:
<ul class="submenu"></ul>
Here's what I have so far:
Here's the shape of my Nav menu data: https://api.myjson.com/bins/jfld4
Important property definitions:
"obeject_id" is a unique indentifier
"post_parent" refers to the nav item's parent "object_id"
Notice notice top level menu items have "post_parent: 0"
Here's my Vue code for rendering the menu:" https://codepen.io/JosephAllen/pen/zLQqRr?editors=0011
<ul class="menu" id="primary-menu">
<menu-item
v-for="item in navItems"
v-if="item.post_parent == 0"
:key="item.object_id"
:class="{active: item.active}"
v-bind:url="item.url"
v-bind:object_id="item.object_id"
v-bind:post_parent="item.post_parent"
v-bind:title="item.title">
<ul class="sub-menu">
<menu-item
v-for="subItem in navItems"
:key="subItem.object_id"
v-if="subItem.post_parent == item.object_id"
v-bind:object_id="subItem.object_id"
v-bind:url="subItem.url"
v-bind:ID="subItem.ID"
v-bind:post_parent="subItem.post_parent"
v-bind:title="subItem.title">
</menu-item>
</ul>
</menu-item>
</ul>
On your <ul class="sub-menu"> element, include v-if or v-show with a test if the item contains any subItems (e.g. <ul class="sub-menu" v-show="hasSubItems"> once you've computed hasSubItems of course). Check out conditional rendering in the Vue docs.
Based on the starter kit I have created a new app. I would like to link the different pages to a set of icons in the app-toolbar.
I got it working with:
<a href="/main-stream">
<paper-icon-button icon="icons:view-stream"></paper-icon-button>
</a>
But I think I am missing something here. Is there a better way?
in your app-Component you have a variable called page. This variable indicates the current view that is shown. To modify its value you can use the iron-selector like in the demo app.
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="[[rootPath]]view1">View One</a>
<a name="view2" href="[[rootPath]]view2">View Two</a>
<a name="view3" href="[[rootPath]]view3">View Three</a>
</iron-selector>
Copied from:https://github.com/PolymerElements/polymer-starter-kit/blob/master/src/my-app.html