I'm trying to add a small bit of logic to the Hotcakes DrillDown view. During the foreach loop on the Products array, I'd like to check to see if the product name contains a specific substring, and if it does, add some html markup for that product. I've looked at the If Binding in Knockout but the examples seem to show to if a property is equal to some value. I want to check to see if the property contains a certain value.
<!-- ko if: Products().ProductName.contains('string') -->
<div >This product contains substring</div>
<!-- /ko -->
The above code doesn't seem to work. I'm getting an error message that says
Uncaught ReferenceError: Unable to process binding "foreach: function (){return Products }"
Message: Unable to process binding "if: function (){return Products().ProductName.contains('string') }"
Message: Products is not defined
Is something like this possible?
What you're trying to do needs to be updated in the Category JS file, and not just in the markup itself. This is because the views are using KnockoutJS for binding the product data. You'll see a complete answer of this in your other question.
Hotcakes Commerce Extending the DrillDown ViewModel
Related
I want to override the add-to-cart component in the Product List Page.
This is what I came up with as a solution:
<ng-template [cxOutletRef]="productListOutlets.ITEM_ACTIONS" let-product>
<app-custom-add-to-cart
*ngIf="product.stock?.stockLevelStatus !== 'outOfStock'"
[showQuantity]="false"
[product]="product"
></app-custom-add-to-cart>
</ng-template>
The problem is that the product is undefined. Probably im missing some understanding of how to get the context in an outlet.
In the documentation it is stated that you could get a reference to the context this way but it depends on where the outlet is used.
https://sap.github.io/spartacus-docs/outlets/
Does anyone know how to get access to the outlet-context?
I found out that this is not possible. The context that is provided for this outlet contains only component data and not product data.
I'm making an app using VueJS and Framework7, and I'm having trouble understanding how to apply dynamic route matching to my app.
My app has two pages, main view and info page. On the main page, there is a list of links that all lead to the info page. However, the links are generated from API data, and I wish to do the same on the info page. What I'm trying to do is pass the id parameter from the API data into the link address, so that it's stored in there even while I load the same info page template. Using that id, I'd like to identify which data to print on the info page from the API data.
Here is my link element:
<f7-list-item v-for="lowerBoss in lowerBosses" :key="lowerBoss.id" :data="lowerBoss" class="single-boss subheading white" link="/boss/lowerBoss.id" onclick="console.log(lowerBoss)">
{{ lowerBoss.name }}
</f7-list-item>
So here I am trying to pass the id from the lowerBoss object into the link address and key. I tried to console.log the object as well, but whenever I click on this link, I get an error saying lowerBoss is not defined.
I am aware that I should most likely be using router-link for this, but I had trouble getting that to work - the links would not work wherever they led. Besides that, I had the same issue with them too.
The answer above is right. You have to remmeber, that every property that written as usual <component link="some-link/object.id"></component> will not be parsed, but will be passed as string. So you have to use :link="'/bla/bla/'+object.id".
lowerBoss will be available inside f7 component as "data", because of :data="lowerBoss" this part of your tag.
Check this Vue.js Passing Static or Dynamic Props
To handle events you have to use vue.js directives Event handling
Try as below
<f7-list-item v-for="lowerBoss in lowerBosses" :key="lowerBoss.id" :data="lowerBoss" class="single-boss subheading white" :link="'/boss/'+lowerBoss.id">
{{ lowerBoss.name }}
</f7-list-item>
I have come to a road block in my search to the answer to using custom fields in templates.
I have tried adding
%%SNIPPET_ProductCustomFields%%
in the ProductDescription.html but nothing shows.
Is there ANY documentation about this?
Can this snippet be used in certain places only? if so which ones?
What needs to be in place for this to display in the products description?
Any help, tips or pointers would be great.
The CustomFields Snippet, %%SNIPPET_ProductCustomFields%%, can only be used if being referenced through its own Panel.
By default, the Panel that calls this snippet is named %%Panel.ProductOtherDetails%%
You can also create your own custom Panels by uploading them to the Panels folder via WebDav.
For example, if you created a template file called CustomFieldsPanel.html, you would upload it to the /dav/template/Panels folder, and reference it in your theme by %%Panel.CustomFieldsPanel%%
To answer your question though, you can do one of the following to display Custom Fields in the Product Description:
Insert it into ProductDescription.html via its default Panel - %%Panel.ProductOtherDetails%% - modifying it by editing the template file ProductOtherDetails.html
Create your own custom panel, include the Snippet within that same custom panel, and insert it into ProductDescription.html by the custom panel's name. An example of that file might look like so:
<!--
* /dav/template/Panels/MyCustomFieldsPanel.html
* %%Panel.MyCustomFieldsPanel%%
-->
<div id="MyCustomFieldsPanel">
<h1> Custom Fields Below </h1>
%%SNIPPET_ProductCustomFields%%
</div>
Hope this helps :-)
I have a Data View in an Xpage application which is using the Bootstrap theme. I started to use a View, but could never get the pagers lines up, and the data view is working better.
But I do not understand where to put my table class css. For example, if I want a stripped table I enter "table table-striped" in the styleClass of the view (or maybe it is the dataStyleClass). If I do that in the styleClass of the data view, I do not get strips.
I tried the suggestion from Mark below, but something is not working. I added a script call and used the id of the tableview. It already has a class of "cleearfix table" on it.
I have added Chrome's web inspector to show what is going on.
The xe:dataView control does have a styleClass attribute, but classes that you set there are added to the div element that wraps the dataview, not the table (and that's where Bootstrap needs the table-striped class. I would solve this with some JavaScript to add the classes you need on the table element
<xp:scriptBlock
id="scriptBlock1">
<xp:this.value><![CDATA[
$("table.dataview").addClass("table-striped table-hover")
]]></xp:this.value>
</xp:scriptBlock>
I'm trying to load a view in to Aurelia using the compose template with the only the view attribute specified. ie.
<compose view="./test.html"></compose>
As soon as I add the above tag to and existing view I get the error message below.
UseView is not defined↵ at Function.normalize (http://localhost:9000/jspm_packages/github/aurelia/templating#0.10.2/view-strategy.js:40:27)`.
How can I use the compose element to load in a remote template?
As mentioned by #PW Kad this bug has now been resolved. Some really quick work by the aurelia team there!
https://github.com/aurelia/templating/issues/54