Liquid Reference

Appearance

Syngency package ​

Using Syngency's shared SyngencyPackage jQuery plugin, a package template can be configured to allow package recipients to make selections and leave comments on models. These selections and comments become visible to agents within the package in Syngency.

Template markup ​

To enable model selection and comments in the package, the following data attributes are used:

AttributeValueRequiredDescription
data-syngency-package(none)NoOn a parent of all model elements, marks the element as a container of package models. Used for auto-initializing.
data-package-model-id{{ model.id }}YesOn each model's wrapping element, the model's ID.
data-model-name{{ model.display_name }}YesOn each model's wrapping element, the model's display name.
liquid
<div data-syngency-package>
  {% for model in package.models %}
    <div data-package-model-id="{{ model.id }}" data-model-name="{{ model.display_name }}">
      <!-- Model headshot etc. -->
    </div>
  {% endfor %}
</div>

Package form ​

In addition to the model selections and comments, a general comment form can be added to the page. The content of this form is sent via email. See the package form reference for more information.

Initializing ​

When the data attribute data-syngency-package is used, the package will be auto-initialized with the default icons. For manual initializing (e.g. when you want to use custom icons or other configuration adjustments), use a different container attribute like data-syngency-package-custom, and call the SyngencyPackage plugin on a jQuery object in your website JS.

js
$('[data-syngency-package-custom]').SyngencyPackage({
  icons: {
    select:
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M351.6 195.6L304.9 51.8 288.1 0 271.2 51.8 224.5 195.6l-151.2 0-54.4 0 44 32 122.3 88.9L138.5 460.2 121.7 512l44-32 122.3-88.9L410.4 480l44 32-16.8-51.8L390.9 316.4l122.3-88.9 44-32-54.4 0-151.2 0zm107.1 32l-86.7 63-18.8 13.7 7.2 22.1 33.1 101.9-86.7-63-18.8-13.7-18.8 13.7-86.7 63 33.1-101.9 7.2-22.1L204 290.5l-86.7-63 107.1 0 23.2 0 7.2-22.1 33.1-101.9 33.1 101.9 7.2 22.1 23.3 0 107.1 0z"/></svg>',
    selected: 
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288.1 0l63.5 195.6H557.2L390.9 316.4 454.4 512 288.1 391.1 121.7 512l63.5-195.6L18.9 195.6H224.5L288.1 0z"/></svg>',
    comment:
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M94.1 362.8L86.9 382 68.6 430.8l88.5-26.6 9.3-2.8 9.2 2.8c24.9 7.6 51.9 11.7 80.3 11.7c130.2 0 224-84.7 224-176s-93.8-176-224-176S32 148.7 32 240c0 39.9 17.1 77.6 47.6 108.2l14.5 14.6zM54.5 468.4L16 480l14.1-37.6 26.8-71.5C21.3 335.1 0 289.6 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208s-114.6 208-256 208c-31.5 0-61.7-4.6-89.6-13.1L54.5 468.4z"/></svg>',
    comments:
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M86.9 382l7.2-19.3L79.6 348.2C49.1 317.6 32 279.9 32 240c0-91.3 93.8-176 224-176s224 84.7 224 176s-93.8 176-224 176c-28.4 0-55.5-4.2-80.3-11.7l-9.2-2.8-9.3 2.8L68.6 430.8 86.9 382zM16 480l38.5-11.6 111.9-33.6c27.9 8.5 58.1 13.1 89.6 13.1c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 49.6 21.3 95.1 56.9 130.8L30.1 442.4 16 480zM144 176l-16 0 0 32 16 0 224 0 16 0 0-32-16 0-224 0zm0 96l-16 0 0 32 16 0 128 0 16 0 0-32-16 0-128 0z"/></svg>'
  }
})

Styling with CSS variables ​

The full Syngency Package can be styled simply with CSS variables on the :root selector. Leave variables undefined (comment out or delete) to use default values.

css
:root {
  /* Package Buttons */
  --syn-package-button-bg
  --syn-package-button-color
  --syn-package-button-hover-bg
  --syn-package-button-hover-color
  --syn-package-button-active-bg
  --syn-package-button-active-color
  --syn-package-button-width
  --syn-package-button-height
  --syn-package-button-icon-size
  --syn-package-button-gap
  --syn-package-button-top
  --syn-package-button-right
  --syn-package-button-bottom
  --syn-package-button-left

  /* Package Form */
  --syn-package-form-bg
  --syn-package-form-color
  --syn-package-form-backdrop-filter
  --syn-package-form-padding-x
  --syn-package-form-padding-y
  --syn-package-form-z-index

  /* WebUI Core */
  --syn-webui-bg
  --syn-webui-color
  --syn-webui-backdrop-bg
  --syn-webui-backdrop-filter
  --syn-webui-box-shadow
  --syn-webui-border-color
  --syn-webui-border-width
  --syn-webui-border-radius
  --syn-webui-padding-x
  --syn-webui-padding-y
  --syn-webui-arrow-color

  /* WebUI Close Button */
  --syn-webui-close-color
  --syn-webui-close-size
  --syn-webui-close-margin-top
  --syn-webui-close-margin-right

  /* WebUI Title */
  --syn-webui-title-bg
  --syn-webui-title-color
  --syn-webui-title-border-bottom
  --syn-webui-title-size
  --syn-webui-title-font-family
  --syn-webui-title-line-height
  --syn-webui-title-weight

  /* WebUI Inverse / Popover */
  --syn-webui-inverse-bg
  --syn-webui-inverse-color
  --syn-webui-inverse-title-bg
  --syn-webui-inverse-title-color
  --syn-webui-inverse-title-border-bottom
  --syn-webui-inverse-arrow-color
}

SOURCE REFERENCE

Refer to SyngencyPackage()