Widget guide

Standard Implementation

jQuery include:

The widget requires jQuery Library. If your site already loads this library, please do not include it.
If it does not, include the below code line, just above the main code.

				
					<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Main Widget code:

Place the code below anywhere on the page where you want the spa elements to be rendered.
* Please note that this is the default configuration and that there is more options available.

				
					<!--Slick Slider-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<!--Slick Lightbox - pupup for carousel-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.min.js"></script>

<!--Base styling-->
<link rel="stylesheet" href="https://highcountryspas.co.nz/wp-content/uploads/hcswidget/dshcsw-style.css?v=1.0.5">

<!--Engine for json data-->
<script src="https://highcountryspas.co.nz/wp-content/uploads/hcswidget/dshcsw-engine.js?v=1.0.5"></script>

<!--Target Container-->
<div id="ContainerHCSpas"></div>

<!--Implementation-->
<script>
    jQuery(document).ready(function () {
        dshcswEngine.init(
            {
                containerSpas: '#ContainerHCSpas',
            });
        dshcswEngine.renderSpaContent();
    });
</script>

done.

Custom Implementation

This is a bit more advanced for those seeking more options to match your site requirements. The code is commented with the available options and what each library is for.
* Please note that the Accessories is not yet fully implemented and will be added soon.
The Target containers can be placed anywhere on the page, if you need to have some separation in content.

				
					<!--Jquery library - dont duplicate if already instantiated-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!--Slick slider - for carousel-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<!--Slick Lightbox - pupup for carousel-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.min.js"></script>

<!--Base styling-->
<link rel="stylesheet" href="https://highcountryspas.co.nz/wp-content/uploads/hcswidget/dshcsw-style.css?v=1.0.5">

<!--Engine for json data-->
<script src="https://highcountryspas.co.nz/wp-content/uploads/hcswidget/dshcsw-engine.js?v=1.0.5"></script>

<h2>Our Spa Pools</h2>
<!--Target Container-->
<div id="ContainerHCSpas"></div>

<h2>Accessories</h2>
<!--Target Container-->
<div id="ContainerHCAccessories"></div>

<!--Implementation-->
<script>
    jQuery(document).ready(function () {
        dshcswEngine.init(
            {
                containerSpas: '#ContainerHCSpas',                  // Spa Container(required)
                containerAccessories: '#ContainerHCAccessories',    // Accessories Container(required)
                displayLayout: 'grid',                              // grid(default) | list
                displayColumns: 2,                                  // 2(default) | 3 | 4
                showSpaPrimary: false,                              // true | false(default)
                showSpaGallery: true,                               // true(default) | false
                showAccessoryPrimary: true,                         // true(default) | false
                showAccessoryGallery: false,                        // true | false(default)
                enableCarousel: true,                               // true(default) | false
                enableCarouselLightbox: true,                       // true(default) | false
            });
        dshcswEngine.renderSpaContent();
        //dshcswEngine.renderAccessoryContent();
    });
</script>

Base Style:

The base styling is constructed in a way to make overriding easy. This way you can match your site styling.
If you want, you can exclude the base style reference and style from the ground up, yourself.

Example of overriding styles:

				
					#ContainerHCSpas .hcs-article-title {
	text-align: center;
	border-top: 1px solid var( --e-global-color-accent );
}

#ContainerHCSpas .hcs-article-title h4 {
	color: var( --e-global-color-text );
    font-family: "Inter", Sans-serif;
    font-size: 2.2em;
    font-weight: 700;
	margin-top: 40px;
}

Slick Slider:

If you desire so, you can disable the slick slider and load your own slider implementation. By default we use slick slider and Slick Lightbox together to provide a carousel and a popup gallery.

Layout:

Widget gives options for layout in either having a grid or list layout.
In grid mode you can choose between 2, 3 and 4 columns. These will scale down as the device size gets smaller.

Hard Mode

If for some reason the widget is not giving the options you like, you can query the data directly from the API.
It delivers a payload of json data that can be queried and filtered.
Endpoints:

https://highcountryspas.co.nz/wp-json/jet-cct/spa
https://highcountryspas.co.nz/wp-json/jet-cct/spas

Parameters Overview

_ID – Item ID;
name – Name;
primary_image – Primary Image;
gallery – Gallery;
description – Description;
specification – Specification;
sorting_order – Sorting Order;
cct_author_id – Item Author;
cct_created – Created Date;
cct_modified – Modified Date;
cct_status – Status;
_cct_search – Search string, type: string;
_cct_search_by – Comma separated fields names list to search only by this fields, type: string;
_limit – Items limit, type: number;
_offset – Items offset, type: number;
_orderby – Order items by field, type: string;
_order – Order – asc or desc, type: string;
_ordertype – Order value type – integer, float, timestamp, date, string, type: string;
_filters – JSON-encoded filters string, type: string;

Request URL with parameters example:
https://highcountryspas.co.nz/wp-json/jet-cct/spas/?cct_author_id=1&_orderby=_ID&_order=desc&_ordertype=integer