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.

<!-- Load React -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script defer src="https://unpkg.com/[email protected]/umd/react.production.js" crossorigin></script>
<script
  defer
  src="https://unpkg.com/[email protected]/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.

<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

<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.

<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.

<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.

<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.

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