如何在NetSuite SCA及Vinson版本中无需CMS/SMT创建着陆页

我在SCA Vinson版本上帮客户实现过好几次这种无CMS/SMT的着陆页需求，完全不用依赖后台的可视化工具，纯代码层面就能搞定。下面是详细的操作步骤，跟着走就行：

首先得确保你有对应的权限和开发环境：

• 要有NetSuite的开发角色权限，能访问SuiteCloud Developer Framework（SDF）和文件柜里的SCA代码资源
• 推荐用本地开发环境：把你的SCA Vinson版本的自定义扩展和主题克隆到本地（用SDF命令suitecloud project:clone就行），本地改完代码再部署到沙盒测试，比直接在文件柜里改方便太多
• 如果没本地环境，也可以直接在NetSuite文件柜里操作，但要注意备份，别搞坏现有代码

SCA基于Backbone.js，所以着陆页需要对应的视图（View）和模板（Template）：

1. 写HTML模板 #

在你的自定义扩展（比如Custom.MyLandingExtension）的Templates文件夹下新建custom-landing.tpl，写你需要的着陆页内容：

<div class="custom-landing-page">
  <h1>{{pageTitle}}</h1>
  <p>这是完全不用CMS创建的自定义着陆页</p>
  <!-- 可以引用SCA的资源，比如图片：{{getAssetUrl 'images/hero-banner.jpg'}} -->
  <!-- 甚至可以调用商品组件，比如展示特定分类的商品：{{> components/products/product-list products=products}} -->
</div>

2. 写对应的视图逻辑 #

在扩展的JavaScript文件夹下新建CustomLandingPage.View.js，内容如下：

define(
  [
    'Backbone',
    'Custom.MyLandingExtension.Templates.custom-landing' // 对应上面的模板路径
  ],
  function (Backbone, CustomLandingTemplate) {
    'use strict';

    return Backbone.View.extend({
      template: CustomLandingTemplate,

      // 初始化逻辑，比如获取商品数据
      initialize: function () {
        // 如果需要动态数据，比如获取特定商品，可以在这里调用SCA的Data组件
        // this.collection = new Products.Collection();
        // this.collection.fetch({ data: { category: 'custom-category' } });
      },

      // 传递数据到模板
      getContext: function () {
        return {
          pageTitle: '我的自定义着陆页',
          // products: this.collection.models // 如果上面获取了商品数据，这里传过去
        };
      }
    });
  }
);

3. 把视图注册到扩展入口 #

打开扩展的主入口文件JavaScript/MyLandingExtension.js，把新视图加进去，让SCA识别这个页面类型：

define(
  [
    'Custom.MyLandingExtension.CustomLandingPage.View'
  ],
  function (CustomLandingPageView) {
    'use strict';

    return {
      mountToApp: function (application) {
        // 注册自定义着陆页的页面类型
        const pageTypeComponent = application.getComponent('PageType');
        pageTypeComponent.registerPageType({
          name: 'CustomLandingPage',
          routes: ['custom-landing'], // 这里定义URL路径，比如你的着陆页地址是 store.com/custom-landing
          view: CustomLandingPageView,
          defaultTemplate: {
            name: 'custom-landing.tpl',
            displayName: 'Custom Landing Page Template'
          }
        });
      }
    };
  }
);

如果需要给着陆页加专属样式，在扩展的Sass文件夹下新建custom-landing.scss：

.custom-landing-page {
  max-width: 1280px;
  margin: 40px auto;
  padding: 0 20px;

  h1 {
    color: #2d3748;
    margin-bottom: 24px;
    text-align: center;
  }

  p {
    font-size: 18px;
    line-height: 1.6;
    color: #4a5568;
  }
}

然后在主题的主Sass文件（比如Theme.MyTheme/Sass/_main.scss）里导入这个样式文件：

@import '../../Custom.MyLandingExtension/Sass/custom-landing';

1. 如果是本地开发，先编译代码：

suitecloud project:build

2. 部署到沙盒环境：

suitecloud project:deploy

3. 登录NetSuite后台，进入Commerce > Websites > Website Configuration，找到你的网站，确保你的自定义扩展已经被激活，主题也已经发布
4. 访问你的店铺URL加上刚才定义的路由，比如https://your-sandbox-store-url.com/custom-landing，就能看到你的自定义着陆页了！

如果要让用户能通过导航找到这个页面：

1. 登录NetSuite后台，进入Commerce > Websites > Website Configuration
2. 切换到Navigation标签，选择你要添加的菜单（比如主菜单）
3. 点击Add Menu Item，选择Custom Page
4. 输入刚才的路由路径custom-landing，设置菜单名称（比如“我的着陆页”），保存即可

• Vinson版本的SCA已经支持PageType组件注册页面，不用修改核心的Router.js，用扩展的方式更安全，不会影响后续升级
• 所有文件路径要注意大小写，NetSuite文件柜对路径大小写敏感，写错了会导致模板或视图加载失败
• 如果需要动态数据（比如商品、内容），可以在视图的initialize方法里调用SCA的现有组件（比如Products.Collection）来获取数据
• 一定要先在沙盒测试没问题，再部署到生产环境！

内容的提问来源于stack exchange，提问作者Ankit Chaudhary