When Customer clicks "Add to cart" button for any product a preview pop up appears, it has "You may also like" it is automatic and is giving wrong products. I want to replace it with "Related products" which we can manage from dashboard.
The code which need to be changed is in stencil under templates/components/cart/preview.html
I see suggested_products I want to remove it and add related_products. I don't know how to do it, I don't know if there is a variable available for related_products
{{#if cart.suggested_products}}
<section class="suggestiveCart">
<h3>
{{lang 'cart.added_to_cart.you_might_also_like'}}…
</h3>
<ul class="productGrid">
{{#each cart.suggested_products}}
<li class="product">
{{> components/products/card hide_product_quick_view=true theme_settings=../theme_settings}}
</li>
{{/each}}
</ul>
</section>
{{/if}}
Related product data is scoped just to the product page--it isn't available in the cart the way suggested products are. The best solution would be to make an ajax request for the product data using the stencil utils library.
https://developer.bigcommerce.com/stencil-docs/adding-event-hooks-to-your-theme/stencil-utils-api-reference#stencil-utils_product
api.product.getById(ID, 'template', (err, response) => {
console.log(response);
});
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 currently have a website/app that displays "FeatureCard" (components) onto a "Grid" component.
The feature cards have all the basic props to pass to the parent (Grid) component, so that data can be grabbed and a v-for used to create as many "featureCards" as possible.
That is all fine and working.
The issue comes when I want a title of a Feature card to link to its on slug-route.
Here is a snippet of my "FeatureCard" component -
<div class="card-content">
<div class="row-1">
<!-- <h4 class="bold">{{ resourceTitle }}</h4> -->
<router-link :to="{ name: 'FigmaFind', params: {resource_slug: this.slug} }"><h4 class="bold">{{ resourceTitle }}</h4></router-link>
<button class="price"><h6 class="bold">{{ resourcePrice }}</h6></button>
</div>
<div class="row-2">
<a :href=creatorProfile target="_blank" >
<img :src="creatorImage">
</a>
<a :href=creatorProfile target="_blank" >
<p>By <strong>{{ creatorsName }}</strong></p>
</a>
</div>
<div class="row-3">
<a :href="downloadLink" class="btn main" target="_blank" >
<p class="light semibold" for="info" >Download Resource</p>
</a>
<a :href="resourceOriginalLink" class="btn icon" target="_blank">
<p class="material-icons light md-18">info</p>
</a>
</div>
</div>
As you can see, in "row-1" I have tried including a router-link, but obviously it doesn't work as it has not yet recieved the data for "this.slug" but essentially, that is where I want a user to click this, and be redirected to "website.com/selected-item-1"
My issue is, I do not pull the "slug" data in, until it is rendered onto the Grid component. So, until then I am not sure how to reference it for later use, I referenced the titles as "resource title" or links as ":href="resourceOriginalLink"" but no idea how to do it for a router item. I could just use ":href="resourceOriginalLink"" but I don't know how I would pass the route-info through...
any ideas?
UPDATE
So, I figured it out. It may be the wrong way to do it, or there may be an easier way. But here is what I have done.
I passed the data "slug" as a prop to my child component (featureCard).
I then set slug: this.resourceSlug in my data.
Then within my title section I simply set <router-link :to="{ name: 'FigmaFind', params: { resource_slug: this.slug }}"><h4 class="bold">{{ resourceTitle }}</h4></router-link>
And, it seems to be working!!
Obviously, if there is a better way please, someone let me know.
UPDATE
So, I figured it out. It may be the wrong way to do it, or there may be an easier way. But here is what I have done.
I passed the data "slug" as a prop to my child component (featureCard). I then set slug: this.resourceSlug in my data. Then within my title section I simply set {{ resourceTitle }}
And, it seems to be working!!
Obviously, if there is a better way please, someone let me know.
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'
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 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)