Is there a way to the current request url or path in Handlebars? I need to be able to switch what parts of the theme is loaded based on paths. I've tried {{url}} ... no luck. Using latest Stencil with Cornerstone.
I had to do something like this for a project with 3 different category page layouts. Without custom category templates in Stencil, you have to get a little creative.
First, inject the handlebars URL into your category.js file using the BigCommerce's inject handlebar helper seen here. Then parse it so you get only the unique parts, then perform some logic based on what you want to do.
I used the breadcrumb li length as an indicator of how deep I was in the category tree. There is likely a better way, but this is what I thought of first, and it worked just fine.
category.html
{{inject "currentPage" category.url}}
category.js
var pageURL = this.context.currentPage;
var pageURL = pageURL.replace(/\//g," ").replace("http:","").replace("storeurl.mybigcommerce.com","").replace("storeurl.com","").trim();
var catName = pageURL.substr(0,pageURL.indexOf(' '));
console.log('pageURL = ' + pageURL);
console.log('catName = ' + catName);
console.log($('ul.breadcrumbs li').length);
if( $('ul.breadcrumbs li').length == 3 ){
if(catName == "black-decker"){
if($(".cat-img").length){
$(".page").addClass("model-list");
$(".cat-img").hide();
$(".page").append("<div class='model-wrap'><div class='model-catalog' data-reveal-id='myModal'><span class='click-larger'>Click to view larger</span></div></div>");
$(".sidebarBlock-heading").text("Select Your Model Number Below:");
$(".brand-img").each(function(){
$(this).addClass(catName);
});
} else {
$(".page").addClass("model-list");
$(".sidebarBlock-heading").text("Select Your Model Number Below:");
$(".brand-img").each(function(){
$(this).addClass(catName);
});
// make page full width
$(".page-sidebar.cf.Left").addClass("full-width");
}
}
// MORE CODE etc...
Related
I have entity ListSettings which is used as Content-Item type for 2 layouts. Each layout is used 3 times on different pages.
The code I'm writing is not executed on the page - it's outside of 2sxc module.
So I wan't to find out on which page each object of entity ListSettings is. TabId is the best. Filtering by layout could be helpful as well since I need 3 tabIds that use 1 of the 2 layouts.
How do I do that programmatically? There's a lot of data inside of each entity including some relationships, children, parents and so on. Also I'm sure that all this data could be taken from the database manually, but it seems to be a hard way for me.
Bottom line: I have 6 entities. I want to get their tabIds and layouts programmatically. Layouts are optional but would be good.
Any suggestions?
This is quite challenging, because there are so many steps involved. But you can find something that does something similar here https://2sxc.org/dnn-tutorials/en/razor/2sa110/page
Here is an excerpt of the code:
// CONSTANTS
// this key is used in module settings
const string SettingsCG = "ToSIC_SexyContent_ContentGroupGuid";
// create array with all 2sxc modules in this portal
List<ModuleInfo> GetAllModulesOfPortal(int portalId) {
var mc = ModuleController.Instance;
var dnnMod2sxcContent = mc.GetModulesByDefinition(portalId, "2Sexy Content");
var dnnMod2sxcApp = mc.GetModulesByDefinition(portalId, "2Sexy Content App");
var mergedMods = new ModuleInfo[dnnMod2sxcContent.Count + dnnMod2sxcApp.Count];
dnnMod2sxcContent.CopyTo(mergedMods);
dnnMod2sxcApp.CopyTo(mergedMods, dnnMod2sxcContent.Count);
var allMods = mergedMods
.Where(m => m.DefaultLanguageModule == null)
.Where(m => !m.IsDeleted)
.Where(m => m.ModuleSettings.ContainsKey(SettingsCG));
return allMods.ToList();
}
I am trying to make a product that will give me a different header based on the forum I am in, that's no problem and complete. My issue lays with using template conditionals inside of said option.
I am currently using a forum option to insert my custom template additions:
In global_complete hook I am using:
global $vbulletin;
if ($GLOBALS[foruminfo]["forumid"]>0) {
$forum_code = '';
$_fid = $GLOBALS[foruminfo]["forumid"];
$forum_info = $vbulletin->forumcache[$_fid];
if ($forum_info["code"]) {
$forum_code = $forum_info["code"];
} elseif ($forum_info["parentid"]) {
while ($forum_code=='' && $forum_info["parentid"]>0) {
$forum_info = $vbulletin->forumcache[$forum_info["parentid"]];
$forum_code = $forum_info["code"];
}
}
}
Then I place $forum_code into my header temple.
I would like to be able to get the conditionals to work so I can only show things to members or usergroups within the header. Is there a way to get the variable to not ignore the conditions? they are included in the DB entry, just being ignored when rendered to the page.
Sample Conditional:
<if condition="$show['member']">Member<else/>Guest</if>
What is actually being rendered:
MemberGuest
In a datatables column I want to display an image. The image is generated by sending the cell data to a 3rd party API that requires a POST request and returns a raw/binary png image.
What works just fine outside of datatables is:
// jquery ajax call. data is binary/raw png image
success: function ( data ) {
var image = document.getElementById(image_tag_id)
var url = window.URL || window.webkitURL;
image.src = url.createObjectURL(data);
}
This is inside a function that takes the image tags id and the data as arguments. Previously I used the tag (HTMLElement) directly but changed it to the id to play with datatables render function.
This change actually makes what I want theoretically work (came up while writing this question) with below render function:
"render": function ( data, type, row, meta ) {
if (type==="display") {
var tag_id = "image-" + meta.row;
getImage(tag_id, data);
return '<img id="' + tag_id + '">';
} else {
return data;
}
}
But this has a race condition. It assumes the returned html string always generates the tag faster than the image is fetched via ajax call (which probably always is the case but it I don't like it)
So how can I solve this issue better? Have render only create image tags and do the rest after?
Instead of getting the image in render, one can simply create a empty image tag with a class set. Then in drawCallback function, iterate over all the generated image tags and get the image via ajax call. This ensures there is no race condition.
However I went a different way and made my own service that works with GET requests. This then allows to set the src attribute of the image tags like one normally would. On top of that the images also can be cached and the source data for the image doesn't need to be transferred to the web page.
Using the HTML Starter Kit example for Durandal 2.0.1.
If I add a route for customers/:id with my own vm and view I can navigate to the page c://temp/index.html#customer/123 and the page displays and in activate I can see the parameter of 123. However, the hash for that page shows as customer/:id Should the router automatically update these hashes to include any passed parameters or is this something I have to do myself?
There may be a baked in fix for this but if you are going to be using the hash and you have the Id or optional Id stuff in there you can use this helper for navigation and to clean up the hash, if needed -
function changeRoute(route) {
var cleanRoute = route.hash;
if (cleanRoute.indexOf(':id') !== -1) {
cleanRoute = cleanRoute.replace(':id', '');
}
return router.navigate('#' + thisRoute);
}
Or you could just as easily add an additional setting on the route to use as the cleaned hash.
I am new to Backbone.js and I am trying to create an application that can check if you completed the videos games you control.
I am using an API to retrieve any information about videogames.
I want to be able to search for a game, for example "Zelda". It should then list every Zelda game.
I get stuck because I don't know how to get the search function to work properly with the API and I don't know how to render it properly. I have written a template for the games that should render.
I have no clue what to do know, or if I'm even on the right track. I am not asking for someone to code it completely, I am asking for a step in the right direction.
Let me know if you need more code.
library_view.js
var LibraryView = Backbone.View.extend({
el:$("#games"),
url: url = "http://www.giantbomb.com/api/search/?api_key=[KEY]",
events:{
"keypress input":"findGames"
},
findGames:function(e){
if(e.which == 13){
query = $(".searchfield").val()
field_list = "name,platforms"
resources = "game"
url = url +"&query="+ query +"field_list"+ field_list +"resources"+ resources
}
},
index.html
<input type="search" placeholder="Find a game" class="searchfield">
It looks like you are mashing together a View and a Model.
A view, for instance, shouldn't have URL inside it, it doesn't know what to do with it.
The correct path would be something roughly like so:
var SearchModel = Backbone.Model.extend();
var LibraryView = Backbone.View.extend({
el: $("#games"),
events:{
"keypress input":"findGames"
},
findGames: function(e){
// get query, field_list, resources
var searchModel = new SearchModel()
searchModel.fetch({
url: "http://www.giantbomb.com/api/search/?api_key=[KEY]"+"&query="+ query +"field_list"+ field_list +"resources"+ resources
});
// do something with searchModel
}
});
After the fetch, searchModel will hold the data Backbone Model style.
Let's say the returned value from the AJAX call is:
{
"answer": 42
}
Then:
searchModel.get("answer") // = 42
The SearchModel is just an abstraction here as you don't really need it (you can just ajax it). But I put it to help you understand what Model represents, it basically represents only data... It doesn't know what View is.