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
Related
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 :)
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
---
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
I want to go to http://ted.com/talks, click the "See All Topics" in the "Topics" dropdown, and then click the a random letter heading, like "C" or "D-E". However, I don't know how to find the element in the modal popup for that specific letter heading.
This is what the letter heading elements look like when I click "Inspect Element":
<li class="topic-select__range">
<a class = "topic-select__range__link" href="#" data-index="0">A-B</a>
</li>
<li class="topic-select__range">
<a class = "topic-select__range__link" href="#" data-index="1">C</a>
</li>
<li class="topic-select__range">
<a class = "topic-select__range__link" href="#" data-index="2">D-E</a>
</li>
... etc.
My program can get all the way to See All Topics just fine but gets Cannot Locate Element Error when I try to click on the letter headers. This is what my code snippet looks like so far:
# Each header is assigned a number. A header is picked at random, and clicked.
# [ERROR: Cannot locate element.]
random_letter = random.randint(0, 8)
topics_window = browser.find_element_by_class_name("select-modal__content topic-select") # error here, when program tries to find modal popup or tags within it
letter_headers = topics_window.find_element_by_class_name("topic-select__range__link")
letter_headers[random_letter].click()
I couldn't find a way to access modal JavaScript content with selenium. I have instead found a way to do so using web API.
I have this link (not a button) that I want to click on ...I don't want to navigate to the link via webbrowser1.navigate("") because the link changes but the href and inner text is always the same.
Here is the HTML of the link
Should this be put into the webbrowser or behind a button
<ul id="nav">
<li>
<li>
<li>
Submit a New Story
</li>
<li>
</ul>
Thanks guys.
I'm not sure what is the result you're seeking for, but if you want to trigger a click as if the client would have clicked it, you could achieve it by obtaining the WebBrowser.Documentproperty which returns a HtmlDocument class, you can retrieve that a tag then trigger a click on it.
The All property should be a good start:
var aTag = d.All.Where(a => a.TagName == "a");