I am trying to create custom tabs in BigCommerce but didn't come across any satisfactory solution.
Here is the format of product page in which i am already getting this default tabs
Product Description
Warranty
Reviews
Other Details
I want a dynamic tab for Q&A section for a specific product.
I am aware that it can be done through the script but not able to find it. Any help would be really appreciated.
You can use the {{split}} handlebars helper to split your product description content into sections that should be displayed on different tabs.
For example, you could edit your description-tabs.html file (or the equivalent file if you are using a theme other than Cornerstone) like this to add the new tab and split the product description content into two sections:
<ul class="tabs" data-tab>
<li class="tab is-active">
<a class="tab-title" href="#tab-description">{{lang 'products.description'}}</a>
</li>
{{#if product.warranty}}
<li class="tab">
<a class="tab-title" href="#tab-warranty">{{lang 'products.warranty'}}</a>
</li>
{{/if}}
<li class="tab">
<a class="tab-title" href="#tab-faq">Q & A</a>
</li>
</ul>
<div class="tabs-contents">
<div class="tab-content is-active" id="tab-description">
{{{first (split product.description '<!-- tab -->')}}}
</div>
{{#if product.warranty}}
<div class="tab-content" id="tab-warranty">
{{{product.warranty}}}
</div>
{{/if}}
<div class="tab-content" id="tab-faq">
{{{last (split product.description '<!-- tab -->')}}}
</div>
</div>
The delimiter we're specifying is <!-- tab -->. To divide your description content among different tabs, enter your product description and your Q&A section into the product description editor with <!-- tab --> in between the sections to indicate where the content should be split among different tabs.
The above answer works however don't use '<!-- tab -->' it compiles as <!-- tab --> in source code so it will not work. Use any string with normal characters. Ex: 'splity'
Related
I'm attempting to create a custom widget in Sitefinity 11. The goal is to display tabs on the page, with panels of content below each clickable tab. I am using bootstrap to accomplish this which is simple enough.
My hope was to be able to add a Sitefinity placeholder to each tab, which would allow editors to drag and drop a widget, such as a content block to that tab. But it seems that when I try to do this, the placeholder area never displays in the CMS, like it would if I had added a placeholder to a custom template.
Is this possible?
Here is a short code example:
<div class="container mt-3">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li id="tab1" class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel1">#Model.Tab1Name</a>
</li>
<li id="tab2" class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel2">#Model.Tab2Name</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="panel1" class="container tab-pane active">
#Html.SfPlaceHolder("Panel1")
<p>here is text</p>
</div>
<div id="panel2" class="container tab-pane fade">
#Html.SfPlaceHolder("Panel2")
</div>
</div>
Appreciate any help.
You cannot put a SfPlaceHolder on a widget, it must be in your layout file (page template).
What you can do is to create a custom designer for your widget and put one or more content blocks in it, e.g. one for each tab you want to have.
Then in the view, you simply render the content.
https://www.progress.com/documentation/sitefinity-cms/create-custom-designer-views-mvc
EDIT: To achieve this you need:
Controllers / MyRichTextController.cs
public string RichText
{
get;
set;
}
Views / MyRichText / DesignerView.Default.cshtml
<div class="form-group">
<sf-html-field class="kendo-content-block"
sf-images-settings="#SettingsHelpers.GetMediaSettings("Image")"
sf-videos-settings="#SettingsHelpers.GetMediaSettings("Video")"
sf-documents-settings="#SettingsHelpers.GetMediaSettings("Document")"
sf-model="properties.RichText.PropertyValue">
</sf-html-field>
</div>
Views / MyRichText / DesignerView.Default.json
{
"priority": 1,
"components": [ "sf-html-field" ]
}
Another alternative could be to create a Layout widget with the above html structure and that will allow the user to put content blocks inside the areas of the layout.
You can just copy any of the existing layout widgets and work on that. Note, that with this approach you would probably have some css rules that hide all but the first tab panel, so you will need to have some additional css rules just for the backend in order to show all the panels so that users can drag widgets to them. That would make this approach a little bit more trickier.
I am using Classic next theme
For stencil I have a below code but this is not working in blue print.
{{#each categories}}
{{#if ../breadcrumbs.[1].name '===' name}}
{{#if children}}
<h5>{{name}}</h5>
<ul class="navList">
{{#each children}}
<li class="navList-item">
<a class="navList-action" href="{{url}}" alt="{{name}}" title="{{name}}">{{name}}</a>
</li>
{{/each}}
</ul>
{{/if}}
{{/if}}
{{/each}}
The answer might be different depending on what specific Blueprint theme you are using but, I would try using the "%%SNIPPET_SubCategories%%" variable inside of the "category.html" file.
I am trying to hide the cart button in the top right unless the customer is logged in. I have been able to successfully do this for other buttons by editing the navigation.html file with:
{{/if}}
{{#if settings.account_creation_enabled}}
However, when I try to do this for the cart button I keep getting an error when trying to save the file. The code is:
{{/if}}
{{#if settings.account_creation_enabled}}
<li class="navUser-item navUser-item--cart">
{{#if customer}}
<a
class="navUser-action"
data-cart-preview
data-dropdown="cart-preview-dropdown"
data-options="align:right"
href="{{urls.cart}}">
<span class="navUser-item-cartLabel">{{lang 'common.cart'}}</span> <span class="countPill{{#if cart.items}} countPill--positive{{/if}} cart-quantity">{{cart.quantity}}</span>
</a>
{{/if}}
I get this error which references the line where the {{#if statement starts:
Template parse error in templates/components/common/navigation.html. Parse error on line 51
I use this exact same code to hide other buttons, but this one not working. Anybody know what I might be doing wrong?
I'm not sure why you're starting your code snippert with {{/if}} as that should be the end of the statement. Your code as posted closes an unseen {{#if statement and doesn't close the one you've shown.
BigCommerce Handlebars Control-Flow Helpers
This would make more sense:
{{#if settings.account_creation_enabled}}
<li class="navUser-item navUser-item--cart">
{{#if customer}}
<a
class="navUser-action"
data-cart-preview
data-dropdown="cart-preview-dropdown"
data-options="align:right"
href="{{urls.cart}}">
<span class="navUser-item-cartLabel">{{lang 'common.cart'}}</span> <span class="countPill{{#if cart.items}} countPill--positive{{/if}} cart-quantity">{{cart.quantity}}</span>
</a>
{{/if}}
{{/if}}
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
I would like to change the active pill/tab on document load. I know you can set the active pill like I have below but for other reasons I want to change it after document load. I have tried various bits of JS but nothing seems to work. Here's the HTML and JS (I have also tried replacing data-toggle="pill" with data-toggle="tab" below and still doesn't work).
<div>
<ul class="nav nav-pills pillstyle">
<li class="active tabstyle"><a data-toggle="pill" href="#apple">Apple</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#banana">Banana</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#pear">Pear</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#orange" >Orange</a></li>
</ul>
</div> <!-- nav pills close -->
<div class="tab-content">
<div id="apple" class="tab-pane fade in active"> `
.... content of tabs.
JS
$(document).ready(function(){
$('#banana').tab('show');
});
or
$(document).ready(function(){
$('#banana').pill('show');
});
You just need to change your jQuery selector to address the a element instead of the tab-pane div.
$(document).ready(function(){
$('a[href="#banana"]').tab('show');
});
If you need, you can find more detailed description about bootstrap tabs in the official documentation.
#Stu Here you go.
HTML:
Assign an ID myTab to UL element.
<ul class="nav nav-pills pillstyle" id="myTab">
JS:
$(function () {
$('#myTab a[href="#banana"]').tab('show');
});
Also refer to Bootstrap documentation on selecting different elements on load here. It will give you better understanding.
http://getbootstrap.com/2.3.2/javascript.html#tabs
Working demo: https://jsfiddle.net/tf9k9j27/
Note: Just to answer your trial and error.
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling. (From bootstrap docs. read more to get better clarity)