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/
Related
I'm using Fortune and the 'Login and Register' are at the bottom of the page. Does anyone know how to put it at the top of the page with the other headings.
Please use below code:
{{#if customer}}
<li class="header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="{{urls.account.index}}">{{lang 'account_general.your_account'}}</a>
</li>
<li class="header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="{{urls.auth.logout}}">{{lang 'account_general.log_out'}}</a>
</li>
{{else}}
<li class="header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="{{urls.auth.login}}">{{lang 'account_general.log_in'}}</a>
</li>
{{#if settings.account_creation_enabled}}
<li class="header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="{{urls.auth.create_account}}">{{lang 'account_general.sign_up'}}</a>
</li>
{{/if}}
{{/if}}
The following renders a header text and some child elements.
What I would like to accomplish is that the child elements toggle (hide/unhide) when the header is clicked. So in below example, when Spanish01 is clicked, all its children should be hidden and when its clicked again the should reappear.
I tried to find a similar case on the internet but could not find any. All help is welcome
<div id="dashboard">
<ul class="collection with-header">
<li class="collection-header"><h4>Cards</h4></li>
<li v-for="card in cards" v-bind:key="card.id" class="collection-item">
<div class="chip">{{card.group_name}}</div>
<ul class="collection with-header">
<li v-for="(value, index) in card.group" v-bind:key="index" class="collection-item">
<ul>
<li>
front: {{value.front}}
</li>
<li>
back: {{value.back}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
You can simply put an extra variable on each of your cards. Then you can do something like this:
<div id="dashboard">
<ul class="collection with-header">
<li class="collection-header"><h4>Cards</h4></li>
<li v-for="card in cards" v-bind:key="card.id" class="collection-item">
<div class="chip" #click="card.shown = !card.shown>{{card.group_name}}</div>
<ul class="collection with-header" v-show="card.shown">
<li v-for="(value, index) in card.group" v-bind:key="index" class="collection-item">
<ul>
<li>
front: {{value.front}}
</li>
<li>
back: {{value.back}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Obviously, you have to alter your variable cards so it contains the shown attribute by default. As an alternative, you can set up a different variable that contains the shown status and use some unique id to look up the value instead.
I placed this Code on card.html, review count is not work only search page.
{{#if show_rating}}
<p class="card-text" data-test-info-type="productRating">
<span class="rating--small">
{{> components/products/ratings rating=rating}}
</span>
<span class="productView-reviewLink">
{{#if rating '>' 0}}
<a href="{{url}}#product-reviews">
{{lang 'products.reviews.link_to_review' total=num_reviews}}
</a>
{{else}}
{{lang 'products.reviews.link_to_review' total=num_reviews}}
{{/if}}
</span>
</p>
{{/if}}
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>
I am new to stencil and I am trying to get the top-level category when on a non-top-level category page. I am looking to loop through the categories but only print the items listed below the top-level. Here is what I am using that works if I am on a top-level page but doesnt if I am on a subcategory page.
{{#each categories}}
{{#if name '===' ../category.name}}
<li class="parent {{#if children}}has-children tier-dropdown{{/if}}">
{{name}}
{{#if children}}
<ul class="children">
<li class="parent-all">{{lang 'common.navigation_all'}} {{name}}</li>
{{#each children}}
<li>
{{name}}
{{#if children}}
<ul class="children2">
<li class="parent-all">{{lang 'common.navigation_all'}} {{name}}</li>
{{#each children}}
<li {{#if children}}class="tier-dropdown"{{/if}}>
<a {{#if children}}class="tier-toggle"{{/if}} href="{{url}}">{{name}}</a>
{{#if children}}
<ul class="tier-panel">
<li class="parent-all">{{lang 'common.navigation_all'}} {{name}}</li>
{{#each children}}
<li {{#if children}}class="tier-dropdown"{{/if}}>
<a {{#if children}}class="tier-toggle"{{/if}} href="{{url}}">{{name}}</a>
{{#if children}}
<ul class="tier-panel">
<li class="parent-all">{{lang 'common.navigation_all'}} {{name}}</li>
{{#each children}}
{{> components/common/site-navigation-submenus}}
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/if}}
{{/each}}
The main point of emphasis is line 2 as that if statement needs to always point to the top-level category even when on a subcategory page.
I have though about using breadcrumbs but cant come up with a way to use that inside the categories each loop.
There isn't a pure Stencil/Handlebars.js solution for this. You need to be able to do a recursive upward search of the parent categories which BigCommerce doesn't have a helper for. The best solution is to restyle or add items to the list during page load.
You can either use the page url, depending on the structure of your URLs, or breadcrumbs as you mentioned.
TL;DR you need javascript.