npm package: @romegadigital/apartmentsync-theme-decoupled
Description: This theme is meant to be used when there's the need for short-codes to be placed in multiples places of the website, outside the main apartmentsync's root DOM element.
Latest version: 3.4.1

# Decoupled Theme

This theme is meant to be used when there's the need for short-codes to be placed
in multiples places of the website, outside the main apartmentsync's root DOM element.

## Example

https://github.com/Repli-Multihub/ApartmentSync/blob/master/public/decoupled.html
and https://github.com/Repli-Multihub/ApartmentSync/blob/master/public/details.html

## Available Short-Codes

The list of available short-codes. They all require the main apartmentsync's script tag
with the theme. This usually means placing the following in the header of the website:

_TODO: Create a single .js and .css instead of pulling in the individual dependencies for easier installation._

```html
<!-- Load React -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script defer src="https://unpkg.com/react@17.0.2/umd/react.production.js" crossorigin></script>
<script
  defer
  src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.js"
  crossorigin
></script>
<!-- Load Apartment Sync API -->
<script defer src="../packages/API/dist/API.js" type="module"></script>
<!-- Load Apartment Sync Core -->
<script defer src="../packages/Core/dist/ApartmentSync.js" type="module"></script>
<!-- Load Apartment Sync Theme -->
<link rel="stylesheet" href="../themes/Decoupled/dist/DecoupledTheme.css" />
<script defer src="../themes/Decoupled/dist/DecoupledTheme.js" type="module"></script>
```

and then initiating apartmentsync with the Decoupled theme as follows, at the end of the website's body as well as the root DOM element. Keep in in mind that the root element **Won't render** an UI, and instead will be used as a non-intrusive way to attach the React or Vue instance to.

```html
<div id="widget-location"></div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Create the apartmentsync instance.
    const apartmentsync = new ApartmentSync.Widget({
      provider: 'rentcafe', // Replace with the given provider.
      base: 'https://admin.multihub.test/api/apartment-sync/',
      property: 1, // Replace with actual property ID.
      element: '#widget-location', // Replace with the root DOM element.
      theme: ApartmentSyncDecoupledTheme,
      variables: {
        /* ... */
      },
    })
    // Render the application.
    apartmentsync.render()
  })
</script>
```

### Floor Plan List Filter

```html
<div class="as-shortcode-floorplan-list-filter"></div>
```

### Floor Plan List

- `data-details`\*: The URL where the user will be sent to when they click the `view details` button a floor plan. A query parameter as `?floorPlan={id}` will be appended to that URL. Can be a relative or absolute URL.

```html
<div class="as-shortcode-floorplan-list" data-details="/details.html"></div>
```

### Floor Plan Details

- `data-floor-plan-list`\*: The URL where the user will be redirected when they click the `All floor plans` button.
- `data-floor-plan`: Optional ID of the floor plan. If not specified, the query parameter `floorPlan` will be used.

```html
<div class="as-shortcode-floorplan-details" data-floor-plan-list="/decoupled.html"></div>
```

### Unit List

- `data-floor-plan`: Optional ID of the floor plan. If not specified, the query parameter `floorPlan` will be used.

```html
<div class="as-shortcode-unit-list"></div>
```

### Related Floor Plan List

- `data-details`\*: The URL where the user will be sent to when they click the `view details` button a floor plan.
- `data-floor-plan`: Optional ID of the floor plan. If not specified, the query parameter `floorPlan` will be used.

```html
<div class="as-shortcode-related-floorplan-list" data-details="/details.html"></div>
```