B2B201

课程介绍

同学们，今天我们来聊聊Salesforce的课程路线图，特别是关于在Classic Store上开发和定制B2B商务的部分。这个课程路线图就像是一张地图，它会指引你如何一步步掌握Salesforce的相关技能。 首先，我们要明确的是，这个课程是专门为那些想要在Salesforce的Classic Store环境中进行B2B商务开发和定制的同学们设计的。Classic Store是Salesforce的一个传统界面，虽然现在有Lightning Experience，但Classic Store仍然在很多企业中广泛使用。 在这个课程中，你会学习到如何利用Salesforce的强大功能来定制和优化B2B商务流程。这包括如何设置和管理产品目录、定价策略、订单处理以及客户管理等等。这些都是B2B商务中非常关键的部分。 课程路线图会告诉你学习的顺序和重点。比如，你可能会先从基础的概念和界面开始，然后逐步深入到更复杂的定制和开发技巧。每一步都会有一些实践练习，帮助你巩固所学的知识。 讲师注中提到要注意学习路径中的位置，这意味着你需要清楚地知道自己目前处于哪个阶段，以及接下来要学习什么内容。这样可以帮助你更有条理地学习，避免遗漏重要的知识点。 总之，这个课程路线图是你学习Salesforce B2B商务开发和定制的指南。跟着它走，你会一步步掌握所需的技能，最终能够在Classic Store上自如地进行开发和定制工作。希望你们在学习的过程中能够保持好奇心和热情，不断探索和实践，相信你们一定能够成为Salesforce的高手！

课程章节

本课程共有 14 个章节

• 1

  Page Includes

  第 73 页

  今天我们来聊聊Salesforce中的“页面包含”这个概念。想象一下，你正在搭建一个B2B商务网站，就像搭建一个乐高城堡一样。每个页面就像城堡的一个房间，而“页面包含”就是那些可以让你在房间里添加额外装饰品的插槽。 在Salesforce中，每个B2B商务页面都自带了一些这样的插槽，我们称之为“插入点”。这些插入点允许你插入一些自定义的内容，比如额外的信息、广告或者任何你想要展示的东西。这些内容是通过一个叫做的标签来实现的。 当系统加载一个B2B商务页面时，它会先检查这个页面是否有特定的配置。如果有，并且这个配置是启用的，那么系统就会按照配置的指示，加载一个Visualforce页面。这个Visualforce页面就是你的自定义内容。 在这些插入点中，最常用的两个是“主体包含开始”（BIB）和“主体包含结束”（BIE）。你可以通过配置设置来决定在这些插槽中插入什么内容。 需要注意的是，每个插槽最多只能插入一个Visualforce页面。这个页面可以包含各种Visualforce的功能，比如组件和控制器，这样你就可以创建非常丰富和动态的内容了。 简单来说，页面包含就是让你在标准的B2B商务页面上，添加自己的特色内容，让页面更加符合你的业务需求。希望这个解释能帮助你更好地理解页面包含的概念！

  ▶ 播放视频 查看详情
• 2

  Page Includes - 74

  第 74 页

  今天我们来聊聊如何在Salesforce的B2B商务页面中进行一些自定义的调整。想象一下，你有一个商店的网页，你想要给它加点特别的装饰或者功能，比如在页面的头部添加一些自定义的Meta标签，或者加载一些额外的JavaScript或CSS库来增强页面的功能或外观。 在Salesforce的B2B商务页面中，这可以通过使用一个叫做`ccrz.cc_hk_userSurface`的类来实现。这个类允许你深入到页面的``部分，也就是页面的头部，进行一些修改。比如，你可以在这里添加一些Meta标签，这些标签可以帮助搜索引擎更好地理解你的页面内容，或者加载一些外部的CSS和JavaScript文件，这些文件可以让你的页面看起来更漂亮，或者增加一些互动功能。 现在，让我们来看看页面的结构。一个典型的B2B商务页面，或者说任何网页，基本上都是由几个主要部分组成的： 1. ，芯体模板，：这是页面的骨架，定义了页面的基本结构和布局。 2. ，HTML正文，：这是页面的主要内容区域，包括开始和结束标签。 3. ，HTML Head，：这是页面的头部，包含了页面的标题、Meta标签、以及链接到CSS和JavaScript文件的引用。 4. ，主体包括末端，和，身体包括开始，：这些是页面的主体部分，包含了用户实际看到和交互的内容。 通过理解这些基本结构，你就可以更好地知道在哪里以及如何添加或修改内容，以达到你想要的效果。希望这能帮助你更好地理解和使用Salesforce的B2B商务页面功能！

  ▶ 播放视频 查看详情
• 3

  Handlebar Template Overrides

  第 75 页

  今天我们来聊聊Handlebar模板的Overrides，也就是覆盖。这是实现Handlebar模板收件箱的一种方法，当然，还有很多其他方法，但这是我们课堂上教授的“首选”模式。 首先，如果你想要查看uiProperties脚本的完整列表，你可以在Inspector DevTools控制台中输入：CCRZ.uiProperties。注意，这里的CCRZ必须是大写哦。 另外，如果你想要识别给定页面上利用的脚本路径，我们有一个最佳实践。你可以使用以下链接作为演练：https://confluence.internal.salesforce.com/display/CCOTC/Guide+to+track+handlebars+template+extensions+for+easy+migration+to+boot3。这个链接会帮助你更好地理解如何追踪Handlebar模板的扩展，以便更容易地迁移到boot3。 希望这些信息对你有帮助！如果有任何问题，随时问我哦。

  ▶ 播放视频 查看详情
• 4

  Creating a Page Include

  第 76 页

  让我们来聊聊如何在Salesforce的主页上添加一个显示Reddit前5条新闻的小部件。首先，我们需要理解Salesforce是一个非常灵活的平台，它允许我们通过调用外部API（应用程序编程接口）来获取数据，并将这些数据展示在我们的页面上。 在这个案例中，Reddit提供了一个开放且免费的API，我们可以通过这个API来获取最新的新闻。一旦我们获取了这些数据，我们就可以在Salesforce的主页上创建一个自定义的小部件来展示这些新闻。 现在，让我们来介绍一下故事中的人物。假设你是一家公司的Salesforce管理员，你的任务是让公司的主页更加动态和有趣。你决定添加一个显示Reddit新闻的小部件，这样员工在登录Salesforce时，就能看到最新的行业新闻。 为了实现这个目标，你需要做几件事情： 1. ，获取API访问权限，：首先，你需要从Reddit获取API的访问权限。这通常涉及到注册一个开发者账号，并获取一个API密钥。 2. ，创建Apex类，：在Salesforce中，你需要创建一个Apex类来处理API调用。这个类将负责发送请求到Reddit的API，并接收返回的数据。 3. ，解析数据，：一旦你从Reddit获取了数据，你需要解析这些数据，以便在Salesforce中展示。 4. ，创建Visualforce页面或Lightning组件，：接下来，你需要创建一个Visualforce页面或Lightning组件来展示这些新闻。你可以设计一个简洁的界面，显示新闻的标题和链接。 5. ，添加到主页，：最后，你需要将这个组件添加到Salesforce的主页上。这样，每当员工登录时，他们就能看到最新的Reddit新闻。 通过这个过程，你不仅让Salesforce的主页变得更加有趣，还帮助员工保持对行业动态的了解。这就是Salesforce的强大之处——它不仅仅是一个CRM系统，更是一个可以高度定制化的平台，能够满足各种业务需求。

  ▶ 播放视频 查看详情
• 5

  Code Review: Create a Page Include

  第 77 页

  让我们来聊聊这段代码。这段代码主要是用来创建一个网页上的新闻展示部分。首先，我们有一个HTML容器，里面有一个标题“与此同时，在新闻中”，接着是一个有序列表，这个列表的类是`anchorClass`，但目前列表是空的，没有内容。 然后，我们有一个小段落，里面提到了新闻内容的提供者是Reddit，并且有一个链接指向Reddit的网站。这个链接会在新标签页中打开，因为使用了`target="_blank"`属性。 接下来，我们看到了一个Handlebars模板。Handlebars是一种流行的JavaScript模板引擎，它允许我们动态地生成HTML内容。在这个模板中，我们定义了一个ID为`TopNews_HBTemplate`的脚本。这个脚本的类型是`text/template`，这意味着它不会在页面上直接显示，而是用来生成其他内容的。 在模板内部，我们使用了一个Handlebars的助手函数`#each`。这个函数会遍历一个名为`children`的列表，并为列表中的每一项生成相应的HTML内容。这里的`children`应该是一个包含新闻项的数组，每个新闻项都会被渲染到我们之前提到的`anchorClass`列表中去。 总结一下，这段代码的目的是创建一个动态的新闻展示区域，新闻内容会通过Handlebars模板动态地插入到页面的有序列表中。这样，每当有新的新闻时，我们只需要更新`children`数组，页面上的新闻列表就会自动更新，非常方便。

  ▶ 播放视频 查看详情
• 6

  Code Review: Create a Page Include Continued

  第 78 页

  今天我们来聊聊代码审查中的一个具体例子，这个例子是关于创建一个页面的，特别是关于继续注册的自定义主干视图，也就是TopNews__BBView。 首先，我们来看一下这个主干视图是如何与Handlebars模板关联的。Handlebars是一个很流行的模板引擎，它可以帮助我们更轻松地生成HTML代码。在这个例子中，我们有一个变量，这个变量是用来选择安装渲染的Handlebars模板的。简单来说，这个变量决定了哪个模板会被用来生成页面的HTML。 接下来，我们有两个特别的函数，render桌面和renderPhone。这两个函数是B2B Commerce助手功能的一部分。当我们在渲染Backbone视图时，这两个函数会被执行。Backbone是一个JavaScript框架，它帮助我们组织和管理网页中的数据和视图。 那么，这两个函数具体做什么呢？render桌面和renderPhone的作用是根据不同的设计类型来决定如何渲染页面。如果设计类型是responsible或者使用了Boot 3，那么就会使用render桌面函数来渲染页面。而如果设计类型是adaptive或者classic，那么就会根据屏幕的宽度来决定使用render桌面还是renderPhone。简单来说，就是根据用户使用的设备类型（比如是桌面电脑还是手机）来调整页面的显示方式。 总结一下，这个代码审查的例子展示了如何创建一个页面，特别是如何通过主干视图和Handlebars模板来动态生成HTML，以及如何根据不同的设备和设计类型来调整页面的渲染方式。希望这个解释能帮助你更好地理解这个过程。如果有任何问题，随时问我哦！

  ▶ 播放视频 查看详情
• 7

  Code Review: Create a Page Include Continued - 79

  第 79 页

  让我们来一步步解析这段代码，看看它是如何工作的。 首先，这段代码的主要目的是创建一个页面，这个页面会从Reddit的新闻板块获取最新的5条新闻，并将这些新闻展示在页面上。 1. ，设置Web服务URL，：代码中首先定义了一个Web服务的URL，这个URL指向Reddit的新闻板块，并且通过参数限制了只获取最新的5条新闻。这个URL会被用来发送请求，获取数据。 2. ，发送AJAX请求，：使用jQuery的`$.ajax`方法，向上面定义的URL发送一个GET请求。这个请求是异步的，意味着页面不会因为等待数据而卡住。 3. ，处理成功响应，：当请求成功返回数据时，会执行一个回调函数。这个函数接收返回的数据作为参数。在这个例子中，数据被赋值给`modelData`变量。 4. ，渲染数据，：接下来，使用Handlebars模板引擎来渲染这些数据。`v.$el.html(templateName(modelData.data));`这行代码的意思是，将处理后的数据插入到页面的某个元素中。这里的`templateName`是一个Handlebars模板，它定义了如何展示每一条新闻。 5. ，初始化视图，：最后，代码创建了一个新的`TopNews_BBView`视图实例。这是一个Backbone视图，负责管理和渲染页面的某一部分。通过初始化这个视图，页面上的新闻列表就会被正确渲染和显示。 总结一下，这段代码通过发送一个AJAX请求到Reddit，获取最新的新闻数据，然后使用Handlebars模板将这些数据渲染到页面上，最后通过Backbone视图来管理整个新闻列表的显示。这样，用户就能在页面上看到最新的新闻了。

  ▶ 播放视频 查看详情
• 8

  ❶❷ id="TopNews_HBTemplate"

  第 81 页

  让我们来一起看看这段代码。首先，我们有一个变量叫做 `shamid`，它的值是 `"TopNews_HB模板"`。这个变量可能用来存储某个模板的名称或者标识符。 接下来，我们有一个变量叫做 `webServicURL`，但它的值没有显示出来。这个变量通常用来存储一个网络服务的URL地址，可能是用来调用某个API或者获取数据的。 然后，我们看到 `modelData.data`，这可能是一个对象或者数据结构，里面存储了一些数据。`收件箱` 这个词可能指的是这些数据中的某个部分，比如邮件或者消息的收件箱。 接下来，我们看到一些数字符号 `❸❹❺`，这些可能是代码中的注释或者标记，用来指示某些特定的部分或者步骤。 然后，我们有一个变量 `TopNews_BBView`，它的值是通过 `TopNews.render()` 这个方法生成的。这个方法可能是用来渲染某个视图或者页面的。 接下来，`This.render` 可能是在当前上下文中调用 `render` 方法，用来查看位于某个位置的收件箱。这里的 `HP带BIE渲染` 可能是指某种特定的渲染方式或者技术。 最后，`N/A` 通常表示“不适用”或者“无数据”，可能是在某些情况下没有数据可用时的占位符。 总结一下，这段代码可能是在处理某个新闻或者消息的收件箱，通过调用不同的渲染方法来展示数据。希望这个解释能帮助你更好地理解这段代码！

  ▶ 播放视频 查看详情
• 9

  UI Pages

  第 83 页

  今天我们来聊聊B2B Commerce中的UI页面。想象一下，你走进一家商店，首先看到的是吸引人的橱窗展示，然后是整齐排列的商品，最后是结账台。B2B Commerce就像这样一家商店，它自带了一系列现成的页面，比如主页、产品列表、产品详情页、购物车和结账页面等。这些页面就像是商店的各个区域，帮助顾客轻松找到他们想要的东西。 这些页面大部分功能都可以通过简单的配置来调整，就像你可以改变橱窗的展示或者调整货架的位置一样。如果这些默认的页面还不能完全满足你的业务需求，别担心，B2B Commerce还提供了一种叫做“订阅者页面”的功能。这就像是你可以完全按照自己的想法来设计和装修一个全新的商店区域，完全符合你的业务特色和需求。 所以，无论是使用现成的页面还是创建全新的页面，B2B Commerce都能帮助你打造一个既美观又实用的在线商店。希望这能帮助你更好地理解B2B Commerce的UI页面功能。如果有任何问题，随时问我哦！

  ▶ 播放视频 查看详情
• 10

  Main Elements of a Subscriber Page

  第 84 页

  让我们来聊聊Salesforce中的订阅者页面，也就是PageCC订阅者页面。这个页面在Salesforce Org中扮演着非常重要的角色，它帮助我们在系统中识别和管理特定的页面。 首先，订阅者页面的名称是用来在Salesforce Org中唯一标识这个页面的。每个页面都有一个独特的名称，这样我们就可以轻松地找到和管理它。 接下来，这个页面包含的内容通常是一个自定义的Visualforce页面。Visualforce是Salesforce提供的一种强大的工具，允许我们创建自定义的用户界面。这些页面总是以“c__”开头，这是一个标志，告诉我们这是一个自定义的页面，而不是Salesforce的标准页面。 然后，我们有一个叫做“页面键”的东西。这个键与ccrz__CCPage一起使用，帮助我们在浏览器中正确地显示订阅者页面的内容。你可以把它想象成一个钥匙，它解锁并展示了页面的内容。 最后，我们还有“店面”。这是指订阅者页面将在哪个店面中活跃。店面是Salesforce Commerce Cloud中的一个概念，它代表了一个在线商店。所以，这个订阅者页面将会在指定的店面中显示给用户。 记住，订阅者页面通常遵循一个特定的URL模式。这个模式看起来像这样：https:///ccrz__CCPage?pagekey=。这个URL包含了店面的地址和页面键，确保用户能够访问到正确的页面。 希望这些信息能帮助你更好地理解Salesforce中的订阅者页面。如果你有任何问题，随时问我！

  ▶ 播放视频 查看详情
• 11

  Common Scenarios for Creating Subscriber Pages

  第 85 页

  在B2B商务中，创建订阅者页面时，有一些常见的内容或功能是默认不提供的，比如“关于我们”或“联系我们”这样的页面。这些页面通常用于展示公司的背景信息、联系方式等，但在B2B环境中，这些信息可能不会自动包含在订阅者页面中。 另外，电子商务页面也是一个常见的场景。比如，促销页面和优惠页面。这些页面通常用于展示当前的产品促销活动、折扣信息等，吸引客户购买。但在B2B商务中，这些页面可能不会默认提供，需要根据具体需求进行定制和创建。 总的来说，B2B商务中的订阅者页面和电子商务页面，往往需要根据具体的业务需求进行定制，以确保能够满足客户的需求和期望。

  ▶ 播放视频 查看详情
• 12

  Creating a Subscriber Page

  第 86 页

  让我们来聊聊Capricorn Coffee的故事。Capricorn Coffee是一家非常受欢迎的咖啡店，他们不仅提供美味的咖啡，还非常注重与顾客的互动和沟通。最近，他们决定为顾客创建一个新的页面，这个页面将专门用来提供公司的一般信息，比如他们的历史、使命、价值观等。 这个新页面需要与他们的店面网站的其他部分保持一致，也就是说，它应该看起来和感觉上都是Capricorn Coffee的一部分。为了实现这一点，我们需要创建一个新的订阅者页面，并确保它的设计和风格与现有的网站相匹配。 现在，让我们来认识一下故事中的关键人物。首先是Capricorn Coffee的老板，Alex。Alex非常注重品牌形象，他希望新页面能够反映出Capricorn Coffee的独特风格和价值观。接下来是他们的网站设计师，Mia。Mia负责确保新页面的设计和现有网站保持一致。最后是他们的内容经理，Jordan。Jordan将负责撰写和更新新页面上的所有内容，确保信息准确且吸引人。 通过他们的共同努力，Capricorn Coffee的新订阅者页面将成为一个信息丰富且视觉上吸引人的地方，帮助顾客更好地了解这家咖啡店。

  ▶ 播放视频 查看详情
• 13

  Code Review: Create a Subscriber Page

  第 87 页

  让我们来聊聊这段代码。这段代码是用来创建一个Salesforce的订阅者页面的，具体来说，是一个“关于我们”的页面。这个页面会展示一些关于你们公司的基本信息，比如你们销售什么产品。 首先，我们来看一下这段代码的结构。代码的开头是``标签，这是Salesforce用来定义页面的标准方式。在这个标签里，我们设置了一些属性： - `id=&quot;ccTraining_SP_AboutUs&quot;`：这是页面的唯一标识符，方便我们在其他地方引用它。 - `docType=&quot;html-5.0&quot;`：这表示我们使用的是HTML5的标准。 - `sidebar=&quot;false&quot;` 和 `showHeader=&quot;false&quot;`：这两个属性告诉Salesforce不要在页面上显示侧边栏和头部，这样页面看起来会更简洁。 - `standardStylesheets=&quot;false&quot;`：这个属性阻止Salesforce应用它默认的样式表，这样我们就可以完全自定义页面的外观。 - `applyHtmlTag=&quot;false&quot;`：这个属性告诉Salesforce不要自动添加HTML标签，这样我们可以自己控制页面的结构。 接下来，我们看到一个`<div>`标签，它的类是`MyAboutUsTarget`。这个`<div>`是用来放置我们页面的内容的。你可以把它想象成一个空白的画布，我们会在上面绘制我们的“关于我们”信息。 然后，我们有一个`</div></div>

  ▶ 播放视频 查看详情
• 14

  Knowledge Check - 89

  第 89 页

  同学们，今天我们来做一个简单的知识检查。这个环节的目的是帮助大家回顾一下我们之前学过的内容，确保每个人都跟上进度。 首先，Salesforce是什么？简单来说，Salesforce是一个强大的客户关系管理（CRM）平台。它帮助企业管理和分析客户互动，从而提高销售、市场营销和客户服务的效率。 接下来，我们来看看Salesforce的几个核心模块： 1. ，销售云，：主要用于管理销售流程，跟踪潜在客户，管理销售机会。 2. ，服务云，：帮助客户服务团队更高效地解决客户问题，提供支持。 3. ，营销云，：用于自动化市场营销活动，跟踪客户行为，优化营销策略。 4. ，社区云，：创建在线社区，让客户、合作伙伴和员工能够互动和协作。 现在，请大家思考一下： - 你们公司目前使用的是哪个模块？ - 你们觉得哪个模块对你们的工作帮助最大？ 最后，我们来做一个小练习。假设你是一家小型企业的销售经理，你需要跟踪潜在客户并管理销售机会。你会如何使用Salesforce来实现这一目标？ 好了，今天的知识检查就到这里。希望大家都能从中有所收获。如果有任何问题，随时提问。我们下次再见！

  ▶ 播放视频 查看详情