如何使用 Business Manager 在 Salesforce Commerce Cloud 中实施轮播

Question

我目前正在 Salesforce Commerce Cloud (SFCC) 中从事一个项目，需要在主页上实现轮播。据我了解，SFCC 鼓励使用内容资产和插槽将动态内容添加到 ISML 模板。

这是我到目前为止所做的：

放置必要的文件：

1. slick.css
2. slick-theme.css
3. slick.min.js 在静态默认文件夹中
4. home.isml 中包含的文件路径
5. 将轮播 HTML 添加到内容槽。

我无法在我的主页上看到轮播。我怀疑我可能缺少一些步骤或配置。有人可以提供通过 Business Manager 在 SFCC 中使用 Slick Slider 实施轮播的详细步骤或最佳实践吗？任何帮助将不胜感激。

Answer 1

要在 SFCC 中使用 Slick Slider 实现轮播并确保其正常工作，请按照以下详细步骤操作：

---

1。验证文件放置

确保以下静态文件正确放置：

• slick.css

  ，

  slick-theme.css

  在

  static/default/css

  。

• slick.min.js

  在

  static/default/js

  。

使用正确的文件命名约定和文件夹结构以避免路径错误。

---

2。在您的模板中包含文件

在您的

home.isml

模板或在主页上呈现的布局模板中包含所需的 CSS 和 JS 文件：

<link rel="stylesheet" href="${URLUtils.staticURL('/css/slick.css')}" />
<link rel="stylesheet" href="${URLUtils.staticURL('/css/slick-theme.css')}" />
<script src="${URLUtils.staticURL('/js/slick.min.js')}" defer></script>

最佳实践： 使用

defer

或将

<script>

标签放在

</body>

之前，以确保正确的加载顺序。

---

3.为轮播添加内容槽

在业务经理中：

1. 导航至商家工具 > 内容 > 老虎机。
2. 创建一个内容槽（例如，

   home-carousel-slot

   ）。
3. 将必要的轮播 HTML 结构添加到插槽的内容中。

轮播 HTML 示例：

<div class="carousel">
    <div><img src="${URLUtils.staticURL('/images/image1.jpg')}" alt="Slide 1"></div>
    <div><img src="${URLUtils.staticURL('/images/image2.jpg')}" alt="Slide 2"></div>
    <div><img src="${URLUtils.staticURL('/images/image3.jpg')}" alt="Slide 3"></div>
</div>

---

4。在 ISML 中渲染槽

使用

home.isml

中的以下内容来渲染插槽：

<isinclude template="components/slot" >
    <isparam name="id" value="home-carousel-slot" />
</isinclude>

---

5。在 JavaScript 中初始化 Slick

创建自定义 JS 文件来初始化 Slick：

1. 在

   custom-carousel.js

   中创建

   static/default/js

   并将其包含在

   slick.min.js

   中的

   home.isml

   之后。
2. 添加初始化代码：

$(document).ready(function () {
    $('.carousel').slick({
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
    });
});

---

6。调试和检查

• 控制台错误：检查浏览器开发工具是否有错误（丢失文件、JS问题等）。
• 网络选项卡：验证所有资源（

  slick.css

  、

  slick.min.js

  ）是否正确加载。

---

7。造型调整

• 添加自定义 CSS 来调整轮播外观。
• 确保您的

  .carousel

  容器有足够的宽度和高度以容纳可见的幻灯片。

---

8。发布和测试

• 在商务管理平台中发布更改。
• 清除缓存：
  • 导航到管理 > 缓存 > 清除所有站点缓存。
• 在部署到生产环境之前对临时实例进行测试。

我个人的建议如下：

如今，品牌通常对使用内容资产和内容槽位不太感兴趣。原因是业务经理不是很有技术的人，他们通常会破坏内容资产和内容槽中的 html。

SFRA 鼓励使用 pageDesigner 组件。 以下是有关页面设计者如何实现这一点的详细信息。 https://developer.salesforce.com/docs/commerce/b2c-commerce/guide/b2c-dev-for-page-designer.html