### Access Specific Product with Sline

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This example demonstrates how to retrieve a specific product using its handle and display its title and URL. It utilizes the `get` filter with the `all_products` object.

```html
{{#var product = all_products | get("earring-ab001") /}}
{{#link_to product.url}}
  {{product.title}}
{{/link_to}}
```

--------------------------------

### Access Specific Blog with Sline

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This example demonstrates how to retrieve a specific blog by its handle and display its title and URL. It utilizes the `get` filter with the `all_blogs` object.

```html
{{#var blog = all_blogs | get("news") /}}
{{#link_to blog.url}}
  {{blog.title}}
{{/link_to}}
```

--------------------------------

### Format Address Display

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This example demonstrates how to format and display an address object. It utilizes a helper function `format_address` to render the address details.

```HTML
{{#format_address address /}}
```

--------------------------------

### Implement Pagination with Sline

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This example demonstrates how to implement pagination for displaying products. It fetches product data with a specified page size and renders navigation links for previous and next pages.

```html
{{#var paginate = all_products | get_product_pagination(5) /}}
{{#for product in paginate.list}}
  {{#link_to product.url}}
    {{product.title}}
  {{/link_to}}
{{/for}}

<nav class="pagination">
  {{#if paginate.previous}}
    <a href="{{paginate.previous.url}}">上一页</a>
  {{/if}}
  <span>第 {{paginate.current_page}} 页，共 {{paginate.pages}} 页</span>
  {{#if paginate.next}}
    <a href="{{paginate.next.url}}">下一页</a>
  {{/if}}
</nav>
```

--------------------------------

### Display Product Details with product Object

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The `product` object represents a single product in the store, including its title, description, price, images, and variants. This example displays the product title, description, and formatted price.

```HTML
<h1>{{product.title}}</h1>
<p>{{product.description}}</p>
<div class="price">{{product.price | money}}</div>
```

--------------------------------

### Access Specific Page with Sline

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This example demonstrates how to retrieve a specific custom page using its handle and display its title and URL. It utilizes the `get` filter with the `all_pages` object.

```html
{{#var page = all_pages | get("privacy-policy") /}}
{{#link_to page.url}}
  {{page.title}}
{{/link_to}}
```

--------------------------------

### Display Shop Information with shop Object

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The `shop` object provides basic information and settings for the store, including its name, description, currency, and contact details. This example displays the shop's name and description.

```HTML
<h1>{{shop.name}}</h1>
<p>{{shop.description}}</p>
```

--------------------------------

### Render Section with Settings and Blocks

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This example shows how to render a section, accessing its ID and settings, and iterating through its blocks. It displays a section title and renders the content of each block based on its type.

```HTML
<section data-section-id="{{section.id}}">
  <h2>{{section.settings.title}}</h2>
  {{#blocks}}
    {{#block /}}
  {{/blocks}}
</section>
```

--------------------------------

### Conditional Logic for Theme Settings in HTML

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

Demonstrates how to access and use global theme settings defined in `theme.config.json`. This example checks the `cart_add_type` setting to determine whether to open a drawer or redirect to the cart page.

```html
{{#if settings.cart_add_type == "drawer"}}
打开抽屉式购物车。
{{#else}}
跳转到购物车页面。
{{/if}}
```

--------------------------------

### Render Filter Options with Sline

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This code example shows how to render filter options for a given search. It iterates through the filters and then through the values of each filter, creating checkboxes for user interaction.

```html
{{#for filter in search.filters}}
  <h3>{{filter.label}}</h3>
  {{#for value in filter.values}}
    <input type="checkbox" name="{{filter.id}}" value="{{value.value}}">
    <label>{{value.label}} ({{value.count}})</label>
  {{/for}}
{{/for}}
```

--------------------------------

### Display Country and Currency Information

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This example shows how to display the current country's name and its currency's ISO code using localization data. It's useful for internationalized websites.

```HTML
<p>当前国家：{{localization.country.name}}</p>
<p>货币：{{localization.country.currency.iso_code}}</p>
```

--------------------------------

### Navigate using Shop Routes

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The `routes` object contains URL paths for important pages within the shop, such as the account page, cart page, and search page. This example shows how to link to the cart and account pages.

```HTML
<a href="{{routes.cart_url}}">购物车</a>
<a href="{{routes.account_url}}">我的账户</a>
```

--------------------------------

### Access and Display Metafield Values

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This example shows how to retrieve metafields for a product, specifically looking for a 'description' metafield within the 'custom' namespace. It then conditionally displays the value if it exists.

```HTML
{{#var custom_field = product | get_metafields("custom") /}}
{{#if custom_field.description}}
  <p>{{custom_field.description.value}}</p>
{{/if}}
```

--------------------------------

### Display Page Content and Metadata

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This example shows how to display the title, content, and last updated timestamp of a page. It structures the content within an article tag for semantic HTML.

```HTML
<article>
  <h1>{{page.title}}</h1>
  <div>{{page.content}}</div>
  <p>最后更新：{{page.updated_at | date}}</p>
</article>
```

--------------------------------

### Access Specific Article with Sline

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This code snippet shows how to retrieve a specific blog article by its handle and display its title and URL. It uses the `get` filter with the `all_articles` object.

```html
{{#var article = all_articles | get("news/blog-2") /}}
{{#link_to article.url}}
  {{article.title}}
{{/link_to}}
```

--------------------------------

### Render Media Based on Type

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This example shows how to render different media types (image or video) based on the `media.media_type` property. It uses a switch statement to conditionally display an image or embed a video.

```HTML
{{#switch media.media_type}}
  {{#case "image" /}}
    <img src="{{media.src}}" alt="{{media.alt}}">
  {{#case "video" /}}
    {{#video_tag media /}}
{{/switch}}
```

--------------------------------

### Create Language Selection Dropdown

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This example shows how to create a dropdown menu for selecting languages. It iterates through available languages and creates an option for each, using the language's ISO code and endonym name.

```HTML
<select name="locale_code">
  {{#for language in localization.available_languages}}
    <option value="{{language.iso_code}}">{{language.endonym_name}}</option>
  {{/for}}
</select>
```

--------------------------------

### Get Product Variants

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Fetches all variant objects for a specified product. It takes a product object and returns an array of its variants.

```html
{{#var myVariants = product | get_variants() /}}
{{#for variant in myVariants}}
  {{ variant.title }}
{{/for}}
```

--------------------------------

### Display Page Content with page Object

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The `page` object provides information about the current page, including its title, content, creation date, and URL. This example demonstrates displaying the page title, content, and last updated time.

```HTML
<article>
  <h1>{{page.title}}</h1>
  <div>{{page.content}}</div>
  <p>最后更新：{{page.updated_at | date}}</p>
</article>
```

--------------------------------

### Display Collection Information with collection Object

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The `collection` object provides information about a product category, including its title, description, and associated products. This example displays the collection title and iterates through its products.

```HTML
<h1>{{collection.title}}</h1>
{{#for product in collection.products}}
  <div>{{product.title}}</div>
{{/for}}
```

--------------------------------

### Check if String Starts With Prefix

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Checks if a string begins with a specified prefix. It returns a boolean value and takes the prefix as a string argument.

```html
{{ "Fake Two-piece Cardigan" | starts_with("Fake") }}
```

--------------------------------

### Get Product Collections

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Retrieves all collection objects associated with a given product. It takes a product object as input and returns an array of collections.

```html
{{#var myCollections = product | get_collections() /}}
{{#for collection in myCollections}}
  {{ collection.title }}
{{/for}}
```

--------------------------------

### Access Store Navigation Menus with Linklists Object

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The Linklists object provides access to all navigation menus in the store. You can access specific menus using their handle. This example iterates through the links of the 'main-menu' and renders them as links.

```HTML
{{#for link in linklists.main-menu.links}}
  {{#link_to link.url}}
    {{link.title}}
  {{/link_to}}
{{/for}}
```

--------------------------------

### Get Single Product

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Fetches a specific product object, typically used in conjunction with line items or gift cards. It takes an object containing product information.

```html
{{#var myProduct = gift_card | get_product() /}}
{{ myProduct.title }}
```

--------------------------------

### Access Specific Collection with Sline

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This code snippet shows how to retrieve a specific collection by its handle and display its title and URL. It uses the `get` filter with the `all_collections` object.

```html
{{#var collection = all_collections | get("bottom") /}}
{{#link_to collection.url}}
  {{collection.title}}
{{/link_to}}
```

--------------------------------

### Get Resource by ID or Handle

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Retrieves a single resource object (like products, collections, articles) using its ID or handle. It requires a collection of resources and the identifier as input.

```html
{{#var myProduct = all_products | get("winter-wonderland-gift-box") /}}
{{ myProduct.title }}
```

--------------------------------

### Apply Color Styles with Color Object

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The Color object allows setting different color styles for various website components. It provides properties like alpha, red, green, blue, and RGB/RGBA string representations. This example shows how to apply header and border colors using the Color object.

```CSS
.header {
  background-color: {{settings.header_color.rgb};
  border-color: {{settings.accent_color.rgba}};
}
```

--------------------------------

### Generate Country Option Tags for Shipping

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This example generates `<option>` tags for countries within a shipping zone, including a `data-provinces` attribute with JSON-encoded sub-regions. This is typically used in a country selection dropdown for shipping settings.

```HTML
<select name="country">
  {{{ country_option_tags }}}
</select>
```

--------------------------------

### Get Product Pagination

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Retrieves paginated product objects. It takes a collection object and a page size as input and returns a paginate object. This filter is typically used in conjunction with a collection.

```html
{{#var paginate = collection | get_product_pagination(10) /}}
{{#for item in paginate.list}}
  {{forloop.index}}: {{ item.title }}
{{/for}}
```

--------------------------------

### Apply Template Class with template Object

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The `template` object provides information about the current template being used, including its name, suffix, and directory. This example applies a CSS class to the body tag based on the template name.

```HTML
<body class="template-{{template.name}}">
  <!-- 页面内容 -->
</body>
```

--------------------------------

### Display Menu Navigation Links with Linklist Object

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The Linklist object represents links within a menu navigation. It includes properties like handle, id, levels, links, and title. This example displays a menu's title and iterates through its links, rendering each as a navigation link.

```HTML
<nav>
  <h2>{{linklist.title}}</h2>
  {{#for link in linklist.links}}
    {{#link_to link.url}}
      {{link.title}}
    {{/link_to}}
  {{/for}}
</nav>
```

--------------------------------

### Create Pagination Navigation with Part Object

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The Part object represents a pagination segment within navigation, used for constructing navigation elements. It has properties like is_link, title, and url. This example iterates through pagination parts, rendering them as links or spans.

```HTML
{{#var paginate = all_products | get_product_pagination(10) /}}
{{#for part in paginate.parts}}
  {{#if part.is_link }}
    {{#link_to part.url}}
      {{part.title}}
    {{/link_to}}
  {{#else}}
    <span>{{part.title}}</span>
  {{/if}}
{{/for}}
```

--------------------------------

### Set Font Styles with Font Object

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The Font object is used for font selection in settings. It includes properties such as family, style, weight, and fallback families. This example demonstrates setting font weight and style for titles.

```CSS
--sort-title-font-weight: {{settings.sort_title_font.weight}};
--sort-title-font-style: {{settings.sort_title_font.style}};
```

--------------------------------

### Get Metafields

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Retrieves metafield objects associated with a resource. It takes a resource object and a namespace as input and returns metafields. This filter is compatible with various resources like products, collections, blogs, articles, pages, orders, customers, variants, shops, and companies.

```html
{{#var mf = product | get_metafields("seo") /}}
{{ mf.seo_key.value }}
```

--------------------------------

### Get Last Array Element

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Retrieves the last element from an array. Takes the array as a parameter.

```html
{{#var arr = "one,two,three" | split(",") /}}
{{ arr | last() }}
```

--------------------------------

### Get First Array Element

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Retrieves the first element from an array. Takes the array as a parameter.

```html
{{#var arr = "one,two,three" | split(",") /}}
{{ arr | first() }}
```

--------------------------------

### Slice String or Array

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Extracts a portion of a string or array starting from a specified index, with an optional length.

```html
{{ product.title }}
{{ product.title | slice(1, len=9) }}
```

--------------------------------

### Get Size of String or Array

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Returns the number of characters in a string or the number of elements in an array. Takes the variable as a parameter.

```html
{{#var arr = "one,two,three" | split(",") /}}
{{ arr | size() }}
```

--------------------------------

### Display Product Recommendations

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

Shows recommended products based on sales data and product descriptions. It checks if recommendations are performed and then iterates through the recommended products, displaying their image, title, and price. This requires recommendation data.

```html
{{#if recommendations.performed}}
  <div class="product-recommendations">
    <h3>推荐商品</h3>
    {{#for product in recommendations.products}}
      <div class="recommended-product">
        <a href="{{product.url}}">
          <img src="{{product.featured_image | image_url}}" alt="{{product.title}}">
          <h4>{{product.title}}</h4>
          <p>{{product.price | money}}</p>
        </a>
      </div>
    {{/for}}
  </div>
{{/if}}
```

--------------------------------

### Create Customer Account Form

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates a form for customers to create new accounts. Supports registration via email or phone, and includes fields for personal information and marketing preferences.

```html
{{#create_customer_form}}
    form_content
{{/create_customer_form}}
```

--------------------------------

### Link to Product using product.handle

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The `handle` is a string used to access resources within Shopline templates. It serves as a unique identifier for resources and is used in URL generation and resource lookup.

```HTML
<a href="/products/{{product.handle}}">{{product.title}}</a>
```

--------------------------------

### Get CDN URL for files from Shopline backend

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

The `file_url` filter returns the CDN URL for any file uploaded to the Shopline backend's file manager.

```html
{{ "1691570437909.jpg" | file_url() }}
```

--------------------------------

### Get Payment Type Image URL

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Retrieves the URL for the SVG image corresponding to a given payment type. It takes the payment type as a string argument.

```html
{{ "affrim" | payment_type_img_url() }}
```

--------------------------------

### Display Collections with Sline

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This code snippet shows how to iterate through all collections in a store and display them as links, allowing users to navigate to each collection's page.

```html
{{#for collection in collections }}
    {{#link_to collection.url}}
        {{collection.title}}
    {{/link_to}}
{{/for}}
```

--------------------------------

### Display Shop Policies in HTML

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

Loops through the shop's policies (e.g., privacy, returns) and displays them as links in the footer. This ensures customers can easily access important store policies.

```html
<footer>
  {{#for policy in shop.policy}}
    <a href="{{policy.url}}">{{policy.title}}</a>
  {{/for}}
</footer>
```

--------------------------------

### Display Discount Application Details in HTML

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

Loops through discount applications for an order to display details such as the discount title, type, value (percentage or fixed amount), and total allocated amount. This provides a comprehensive view of applied discounts on an order.

```html
{{#for discount in order.discount_applications}}
  <div class="discount-info">
    <h4>{{discount.title}}</h4>
    <p>类型：{{discount.target_type}}</p>
    {{#if discount.value_type == "percentage"}}
      <p>折扣：{{discount.value}}%</p>
    {{#else}}
      <p>折扣：{{discount.value | money}}</p>
    {{/if}}
    <p>总额：-{{discount.total_allocated_amount | money}}</p>
  </div>
{{/for}}
```

--------------------------------

### Display Customer Welcome Message

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

Greets the logged-in customer with their name and displays their email address. This snippet checks if customer data is available before rendering the welcome message.

```html
{{#if customer}}
  <h2>欢迎回来，{{customer.first_name}}!</h2>
  <p>您的邮箱：{{customer.email}}</p>
{{/if}}
```

--------------------------------

### Get CDN URL for theme static assets

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

The `asset_url` filter returns the CDN URL for static assets within a theme, supporting both absolute and relative file paths.

```html
{{ "a.js" | asset_url() }}
```

```html
{{ "../one/test.js"| asset_url() }}
```

--------------------------------

### Create Product Item Component

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates a component to hold product data, requiring a product object as a parameter. It also allows for custom HTML attributes.

```html
{{#product_item product class="product-item"}}
    content
{{/product_item}}
```

```html
{{#product_item product}}
  <div>product-item</div>
{{/product_item}}
```

--------------------------------

### Get Order Pagination

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Retrieves paginated order objects. It takes a customer object and a page size as input and returns a paginate object. This filter is typically used in conjunction with a customer.

```html
{{#var paginate = customer | get_order_pagination(10) /}}
{{#for item in paginate.list}}
  {{forloop.index}}: {{ item.id }}
{{/for}}
```

--------------------------------

### Get Article Pagination

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Retrieves paginated article objects. It takes a blog object and a page size as input and returns a paginate object. This filter is typically used in conjunction with a blog.

```html
{{#var paginate = blog | get_article_pagination(10) /}}
{{#for item in paginate.list}}
    {{forloop.index}}: {{ item.title }}
{{/for}}
```

--------------------------------

### Get Comment Pagination

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Retrieves paginated comment objects. It takes an article object and a page size as input and returns a paginate object. This filter is typically used in conjunction with an article.

```html
{{#var paginate = article | get_comment_pagination(10) /}}
{{#for item in paginate.list}}
    {{forloop.index}}: {{ item.content }}
{{/for}}
```

--------------------------------

### Display Blog Title and Articles

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

Renders the title of a blog and lists all articles within that blog. For each article, it displays its title. This snippet requires blog data, including its title and a collection of articles.

```html
<h1>{{blog.title}}</h1>
{{#for article in blog.articles}}
  <article>
    <h2>{{article.title}}</h2>
  </article>
{{/for}}
```

--------------------------------

### Get Paginated Resources

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Retrieves paginated resources (like collections or pages) based on a specified page size. It returns a paginate object containing the list of items for the current page.

```html
{{#var paginate = all_collections | get_pagination(10) /}}
{{#for collection in paginate.list}}
    {{forloop.index}}: {{ collection.title }}
{{/for}}
```

--------------------------------

### Link to Customer Registration

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates an HTML link to the customer registration page. Requires the link text as a parameter.

```html
{{#link_to_customer_register "Create an account" /}}
```

--------------------------------

### Display Image with Attributes

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This snippet illustrates how to display an image using its source URL, alt text, width, and height attributes. It directly uses the `image.src`, `image.alt`, `image.width`, and `image.height` properties.

```HTML
<img src="{{image.src}}" alt="{{image.alt}}" width="{{image.width}}" height="{{image.height}}">
```

--------------------------------

### Link to Customer Login

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates an HTML link to the customer login page. Requires the link text as a parameter.

```html
{{#link_to_customer_login "Log in" /}}
```

--------------------------------

### Display Product Options

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

Renders product options such as size or color using a select dropdown. It iterates through available options and their values, marking the currently selected value. This snippet requires product and option data.

```html
{{#for option in product.options}}
  <div class="product-option">
    <label>{{option.name}}:</label>
    <select name="option{{option.position}}">
      {{#for value in option.values}}
        <option value="{{value}}" {{#if value == option.selected_value}}selected{{/if}}>
          {{value}}
        </option>
      {{/for}}
    </select>
  </div>
{{/for}}
```

--------------------------------

### Get Search Pagination

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Retrieves paginated search result objects. It takes a search object and a page size as input and returns a paginate object. This filter is typically used in conjunction with search results.

```html
{{#var paginate = search | get_search_pagination(10) /}}
{{#for item in paginate.list}}
  {{forloop.index}}: {{ item.title }}
{{/for}}
```

--------------------------------

### Customer Login Form

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates a customer login form. Supports email or phone login and optional third-party login.

```html
{{#customer_login_form}}
    form_content
{{/customer_login_form}}
```

--------------------------------

### Get External Video URL

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

Retrieves the URL for a specified external video, with options for autoplay, controls, and loop. It takes a media object and returns a string URL, potentially with YouTube API parameters.

```html
{{#for media in product.media}}
    {{#switch media.media_type}}
        {{#case "external_video" /}}
            {{#if media.host == "youtube"}}
                {{#external_video_tag media | external_video_url(autoplay=false, loop=true) /}}
            {{/if}}
    {{/switch}}
{{/for}}
```

--------------------------------

### Display Order Details

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

Shows basic order information, including the order name and total price. This snippet requires order data to be present.

```html
<h2>订单 {{order.name}}</h2>
<p>总金额：{{order.total_price | money}}</p>
```

--------------------------------

### Generate HTML Preload Link Tag in Sline

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates an HTML <link> tag with the 'rel' attribute set to 'preload' for prioritizing the loading of specific Shopline-hosted resources. Use cautiously, primarily for critical above-the-fold content.

```html
{{#preload_tag url [as=string] [rel=string] /}}
```

```html
{{#preload_tag "base/index.js" | asset_url() /}}
```

--------------------------------

### Display Blog Article Content

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

Shows the full content of a blog article, including its title and author. This snippet is designed to display a single article's details.

```html
<article>
  <h1>{{article.title}}</h1>
  <p>作者：{{article.author}}</p>
  <div>{{article.content}}</div>
</article>
```

--------------------------------

### Display Checkout Summary in HTML

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

Renders a summary of the checkout information, including the total price, shipping cost, tax amount, and any customer notes. This is useful for displaying an order overview to the customer.

```html
<div class="checkout-summary">
  <h2>订单摘要</h2>
  <p>总价：{{checkout.total_price | money}}</p>
  <p>配送费：{{checkout.shipping_price | money}}</p>
  <p>税费：{{checkout.tax_price | money}}</p>
  {{#if checkout.note}}
    <p>备注：{{checkout.note}}</p>
  {{/if}}
</div>
```

--------------------------------

### Create Product Form

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates an HTML form for adding a product to the shopping cart. It requires a product object as a parameter and allows for custom HTML attributes.

```html
{{#product_form product id="productFrom" class="productFrom"}}
    content
{{/product_form}}
```

```html
{{#product_form product id="productFrom" class="productFrom"}}
        <div style="margin-bottom:10px;">
            <input type="number" required step="1" form="product-form-{{section.id}}" name="quantity" min='1' max='999' value='1'/>
        </div>
        {{#var firstProduct = product.variants | first() /}}
        <div style="margin-bottom:10px;">
            <input type="hidden" name="id" value="{{firstProduct | default(product.selected_or_first_available_variant.id)}}" />
        </div>
        <button style="margin-bottom:10px;" class='btn btn-primary' type='submit'>{{ "products.product_list.add_to_cart" | t() }}</button>
        {{#payment_button /}}
    {{/product_form}}
```

--------------------------------

### Identify Page Type with request Object

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The `request` object contains information relevant to the current HTTP request, such as the hostname, page type, and path. This example adds a CSS class to a div based on the `request.page_type`.

```HTML
<div class="page-{{request.page_type}}">
  <!-- 页面内容 -->
</div>
```

--------------------------------

### Display Product Price with Currency

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This snippet demonstrates how to display a product's price, formatted using the 'money' filter, along with the shop's currency code. It's essential for e-commerce storefronts.

```HTML
<p>价格：{{product.price | money}} {{shop.currency}}</p>
```

--------------------------------

### Get CDN URL for images from Shopline backend

Source: https://github.com/slinedev/sline-docs/blob/main/filter.md

The `file_img_url` filter retrieves the CDN URL for images uploaded to the Shopline backend's file manager. It accepts an optional `size` parameter to specify image dimensions.

```html
{{ "1691570437909.jpg" | file_img_url() }}
```

```html
{{ "1691570437909.jpg" | file_img_url(size="100x") }}
```

--------------------------------

### Display Shipping Method Information

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

Presents shipping method details, including its title and price. It also displays the original price if a discount has been applied and lists any associated taxes with their details. This requires shipping_method data.

```html
<div class="shipping-info">
  <h4>{{shipping_method.title}}</h4>
  {{#if shipping_method.original_price != shipping_method.price}}
    <s>{{shipping_method.original_price | money}}</s>
  {{/if}}
  <span>{{shipping_method.price | money}}</span>
  {{#for tax in shipping_method.tax_lines}}
    <p>税费：{{tax.title}} ({{tax.rate}}%) - {{tax.price | money}}</p>
  {{/for}}
</div>
```

--------------------------------

### New Blog Comment Form

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates a form for creating new comments on blog articles. Requires article object and includes fields for author, email, and comment body.

```html
{{#new_comment_form /}} custom code {{/new_comment_form}}
```

```html
{{#new_comment_form article}}
  {{#if form.posted_successfully}}
    <div>Submit Successfully</div>
  {{/if}}

  {{#if form.errors.messages}}
    <div>{{form.errors.messages}}</div>
  {{/if}}

  <div class="fields">
    <label class="field">
      <input type="text" name="comment[author]" placeholder="Please enter your name" required>
    </label>

    <label class="field">
      <input type="email" name="comment[email]" placeholder="Please enter your email address" required>
    </label>

    <label class="field">
      <textarea name="comment[body]" placeholder="Please enter your comment" required></textarea>
    </label>

    <div>
      <input type="submit" value="Submit">
    </div>
  </div>
{{/new_comment_form}}
```

--------------------------------

### Display Discount Allocations in HTML

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

Iterates through discount allocations for a line item and displays the discount details, including the discount application title and the allocated amount. This snippet helps visualize how discounts affect individual products.

```html
{{#for allocation in line_item.discount_allocations}}
  <div class="discount">
    <span>折扣：{{allocation.discount_application.title}}</span>
    <span>金额：-{{allocation.amount | money}}</span>
  </div>
{{/for}}
```

--------------------------------

### Display Currency Information

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This snippet displays currency information, including the currency symbol, ISO code, and name. It uses the `curency.symbol`, `curency.iso_code`, and `curency.name` properties.

```HTML
<div class="currency-info">
  <span>{{curency.symbol}} {{curency.iso_code}}</span>
  <span>{{curency.name}}</span>
</div>
```

--------------------------------

### Format Address Display

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates an HTML display for an address, with components sorted according to the address's region. This tag takes an address object as input.

```HTML
{{#format_address address /}}
```

--------------------------------

### Render Dynamic Content in Sline

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Renders dynamic content of a specified type. Supported types include 'header', 'footer', 'layout', and 'blocks', each with specific usage contexts within layouts or sections.

```html
{{#content content_type /}}
```

```html
{{#content "blocks" /}}
```

--------------------------------

### Set Page Description with page_description

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The `page_description` object is used to set the description that appears in search engine listings and social media previews for the current page.

```HTML
<meta name="description" content="{{page_description}}" />
```

--------------------------------

### Generate HTML link to vendor

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Creates an HTML anchor tag with an `href` attribute that links to the current category list page. The link includes specified vendor information, filtering products by that vendor on the new page.

```html
{{#link_to_vendor "content" class="link-class" my_attr="abc"/}}
```

```html
{{#for vendor in collection.all_vendors}}
        {{#link_to_vendor vendor class="link-class" my_attr="abc"/}}
    {{/for}}
```

--------------------------------

### Create Country Selection Dropdown

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This snippet demonstrates how to create a dropdown menu for selecting countries. It iterates through available countries and creates an option for each, using the country's ISO code and name.

```HTML
<select name="country_code">
  {{#for country in localization.available_countries}}
    <option value="{{country.iso_code}}">
      {{country.name}}
    </option>
  {{/for}}
</select>
```

--------------------------------

### Link to Tags for Filtering

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This snippet demonstrates how to iterate through current tags applied to a page (like articles or products) and create links for filtering content by those tags. It uses `current_tags` and `link_to_tag`.

```HTML
{{#for tag in current_tags}}
  {{#link_to_tag tag}}
    {{tag}}
  {{/link_to_tag}}
{{/for}}
```

--------------------------------

### Link to Tag

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Creates an HTML anchor tag with an href attribute that includes a specified tag. Clicking this tag navigates to the product category list page, filtered by the specified tag. Supports custom HTML attributes and content within the tag.

```html
{{#link_to_tag "my_tag" class="link-class" my_attr="abc" }}
  content
{{/link_to_tag}}
```

```html
{{#for tag in collection.all_tags}}
        {{#link_to_tag tag class="link-class" my_attr="abc" }}
            {{tag}}
        {{/link_to_tag}}
    {{/for}}
```

--------------------------------

### Display Product Variants in HTML

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

This snippet demonstrates how to iterate through product variants and display them in an HTML select dropdown. It includes logic to mark the selected variant and show its title and formatted price.

```HTML
<select name="id">
  {{#for variant in product.variants}}
    <option value="{{variant.id}}" {{#if variant.selected}}selected{{/if}}>
      {{variant.title}} - {{variant.price | money}}
    </option>
  {{/for}}
</select>
```

--------------------------------

### Define Schema for Visual Editor in Sline

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Defines configuration items for the visual editor's dynamic components. The content within the tag is expected to be JSON.

```html
{{#schema}}
json_content
{{/schema}}
```

--------------------------------

### Payment Button Container

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates an HTML container for a website's quick checkout button. This filter must be used within the product form on the website.

```HTML
{{#product_form product}}
    your code
    <div class="form__buttons">
        {{#payment_button/}}
    </div>
{{/product_form}}
```

--------------------------------

### Generate Storefront Password Form

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates a form for storefront password submission. It includes placeholders for form content and handles success or error messages.

```HTML
{{#storefront_password_form}}
  form_content
{{/storefront_password_form}}
```

```HTML
{{#storefront_password_form}}
  {{#if form.posted_successfully}}
    <div>Submit Successfully</div>
  {{/if}}

  {{#if form.errors.messages}}
    <div>{{form.errors.messages}}</div>
  {{/if}}

  <div class="fields">
    <label class="field">
      <input type="password" name="password" placeholder="Please enter password" required>
    </label>
    <div>
      <input type="submit" value="Submit">
    </div>
  </div>
{{/storefront_password_form}}
```

--------------------------------

### Specify Layout for Rendering in Sline

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Specifies the layout to be used for rendering. This tag can only be used within HTML templates. Accepts a layout file name or 'none' for no layout.

```html
{{#layout name /}}
```

```html
{{#layout none /}}
```

```html
{{#layout "password" /}}
```

--------------------------------

### Activate Customer Password Form

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates a form for activating customer accounts. Used after a customer receives an activation email.

```html
{{#activate_customer_password_form}}
    form_content
{{/activate_customer_password_form}}
```

--------------------------------

### Company Account Application Form

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates a company account application form, intended for merchants with the SHOPLINE Enterprise plan. It includes fields for company details and shipping/billing addresses.

```HTML
{{#company_account_application_form}}
    form_content
{{/company_account_application_form}}
```

--------------------------------

### Render Component in Sline

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Renders a specified public component, which can be a global component or a private section/block component. Supports passing dynamic hash parameters (key=value) for variables.

```html
{{#component file_path [hash...] /}}
```

```html
{{#component "title" /}}
```

```html
{{#component "./title" /}}
```

```html
<!--! sections/header/header.html -->
{{#component "./title" title=section.settings.title show=true /}}
```

--------------------------------

### Create/Edit/Delete Customer Address Form

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates a form for creating, editing, or deleting addresses on a customer account. It supports various parameters for customization and accepts detailed address information as input.

```HTML
{{#customer_address_form}}
    form_content
{{/customer_address_form}}
```

```HTML
{{#customer_address_form return_to=routes.account_url}}
<input type="text" name="address[address1]" placeholder="address" />
<input class="submit-button" type="submit" value="submit">
{{/customer_address_form}}
```

```HTML
{{#customer_address_form address=customer.editing_address return_to=routes.account_url}}
<input type="text" name="address[first_name]" value="{{form.address.first_name}}"/>
<input class="submit-button" type="submit" value="submit">
{{/customer_address_form}}
```

```HTML
{{#for address in customer.addresses}}
    {{#customer_address_form address_seq=address.id}}
        <input class="submit-button" type="submit" value="delete">
    {{/customer_address_form}}
{{/for}}
```

--------------------------------

### Set Page Title with page_title

Source: https://github.com/slinedev/sline-docs/blob/main/object.md

The `page_title` object is used to specify the title for search engine listings and social media previews. If no resource handle is available, it outputs the shop name.

```HTML
<title>{{page_title}}</title>
```

--------------------------------

### Generate Delete Customer Form

Source: https://github.com/slinedev/sline-docs/blob/main/tag.md

Generates a form for account deletion, requiring a verification code as input.

```HTML
{{#delete_customer_form}}
    form_content
{{/delete_customer_form}}
```