Is it possible to change interactivity in Carto.js map when called from Carto

I am making a carto map using carto.js and a map/data from my Carto account. I know I can set the interactivity there for clicking on polygons, etc. in the wizard, but am not able to alter that in my carto.js code.

Example:

cartodb.createLayer(map, vizjson)
                .addTo(map)

                .on('done', function(layer) {
                    layer.setInteraction(true);

                    var subLayerOptions = {
                        sql: "SELECT * FROM final_1",
                        cartocss: "#final_1{polygon-fill: #F84F40; line-color: #000;}",
                        interactivity: "name"
                        }

                    var sublayer = layer.getSubLayer(0);


                    sublayer.set(subLayerOptions);

                    sublayers.push(sublayer);

                    alert("this is a map");


                });

My subLayerOptions interactivity line does not seem to have any effect on the data when I include that line. Instead, it just displays a popup that is forever "loading". How can I set the interactivity in the carto.js code instead of on the Carto builder side?

Answer

After setting the interactivity, you need to add an infowindow to display a pop up. Here you have the documentation. In addition, have a look at this working example. Basically, you have to add two things:

• an infowindow template, such as this one:

• and add this method to the visualization object:

cdb.vis.Vis.addInfowindow( map, layer, ['name'], { infowindowTemplate: $('#infowindow_template').html() });