获取当前页面请求URL在车把?

时间:2016-06-03 17:23:23

标签: bigcommerce

Handlebars中有当前请求网址或路径的方法吗?我需要能够根据路径切换主题的哪些部分。我试过了{{url}} ...没有运气。使用最新的Stencil和Cornerstone。

1 个答案:

答案 0 :(得分:2)

我必须为具有3种不同类别页面布局的项目执行类似的操作。如果没有Stencil中的自定义类别模板,您必须获得一点创意。

首先,使用看到here的BigCommerce注入手柄帮助程序将把手URL注入您的category.js文件。然后解析它,这样你只得到唯一的部分,然后根据你想要做的事情执行一些逻辑。

我使用breadcrumb li长度作为我在类别树中有多深的指标。可能有更好的方法,但这是我首先想到的,它运作得很好。

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'><a href='#'><img class='i-img' src='https://store-p3ubwr6cgq.mybigcommerce.com/product_images/uploaded_images/i-img.jpg'><span>Where is my model number?</span><img class='popup-click' src=" + catImg + "></a><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...