<ul>
<li class="home">
<a title="Go to Home Page" href="#">Home</a>
<span>/ </span>
</li>
<li class="category3">New Arrival<span>/ </span>
</li>
<li class="cms_page"><strong></strong>
</li>
</ul>
Above is the html code of site breadcrumbs. Why do my template breadcrumbs add this code <li class="cms_page"><strong></strong></li>? All the code in the breadcrumbs.phtml of the base template are the same when i change the theme to default. There is no
<li class="cms_page"><strong></strong>
</li>
What's wrong with my template? thank you
are you sure you are editing the right template? To verify that turn on template hints from system > configuration > developer
Related
How to display limited products of specific category on homepage bigcommerce with stencil theme? i want to show some categories like. u can see in my code below:
<main class="page-content">
<h2 class="page-heading">T-Shirts On Sale</h2>
<span class="viewall">View More</span>
<ul class="productGrid productGrid--maxCol3" data-product-type="t-shirts-on-sale">
{{#each products}}
<li class="product">
{{>components/products/card theme_settings=../theme_settings}}
</li>
{{/each}}
</ul>
<h2 class="page-heading">Hoodies On Sale</h2>
<span class="viewall">View More</span>
<ul class="productGrid productGrid--maxCol3" data-product-type="hoodies-on-sale">
{{#each products}}
<li class="product">
{{>components/products/card theme_settings=../theme_settings}}
</li>
{{/each}}
</ul>
<h2 class="page-heading">Polos Shirts On Sale</h2>
<span class="viewall">View More</span>
<ul class="productGrid productGrid--maxCol3" data-product-type="polos-shirts-on-sale">
{{#each products}}
<li class="product">
{{>components/products/card theme_settings=../theme_settings}}
</li>
{{/each}}
</ul>
</main>
There isn't a way to fetch products from a specific category with existing handlebars helpers. You could inject context to a page with product IDs and use that to create product cards such as:
An example of injecting IDs to the category page (not the home page as you specified)
In assets/js/theme/category.js, this add the following:
constructor(context) {
super();
console.log(context.productIds);
}
And in templates/pages/category.html, add:
{{inject "productIds" (pluck category.products 'id')}}
For the home page, you will need to make changes to assets/js/theme/home.js instead of category or use the API and a separate server (not the utils API, but the API documented at bigcommerce.developer.com) to make a call to a category and provide IDs/product info.
I'm new to Selenium webdriver. Can someone help me how to make Xpath for (Flag button) on below code.
<div class="right-pan">
<ul class="right-pan-btn">
<li class="closeandtrain">
<a class="gray-color" onclick="btnChangeReviewStatusClick(3)">
<span class="statusiconclass icon-close1"/>
Close
</a>
</li>
<li>
<a onclick="btnChangeReviewStatusClick('3_1')" title="Close and train this policy">
<span class="icon-hats"/>
Close
</a>
</li>
<li class="noclassName">
<a onclick="btnChangeReviewStatusClick(4)">
<span class="flag"/>
Flag
</a>
</li>
<li>
<a onclick="btnChangeReviewStatusClick(5)">
<span class="esc"/>
Escalate
</a>
</li>
<li>
<a onclick="btnCaseClick()">
<span class="case"/>
Case
</a>
</li>
</ul>
<ul class="right-pan-links">
</div>
I tried it on Fire path that path is not working and its showing (Unable to locate element) exception
try xpath //span[#class='flag']
I am not able to comment to your post, so posting this as answer.
You can go through this link to learn about xpaths.
http://www.tizag.com/xmlTutorial/xpathtutorial.php
Can you try this
I think you should click parent of span
//span[#class='flag' and text()='Flag']/ancestor::a[1]
or
//span[#class='flag' and text()='Flag']/..
For some reason, breadcrumbs is formatted all wrong - arrows over text and the start of breadcrumbs is way over to the left and not in-line with the template
Problem Code:
<ul>
<li class="home">
<span typeof="v:Breadcrumb">
<a property="v:title" rel="v:url" title="Go to Home Page" href="your-url/">Home</a>
»
</span>
</li>
<li class="category96">
<span typeof="v:Breadcrumb">
<a property="v:title" rel="v:url" title="" href="your-url">Accessories</a>
»
</span>
</li>
<li class="category6">
<span typeof="v:Breadcrumb">
<strong>Scope</strong>
</span>
</li>
Using Firebug i found that if i make these changes, then it is displayed exactly as i required:
<ul>
<li class="home">
<a property="v:title" rel="v:url" title="Go to Home Page" href="your- url/">Home</a>
»
</li>
<li class="category96">
<a property="v:title" rel="v:url" title="" href="your-url">Accessories</a>
»
</span>
</li>
<li class="category6">
<strong>Scope</strong>
</li>
PROBLEM
Where do i make these changes in the file structure of magento?
could be a school boy error but has been driving me mad all day
any help much appreciated
Breadcrumb content are rendered from the following file
app\design\frontend\<your_package>\<your_theme>\template\page\html\ breadcrumbs.phtml
If the file is not present in your theme. Get the copy of the file from base/default or rwd/default theme.
Then paste it in your theme with above file path.
please help me i cant make my drop down list vertical. when I hover over a list it is horizontal.
my html code
<div id="header">
<div>
<img src="logo.png" alt="LOGO" height="115" width="115px" />
<ul id="navigation">
<li class="active">
Home
</li>
<li>
What We Offer
</li>
<li>
Solutions
<ul>
<li>
Inbound
</li>
<li>
Outbound
</li>
</ul>
</li>
<li>
About
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
css
I can't see your CSS, but did you apply display: inline to both the top-level AND sub-level menu items? This will cause the problem you describe.
The top-level li items should be display: inline, but their children should be display: block.
See this example: https://jsfiddle.net/tLqrrfy0/
We're trying to build a very particular interaction/animation with a mega menu that is leading us to a solution where we need to pull the top level items out of the hierarchy.
So, for example, the ideal markup is often something like this:
<ul>
<li>Fruit
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Radish</li>
<li>Potato</li>
</ul>
</li>
<li>Meat
<ul>
<li>Chicken</li>
<li>Beef</li>
</ul>
</li>
</ul>
It's hierarchical and fairly easy to navigate via keyboard as well as voice feedback.
For the interaction we're hoping to create, we really need something like this where the two levels are entirely separated:
<ul>
<li>Fruit</li>
<li>Vegetables</li>
<li>Meat</li>
</ul>
<div>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<ul>
<li>Radish</li>
<li>Potato</li>
</ul>
<ul>
<li>Chicken</li>
<li>Beef</li>
</ul>
</div>
Can this still be made as accessible as the former? If so, what needs to be done to ensure good keyboard navigation as well as screen reader compatibility?
You will need to mark this up as an ARIA menu. The correct markup would be the following:
<ul role="menubar">
<li role="menuitem" aria-haspopup="true" aria-owns="fruitmenu" tabindex="0">Fruit</li>
<li role="menuitem" aria-haspopup="true" aria-owns="vegmenu" tabindex="-1">Vegetables</li>
<li role="menuitem" aria-haspopup="true" aria-owns="meatmenu" tabindex="-1">Meat</li>
</ul>
<div>
<ul role="menu" id="fruitmenu" aria-expanded="true" >
<li role="menuitem" tabindex="-1">Apple</li>
<li role="menuitem" tabindex="-1">Banana</li>
</ul>
<ul role="menu" id="vegmenu" aria-expanded="false" >
<li role="menuitem" tabindex="-1">Radish</li>
<li role="menuitem" tabindex="-1">Potato</li>
</ul>
<ul role="menu" id="meatmenu" aria-expanded="false" >
<li role="menuitem" tabindex="-1">Chicken</li>
<li role="menuitem" tabindex="-1">Beef</li>
</ul>
</div>
Then you need to use JavaScript to implement the controls to manage the expand/collapse of the menus and manipulate the tabindex attribute for focus management (plus move the focus around) and aria-expanded (although depending on the JavaScript keyboard handling this might be superfluous.
Here is an example of an accessible ARIA menu implementation in Polymer although because of the issues with the namespacing in Polymer's shadow DOM emulation, the IDs are not unique as they should be.
A jQuery ARIA menu library
Native Web Components, Polymer and Angular2 ARIA menu implementations