HTML Data Attribute

You can use our JavaScript-built widget by using the HTML Data Attribute feature. Sledge provides several data attributes you can use to integrate it with your store.

Available data attributes for :

Embed script

Embed script is a required element for sharing global user session and settings throughout the hierarchy of all sledge applications.

See example:

Anatomy

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sledge-app/js@latest/dist/style.css" />
 
<script
    type="module"
    id="sledge-embed-script"
    src="https://cdn.jsdelivr.net/npm/@sledge-app/js@latest/dist/sledge.min.js"
></script>
 
<script>
    var sledge = sledge || {};
    sledge.config = {
      userId: "",
      userEmail: "",
      userFullname: "",
      domain: "",
      locale: ""
    };
</script>

API reference


sledge.config.userId

Fill with your own user logined data

  • Type: string

sledge.config.userEmail

Fill with your own user logined data

  • Type: string

sledge.config.userFullname

Fill with your own user logined data

  • Type: string

sledge.config.domain

Fill with your shop's .myshopify.com domain name

  • Type: string

sledge.config.locale

Fill with your locale language

  • Type: string

Widgets

Widgets are elements that provide attribute data needed for integration, each element of each application requires different attributes.

See example:

Anatomy

<div
  data-component=""
  data-width-element=""
  data-icon-size=""
  data-rating-size=""
  data-query-keyword=""
  data-query-share-id=""
  data-url-search-result=""
  data-use-proxy-url=""
  data-position-widget=""
  data-product-id=""
  data-product-variant-id=""
  data-product-name=""
  data-product-vendor=""
  data-product-sku=""
  data-product-variant-name=""
  data-product-link=""
  data-product-image=""
  data-product-currency=""
  data-product-price=""
  data-collection-id=""
  data-collection-name=""
  data-on-after-add-wishlist="customFunctionName"
  data-on-after-remove-wishlist="customFunctionName"
  data-on-after-add-review="customFunctionName"
  data-on-after-render-product="customFunctionName"
  data-on-after-render-collection="customFunctionName"
  data-on-after-render-page="customFunctionName"
  data-on-after-render-blog="customFunctionName"
  data-on-after-render-article="customFunctionName"
  data-render-other-index-list=""
  data-render-product-card=""
  data-render-collection-card=""
  data-render-page-card=""
  data-render-blog-card=""
  data-render-article-card=""
 
  data-render-search-view-more-result=""
  data-render-suggestion-keyword-list=""
  data-render-wishlist-widget-alert=""
  data-render-review-product-info=""
></div>
 
<script>
  function customFunctionName({ state }) {
      if (state === 'success') {
          // if condition is state === true, run your custom code
      } else {
          // if condition is state === true, run your custom code
      }
  }
</script>

API reference


data-component

To specify the widget to be used.

  • Type:
    • Wishlist:
      • 'wishlist-badge'
      • 'wishlist-trigger'
      • 'wishlist-button-detail'
      • 'wishlist-widget'
    • Product Review:
      • 'product-review-rating'
      • 'product-review-widget'
      • 'product-review-happy-customers-page'
      • 'product-review-sticky-sidebar-widget'
      • 'product-review-trust-badge'
      • 'product-review-snippet'
    • Instant Search:
      • 'instant-search-widget'
      • 'instant-search-icon-widget'
      • 'instant-search-result-widget'
    • Product Filters:
      • 'instant-search-product-filter-widget'
    • Product Recommendation:
      • 'product-recommendation-recently-viewed'

data-width-element

Customize element width.

e.g: '400px'

This attribute works for widget

'instant-search-widget' | 'product-review-happy-customers-page' | 'product-review-snippet'.

  • Type: string

data-icon-size

Customize icon size.

This attribute works for widget 'instant-search-icon-widget'.

  • Type: 'xs' | 'sm' | 'md'
  • Default: 'sm'

data-rating-size

Customize rating size.

This attribute works for widget 'product-review-rating'.

  • Type: 'xs' | 'sm' | 'md'
  • Default: 'md'

data-fill-color

Customize fill color svg.

This attribute works for widget 'product-review-trust-badge'.

  • Type: 'string'

data-outline-color

Customize outline color svg.

This attribute works for widget 'product-review-trust-badge'.

  • Type: 'string'

data-query-keyword

Fill up your unique queryParam name for keyword.

This attribute works for widget 'instant-search-result-widget' | 'instant-search-product-filter-widget'.

e.g: https://your-online-store.com/collection/all?{value}=

  • Type: string
  • Default: 'q'

data-query-sort-by

Fill up your unique queryParam name for sort by.

This attribute works for widget 'instant-search-result-widget' | 'instant-search-product-filter-widget'.

e.g: https://your-online-store.com/collection/all?{value}=

  • Type: string
  • Default: 'sort_by'

data-query-page

Fill up your unique queryParam name for page.

This attribute works for widget 'instant-search-result-widget' | 'instant-search-product-filter-widget'.

e.g: https://your-online-store.com/collection/all?{value}=

  • Type: string
  • Default: 'page'

data-query-limit

Fill up your unique queryParam name for limit.

This attribute works for widget 'instant-search-result-widget' | 'instant-search-product-filter-widget'.

e.g: https://your-online-store.com/collection/all?{value}=

  • Type: string
  • Default: 'limit'

data-query-share-id

Fill up your unique queryParam name for share id.

e.g: https://your-online-store.com/pages/wishlist/?{value}=

This attribute works for widget 'wishlist-widget'.

  • Type: string
  • Default: 'share'

data-url-search-result

Fill up the route URL page where your Search Result widget is located.

e.g: https://your-online-store.com/{value}

This attribute works for widget 'instant-search'.

  • Type: string

data-limit-options

Customize limit options in widget.

This attribute works for widget 'wishlist-widget'.

  • Type: string
  • Default: 12, 24, 36, 48, 120

data-use-proxy-url

Define the url widgets on page that should be displayed (custom or proxy).

This attribute works for widget 'wishlist-widget'.

  • Type: boolean
  • Default: false

data-position-widget

Place the widget based on the selected position.

This attribute works for widget 'product-review-sticky-sidebar-widget'

  • Type: string
  • Value: 'none' | 'left' | 'right'
  • Required: false

data-product-id

Fill with your own product id

This attribute works for widget 'wishlist-trigger' | 'wishlist-button-detail' | 'product-review-rating' | 'product-review-widget' | 'product-recommendation-recently-viewed' 'product-review-snippet.

  • Type: string

data-product-variant-id

Fill with your own product variant id

This attribute works for widget 'wishlist-trigger' | 'wishlist-button-detail' | 'product-review-widget'.

  • Type: string

data-product-name

Fill with your own product name

This attribute works for widget 'wishlist-trigger' | 'wishlist-button-detail'.

  • Type: string

data-product-vendor

Fill with your own product vendor

This attribute works for widget 'wishlist-trigger' | 'wishlist-button-detail'.

  • Type: string

data-product-sku

Fill with your own product sku

This attribute works for widget 'wishlist-trigger' | 'wishlist-button-detail'.

  • Type: string

data-product-variant-name

Fill with your own product variant name

This attribute works for widget 'wishlist-trigger' | 'wishlist-button-detail'.

  • Type: string

data-product-link

Fill with your own product URL that link to PDP

This attribute works for widget 'wishlist-trigger' | 'wishlist-button-detail'.

  • Type: string

data-product-image

Fill with your own product image URL

This attribute works for widget 'wishlist-trigger' | 'wishlist-button-detail'.

  • Type: string

data-product-currency

Fill with your own product currency, eg: IDR | $

This attribute works for widget 'wishlist-trigger' | 'wishlist-button-detail'.

  • Type: string

data-product-price

Fill with your own product price

This attribute works for widget 'wishlist-trigger' | 'wishlist-button-detail'.

  • Type: string

data-collection-id

Fill with your own collection id

This attribute works for widget 'instant-search-product-filter-widget'.

  • Type: string | number

data-collection-name

Fill with your own collection name

This attribute works for widget 'instant-search-product-filter-widget'.

  • Type: string

data-display-limit

Customize limit in widget.

e.g: 10

This attribute works for widget 'product-recommendation-recently-viewed'.

  • Type: string | number

data-hidden-product-ids

Fill with your own product ids

e.g: '123,456,789'

This attribute works for widget 'product-recommendation-recently-viewed'.

  • Type: string

data-on-after-add-wishlist

Running using your own custom function, only provide the function name (without ())

e.g: onAfterAddWishlist

wrong: onAfterAddWishlist()

This attribute works for widget 'wishlist-trigger' | 'wishlist-button-detail' | 'wishlist-widget' | 'instant-search-widget' | 'instant-search-icon-widget' | 'instant-search-result-widget' | 'instant-search-product-filter-widget'.

  • Type: string

data-on-after-remove-wishlist

Running using your own custom function, only provide the function name (without ())

e.g: onAfterRemoveWishlist

wrong: onAfterRemoveWishlist()

This attribute works for widget 'wishlist-trigger' | 'wishlist-button-detail' | 'wishlist-widget' | 'instant-search-widget' | 'instant-search-icon-widget' | 'instant-search-result-widget' | 'instant-search-product-filter-widget'.

  • Type: string

data-on-after-add-review

Running using your own custom function, only provide the function name (without ())

e.g: onAfterAddReview

wrong: onAfterAddReview()

This attribute works for widget 'product-review-widget'.

  • Type: string

data-on-after-render-product

Running using your own custom function, only provide the function name (without ())

e.g: onAfterRenderProduct

wrong: onAfterRenderProduct()

This attribute works for widget 'wishlist-widget' | 'instant-search-widget' | 'instant-search-icon-widget' | 'instant-search-result-widget' | 'instant-search-product-filter-widget'.

  • Type: string

data-on-after-render-collection

Running using your own custom function, only provide the function name (without ())

e.g: onAfterRenderCollection

wrong: onAfterRenderCollection()

This attribute works for widget 'instant-search-result-widget'.

  • Type: string

data-on-after-render-page

Running using your own custom function, only provide the function name (without ())

e.g: onAfterRenderPage

wrong: onAfterRenderPage()

This attribute works for widget 'instant-search-result-widget'.

  • Type: string

data-on-after-render-blog

Running using your own custom function, only provide the function name (without ())

e.g: onAfterRenderBlog

wrong: onAfterRenderBlog()

This attribute works for widget 'instant-search-result-widget'.

  • Type: string

data-on-after-render-article

Running using your own custom function, only provide the function name (without ())

e.g: onAfterRenderArticle

wrong: onAfterRenderArticle()

This attribute works for widget 'instant-search-result-widget'.

  • Type: string

data-render-other-index-list

Render your own custom component in the app, only provide the function name (without ())

e.g: renderOtherIndexList

wrong: renderOtherIndexList()

This attribute works for widget 'instant-search-widget' | 'instant-search-icon-widget'.

  • Type: string

data-render-product-card

Render your own custom component in the app, only provide the function name (without ())

e.g: renderProductCard

wrong: renderProductCard()

This attribute works for widget 'wishlist-widget' | 'instant-search-widget' | 'instant-search-icon-widget' | 'instant-search-result-widget' | 'instant-search-product-filter-widget'.

  • Type: string

data-render-collection-card

Render your own custom component in the app, only provide the function name (without ())

e.g: renderCollectionCard

wrong: renderCollectionCard()

This attribute works for widget 'instant-search-result-widget'.

  • Type: string

data-render-page-card

Render your own custom component in the app, only provide the function name (without ())

e.g: renderPageCard

wrong: renderPageCard()

This attribute works for widget 'instant-search-result-widget'.

  • Type: string

data-render-blog-card

Render your own custom component in the app, only provide the function name (without ())

e.g: renderBlogCard

wrong: renderBlogCard()

This attribute works for widget 'instant-search-result-widget'.

  • Type: string

data-render-article-card

Render your own custom component in the app, only provide the function name (without ())

e.g: renderArticleCard

wrong: renderArticleCard()

This attribute works for widget 'instant-search-result-widget'.

  • Type: string

data-render-search-view-more-result

Render your own custom component in the app, only provide the function name (without ())

e.g: renderSearchViewMoreResult

wrong: renderSearchViewMoreResult()

This attribute works for widget 'instant-search-widget' | 'instant-search-icon-widget'.

  • Type: string

data-render-suggestion-keyword-list

Render your own custom component in the app, only provide the function name (without ())

e.g: renderSuggestionKeywordList

wrong: renderSuggestionKeywordList()

This attribute works for widget 'instant-search-widget' | 'instant-search-icon-widget'.

  • Type: string

data-render-wishlist-widget-alert

Render your own custom component in the app, only provide the function name (without ())

e.g: renderWishlistWidgetAlert

wrong: renderWishlistWidgetAlert()

This attribute works for widget 'wishlist-widget'.

  • Type: string

data-render-review-product-info

Render your own custom component in the app, only provide the function name (without ())

e.g: renderReviewProductInfo

wrong: renderReviewProductInfo()

This attribute works for widget 'product-review-happy-customers-page"'.

  • Type: string

data-section-description

Customize section description text

This attribute works for widget 'product-recommendation-recently-viewed'.

  • Type: string

data-section-title

Customize section title text

e.g: Recently Viewed

This attribute works for widget 'product-recommendation-recently-viewed'.

  • Type: string

data-show-rating-average

Customize the rating average to be visible or not.

This attribute works for widget 'product-review-sticky-sidebar-widget'.

  • Type: boolean
  • Required: false

data-use-slider

Switch the component to a Carousel or Grid, set it true to switch the component to a Carousel

e.g: true

This attribute works for widget 'product-recommendation-recently-viewed'.

  • Type: boolean

data-trigger-badge

Specifies whether adding an item to the wishlist will refresh the wishlist-badge element or just update the counter.

This attribute works for widget 'wishlist-trigger' | 'wishlist-button-detail' | 'wishlist-widget'.

  • Type: 'default' | 'rerender'
  • Default: 'default'

data-use-wishlist-flyout

Display your wishlist items in a sliding panel by activating the Wishlist - Flyout Widget.

This attribute works for widget 'wishlist-badge'.

  • Type: boolean
  • Default: false

data-url-wishlist-widget

Fill up the route URL page where your Wishlist widget is located.

e.g: https://your-online-store.com/{value}

This attribute works for widget 'wishlist-badge'.

  • Type: string

Learn more

Congratulations! Now that you've learned the HTML Data Attribute API references, you can start integrating Sledge to your store. Useful resources about integrating Sledge :

Code Example@sledge-app/api