We Keep Coding

wix programmatically connect a table to a product page

Hello I have made a web store using the Wix platform and I am having an issue connecting my custom coded table to a product page. The way I have it is the customer can search the products by title and the results populate a table with custom fields. The issue I am having is I want the customer to be able to click on a row and that will navigate them to the product page displaying the product they have clicked. here is my table in JSON object form which I got from the API docs and replace my own properties (works fine):
$w('#table1').columns = [{
"id": "col1", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "mainMedia",
"label": "Image", // The column header
"width": 100, // Column width
"visible": true, // Column visibility
"type": "image", // Data type for the column
// Path for the column if it contains a link
"linkPath": "link-path-or-property" //<this is what the doc says
},
{
"id": "col2",
"dataPath": "name",
"label": "Name",
"width": 350,
"visible": true,
"type": "text",
"linkPath": "this is where I should have a link I think but what link"
}, {
"id": "col3",
"dataPath": "formattedPrice",
"label": "Price",
"width": 100,
"visible": true,
"type": "text",
"linkPath": "ProductPageUrl"
}, {
"id": "col4",
"dataPath": "sku",
"label": "SKU",
"width": 100,
"visible": true,
"type": "text",
} //,
// more column objects here if necessary
// ...
// ...
];
Then I use the built in function for my click event:
export function table1_rowSelect(event, $w) {
//Add your code for this event here:
console.log(event.rowData); //It does read the correct item clicked
}
Is this even possible?

You're in the right direction. Yes, linkPath is where you put the link to the product page. (You could also use the rowSelect event with wixWindow.to(), but you don't need to do both.) Now all you need to do is figure out the correct path to use in linkPath.
Looks to me like you're using a Wix Stores collection for your row data. If so, when setting the table columns, you use the field key (not field name) of the field that contains the link. So for the product page, use productPageUrl. Note, that this is per column. So if you want each cell to be a link, you have to add the linkPath to every column.

Create dynamic checkboxes using jquery from JSON data

I haven't found a solution online to this yet, if its available i would love to check it out. I would like to be able to create dynamic checkboxes based on selection from a dropdown, basically the dropdown looks something like this
<select>
<option value="Computer">Volvo</option>
<option value="Vehicle">Saab</option>
</select>
I have an accessories table in the database storing accessories that should be displayed to the user.
id | category | name |
----------------------------
1 | computer | mouse |
2 | computer | keyboard |
2 | vehicles | Roof-rack |
I would like to have a scenario where the user selects a category in the dropdown then a group of check boxes are dynamically created based on the name of accessories in the table. I'm using the code below that should return
a JSON of accessory names.
$.get("{{config('app.url') }}/hardware/models/"+catid+"/accesories",{_token: "{{ csrf_token() }}"},function (data) {
});
EDIT: the data returned looks somethink like;
{
"computer": [{
"id": "1",
"name": "mouse"
},
{
"id": "2",
"name": "keyboard"
},
{
"id": "1",
"name": "mouse"
}
]
}
For example: if a user selects computer from the dropdown then there should be checkboxes of accessories like keyboard, mouse, etc generated dynamically. Hope you can help me out. I am using laravel if that's important. Thanks

It will be better to return an array of objects instead, then you could iterate every accessory and generate the proper related checkbox like the following example shows :
$.get("{{config('app.url') }}/hardware/models/"+catid+"/accesories",{_token: "{{ csrf_token() }}"},function (data) {
data = $.parseJSON(data);
data.forEach( function (obj){
$('#dynamic_div').append('<input name="accesories" type="checkbox" value="'+obj.id+'"/> '+obj.name +'<br/>');
});
});
NOTE : If you cant' change the returned result you could change just the parse line to :
data = $.parseJSON(data['computer']);
But you should take in your consideration that 'computer' should be changed dynamically as a variable.
Hope this helps.
var arr = [{
"id": "1",
"name": "mouse"
},
{
"id": "2",
"name": "keyboard"
},
{
"id": "1",
"name": "mouse"
}
];
arr.forEach( function (obj)
{
$('#dynamic_div').append('<input name="accesories" type="checkbox" value="'+obj.id+'"/> '+obj.name +'<br/>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dynamic_div"></div>

dependent dropdownlist with json and python

So I am making a dialog panel for my chat bot in django framework. The Dialog panel consists of intent and entities dropdown list and a dialog textarea. The dropdown list will be dependent on my training data which is in json format.
I want the dropdownlist so that if I choose intent, the entities dropdown list create itself automatically and show all the entities related to selected intent.
I have tried and I am able to show intent dropdown but that too had duplicate intents(which i removed using python set function).But I am unable to figure out how to show all entities based on one particular intent.
Help me. Here's my example json:
{"rasa_nlu_data": {
"common_examples": [
{
"text": "hey",
"intent": "greet",
"entities": []
},
{
"text": "yep",
"intent": "affirm",
"entities": []
},
{
"text": "i'm looking for a place to eat",
"intent": "restaurant_search",
"entities": []
},
{
"text": "i'm looking for a place in the north of town",
"intent": "restaurant_search",
"entities": [
{
"start": 31,
"end": 36,
"value": "north",
"entity": "location"
}
]
},
{
"text": "show me chinese restaurants",
"intent": "restaurant_search",
"entities": [
{
"start": 8,
"end": 15,
"value": "chinese",
"entity": "cuisine"
}
]
},
{
"text": "bye",
"intent": "goodbye",
"entities": []
}
]}}

Basically, all you have to do is loop over the items inside common_examples and check if the intent matches the selected value in the dropdown. If it does, add the entities to entities dropdown.
Since you haven't provided much info about your HTML, I'll try to answer with a few assumptions:
You've a select element with id intentDropdown to show intents.
You've a select element with id entitiesDropdown to show entities.
You're using jQuery.
The code contains some comments to explain what it does.
<!-- intents dropdown -->
<select id="intentsDrowpdown">
<!-- intent options-->
</select>
<!-- entities dropdown -->
<select id="entitesDrowpdown"></select>
<!-- Javascript -->
<script>
var data = {"rasa_nlu_data": { ... }}; // the json data
var totalExamples = data.rasa_nlu_data.common_examples.length; // total items inside common_examples
// listen to the event when selected value in
// the intent dropdown changes
$("#intentsDropdown").on('change', function() {
$("#entitiesDropdown").empty(); // clear the previously added entities from entities drowpdown
var selectedIntent = this.value; // currently selected intent
// loop over the items in common_examples
for (var i = 0; i < totalExamples; i++) {
var currentExample = data.rasa_nlu_data.common_examples[i] // current example in the loop
// see if the selected intent matches the
// intent of the current example in the loop
if (currentExample.intent == selectedIntent) {
// if intent matches
// loop over the items inside entities
// of the current example
for (var j = 0; j < currentExample.entities.length; j++) {
// add the option in the dropdown
$("#entitiesDropdown").append($('<option>', {
value: currentExample.entities[j].value,
text: currentExample.entities[j].entity
}));
}
}
}
});
</script>
Finally, I'd like to bring one thing to your notice. Conside the example below:
"entities": [
{
"start": 8,
"end": 15,
"value": "chinese",
"entity": "cuisine"
}
The entities list has one item in it. And that item has 4 sub-items in it. In your question, you haven't made it clear if you want to show all the sub-items in one dropdown option (e.g. start: 8, end: 15, value: chinese, entity: cuisine) or if you want a separate option for each sub-item.
The JS code that I've posted will create a dropdown option like this:
<option value="chinese">cuisine</option>.
If you want to display other items, you can just create another loop and keep adding the items to dropdown.

Delete item using ANgularJS

I have a JSON file which contains data. I can print the data using ANgularJS. It will show in row with a checkbox and there is a Delete button. I want to delete the data from display and as well as from JSON file. Delete process would be like, Click on the checkbox which you want to Delete > Click on the Delete button. This is my plnkr link :-
http://plnkr.co/edit/A07XJk1RQNmhSnLFqLxH?p=preview
api.json is the JSON file.
This is the JSON file look like :-
{
"1": {
"venture": "XYZ Informatics",
"member": [
{
"name": "abcd",
"email": "abcd#gmail.com"
}
],
"message": "This is good day",
"isclicked": false
},
"2": {
"venture": "BBC Informatics",
"member": [
{
"name": "xyz",
"email": "xyz#gmail.com"
}
],
"message": "This is bad day",
"isclicked": true
}
}

Add ng-model to checkbox....then iterate data and use delete if it is checked
$scope.delete = function() {
angular.forEach($scope.datas, function(val, key) {
if (val.isclicked) {
delete $scope.datas[key];
}
})
}
View
<form ng-repeat="data in datas">
<input type="checkbox" ng-model="data.isclicked">{{ data.venture }}
</form>
<button ng-click="delete()">Delete</button>
DEMO

Assuming you have your data is on the scope, you'd use the JavaScript delete function to remove an item from the array.
So...
delete $scope.data["1"]
Angular's digest should update anything watching that scope property automatically.

Dojo combo box specify label and value

I am trying to follow this example on how to setup a combo-box using dojo, but wondering how one can specify name and value programmatically. The example presented uses the same values for label and value - which is probably not one wants in most cases.
{
"identifier": "abbreviation",
"label": "name",
"items": [
{ "abbreviation": "AL", "name": "Alabama" },
... other 48 states here ...
{ "abbreviation": "WY", "name": "Wyoming" }
]
}

If you are asking how to replace the hard coded list in the example then here is what you have to do. In the above scenario items was used to specify the data which is an array (abbreviations and names) of values.
In your case you will need to get the data / object from your data source. Once you have that data/object expose it to the view. Once this has been done you can now do the following structure.
You store is really your items above however stateStore will be a java script array which contains the data from your data source.
stateStore = [{"abbreviation": "AL", "name": "Alabama"},
... other 48 states here ...,
{ "abbreviation": "WY", "name": "Wyoming" }]
// create FilteringSelect widget, populating its options from the store
var select = new dijit.form.FilteringSelect({
name: "stateSelect",
placeHolder: "Select a State",
store: stateStore
}, "stateSelect");
HTML
<div style="width:50%;float: left;">
<h1>dijit.form.Select</h1>
<label for="stateSelect">State:</label>
<div id="stateSelect"></div>
</div>