Follow these steps to enable the package selection plugin for your packages:
Add the form code. This provides the form fields for the client to include a message to the agency when submitting their selection, and a script tag to initialize the plugin.
{% if form.posted_successfully? %}
<h1>Thank you, your selection has been sent.</h1>
<p><a href="{{ package.preview_url }}">Back to package</a></p>
{% else %}
{% form 'package' %}
<textarea name="message" placeholder="Message to agent">
</textarea>
<button type="submit">Submit to agency</button>
{% endform %}
<script>
document.addEventListener("DOMContentLoaded", (event) => {
$('[data-syngency-package]').SyngencyPackage();
</script>
{% endif %}
2. Add the data-syngency-package attribute to the top-level element in your package template:
<div class="container" data-syngency-package>
<div class="row">
<div class="col-12">
3. Add the data attributes to the wrapper tag (typically the <a> link) for each model in the package:
<a href="{{ model.url }}" data-package-model-id="{{ model.id }}" data-model-name="{{ model.display_name }}">Customizing the icons
By default, FontAwesome is used for the icons, but you can override these with any HTML tags (eg. SVG) from the constructor of the plugin:
$('[data-syngency-package]').SyngencyPackage({
icons: {
select: '<svg...></svg>',
selected: '<svg...></svg>',
comment: '<svg...></svg>',
comments: '<svg...></svg>',
}
})