模块布局

• list text heredefault - JoomShopping桶的标准输出。与Bootstrap无关。
• bootstrap5-icon - 以链接按钮的形式显示购物车模块，带有篮子图标和商品数量的徽章。方便将其模块放置在网站头部或移动版本网站的底部或顶部面板。
• bootstrap5-icon-and-text - 类似于bootstrap5-icon的链接按钮，但带有“篮子”字样和篮子中的商品数量。
• bootstrap5-list-group - 购物车模块以Bootstrap 5列表组组件的形式输出。它可以放置在网站的左侧或右侧列。在此布局中，您可以显示商品的属性、商品的重量。
• bootstrap5-offcanvas - 购物车模块以Bootstrap 5 Offcanvas组件的形式输出 - 悬浮到右侧或左侧面板。这实际上是bootstrap5-list-group布局包裹在Offcanvas组件中。在此布局中，您可以显示商品的属性、商品的重量。
• bootstrap5-icon-btn - 该布局是bootstrap5-icon布局的副本，以下有变更：模块不是通过链接（标签）输出，而是通过按钮（标签）输出。下面了解目标和设置。

使用Bootstrap 5 Offcanvas配置模块

您希望将购物篮以面板的形式从屏幕边缘浮出。根据Bootstrap 5.2文档，要打开或隐藏此面板，您需要一个切换按钮（开关）。它可以是链接（标签）或按钮（标签）。您可以在HTML代码模块中创建这样的按钮并将其放置在正确的位置，或者创建带有必要属性的菜单项。
但是，如果您希望在购物篮图标附近显示产品数量，并同时使用它来在Offcanvas中打开购物篮模块，请使用布局bootstrap5-icon-btn。
您创建了两个具有不同布局的模块：一个使用bootstrap5-offcanvas布局（您需要记住其ID），另一个使用bootstrap5-icon-btn布局。在第二个模块的设置中，您需要指定“具有Offcanvas布局的模块ID”参数，这样当您点击购物篮按钮时，第一个Offcanvas模块就会出现。此参数用于设置按钮的data-bs-target属性。

建议将具有bootstrap5-offcanvas布局的模块发布在调试位置或类似位置，以便模块的内容以body标签作为父元素。这是由于CSS属性z-index的特殊性。