Javascript Methods

JavaScript Methods offer a range of possibilities to engage with Sledge Widgets through code, empowering you to effortlessly spark exciting actions.

Methods

Available methods :

Global
- sledge.initAllElements

Wishlist

Product Review

Instant Search

Product Recommendation
- sledge.productRecommendation.recentlyViewed.init

Global

`sledge.initAllElements`

Initializes or reinitializes every Sledge's element on the current page.

Example Usage

sledge.initAllElements()

Wishlist

`sledge.wishlist.add`

Use to trigger add a wishlist item.

Example Usage

sledge.wishlist.add({
    productId: 8546332377366,
    productVariantId: 46125813629206,
    productName: 'Puffer',
    productVendor: 'Sledge',
    productVariantName: 'Small / Green',
    productLink: 'https://sledge-demo-store.myshopify.com/products/puffer',
    productImage: 'https://cdn.shopify.com/s/files/1/0819/5761/7942/files/green_1080x1080_crop_center_9fa291a1-797a-4ec5-86da-61a1042e7c88.png?v=1693963988',
    productCurrency: 'USD',
    productPrice: '80'
});

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
productId	string	Fill with your own product id	✅
productVariantId	string	Fill with your own product variant id	✅
productName	string	Fill with your own product name	✅
productVendor	string \| ""	Fill with your own product vendor
productVariantName	string	Fill with your own product variant name	✅
productLink	string	Fill with your own product URL that link to PDP	✅
productImage	string \| ""	Fill with your own product image URL
productCurrency	string	Fill with your own product currency eg: `IDR` \| `USD`	✅
productPrice	string	Fill with your own product price	✅

`sledge.wishlist.remove`

Use to trigger remove a wishlist item.

Example Usage

sledge.wishlist.remove({
    productId: 8546332377366,
    productVariantId: 46125813629206,
    productName: 'Puffer',
    productVendor: 'Sledge',
    productVariantName: 'Small / Green',
    productLink: 'https://sledge-demo-store.myshopify.com/products/puffer',
    productImage: 'https://cdn.shopify.com/s/files/1/0819/5761/7942/files/green_1080x1080_crop_center_9fa291a1-797a-4ec5-86da-61a1042e7c88.png?v=1693963988',
    productCurrency: 'USD',
    productPrice: '80'
});

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
productId	string	Fill with your own product id	✅
productVariantId	string	Fill with your own product variant id	✅
productName	string	Fill with your own product name	✅
productVendor	string \| ""	Fill with your own product vendor
productVariantName	string	Fill with your own product variant name	✅
productLink	string	Fill with your own product URL that link to PDP	✅
productImage	string \| ""	Fill with your own product image URL
productCurrency	string	Fill with your own product currency eg: `IDR` \| `USD`	✅
productPrice	string	Fill with your own product price	✅

`sledge.wishlist.toggle`

Use to trigger add or remove a wishlist item.

Example Usage

sledge.wishlist.toggle({
    productId: 8546332377366,
    productVariantId: 46125813629206,
    productName: 'Puffer',
    productVendor: 'Sledge',
    productVariantName: 'Small / Green',
    productLink: 'https://sledge-demo-store.myshopify.com/products/puffer',
    productImage: 'https://cdn.shopify.com/s/files/1/0819/5761/7942/files/green_1080x1080_crop_center_9fa291a1-797a-4ec5-86da-61a1042e7c88.png?v=1693963988',
    productCurrency: 'USD',
    productPrice: '80'
});

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
productId	string	Fill with your own product id	✅
productVariantId	string	Fill with your own product variant id	✅
productName	string	Fill with your own product name	✅
productVendor	string \| ""	Fill with your own product vendor
productVariantName	string	Fill with your own product variant name	✅
productLink	string	Fill with your own product URL that link to PDP	✅
productImage	string \| ""	Fill with your own product image URL
productCurrency	string	Fill with your own product currency eg: `IDR` \| `USD`	✅
productPrice	string	Fill with your own product price	✅

`sledge.wishlist.badge.init`

Initializes or reinitializes a Wishlist - Badge element on the current page.

Example Usage

const widgetSelector = `[data-component="wishlist-badge"]`
sledge.wishlist.badge.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

`sledge.wishlist.trigger.init`

Initializes or reinitializes a Wishlist - Trigger element on the current page.

Example Usage

const widgetSelector = `[data-component="wishlist-trigger"]`
sledge.wishlist.trigger.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

`sledge.wishlist.buttonDetail.init`

Initializes or reinitializes a Wishlist - Button Detail element on the current page.

Example Usage

const widgetSelector = `[data-component="wishlist-button-detail"]`
sledge.wishlist.buttonDetail.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

`sledge.wishlist.widget.init`

Initializes or reinitializes a Wishlist - Widget element on the current page.

Example Usage

const widgetSelector = `[data-component="wishlist-widget"]`
sledge.wishlist.widget.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

Product Review

`sledge.productReview.widget.init`

Initializes or reinitializes a Product Review - Widget element on the current page.

Example Usage

const widgetSelector = `[data-component="product-review-widget"]`
sledge.productReview.widget.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

`sledge.productReview.rating.init`

Initializes or reinitializes a Product Review - Rating element on the current page.

Example Usage

const widgetSelector = `[data-component="product-review-rating"]`
sledge.productReview.rating.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

`sledge.productReview.happyCustomersPage.init`

Initializes or reinitializes a Product Review - Happy Customers Page element on the current page.

Example Usage

const widgetSelector = `[data-component="product-review-happy-customers-page"]`
sledge.productReview.happyCustomersPage.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

`sledge.productReview.trustBadge.init`

Initializes or reinitializes a Product Review - Trust Badge element on the current page.

Example Usage

const widgetSelector = `[data-component="product-review-trust-badge"]`
sledge.productReview.trustBadge.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

`sledge.productReview.snippet.init`

Initializes or reinitializes a Product Review - Snippet Carousel Widget element on the current page.

Example Usage

const widgetSelector = `[data-component="product-review-snippet"]`
sledge.productReview.snippet.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

Instant Search

`sledge.instantSearch.productFilter.init`

Initializes or reinitializes a Instant Search - Product Filter element on the current page.

Example Usage

const widgetSelector = `[data-component="instant-search-product-filter-widget"]`
sledge.instantSearch.productFilter.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

`sledge.instantSearch.productFilter.search`

Use to trigger search on a Instant Search - Product Filter element.

Example Usage

const searchKeyword = 'puffer'
sledge.instantSearch.productFilter.search(searchKeyword);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
searchKeyword	string \| ""	Input the search keyword. This parameter is optional

`sledge.instantSearch.productFilter.filter`

Use to trigger update filter on a Instant Search - Product Filter element.

Example Usage

sledge.instantSearch.productFilter.filter();

`sledge.instantSearch.searchResult.init`

Initializes or reinitializes a Instant Search - Search Result element on the current page.

Example Usage

const widgetSelector = `[data-component="instant-search-result-widget"]`
sledge.instantSearch.searchResult.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

`sledge.instantSearch.searchResult.search`

Use to trigger search on a Instant Search - Search Result element.

Example Usage

const searchKeyword = 'puffer'
sledge.instantSearch.searchResult.search(searchKeyword);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
searchKeyword	string \| ""	Input the search keyword. This parameter is optional

`sledge.instantSearch.searchResult.filter`

Use to trigger update filter on a Instant Search - Search Result element.

Example Usage

sledge.instantSearch.searchResult.filter();

`sledge.instantSearch.searchIconPopup.init`

Initializes or reinitializes a Instant Search - Search Icon Popup element on the current page.

Example Usage

const widgetSelector = `[data-component="instant-search-icon-widget"]`
sledge.instantSearch.searchIconPopup.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

`sledge.instantSearch.searchWidget.init`

Initializes or reinitializes a Instant Search - Search Widget element on the current page.

Example Usage

const widgetSelector = `[data-component="instant-search-widget"]`
sledge.instantSearch.searchWidget.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

Product Recommendation

`sledge.productRecommendation.recentlyViewed.init`

Initializes or reinitializes a Recently Viewed element on the current page.

Example Usage

const widgetSelector = `[data-component="product-recommendation-recently-viewed"]`
sledge.productRecommendation.recentlyViewed.init(widgetSelector);

Parameters

Let's look on list of all available parameters:

Parameter	Type	Description	Required
widgetSelector	string \| ""	Identifier of the widget selector that will be initialized. This parameter is optional

Javascript Events Callback Functions