Modal Custom Templates

Overview

This allows developers the ability to add custom functionality that is currently not achievable by the modal settings themselves. These templates can use any globally accessible functions. Developers can add additional Vue.js/HTML to these templates as needed. As these templates are written in Vue.js they accept and Vue.js attributes such as v-if for conditional rendering.

Setting up Custom Templates

There are a couple of ways these templates can be used. They can target all modals of that modal type or, they can target a specific modal if you do not want the custom work to be applied to all modals of that specific modal type.

Typically developers will create a new snippet named something like "rebuy-templates.liquid" and paste the contents of the code in that file. Then render that snippet in the associated file or in the theme.liquid file if they want the template to be globally accessible.

Modal Variant Template

<script id="rebuy-modal-variant-template" type="text/template">
 <div class="rebuy-modal" v-cloak v-bind:class="[visible ? 'is-visible' : 'is-hidden']" v-on:click="stopPropagation($event)">
    <div class="rebuy-modal__container" v-cloak v-bind:class="[style, visible ? 'is-visible' : 'is-hidden']">

        <div class="rebuy-modal__container-header" v-html="title"></div>
        <div class="rebuy-modal__container-body">

            <div class="rebuy-modal__product" v-bind:class="getModalLayoutClasses(settings.layout)">

                <div class="rebuy-modal__product-media">
                    <img
                        class="rebuy-modal__product-media-image"
                        v-bind:src="sizeImage(getSelectedImage()?.src, '400x400')"
                        v-bind:alt="product.title"
                    />

                    <div v-if="shouldShowSubImages()" class="rebuy-modal__product-sub-images">
                        <div
                            v-for="(image, index) in product.images"
                            :key="image.id + '-sub-image-' + index"
                            class="rebuy-modal__product-sub-image"
                            v-on:click="handleSelectingImage(image)"
                            v-bind:class="{ 'is-active': getSelectedImage()?.id === image.id }"
                            role="button"
                            tabindex="0">
                            <img
                                v-bind:src="sizeImage(image.src, '200x200')"
                                v-bind:alt="product.title"
                            />
                        </div>
                    </div>
                </div>

                <div class="rebuy-modal__product-info">
                    <h4 class="rebuy-modal__product-title" v-html="product.title"></h4>

                    <div class="rebuy-modal__product-price">
                        <div v-if="variantOnSale(product, product.selected_variant)">
                            <span class="rebuy-money sale" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                            <span class="rebuy-money compare-at" v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
                        </div>
                        <div v-if="!(variantOnSale(product, product.selected_variant))">
                            <span class="rebuy-money" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
                        </div>
                    </div>

                    <div class="rebuy-modal__product-options">
                        <div v-if="isVariantSelectorButtons()" class="rebuy-modal__product-option" v-for="option in product.options">
                            <div class="rebuy-modal__product-option-title">{{ option.name }}</div>
                            <div class="rebuy-modal__product-option-buttons">
                                <button
                                    class="rebuy-option-button"
                                    v-for="(value, index) in option.values"
                                    v-bind:class="{ 'is-active': product.selected_variant['option' + option.position] == value, 'is-unavailable': !variantOptionAvailable(product, 'option' + option.position, value) }"
                                    v-on:click="selectVariantOption(product, 'option' + option.position, value)"
                                    >
                                    {{ value }}
                                </button>
                            </div>
                        </div>

                        <div v-if="!isVariantSelectorButtons() && shouldShowVariantSelector()" class="rebuy-modal__product-option-select">
                            <select
                                class="rebuy-select"
                                v-bind:aria-label="'variant of ' + product.title"
                                v-model="product.selected_variant_id"
                                v-on:change="selectVariant(product)"
                            >
                                <option v-for="variant in product.variants" v-bind:value="variant.id">{{ variant.title }}</option>
                            </select>
                        </div>
                    </div>

                </div>

            </div>

        </div>

        <div class="rebuy-modal__container-actions" v-bind:class="[buttons.length > 1 ? 'multi-button' : 'single-button']">
            <button class="rebuy-button"
                v-for="button in buttons"
                v-bind:class="[button.type]"
                v-on:click="click(button)"
                v-html="button.label"
                type="button"
            >
            </button>
        </div>

    </div>
</div>
</script>

Modal Dialog Template

<script id="rebuy-modal-notification-template" type="text/template">
 <div class="rebuy-notification-modal" v-cloak v-bind:class="[visible ? 'is-visible' : 'is-hidden']" v-on:click="stopPropagation($event)">
    <div class="rebuy-notification-dialog" v-bind:class="[style]">
        <div class="rebuy-notification-dialog-header" v-html="title"></div>
        <div class="rebuy-notification-dialog-content" v-html="message"></div>
        <div class="rebuy-notification-dialog-actions" v-bind:class="[buttons.length > 1 ? 'multi-button' : 'single-button']">
            <button class="rebuy-notification-dialog-button rebuy-button"
                v-for="button in buttons"
                v-bind:class="[button.type]"
                v-on:click="click(button)"
                v-html="button.label"
                type="button"></button>
        </div>
    </div>
</div>
</script>