Overview
This allows developers the ability to add custom functionality that is currently not achievable by the widget 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 widgets of that widget type or, they can target a specific widget if you do not want the custom work to be applied to all widgets of that specific widget 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.
Widget Specificity
Rebuy templates can be specified to work for a specific widget or all widgets of that widget type by either including or excluding the widget ID in the opening script tag of the template. In order to make the template work for that specific widget change the id of the script tog to "rebuy-widget-xxxx" where the x's are the Id of the specific widget you would like to customize such as the example below.
<script id="rebuy-widget-1234" type="text/template"></script>Recommended Template
<script id="rebuy-recommended-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
<i class="fas fa-times" aria-hidden="true"></i>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-product-grid" v-bind:class="layoutClasses" tabindex="0" role="list">
<div
v-for="(product, product_index) in products"
v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product)]"
aria-label="product"
class="rebuy-product-block"
role="listitem"
>
<div class="rebuy-product-media">
<a
class="rebuy-product-image"
tabindex="-1"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:loading="product_index > 1 ? 'lazy' : 'eager'" v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="itemImageAlt(product, product.selected_variant)">
</a>
</div>
<div class="rebuy-product-info">
<a
role="heading"
aria-level="5"
class="rebuy-product-title"
v-bind:href="learnMoreURL(product)"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
title="Select product variant"
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : config.view_options.variant_selector === 'buttons' }"
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
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
class="rebuy-product-options__button-swatches rebuy-size-swatches">
<div v-for="(value, value_index) in filterOOSOptions(option, product)">
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="{ backgroundColor: value }"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions">
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-bind:aria-label="buttonAriaLabel(product)"
v-on:click="addToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
</div>
</div>
</div>
<div class="rebuy-modal-actions" v-if="showContinueButton()">
<button
class="rebuy-button decline"
v-on:click="hide()"
type="button">
<span v-html="continueLabel()"></span>
</button>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>Upsell Template
<script id="rebuy-upsell-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
<i class="fas fa-times" aria-hidden="true"></i>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-product-grid" v-bind:class="layoutClasses">
<div class="rebuy-product-block" v-for="(product, product_index) in products" v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product)]">
<div class="rebuy-product-media">
<a
class="rebuy-product-image"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<a
class="rebuy-product-title"
v-bind:href="learnMoreURL(product)"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:alt="'View ' + product.title"
rel="nofollow"
></a>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : settings.view_options.variant_selector == 'buttons' }"
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
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
class="rebuy-product-options__button-swatches rebuy-size-swatches">
<div v-for="(value, value_index) in filterOOSOptions(option, product)">
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="{ backgroundColor: value }"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions">
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-bind:alt="'Add ' + product.title + ' to Cart'"
v-on:click="addUpsellToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
<button
class="rebuy-button decline"
v-on:click="declineOffer(product)"
type="button">
<span v-html="declineLabel(product)"></span>
</button>
</div>
</div>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>Dynamic Bundle
<script id="rebuy-dynamic-bundle-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]">
<div class="rebuy-widget-content">
<div class="rebuy-timer" v-if="hasTimer()">
<h5 class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</h5>
</div>
<h4 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h4>
<h3 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h3>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-bundle">
<div class="rebuy-bundle__images">
<div class="rebuy-bundle__image" v-for="(product, index) in products" v-if="product.selected" v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product)]">
<a
class="rebuy-bundle__image-item"
v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '' ]"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event);"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</a>
<div class="rebuy-bundle__image-divider">
<i class="far fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="rebuy-bundle__actions" v-if="subtotal() > 0">
<div class="rebuy-bundle__actions-price">
<strong class="rebuy-bundle__actions-price-label" v-html="config.language.total_price_label"></strong>
<p class="rebuy-bundle__actions-price-value" v-if="bundleOnSale()">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(subtotal())"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(compareAtSubtotal())"></span>
</span>
</p>
<p class="rebuy-bundle__actions-price-value" v-if="!(bundleOnSale())">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(subtotal())"></span>
</span>
</p>
</div>
<div class="rebuy-bundle__actions-buttons">
<button
class="rebuy-button"
v-on:click="addSelectedProductsToCart()"
v-bind:disabled="isBundleIncomplete()"
type="button">
<span v-html="buttonWidgetLabel()"></span>
</button>
</div>
</div>
<div class="rebuy-bundle__items">
<div
v-for="(product, product_index) in products"
class="rebuy-product-block"
v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product), isInputProduct(product) ? 'is-input-product' : '' ,product.selected ? 'is-selected': '']"
>
<div class="rebuy-product-info">
<div class="rebuy-product-checkbox" v-if="!bundleRequiresAllItems()">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.selected"
type="checkbox" />
</label>
</div>
<strong class="rebuy-product-label" v-if="isInputProduct(product)" v-html="'This item:'"></strong>
<a
class="rebuy-product-title"
v-bind:href="learnMoreURL(product)"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '']"
v-bind:alt="'View ' + product.title"
rel="nofollow"
></a>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : settings.view_options.variant_selector == 'buttons' }"
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
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
class="rebuy-product-options__button-swatches rebuy-size-swatches">
<div v-for="(value, value_index) in filterOOSOptions(option, product)">
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="{ backgroundColor: value }"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</script>Product Add Ons
<script id="rebuy-product-addon-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div class="rebuy-widget-container">
<div class="rebuy-widget-content">
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-addon">
<div class="rebuy-addon__items">
<div class="rebuy-addon__item" v-for="(product, product_index) in products">
<div class="rebuy-addon__item-checkbox">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.selected"
type="checkbox" />
</label>
</div>
<div class="rebuy-addon__item-image" v-on:click="toggleProductSelect(product)" v-bind:style="imageStyles">
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</div>
<div class="rebuy-addon__item-info">
<div class="rebuy-addon__item-product-title rebuy-product-title" v-on:click="toggleProductSelect(product)" v-html="product.title" v-bind:alt="'View ' + product.title"></div>
<div class="rebuy-addon__item-variant-title rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-addon__item-product-review rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-addon__item-product-price rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-addon__item-product-options rebuy-product-options" v-if="showVariantSelect(product)">
<select
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : settings.view_options.variant_selector == 'buttons' }"
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
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
class="rebuy-product-options__button-swatches rebuy-size-swatches">
<div v-for="(value, value_index) in filterOOSOptions(option, product)">
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="{ backgroundColor: value }"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-addon__item-product-description rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
<div class="rebuy-addon__item-learn-more" v-if="hasLearnMore()">
<a
class="rebuy-addon__item-learn-more-link"
v-bind:href="learnMoreURL(product)"
v-on:click="learnMore(product);"
v-html="config.language.learn_more_label"
rel="nofollow"
></a>
</div>
</div>
</div>
</div>
<div class="rebuy-addon__subtotal" v-if="subtotal() > 0">
<strong class="rebuy-addon__subtotal-label" v-html="config.language.total_price_label"></strong>
<div class="rebuy-addon__subtotal-value" v-if="bundleOnSale()">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(subtotal())"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(compareAtSubtotal())"></span>
</span>
</div>
<div class="rebuy-addon__subtotal-value" v-if="!(bundleOnSale())">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(subtotal())"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</script>Shopify Thank You Page
Please noteThis is not the Shopify Checkout Page extension. But, this is the Shopify Thank You Page widget. The Shopify Checkout Page extension does not have the ability to use a custom template as Shopify has limited the amount of customization for that feature at the moment.
<script id="rebuy-thank-you-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
<i class="fas fa-times" aria-hidden="true"></i>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-product-grid" v-bind:class="layoutClasses">
<div class="rebuy-product-block" v-for="(product, product_index) in products" v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product)]">
<div class="rebuy-product-media">
<a
class="rebuy-product-image"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<a
class="rebuy-product-title"
v-bind:href="learnMoreURL(product)"
v-on:click="learnMore(product);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:alt="'View ' + product.title"
rel="nofollow"
></a>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<div>
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="shouldShowSavingAmount()">
<span v-if="shouldRenderSavingAmount(product)" class="rebuy-money sale">
<span class="sr-only">Saving Amount</span>
<span v-html="savingAmountLabel(product)"></span>
</span>
</div>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : settings.view_options.variant_selector == 'buttons' }"
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
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
class="rebuy-product-options__button-swatches rebuy-size-swatches">
<div v-for="(value, value_index) in filterOOSOptions(option, product)">
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="{ backgroundColor: value }"
:title="value"
class="rebuy-color-label">
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions">
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-bind:alt="'Add ' + product.title + ' to Cart'"
v-on:click="addToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
<div class="rebuy-modal-actions" v-if="showContinueButton()">
<button
class="rebuy-button decline"
v-on:click="declineOffer(product)"
type="button">
<span v-html="declineLabel(product)"></span>
</button>
</div>
</div>
</div>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>Switch to Subscription
<script id="rebuy-switch-to-subscription-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
<i class="fas fa-times" aria-hidden="true"></i>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-product-grid" v-bind:class="layoutClasses">
<div class="rebuy-product-block" v-for="product in products" v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product)]">
<div class="rebuy-product-media">
<a
class="rebuy-product-image"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<a
class="rebuy-product-title"
v-bind:href="learnMoreURL(product)"
v-on:click="learnMore(product);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:alt="'View ' + product.title"
rel="nofollow"
></a>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-actions">
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox" />
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-bind:alt="'Add ' + product.title + ' to Cart'"
v-on:click="addUpsellToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
<button
class="rebuy-button decline"
v-on:click="declineOffer(product)"
type="button">
<span v-html="declineLabel(product)"></span>
</button>
</div>
</div>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>Recharge Checkout
<script id="rebuy-recharge-checkout-template" type="text/template">
<div class="rebuy-widget checkout-promotion"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="[products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="checkout-promotion-wrapper"
v-cloak
v-bind:class="[visible ? 'is-visible' : 'is-hidden']">
<div class="checkout-promotion-header" v-if="config.language.title || config.language.subtitle || config.language.description">
<div class="rebuy-timer" v-if="hasTimer()">
<h5 class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</h5>
</div>
<h2 v-if="config.language.title" class="promo-title" v-html="config.language.title"></h2>
<h3 v-if="config.language.subtitle" class="promo-subtitle" v-html="config.language.subtitle"></h3>
<div v-if="config.language.description" class="promo-description" v-html="config.language.description"></div>
</div>
<div class="checkout-promotion-body">
<div
class="checkout-promotion-product line-item"
v-for="product in products"
v-bind:class="[product.handle, 'product-id-' + product.id, rechargeCheckoutHasProduct(product) ? 'has-product' : '', productTagClasses(product)]">
<div class="promotion-image">
<img
v-bind:src="itemImage(product, product.selected_variant, '160x160')"
v-bind:alt="product.title">
</div>
<div class="promotion-info">
<h4 class="product-title" v-html="product.title"></h4>
<div class="variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="variant-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="promotion-actions">
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-on:click="addToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
</div>
<div class="promotion-options" v-if="showVariantSelect(product)">
<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 class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox" />
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</script>Pre Purchase
<script id="rebuy-pre-purchase-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden']"
>
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="declinePrepurchaseOffer()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="declinePrepurchaseOffer()" aria-label="close modal">
<i class="fas fa-times" aria-hidden="true"></i>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description" v-html="config.language.description"></div>
<div class="rebuy-product-grid rebuy-pre-purchase-block" v-bind:class="layoutClasses">
<div class="rebuy-product-block" v-for="product in products" v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product)]">
<div class="rebuy-product-media">
<a
class="rebuy-product-image"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</a>
</div>
<div class="rebuy-product-info">
<a
class="rebuy-product-title"
v-bind:href="learnMoreURL(product)"
v-on:click="learnMore(product);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
></a>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-bind:disabled="product.status == 'added'"
v-on:change="selectVariant(product)">
<option v-for="variant in product.variants" v-bind:value="variant.id">{{ variant.title }}</option>
</select>
</div>
<div class="rebuy-product-actions">
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox" />
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-bind:disabled="product.status == 'added'"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequency }} {{ product.subscription_interval }}</option>
</select>
</div>
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-bind:disabled="product.status == 'added'"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<div class="rebuy-button-container">
<button
v-if="product.status != 'added'"
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-on:click="addToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
<div class="rebuy-button--selected" v-if="product.status == 'added'" v-on:click="removeFromCart(product)">
<button class="rebuy-button dark rebuy-button__remove rebuy-button__upsell-add">
<span v-html="buttonLabel(product)"></span>
</button>
<button class="rebuy-button dark rebuy-button__text rebuy-button__upsell-remove" v-bind:aria-label="'Remove ' + product.title">
<span>
<i class="fas fa-times" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-container">
<div class="rebuy-button-actions rebuy-pre-purchase-actions">
<button
v-if="!hasAddedPrepurchase()"
class="rebuy-button rebuy-button--mlr-10 decline"
v-on:click="declinePrepurchaseOffer()">
<span v-html="config.language.decline"></span>
</button>
<button
class="rebuy-button rebuy-button--mlr-10 outline"
v-on:click="checkout()">
<span v-html="config.language.checkout"></span>
</button>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</div>
</script>Gift With Purchase
<script id="rebuy-gift-with-purchase-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id">
</div>
</script>