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.

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.

How to make RTE hyperlinks "Open in new window" by default in adobe cq5?

I'm trying to modify LinkDialog.js under RTE to have the checkbox "Open in a new window" checked by default. According to the day API, it should just be adding the value "checked": true to the default values, but that doesn't work. It does accept my other value changes, such as the name, so I now the edits are coming through.
Here's the code I modified:
{
"itemId": "targetBlank",
"name": "targetBlank",
"xtype": "checkbox",
"boxLabel": CQ.I18n.getMessage("Open in new window"),
"checked": true,
"value": "targetBlank"
}

Try these props:
checked="{Boolean}true"
defaultValue="true"

Backbone? Can.js? Ghetto DIY? How should I work with this data?

I'm working on an application that lets our security dispatchers update a page that contains current road and campus conditions. The backend is a nodejs/express stack with and the data is a simple JSON structure that looks something like this:
{
"campus": {"condition": "open", "status": "normal"},
"roads": {"condition": "wet", "status": "alert"},
"adjacentroads": {"condition": "not applicable", "status": "warning"},
"transit": {"condition": "on schedule", "status": "normal"},
"classes": {"condition": "on schedule", "status": "normal"},
"exams": {"condition": "on schedule", "status": "normal"},
"announcements" : "The campus is currently under attack by a herd of wild velociraptors. It is recommended that you do not come to campus at this time. Busses are delayed.",
"sidebar": [
"<p>Constant traffic updates can be heard on radio station AM1234. Traffic updates also run every 10 minutes on AM5678 and AM901.</p>",
"<p>This report is also available at <strong>555-555-1234</strong> and will be updated whenever conditions change.</p>"
],
"links": [
{
"category": "Transportation Links",
"links": [
{
"url": "http://www.localtransit.whatever",
"text" : "Local Transit Agency"
},
{
"url": "http://m.localtransit.whatever",
"text" : "Local Transit Agency Mobile Site"
}
]
},
{
"category": "Weather Forecasts",
"links": [
{
"url": "http://weatheroffice.ec.gc.ca/canada_e.",
"text" : "Environment Canada"
},
{
"url": "http://www.theweathernetwork.com",
"text" : "The Weather Network"
}
]
},
{
"category": "Campus Notices & Conditions",
"links": [
{
"url": "http://www.foo.bar/security",
"text" : "Security Alerts & Traffic Notices"
},
{
"url": "http://foo.bar/athletics/whatever",
"text" : "Recreation & Athletics Conditions"
}
]
},
{
"category": "Wildlife Links",
"links": [
{
"url": "http://velociraptors.info",
"text" : "Velociraptor Encounters"
}
]
}
],
"lastupdated": 1333151930179
}
I'm wondering what the best way of working with this data on the client side would be (e.g. on the page that the dispatchers use to update the data). The page is a mix of selects (the campus, roads, etc conditions), TinyMCE textareas (announcements and sidebar) and text inputs (links). I'm open to changing this data structure if necessary but it seems to me to work well. I've been looking at Backbone, and also Can.JS but I'm not sure if either of those are suitable for this.
Some additional information:
there's no need to update an individual item in the data structure separatly; I plan on POSTing the entire structure when it's saved. That said...
there's actually two different views, one for the dispatchers and another for their supervisors. The dispatchers only have the ability to change the campus, roads, etc conditions through drop-downs and furthermore can only change the "condition" key; each possible condition has a default status assigned to it. Supervisors can override the default status, and have access to the announcements, sidebar and links keys. Maybe I do need to rethink the previous point about POSTing the whole thing at once?
the supervisors need to be able to add and remove links, as well as add and remove entire link categories. This means that DOM elements need to be added and removed, which is why I'm thinking of using something like Backbone or Can.js instead of just writing some ghetto solution that looks at all the form elements and builds the appropriate JSON to POST to the server.
Suggestions welcomed!

CanJS works great with nested data. can.Model is inheriting can.Observe which allows you to listen to any changes in the object structure.
If you include can.Observe.Delegate you have even more powerful event mechanism (example from the docs):
// create an observable
var observe = new can.Observe({
name : {
first : "Justin Meyer"
}
})
var handler;
//listen to changes on a property
observe.delegate("name.first","set",
handler = function(ev, newVal, oldVal, prop){
this //-> "Justin"
ev.currentTarget //-> observe
newVal //-> "Justin Meyer"
oldVal //-> "Justin"
prop //-> "name.first"
});
// change the property
observe.attr('name.first',"Justin")

Using updateFromJS is replacing values when it should be adding them

I have this code:
var attachmentsModel = {
convAttachments: ko.mapping.fromJS([])
};
$(function() {
ko.applyBindings(attachmentsModel)
refreshConvAttachments();
});
function refreshConvAttachments() {
$.ajax({
url: '/xxxxxxx/',
success: function (dataJS) {
// Send KO the data
ko.mapping.updateFromJS(attachmentsModel.convAttachments, dataJS);
}
});
}
The AJAX call above returns:
[{
"title": "BillGates",
"added_by": "xxx",
"thumb": "urlhere",
"id": 410,
"link": "/link/410",
"added_on": "2011-02-22T12:57:09-08:00"
}, {
"title": "biz-stone",
"added_by": "xxx",
"urlhere",
"id": 411,
"link": "/link/411",
"added_on": "2011-02-22T12:57:53-08:00"
}]
This works fine. Later though the user is able to add an attachment, and that's where it's breaking. While it adds the new attachment to the mode, and displays on the page, it removes all the previously loaded items in the attachmentsModel.convAttachments.
Later on, this happens:
ko.mapping.updateFromJS(attachmentsModel.convAttachments, file);
Ajax Returns:
[{
"title": "eric_schmidt",
"added_by": "xxx",
"thumb": "xxxxxx",
"id": 417,
"link": "/link/417",
"added_on": "2011-02-22T13:16:45-08:00"
}]
I hope that gives a clear walk through, if not please let me know. Any ideas why knockoutjs is kill everything when I use updateFromJS?

ko.mapping.updateFromJS() expects that you are receiving the complete list of items that was originally prepared with ko.mapping.fromJS(). Any items that are missing from the original are considered to be deleted and any new items in the updates are considered additions. So, currently the mapping plugin will not allow you to do incremental updates in this way.
If you are doing incremental updates, your best bet would be to locate the items that you need to update and either replace them completely or replace individual observables on each item.

you could always try using
$.extend(attachmentsModel.convAttachments,ko.mapping.fromJS(dataJS));
Although i am not quite sure if that will update all the bindings properly, you might have to reply the binding by calling
ko.applyBindings(attachmentsModel)