### Install Shopaholic JS Helpers

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-search/README.md

Installs the Shopaholic JS helpers package using npm. This command fetches and installs the necessary library into your project's node_modules directory.

```bash
npm install @lovata/shopaholic-search
```

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

### Install Popup Helper Package

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/popup-helper/README.md

Installs the @lovata/popup-helper package using npm. This is the first step to integrate the popup helper functionalities into your project.

```bash
npm install @lovata/popup-helper
```

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

### Install URL Generation Package

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/url-generation/README.md

Installs the @lovata/url-generation package using npm. This is the first step to using the URL generation helper library.

```bash
npm install @lovata/url-generation
```

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

### Install @lovata/shopaholic-filter

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-filter-panel/README.md

Installs the Shopaholic filter package using npm. This is the first step to integrate the helper methods into your project.

```bash
npm install @lovata/shopaholic-filter
```

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

### Install Shopaholic Product List

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-product-list/README.md

Installs the Shopaholic Product List package using npm. This is the first step to integrate dynamic product lists into your project.

```bash
npm install @lovata/shopaholic-product-list
```

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

### Install Shopaholic Coupon JS Helpers

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-coupon/README.md

Installs the @lovata/shopaholic-coupon package using npm.

```bash
npm install @lovata/shopaholic-coupon
```

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

### Initialize Popup Helper

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/popup-helper/README.md

Imports the PopupHelper class from the installed package into your JavaScript or TypeScript project. This allows you to instantiate and use the helper methods.

```javascript
import PopupHelper from '@lovata/popup-helper';
```

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

### Shopaholic Product List Basic Usage

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-product-list/README.md

Demonstrates the fundamental setup for the Shopaholic Product List class. It shows how to instantiate the class and configure the AJAX request callback for updating product lists.

```javascript
import ShopaholicProductList from "@lovata/shopaholic-product-list/shopaholic-product-list";

const obListHelper = new ShopaholicProductList();
obListHelper.setAjaxRequestCallback((obRequestData) => {
  obRequestData.update = {'catalog/catalog-ajax': `.catalog_wrapper`};

  return obRequestData;
});
```

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

### Install Shopaholic Wish List JS Helpers

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-wish-list/README.md

Installs the JavaScript helper package for Shopaholic wish list integration using npm.

```bash
npm install @lovata/shopaholic-wish-list
```

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

### Shopaholic Order Creation Example

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-cart/README.md

Demonstrates how to import and instantiate the ShopaholicOrder class, set a custom AJAX request callback, and initiate the order creation process.

```javascript
import ShopaholicOrder from '@lovata/shopaholic-cart/shopaholic-order';

const obShopaholicOrder = new ShopaholicOrder();
obShopaholicOrder.setAjaxRequestCallback((obRequestData, obInput) => {
  obRequestData.loading = '.preloader';
});

obShopaholicOrder.create();
```

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

### Install Shopaholic Cart JS Helpers

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-cart/README.md

Installs the Shopaholic Cart JavaScript helper package using npm. This is the first step to integrate cart functionalities into your project.

```bash
npm install @lovata/shopaholic-cart
```

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

### ShopaholicClearWishList: Advanced Initialization

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-wish-list/README.md

An advanced example demonstrating how to customize the 'Clear wish list' functionality. It includes setting a custom button selector, defining an AJAX request callback for dynamic request modification, and initializing the helper.

```javascript
import ShopaholicClearWishList from "@lovata/shopaholic-wish-list/shopaholic-clear-wish-list";

const obHelper = new ShopaholicClearWishList();
obHelper
  .setButtonSelector('.clear-wish-list-button')
  .setAjaxRequestCallback((obRequestData, obButton) => {
    obRequestData.loading = '.preloader';
    obRequestData.update = {'wish-list/wish-list-info': '.wish-list-info-wrapper'};
    obRequestData.complete = () => {
      obButton.hide();
    };
    
    return obRequestData;
  })
  .init();
```

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

### Advanced JavaScript Usage with Callback

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-coupon/README.md

Initializes components and sets a custom AJAX request callback function to modify request data before sending, for example, to add a preloader class.

```javascript
import ShopaholicCouponAdd from "@lovata/shopaholic-coupon/shopaholic-coupon-add";
import ShopaholicCouponRemove from "@lovata/shopaholic-coupon/shopaholic-coupon-remove";

const obShopaholicCouponAdd = new ShopaholicCouponAdd();
const obShopaholicCouponRemove = new ShopaholicCouponRemove();


obShopaholicCouponAdd
.setAjaxRequestCallback(function(obRequestData, obInput, obButton) {
  obRequestData.loading = '.preloader';
  
  return obRequestData;
})
.init();
obShopaholicCouponRemove
.setAjaxRequestCallback(function(obRequestData, obInput, obButton) {
  obRequestData.loading = '.preloader';
  
  return obRequestData;
})
.init();
```

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

### ShopaholicSearch setAjaxRequestCallback() Method

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-search/README.md

Allows setting a callback function that executes before an AJAX request is sent. This callback receives the request data object and can be used to modify it, for example, to add loading classes or specify partial update targets.

```javascript
import ShopaholicSearch from "@lovata/shopaholic-search";

const obHelper = new ShopaholicSearch();
obHelper.setAjaxRequestCallback(function(obRequestData) {
  // Modify request data here
  obRequestData.loading = '.preloader';
  obRequestData.update = {'search/search-result': '.search-result-wrapper'};
  
  return obRequestData;
}).init();
```

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

### Basic Usage of UrlGeneration

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/url-generation/README.md

Demonstrates the fundamental usage of the UrlGeneration class, including initialization, removing a parameter, setting a new parameter, and updating the URL.

```javascript
import UrlGeneration from "@lovata/url-generation";

UrlGeneration.init();
UrlGeneration.remove('page');
UrlGeneration.set('sorting', 'popularity|desc');

UrlGeneration.update();
```

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

### Shopaholic Pagination Basic Usage

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-product-list/README.md

Demonstrates the basic HTML structure for pagination links and the JavaScript initialization for the Shopaholic Pagination class. It sets up AJAX requests for dynamic page loading.

```html
<ul>
    <li class="_shopaholic-pagination" data-page="1">First</li>
    <li class="_shopaholic-pagination" data-page="3">3</li>
    <li class="_shopaholic-pagination" data-page="4">4</li>
    <li class="_shopaholic-pagination" data-page="5">5</li>
    <li class="_shopaholic-pagination" data-page="6">6</li>
    <li class="_shopaholic-pagination" data-page="7">7</li>
    <li class="_shopaholic-pagination" data-page="10">Last</li>
</ul>
```

```javascript
import ShopaholicProductList from "@lovata/shopaholic-product-list/shopaholic-product-list";
import ShopaholicPagination from "@lovata/shopaholic-product-list/shopaholic-pagination";

const obListHelper = new ShopaholicProductList();
obListHelper.setAjaxRequestCallback((obRequestData) => {
  obRequestData.update = {'catalog/catalog-ajax': `.catalog_wrapper`};

  return obRequestData;
});

const obPaginationHelper = new ShopaholicPagination(obListHelper);
obPaginationHelper.init();
```

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

### ShopaholicClearWishList: Initialize Helper

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-wish-list/README.md

Shows the basic usage of the ShopaholicClearWishList class, initializing the helper to enable the 'Clear wish list' functionality with default configurations.

```javascript
import ShopaholicClearWishList from "@lovata/shopaholic-wish-list/shopaholic-clear-wish-list";

const obHelper = new ShopaholicClearWishList();
obHelper.init();
```

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

### ShopaholicSearch init() Method

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-search/README.md

The primary initialization method for the ShopaholicSearch helper. It attaches a 'change' event listener to the designated search input element, triggering search actions.

```javascript
import ShopaholicSearch from "@lovata/shopaholic-search";

const obHelper = new ShopaholicSearch();
obHelper.init();
```

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

### Advanced Shopaholic Search Configuration

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-search/README.md

Initializes the ShopaholicSearch helper with custom search limit and delay settings, alongside a custom AJAX request callback. This provides finer control over when and how search requests are made.

```javascript
import ShopaholicSearch from "@lovata/shopaholic-search";

const obHelper = new ShopaholicSearch();
obHelper
  .setSearchLimit(5)
  .setSearchDelay(600)
  .setAjaxRequestCallback(function(obRequestData) {
    obRequestData.loading = '.preloader';
    obRequestData.update = {'search/search-result': '.search-result-wrapper'};

    return obRequestData;
  }).init();
```

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

### Basic Shopaholic Search Initialization

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-search/README.md

Initializes the ShopaholicSearch helper with a custom AJAX request callback. This callback allows modification of request data, such as adding loading indicators or specifying update targets.

```javascript
import ShopaholicSearch from "@lovata/shopaholic-search";

const obHelper = new ShopaholicSearch();
obHelper.setAjaxRequestCallback(function(obRequestData) {
  obRequestData.loading = '.preloader';
  obRequestData.update = {'search/search-result': '.search-result-wrapper'};
  
  return obRequestData;
}).init();
```

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

### Shopaholic Filter Panel Basic JS Usage

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-filter-panel/README.md

Initializes the ShopaholicFilterPanel class with a ShopaholicProductList instance. It configures the AJAX request callback and then initializes the filter panel to handle user interactions.

```javascript
import ShopaholicProductList from "@lovata/shopaholic-product-list/shopaholic-product-list";
import ShopaholicFilterPanel from "@lovata/shopaholic-filter-panel/shopaholic-filter-panel";

const obListHelper = new ShopaholicProductList();
obListHelper.setAjaxRequestCallback((obRequestData) => {
  obRequestData.update = {'catalog/catalog-ajax': `.catalog_wrapper`};

  return obRequestData;
});

const obFilterPanel = new ShopaholicFilterPanel(obListHelper);
obFilterPanel.init();
```

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

### Shopaholic Filter Price Basic JS Usage

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-filter-panel/README.md

Initializes the ShopaholicFilterPrice class with a ShopaholicProductList instance. It sets up an AJAX callback to update the catalog and initializes the price filter with a 'blur' event.

```javascript
import ShopaholicProductList from "@lovata/shopaholic-product-list/shopaholic-product-list";
import ShopaholicFilterPrice from "@lovata/shopaholic-product-list/shopaholic-filter-price";

const obListHelper = new ShopaholicProductList();
obListHelper.setAjaxRequestCallback((obRequestData) => {
  obRequestData.update = {'catalog/catalog-ajax': `.catalog_wrapper`};

  return obRequestData;
});

const obFilterPrice = new ShopaholicFilterPrice(obListHelper);
obFilterPrice.setEventType('blur').init();
```

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

### ShopaholicFilterPanel API Documentation

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-filter-panel/README.md

Provides methods to configure and initialize the ShopaholicFilterPanel class for filtering products by various properties. It allows customization of wrapper selectors, event types, and the URL field name for AJAX requests.

```APIDOC
ShopaholicFilterPanel:
  __constructor(obListHelper: ShopaholicProductList)
    - Initializes the filter panel with a ShopaholicProductList instance.

  init(): void
    - Adds event handlers to filter inputs and selects, sending AJAX requests.
    - Appends 'property' parameters to the search string (e.g., ?property[2]=M|S&property[5]=blue).

  setWrapperSelector(sWrapperSelector: string): this
    - Redeclares the default selector for filter wrapper elements.
    - Default value: "_shopaholic-filter-wrapper".
    - Returns the instance for chaining.

  setEventType(sEventType: string): this
    - Redeclares the default event type for triggering filter updates.
    - Default value: "change".
    - Returns the instance for chaining.

  setFieldName(sFieldName: string): this
    - Redeclares the default URL field name for property filters.
    - Default value: "property".
    - Returns the instance for chaining.
```

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

### Basic JavaScript Usage

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-coupon/README.md

Initializes the Shopaholic coupon add and remove components by attaching event listeners to the relevant HTML elements.

```javascript
import ShopaholicCouponAdd from "@lovata/shopaholic-coupon/shopaholic-coupon-add";
import ShopaholicCouponRemove from "@lovata/shopaholic-coupon/shopaholic-coupon-remove";

const obShopaholicCouponAdd = new ShopaholicCouponAdd();
const obShopaholicCouponRemove = new ShopaholicCouponRemove();

obShopaholicCouponAdd.init();
obShopaholicCouponRemove.init();
```

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

### Shopaholic Sorting Basic Usage

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-product-list/README.md

Illustrates the basic HTML for sorting options using a select element and the corresponding JavaScript to initialize the Shopaholic Sorting class. It enables AJAX sorting of product lists.

```html
<select class="_shopaholic-sorting">
    <option value="popularity|desc">Popular</option>
    <option value="price|desc">Expensive</option>
    <option value="price|asc">Cheap</option>
</select>
```

```javascript
import ShopaholicProductList from "@lovata/shopaholic-product-list/shopaholic-product-list";
import ShopaholicSorting from "@lovata/shopaholic-product-list/shopaholic-sorting";

const obListHelper = new ShopaholicProductList();
obListHelper.setAjaxRequestCallback((obRequestData) => {
  obRequestData.update = {'catalog/catalog-ajax': `.catalog_wrapper`};

  return obRequestData;
});

const obSortingHelper = new ShopaholicSorting(obListHelper);
obSortingHelper.init();
```

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

### ShopaholicFilterPrice API Documentation

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-filter-panel/README.md

Provides methods to configure and initialize the ShopaholicFilterPrice class for filtering products by price. It allows customization of input selectors, event types, input names, and the URL field name for AJAX requests.

```APIDOC
ShopaholicFilterPrice:
  __constructor(obListHelper: ShopaholicProductList)
    - Initializes the filter with a ShopaholicProductList instance.

  init(): void
    - Adds event handlers to price filter inputs and sends AJAX requests.
    - Appends a 'price' parameter to the search string (e.g., ?price=10|25).

  setInputSelector(sSelector: string): this
    - Redeclares the default selector for filter inputs.
    - Default value: "_shopaholic-price-filter".
    - Returns the instance for chaining.

  setEventType(sEventType: string): this
    - Redeclares the default event type for triggering filter updates.
    - Default value: "change".
    - Returns the instance for chaining.

  setInputMinPriceName(sInputName: string): this
    - Redeclares the default input name for the minimum price.
    - Default value: "filter-min-price".
    - Returns the instance for chaining.

  setInputMaxPriceName(sInputName: string): this
    - Redeclares the default input name for the maximum price.
    - Default value: "filter-max-price".
    - Returns the instance for chaining.

  setFieldName(sFieldName: string): this
    - Redeclares the default URL field name for the price parameter.
    - Default value: "price".
    - Returns the instance for chaining.
```

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

### ShopaholicClearWishList API Documentation

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-wish-list/README.md

API reference for the ShopaholicClearWishList class, detailing its methods for initializing the clear wish list functionality, setting custom button selectors, and configuring AJAX requests.

```APIDOC
ShopaholicClearWishList:
  __init__()
    Initializes the 'Clear wish list' functionality by attaching a 'click' event listener to the designated button.
    Dependencies: Requires a button element with the appropriate selector.
    Returns: The instance of ShopaholicClearWishList for method chaining.

  setButtonSelector(selector: string)
    Redeclares the default CSS selector used to identify the 'Clear wish list' button.
    Parameters:
      selector: The CSS selector string for the button.
    Default value: "._shopaholic-clear-wish-list-button"
    Returns: The instance of ShopaholicClearWishList for method chaining.

  setAjaxRequestCallback(callback: function(obRequestData, obButton))
    Sets a callback function that is executed before an AJAX request is sent. This allows for modification of the request object, such as adding loading indicators, specifying update targets, or defining completion actions.
    Parameters:
      callback: A function that accepts two arguments: obRequestData (the AJAX request object) and obButton (the button element that triggered the action). The function should return the modified obRequestData.
    Example:
      (obRequestData, obButton) => {
        obRequestData.loading = '.preloader';
        obRequestData.update = {'wish-list/wish-list-info': '.wish-list-info-wrapper'};
        obRequestData.complete = () => {
          obButton.hide();
        };
        return obRequestData;
      }
    Returns: The instance of ShopaholicClearWishList for method chaining.
```

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

### Import Popup Helper CSS

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/popup-helper/README.md

Imports the core CSS file for the popup helper. This CSS provides basic styling and is essential for the helper's functionality, particularly for scroll management.

```css
@import '@lovata/popup-helper/css/popup-helper';
```

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

### Shopaholic Coupon JS API

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-coupon/README.md

Documentation for the methods available in the Shopaholic Coupon JavaScript helper library.

```APIDOC
ShopaholicCouponAdd:
  __init__(): void
    Initializes the component, attaching event listeners to '_shopaholic-coupon-add' buttons.

  setAjaxRequestCallback(callback: function(obRequestData, obInput, obButton): object): this
    Sets a callback function to be executed before an AJAX request is sent.
    The callback receives request data, input element, and button element, and can modify the request object.
    Example:
      obShopaholicCouponAdd.setAjaxRequestCallback(function(obRequestData, obInput, obButton) {
        obRequestData.loading = '.preloader';
        return obRequestData;
      }).init();

ShopaholicCouponRemove:
  __init__(): void
    Initializes the component, attaching event listeners to '_shopaholic-coupon-remove' buttons.

  setAjaxRequestCallback(callback: function(obRequestData, obInput, obButton): object): this
    Sets a callback function to be executed before an AJAX request is sent.
    The callback receives request data, input element, and button element, and can modify the request object.
    Example:
      obShopaholicCouponRemove.setAjaxRequestCallback(function(obRequestData, obInput, obButton) {
        obRequestData.loading = '.preloader';
        return obRequestData;
      }).init();
```

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

### Set URL Parameter with Multiple Values

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/url-generation/README.md

Adds or updates a field with multiple values, which are joined by a pipe '|' character in the URL.

```javascript
import UrlGeneration from "@lovata/url-generation";

// URL http://site.com?page=1&sorting=popularity|desc
UrlGeneration.set('brand', ['apple', 'samsung']);
UrlGeneration.update();
// URL http://site.com?page=1&sorting=popularity|desc&brand=apple|samsung
```

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

### Shopaholic Add to Wish List - Basic Usage

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-wish-list/README.md

Demonstrates the basic HTML structure and JavaScript initialization for adding a product to the wish list using the Shopaholic helper class.

```html
<div class="_shopaholic-product-wrapper" data-product-id="{{ obProduct.id }}">
    <h2>{{ obProduct.name }}</h2>
    <button type="button" class="_shopaholic-add-wish-list-button" aria-label="Add to wish list">
</div>
```

```javascript
import ShopaholicAddWishList from "@lovata/shopaholic-wish-list/shopaholic-add-wish-list";

const obHelper = new ShopaholicAddWishList();
obHelper.init();
```

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

### Clear All URL Parameters

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/url-generation/README.md

Clears the entire search string of the URL, effectively resetting it to its base path.

```javascript
import UrlGeneration from "@lovata/url-generation";

// URL http://site.com?page=1&sorting=popularity|desc&brand=apple|samsung
UrlGeneration.init();
UrlGeneration.clear();
UrlGeneration.update();

// URL http://site.com
```

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

### HTML Structure for Coupon Input and Buttons

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-coupon/README.md

Defines the HTML elements for coupon input and apply/remove buttons.

```html
<input type="text" name="coupon" value="">

<button class="_shopaholic-coupon-add">Apply coupon</button>
<button class="_shopaholic-coupon-remove">Remove coupon</button>
```

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

### Shopaholic Pagination Set Button Selector

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-product-list/README.md

Shows how to customize the CSS selector used for pagination buttons. This allows flexibility in targeting different HTML structures for pagination controls.

```javascript
import ShopaholicPagination from "@lovata/shopaholic-product-list/shopaholic-pagination";

const obPaginationHelper = new ShopaholicPagination();
obPaginationHelper.setButtonSelector('pagination_link').init();
```

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

### Set URL Parameter with Single Value

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/url-generation/README.md

Adds or updates a single field value in the URL's search string. Shows how to set a 'sorting' parameter.

```javascript
import UrlGeneration from "@lovata/url-generation";

// URL http://site.com?page=1
UrlGeneration.init();
UrlGeneration.set('sorting', 'popularity|desc');
UrlGeneration.update();

// URL http://site.com?page=1&sorting=popularity|desc
```

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

### Shopaholic Cart Shipping Type Initialization

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-cart/README.md

Shows how to import and instantiate the ShopaholicCartShippingType class and configure its AJAX request callback for custom request handling.

```javascript
import ShopaholicCartShippingType from '@lovata/shopaholic-cart/shopaholic-cart-shipping-type';

const obShopaholicCartShippingType = new ShopaholicCartShippingType();
obShopaholicCartShippingType.setAjaxRequestCallback((obRequestData, obInput) => {
  obRequestData.loading = '.preloader';
}).init();
```

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

### Shopaholic Filter Panel HTML Structure

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-filter-panel/README.md

Provides the HTML structure for a filter panel item, typically used for property-based filtering. It includes a wrapper, a label, and a list of filterable options (e.g., checkboxes).

```html
<div class="_shopaholic-filter-wrapper" data-filter-type="checkbox" data-property-id="2">
<b>Size</b>
<ul>
    <li>
        <input type="checkbox" value="M">
    </li>
    <li>
        <input type="checkbox" value="L">
    </li>
    <li>
        <input type="checkbox" value="XL">
    </li>
</ul>
</div>
```

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

### ShopaholicSearch setSearchLimit() Method

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-search/README.md

Configures the minimum number of characters a user must type before a search request is triggered. The default limit is 3 symbols. Setting this value helps reduce unnecessary requests for very short inputs.

```javascript
import ShopaholicSearch from "@lovata/shopaholic-search";

const obHelper = new ShopaholicSearch();
// Set search limit to 5 characters
obHelper.setSearchLimit(5).init();
```

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

### Shopaholic Add to Wish List - Advanced Configuration

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-wish-list/README.md

Shows advanced configuration for the Add to Wish List helper, including custom button selectors and AJAX request callbacks for dynamic updates and loading states.

```javascript
import ShopaholicAddWishList from "@lovata/shopaholic-wish-list/shopaholic-add-wish-list";

const obHelper = new ShopaholicAddWishList();
obHelper
  .setButtonSelector('.add-wish-list-button')
  .setAjaxRequestCallback((obRequestData, obButton) => {
    obRequestData.loading = '.preloader';
    obRequestData.update = {'wish-list/wish-list-info': '.wish-list-info-wrapper'};
    obRequestData.complete = () => {
      obButton.hide();
    };
    
    return obRequestData;
  })
  .init();
```

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

### Shopaholic Product List Set Ajax Request Callback

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-product-list/README.md

Explains and demonstrates how to set a custom callback function for AJAX requests. This callback allows modification of the request object before it's sent, enabling features like adding preloader classes or specifying update targets.

```javascript
import ShopaholicProductList from "@lovata/shopaholic-product-list/shopaholic-product-list";

const obListHelper = new ShopaholicProductList();
obListHelper.setAjaxRequestCallback((obRequestData) => {
  obRequestData.update = {'catalog/catalog-ajax': `.catalog_wrapper`};

  return obRequestData;
});
```

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

### ShopaholicOrder Class API

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-cart/README.md

Documentation for the ShopaholicOrder class, covering its methods for preparing and creating orders, and customizing AJAX request callbacks.

```APIDOC
ShopaholicOrder:
  __constructor()
    Initializes a new instance of the ShopaholicOrder class.

  create(): void
    Purpose: Prepares the order data, sends an AJAX request, and creates the order.
    Action: Gathers data from the checkout form, constructs a request object, and sends it to the server.
    Dependencies: Requires a checkout form with specific classes and data attributes (e.g., _shopaholic-order-form, _shopaholic-order-field).
    Returns: void

  setAjaxRequestCallback(callback: function(obRequestData: object, obInput: object): void): this
    Purpose: Allows setting a custom callback function to modify AJAX requests before they are sent.
    Action: The provided callback function is executed just before an AJAX request is made.
    Parameters:
      callback: A function that accepts two arguments: obRequestData (the request payload) and obInput (the input data).
                Inside the callback, obRequestData can be modified (e.g., adding loading indicators, partials, selectors).
    Returns: The instance of ShopaholicOrder for method chaining.
```

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

### ShopaholicCartShippingType Class API

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-cart/README.md

Documentation for the ShopaholicCartShippingType class, detailing its methods for initializing the shipping type selection and customizing AJAX requests.

```APIDOC
ShopaholicCartShippingType:
  __constructor()
    Initializes a new instance of the ShopaholicCartShippingType class.

  init(): void
    Purpose: Initializes the shipping type selection functionality.
    Action: Adds a 'change' event listener to the shipping type input elements in the DOM.
    Dependencies: Assumes shipping type radio inputs are present and correctly structured.
    Returns: void

  setAjaxRequestCallback(callback: function(obRequestData: object, obInput: object): void): this
    Purpose: Allows setting a custom callback function to modify AJAX requests before they are sent.
    Action: The provided callback function is executed just before an AJAX request is made.
    Parameters:
      callback: A function that accepts two arguments: obRequestData (the request payload) and obInput (the input data).
                Inside the callback, obRequestData can be modified (e.g., adding loading indicators, partials, selectors).
    Returns: The instance of ShopaholicCartShippingType for method chaining.
```

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

### ShopaholicSearch setSearchDelay() Method

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-search/README.md

Sets the delay in milliseconds after the user stops typing before a search request is sent. The default delay is 400 ms. This debounce mechanism prevents excessive requests during rapid typing.

```javascript
import ShopaholicSearch from "@lovata/shopaholic-search";

const obHelper = new ShopaholicSearch();
// Set search delay to 600 milliseconds
obHelper.setSearchDelay(600).init();
```

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

### Remove URL Parameter

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/url-generation/README.md

Removes a specified field and its value from the URL's search string.

```javascript
import UrlGeneration from "@lovata/url-generation";

// URL http://site.com?page=1&sorting=popularity|desc&brand=apple|samsung
UrlGeneration.init();
UrlGeneration.set('brand'); // Removes the 'brand' parameter
UrlGeneration.update();

// URL http://site.com?page=1&sorting=popularity|desc
```

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

### Shopaholic Filter Price HTML Structure

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-filter-panel/README.md

Defines the basic HTML structure for the price filter component. It requires two input fields for minimum and maximum price values.

```html
<div class="_shopaholic-price-filter">
    <input type="number" name="filter-min-price">
    <input type="number" name="filter-max-price">
</div>
```

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

### Shopaholic Search Input Field

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-search/README.md

The required HTML input element for the search functionality. It should have the class '_shopaholic-search-input' to be targeted by the JavaScript helpers.

```html
<input type="text" class="_shopaholic-search-input" name="search-input" value="">
```

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

### Shopaholic Remove from Wish List - Basic Usage

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-wish-list/README.md

Demonstrates the basic HTML structure and JavaScript initialization for removing a product from the wish list using the Shopaholic helper class.

```html
<div class="_shopaholic-product-wrapper" data-product-id="{{ obProduct.id }}">
    <h2>{{ obProduct.name }}</h2>
    <button type="button" class="_shopaholic-remove-wish-list-button" aria-label="Remove from wish list">
</div>
```

```javascript
import ShopaholicRemoveWishList from "@lovata/shopaholic-wish-list/shopaholic-remove-wish-list";

const obHelper = new ShopaholicRemoveWishList();
obHelper.init();
```

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

### Shopaholic Cart Add Functionality

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-cart/README.md

Provides a class to easily implement 'Add to cart' buttons. It handles product selection, quantity, and allows customization of AJAX requests via callbacks. Basic usage involves a wrapper div with product ID and buttons/inputs.

```html
<div class="_shopaholic-product-wrapper" data-product-id="{{ obProduct.id }}">
    <h2>{{ obProduct.name }}</h2>
    {% set obOfferList = obProduct.offer %}
    {% for obOffer in obOfferList %}
        <input type="radio" name="offer_id" value="{{ obOffer.id }}">
    {% endfor %}
    <input type="number" name="{{ quantity }}" value="1">
    <button type="button" class="_shopaholic-cart-add" aria-label="Add to cart">
</div>
```

```javascript
import ShopaholicCartAdd from '@lovata/shopaholic-cart/shopaholic-cart-add';

const obShopaholicCartAdd = new ShopaholicCartAdd();
obShopaholicCartAdd.setAjaxRequestCallback((obRequestData, obButton) => {
  obRequestData.loading = '.preloader';
}).init();
```

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

### Shopaholic Cart Shipping Type Basic Usage

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-cart/README.md

Demonstrates how to render shipping type radio inputs using Twig templating and initialize the ShopaholicCartShippingType class for handling user selections.

```html
{% set obShippingTypeList = ShippingTypeList.make().sort().active() %}
{% for obShippingType in obShippingTypeList %}
    <input type="radio" name="shipping_type_id" value="{{ obShippingType.id }}">
{% endfor %}
```

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

### ShopaholicClearWishList: Basic HTML Structure

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-wish-list/README.md

Provides the fundamental HTML markup for a button that triggers the 'Clear wish list' action. This button uses a specific class for the JavaScript helper to identify it.

```html
<button type="button" class="_shopaholic-clear-wish-list-button" aria-label="Clear wish list">
```
```

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

### Shopaholic Order Checkout Form Structure

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-cart/README.md

Illustrates the HTML structure for a checkout form, using specific classes and data attributes to map form fields to order and user data for processing.

```html
<form class="_shopaholic-order-form">
    <input class="_shopaholic-order-field" name="first_name" data-group="user" data-field="name">
    <input class="_shopaholic-order-field" name="last_name" data-group="user">
    <input class="_shopaholic-order-field" name="email" data-group="user">
    
    <input class="_shopaholic-order-field" name="address" data-group="shipping_address" data-field="address1">
    
    <input class="_shopaholic-order-field" name="comment" data-group="order.property">
</form>
```

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

### ShopaholicRemoveWishList: Set Button Selector

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-wish-list/README.md

Demonstrates how to reconfigure the default CSS selector for the 'Remove from wish list' button. It initializes the helper after setting the custom selector.

```javascript
import ShopaholicRemoveWishList from "@lovata/shopaholic-wish-list/shopaholic-remove-wish-list";

const obHelper = new ShopaholicRemoveWishList();
obHelper.setButtonSelector('.remove-wish-list-button').init();
```

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

### Shopaholic Remove from Wish List - Advanced Configuration

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-wish-list/README.md

Shows advanced configuration for the Remove from Wish List helper, including custom button selectors and AJAX request callbacks for dynamic updates and loading states.

```javascript
import ShopaholicRemoveWishList from "@lovata/shopaholic-wish-list/shopaholic-remove-wish-list";

const obHelper = new ShopaholicRemoveWishList();
obHelper
  .setButtonSelector('.remove-wish-list-button')
  .setAjaxRequestCallback((obRequestData, obButton) => {
    obRequestData.loading = '.preloader';
    obRequestData.update = {'wish-list/wish-list-info': '.wish-list-info-wrapper'};
    obRequestData.complete = () => {
      obButton.hide();
    };

    return obRequestData;
  })
  .init();
```

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

### Shopaholic Cart Update Functionality

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-cart/README.md

Facilitates updating item quantities in the cart, including increase/decrease buttons and a quantity input field. It uses a class that listens for input events and allows AJAX request customization via callbacks.

```html
<div class="_shopaholic-product-wrapper" data-position-id="{{ obCartPosition.id }}">
    <button type="button" class="_shopaholic-cart-increase-quantity" aria-label="Increase quantity">
    <input class="_shopaholic-cart-quantity" type="number" name="quantity" value="{{ obCartPosition }}" max="{{ obCartPosition.offer.quantity }}" min="1">
    <button type="button" class="_shopaholic-cart-decrease-quantity" aria-label="Decrease quantity">
</div>
```

```javascript
import ShopaholicCartUpdate from '@lovata/shopaholic-cart/shopaholic-cart-update';

const obShopaholicCartUpdate = new ShopaholicCartUpdate();
obShopaholicCartUpdate.setAjaxRequestCallback((obRequestData, obInput) => {
  obRequestData.loading = '.preloader';
}).init();
```

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

### Shopaholic Cart Restore Functionality

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-cart/README.md

Provides a class for restoring cart positions, typically used after removal. It requires a data attribute specifying the cart position ID and allows customization of AJAX requests through a callback.

```html
<div class="_shopaholic-product-wrapper" data-position-id="{{ obCartPosition.id }}">
    <button type="button" class="_shopaholic-cart-restore" aria-label="Restore cart position">
</div>
```

```javascript
import ShopaholicCartRestore from '@lovata/shopaholic-cart/shopaholic-cart-restore';

const obShopaholicCartRestore = new ShopaholicCartRestore();
obShopaholicCartRestore.setAjaxRequestCallback((obRequestData, obButton) => {
  obRequestData.loading = '.preloader';
}).init();
```

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

### Shopaholic Add to Wish List - setButtonSelector Method

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-wish-list/README.md

Explains the `setButtonSelector` method, which overrides the default CSS selector used to identify 'Add to wish list' buttons, allowing for custom element targeting.

```javascript
import ShopaholicAddWishList from "@lovata/shopaholic-wish-list/shopaholic-add-wish-list";

const obHelper = new ShopaholicAddWishList();
obHelper.setButtonSelector('.add-wish-list-button').init();
```

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

### Shopaholic Add to Wish List - setAjaxRequestCallback Method

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-wish-list/README.md

Details the `setAjaxRequestCallback` method, which allows modification of AJAX request parameters before they are sent, enabling custom loading indicators and partial updates.

```javascript
import ShopaholicAddWishList from "@lovata/shopaholic-wish-list/shopaholic-add-wish-list";

const obHelper = new ShopaholicAddWishList();
obHelper.setAjaxRequestCallback((obRequestData, obButton) => {
  obRequestData.loading = '.preloader';
  obRequestData.update = {'wish-list/wish-list-info': '.wish-list-info-wrapper'}; 
  obRequestData.complete = () => {
    obButton.hide();
  };
  
  return obRequestData;
}).init();
```

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

### Shopaholic Remove from Wish List - setAjaxRequestCallback Method

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-wish-list/README.md

Details the `setAjaxRequestCallback` method for removing items, allowing modification of AJAX request parameters before sending, enabling custom loading indicators and partial updates.

```javascript
import ShopaholicRemoveWishList from "@lovata/shopaholic-wish-list/shopaholic-remove-wish-list";

const obHelper = new ShopaholicRemoveWishList();
obHelper.setAjaxRequestCallback((obRequestData, obButton) => {
  obRequestData.loading = '.preloader';
  obRequestData.update = {'wish-list/wish-list-info': '.wish-list-info-wrapper'}; 
  obRequestData.complete = () => {
    obButton.hide();
  };
  
  return obRequestData;
}).init();
```

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

### Shopaholic Cart Remove Functionality

Source: https://github.com/oc-shopaholic/oc-shopaholic-js-helpers/blob/master/packages/shopaholic-cart/README.md

Enables 'Remove from cart' functionality using a dedicated class. It targets elements with a specific class and data attribute for the cart position. AJAX requests can be customized using a callback function.

```html
<div class="_shopaholic-product-wrapper" data-position-id="{{ obCartPosition.id }}">
    <button type="button" class="_shopaholic-cart-remove" aria-label="Remove from cart">
</div>
```

```javascript
import ShopaholicCartRemove from '@lovata/shopaholic-cart/shopaholic-cart-remove';

const obShopaholicCartRemove = new ShopaholicCartRemove();
obShopaholicCartRemove.setAjaxRequestCallback((obRequestData, obButton) => {
  obRequestData.loading = '.preloader';
}).init();
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.