I am using BigCommerce Theme for my website and I was trying to show Brands on homepage. I used below mentioned code but it does not give any output. Here is my code
<ul class="brandGrid">
{{#each brands}}
<li class="brand">
<article class="card {{#if alternate}}card--alternate{{/if}}">
<figure class="card-figure">
<a href="{{url}}">
<img class="card-image" src="{{getImage image 'brand_size' (cdn ../theme_settings.default_image_brand)}}" alt="{{name}}" title="{{name}}">
</a>
</figure>
<div class="card-body">
<h4 class="card-title">
{{name}}
</h4>
</div>
</article>
</li>
{{/each}}
</ul>
Related
is it possible to make Bootstrap 4 Carousel to play ONLY on hover? Like normally it's a still image, but on mousehover it starts to cycle the carousel and on mouseout it pauses.
slider.html
<div id="carousel-example-generic" class="carousel slide carousel-fade slider slideInUp"
data-ride="carousel">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class="tab-section">
<div class="user">
<ul class=" carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active wow slideInUp " data-wow-delay=".1s">
<a href="" class="transition-fast">
<span class="count">01</span>
<span class="text">
Lorem Lopsun
</span>
</a>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=" wow slideInUp"
data-wow-delay=".2s">
<a href="" class="transition-fast">
<span class="count">02</span>
<span class="text">
Lorem Lopsun
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-5 col-md-6 wow slideInRight" data-wow-delay="1s">
<div class="carousel-inner wow slideInUp" data-wow-delay="2s" role="listbox">
<div class="item active">
<img src="assets/img/first-01.png" alt="">
</div>
<div class="item">
<img src="assets/img/first-02.png" alt="">
</div>
</div>
</div>
</div>
</div>
script.js
$('#carousel-example-generic').hover(function(){
$("#carousel-example-generic").carousel('cycle');
},function(){
$("#carousel-example-generic").carousel('pause');
});
First disable the default behaviour of the carousel to stop on hover by putting setting the data-pause to false
id="carousel-example-generic" class="carousel slide carousel-fade slider slideInUp" data-pause="false"
Use the following js to manage the hover behaviour
$('.carousel').carousel({
interval: 2000
})
$('.carousel').carousel('pause') ;
$('.carousel').hover(function(){
$('.carousel').carousel('cycle') ;
}) ;
$('.carousel').mouseleave(function(){
$('.carousel').carousel('pause') ;
});
Code looks fine in my opinion, I basically used the example code from the docs. jQuery is also referenced before bootstrap.js as well. What could be the issue here? When I click on any other tab that's not active, it still only displays the first tabs content.
<section id="how-it-works">
<div class="container">
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li>
<a href="#tab2" data-toggle="tab" aria-controls="tab2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li>
<a href="#tab3" data-toggle="tab" aria-controls="tab3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li>
<a href="#tab4" data-toggle="tab" aria-controls="tab4" role="tab" title="That's It!">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="#tab1" role="tabpanel">
<h3>Step 1</h3>
<p>This is step 1</p>
</div>
<div class="tab-pane" id="#tab2" role="tabpanel">
<h3>Step 2</h3>
<p>This is step 2</p>
</div>
<div class="tab-pane" id="#tab3" role="tabpanel">
<h3>Step 3</h3>
<p>This is step 3</p>
</div>
<div class="tab-pane" id="#tab4" role="tabpanel">
<h3>Step 4</h3>
<p>That's It!</p>
</div>
</div>
</div>
</div>
</section>
Try removing the # in the ID of each tab under tab content.
id="#tab4" to id="tab4"
Also, you tagged bootstrap 3 but the code you are using looks like it is from bootstrap 4.
https://v4-alpha.getbootstrap.com/components/navs/
I'm trying to add a shop by brand to a Bigcommerce theme. I've been through the template files and can't seem to make out what I need to do. I found the "shop-by-price.html" template page and I figured I could just paste some code above it but can't seem to find the brand listing code.
Here's the shop-by-price.html page
{{#if shop_by_price}}
<div class="sidebar-block shop-by-price facet-list" data-facet-filter>
{{> components/common/facet-toggle title=(lang 'category.shop_by_price')}}
<ul class="facet-list-items is-open" data-facet-filter-wrapper>
{{#each shop_by_price}}
<li class="facet-item">
<a class="{{#if selected }}is-active{{/if}}" href="{{url}}" alt="{{low.formatted}} - {{high.formatted}}">{{low.formatted}} - {{high.formatted}}</a>
</li>
{{/each}}
</ul>
{{#any shop_by_price selected=true}}
<a href="{{category_url}}" class="link facet-remove">
{{lang 'category.reset'}}
</a>
{{/any}}
</div>
{{/if}}
if I am not wrong so you want to show brands list in category sidebar page so please open your stencil theme editor from admin end then
templates->components->category->sidebar.html open the file sidebar.html and paste below code
<nav>
{{#if category.subcategories}}
<div class="sidebarBlock">
<h5 class="sidebarBlock-heading">{{category.name}}</h5>
<ul class="navList">
{{#each category.subcategories}}
<li class="navList-item">
<a class="navList-action" href="{{url}}" alt="{{name}}" title="{{name}}">{{name}}</a>
</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if shop_by_brand}}
<div class="sidebarBlock">
<h5 class="sidebarBlock-heading">{{lang 'brand.label'}}</h5>
<ul class="navList">
{{#each shop_by_brand}}
<li class="navList-item">
<a class="navList-action" href="{{url}}">{{name}}</a>
</li>
{{/each}}
<li class="navList-item">
<a class="navList-action" href="{{urls.brands}}">{{lang 'common.view_all'}}</a>
</li>
</ul>
</div>
{{/if}}
{{#if category.faceted_search_enabled}}
{{> components/faceted-search/index category}}
{{else}}
{{> components/category/shop-by-price shop_by_price=category.shop_by_price category_url=category.url}}
{{/if}}
</nav>
after hit the save and apply button it will look like this
http://deepak-diwan-s-store.mybigcommerce.com/ala-carte-by-the-lb/
I'm trying to get a Bootstrap 3 navbar collapse properly but still have two open issues:
the margins not equal:
when the navbar breaks, the icons are not left aligned with the text:
I know how I could add style fixes until I get this right, but I how do I solve this properly?
https://jsfiddle.net/edwardtanguay/v83aj4cn/3
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-collapse">
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-minus"></span>
</a>
<p class="navbar-text">Company Name</p>
<p class="navbar-text">CUSTOMER PORTAL</p>
<p class="navbar-text navbar-right">Contact Name</p>
<p class="navbar-text navbar-right">2016-04-14</p>
</div>
</div>
</div>
</nav>
</div>
There you go friend!
SOLUTION JDSFILE
Regards!
I am building a CMS editor and one of the things that can be customized is the text appearing in the Navbar. I am having a problem with showing two Navbars. Most examples i have seen are multiple Navbars one below the other and is not what i need.
I need the first Navbar to be the editor's own Navbar, while the second Navbar is somewhere below the first Navbar but not directly below it.
You have to remove navbar-fixed-top from the second nav
html would be like this
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>Conent</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div> <!-- /container -->
<div class="navbar ">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
in bootply