`
kirenenko04
  • 浏览: 151054 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

Content Slots

 
阅读更多

 

Content Slots

 

A content slot is an area on the page where a merchant defines content to display based on certain qualifiers or rules.

 

Slots can easily be found on a page by using the Storefront

 

Toolkit > Content Information tool. Hover the mouse around the page to reveal(显示) where content slots are used, and to get a link to the slot’s configuration page in BM.

 

 

 

Content slots(内容槽) vs. Content Assets (内容资源)

 

Slots are different from content assets in several aspects:

 

  • Slots  are considered part of marketing. They are located under:

 

Site > Online Marketing > Content Slots.

 

Content Assets appear under: Content section.

 

  • Slots are controlled by campaigns (活动): start/end dates, customer groups, source codes, coupons and rank are qualifiers that affect the appearance of a slot. Content Assets do not have such qualifiers.

     

    Creating Content Slots

    Creating a content slot requires a collaborative (合作) effort:

 

  1. The developer inserts a <isslot> tag in a template in the location   where the slot will appear.

  2. The developer creates a rendering template for the slot that defines how the slot data is to be presented.

  3. The merchant creates a configuration for the slot in Business Manager.

     

    Slots can be of two kinds:

 

  • Global slots: can appear on any page.

  • Category slots: appear on category-specific pages since they depend on the category id.

     

    A content slot will display content of one of the following types:

 

  • One or many products selected by the merchant

  • Category attributes (images or other visual)

  • Content assets from the content library

  • Static HTML and images from the static library

     

    Creating Content Slots - Developer Tasks

    Creating a Content Slot

    The developer creates a content slot inside a template using the <isslot> tag. The tag must be located exactly where it should appear on the page. Here are some examples of tag usage:

 

  • Global slot:

    <isslot id=”header_banner”  description=”…”  context=”global”/>

  • Category slot:

    <isslot  id=”category_top_featured”  context=”category”

    description=”…” context-object=”${pdict.ProductSearchResult.category}” />

     

    Whenever the template is saved, the new content slot will automatically appear in the list of slots under Site > Online Marketing > Content Slots. The platform achieves this by automatically scanning any template for the use of the <isslot> tag.

     

    Creating the Slot Rendering Template

    As stated in the previous section, the slot will display one type of content out of four possible types. The developer creates a rendering template that takes into account the type of content (重点考虑内容类型), how many objects to display, plus any CSS styling required for the slot.

    The header_banner slot uses the htmlslotcontainer template below as the rendering template:

    <iscache type="relative" hour="24"/>

    <div class="htmlslotcontainer">

    <isif condition="${slotcontent != null}">

        <isloop items="${slotcontent.content}" var="markupText">

           <isprint value="${markupText.markup}" encoding="off"/>

       </isloop>

    </isif>

    </div>

    Using slotcontent and <isprint> in Rendering Templates

    Every slot is rendered by a system pipeline inside the core cartridge:

    _SYSTEM_Slot-Render. You do not have access to this pipeline. It uses the slot configuration that the merchant creates and provides all theconfiguration information to the rendering template by means of the TopLevel.global.slotcontent constant (常量). Only slot rendering templates getdata via this constant.

     

    The rendering template code checks that the slotcontent is not empty:

    <isif condition="${slotcontent != null}">

     

    Then it loops through the slotcontent.content (the content provided for the slot):

    <isloop items="${slotcontent.content}" var="markupText">

    <isprint value="${markupText.markup}" encoding="off"/>

    </isloop>

     

    Inside the loop the code uses the <isprint>tag:

    <isprint value="${markupText.markup}" encoding="off"/>

    Using the encoding="off" setting allows the HTML snippet to be generated without encoding, so that the browser renders it correctly.

     

    Creating Content Slots - Merchant Tasks

    Creating a Content Slot Configuration

    The merchant creates a content slot configuration by navigating to

    Site > Online Marketing > Content Slots, then finding the specific slot the developer created.

    The merchant selects an existing configuration or clicks New to create a new one.

     

    Here the merchant enters an ID, enables the slot and provides other relevant information. The slot content that follows is the most important piece for the programmer since it defines what data becomes available for the rendering template.

     

    The merchant gave the banner an ID and enabled the slot. The content type HTML was selected, which opens the HTML text area.

     

    Then the ellipsis (省略号) on the Template area was clicked: this opens the Templates dialog shown above, and all the possible rendering templates for this type discovered in all cartridges in the cartridge path. The SiteGenesis storefront cartridge comes with some default templates for every type of content. Furthermore, the templates are located in especially named folders that Business Manager discovers by default: slots/html for the HTML type in the example above. The merchant may choose to reuse an existing rendering template, or use a new one as instructed by the programmer. Without a rendering template there is no way to visualize the slot.

     

    If the merchant selects the Product content type, selects some product IDs, and then has to choose from all the available product-specific rendering templates. Notice that any slots/product templates available in any cartridge in the path become visible.

     

    Finally, the merchant needs to provide a schedule for the slot. This is either the default schedule or based on a marketing campaign

     

    Using Content Link Functions

    Demandware uses attributes of type HTML in many places: content assets, content slots with HTML-type content, product descriptions, etc. You can also add anattribute of type HTML to any system object where you may need to show HTML.These attributes are represented by the class dw.content.MarkupText which wasdiscussed previously.

     

    When using HTML in assets or slots it might be tempting to hardcode hyperlinks to pages or images in the storefront: this is a bad idea since those links are instance-specific (i.e. Staging) and would have to be changed every time after a replication.

     

    To solve this problem, Demandware offers special Content Link Functions that are used only in attributes of type HTML. The content link functions are:

 

  • $staticlink$ - Creates a static link to an image

  • $url()$ - Creates an absolute (绝对链接) URL that retains the protocol of the outer request. (不包含协议)

  • $httpUrl()$ - Creates an absolute URL, but with the http protocol.

  • $httpsUrl()$ - Creates an absolute URL, but with the https protocol.

  • $include()$ - Can be used to make a remote include call (relevant for caching purposes)

     

    Here is an example of a function used to create a hyperlink to the Page-Show pipeline passing cid=2-day-shipping-popup in the query string:

    href="$url('Page-Show', 'cid', '2-day-shipping-popup')$"

     

     

     

 

分享到:
评论

相关推荐

    Odoo owl 学习笔记之11—slots 目录 插槽概述... 1 命名槽... 2 渲染上下文

    在Odoo的Owl框架中,插槽(Slots)是一个至关重要的概念,它允许开发者创建高度可定制的组件。在本篇学习笔记中,我们将深入理解插槽的使用,包括命名槽、渲染上下文、默认插槽、动态插槽、插槽与道具、插槽参数以及...

    Element PageHeader页头的使用方法

    **插槽(Slots)** Element UI 的 PageHeader 组件还支持自定义内容的插入,以便更灵活地展示额外信息。例如,可以在 PageHeader 内部添加左侧和右侧的插槽内容: ```html 自定义左侧 操作 &lt;div slot="...

    uni-app自定义uni-popup弹窗内容

    自定义uni-popup内容,包含picker-view组件,前提基础需要运行在uni-app项目之下,且已保证插入外置组件,根据传入的list数据渲染选择列表,且能回填数据 组件调用 :valueKey="'value'" /&gt;

    【JavaScript源代码】如何在 Vue 中使用 JSX.docx

    {this.$slots.content} {this.$slots.footer} ); } ``` ##### 5.2 作用域插槽 - 子组件通过 `$scopedSlots` 访问作用域插槽的内容: ```jsx render() { return ( {/* 作用域插槽 */} {this.$scopedSlots....

    最新图片在线加水印小程序源码亲测可用

    &lt;view class="content"&gt;({backgroundColor:'#F3F4F6'})}}" border-bottom="{{false}}" bind:__l="__l" vue-slots="{{['default']}}"&gt;&lt;view class="nav-title u-flex u-main-color u-p-l-44"&gt;&lt;button class="u-reset-...

    xke-dagger2:Dagger 2 的概念介绍,于 2015 年 4 月发布

    ##在没有依赖注入的应用中使用dagger 2 ...Content-Type application/json { "title": "Dagger 12", "pitch": "dans quelques annees", "speaker": { "login": "Jeremie" }, "creationDate": "202

    解决vue同一slot在组件中渲染多次的问题

    &lt;SlotComponent :customContent="parentContent" /&gt; ``` 2. **创建一个新的中间层组件**:定义一个新的组件,用于渲染`slot`内容。这个组件负责处理`slot`的递归渲染问题,确保只渲染一次。 ```html ...

    vue mint-ui学习笔记之picker的使用

    content: '-', className: 'slot2' }, { flex: 1, values: ['2015-11', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], className: 'slot3', textAlign: 'right' } ] } } } ``` 在上面的...

    Laravel开发-blade

    2. **继承与区段(Inheritance and Slots)**:使用`@extends`来继承一个父模板,然后用`@yield`来显示子模板中定义的区段。 ```html &lt;!-- parent.blade.php --&gt; &lt;title&gt;@yield('title') @yield('...

    QT 可复用对话框C++——可自定义标题和内容及按钮文本的标准通用对话框

    private slots: void onOkButtonClicked(); }; ``` 在这个自定义类中,我们定义了`setDialogTitle`、`setDialogContent`和`setButtonText`三个方法,分别用于设置对话框的标题、内容和按钮文本。此外,我们还添加...

    vue 的 solt 子组件过滤过程解析

    其中Slot是Vue.js实现内容分发(Content Distribution)的一种方式,允许开发者在父组件模板中包含自定义的模板片段。Slot可以分为默认插槽(default slot)和具名插槽(named slot),开发者可以将这些模板片段插入...

    QT获取粘贴内容示例代码

    private slots: void checkClipboard() { if (clipboard-&gt;hasText()) { qDebug() &lt;&lt; "Text content from clipboard:" &lt;&lt; clipboard-&gt;text(); } if (clipboard-&gt;hasImage()) { QImage image = clipboard-&gt;...

    Vue render深入开发讲解

    domProps: { innerHTML: 'Some content' } } ``` 这些属性分别对应于类绑定、样式绑定、HTML 特性、组件属性和 DOM 属性。 此外,`render` 函数还可以利用 JavaScript 的全部能力,包括条件语句、循环、函数调用...

    Qt-Embedded-5.7.0.tar.xz

    1. **信号与槽(Signals & Slots)**:这是Qt中的一种通信机制,允许对象之间相互通信,无需了解彼此的具体实现。当一个对象的某个状态改变时(例如按钮被点击),会发出一个信号,其他对象可以连接这个信号并执行...

    qt编程经验总结.pdf

    QMessageBox::information(this, "Title", "Content", QMessageBox::Ok); ``` 其中`this`是对话框的父窗口,`title`和`text`分别是对话框的标题和文本,最后一个参数指定默认按钮。 - **其他类型的QMessageBox**...

    MainWindow和Dialog通过信号和槽通信

    private slots: void onConfirmButtonClicked(); private: QLineEdit *lineEdit; }; Dialog::Dialog(QWidget *parent) : QDialog(parent) { lineEdit = new QLineEdit(this); QPushButton *confirmButton = ...

Global site tag (gtag.js) - Google Analytics