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'
- Wishlist:
data-width-element
Customize element width.
'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.
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.
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.
10
This attribute works for widget
'product-recommendation-recently-viewed'
.
- Type:
string | number
data-hidden-product-ids
Fill with your own product ids
'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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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 ()
)
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
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
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'
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 :