Snipcart Overridable Template: SummaryFees (v3.4.1)

SummaryFees.vue

<summary-fees>
    <div class="snipcart-summary-fees">
        <div
            class="snipcart-summary-fees__notice snipcart__font--regular"
            v-if="!summaryData.hasShippingAddress"
        >
            <slot>
                {{ $localize('checkout.shipping_taxes_calculated_when_address_provided') }}
            </slot>
        </div>

        <div class="snipcart-summary-fees">
            <div
                class="snipcart-summary-fees__item snipcart-summary-fees__discounts snipcart__font--slim"
                v-if="summaryData.hasDiscounts"
            >
                <span class="snipcart-summary-fees__title">
                    {{ $localize('cart_summary.discount') }}
                    <div class="snipcart-summary-fees__discounts-icon">
                        <icon
                            name="question-mark"
                            @mouseover.native="displayDiscounts = true"
                            @mouseleave.native="displayDiscounts = false"
                        ></icon>
                        <tool-tip
                            v-show="displayDiscounts"
                            class="snipcart-tool-tip--bordered snipcart-summary-fees__tool-tip"
                        >
                            <div
                                class="snipcart-summary-fees__discount-container"
                                v-for="discount in summaryData.discounts"
                                :key="discount.id"
                            >
                                <div class="snipcart-summary-fees__discount-name">{{ discount.name }}</div>
                                <div
                                    class="snipcart-summary-fees__discount-amount-saved"
                                    v-if="!displayDiscount(discount)"
                                > -{{ discount.amountSaved | money(summaryData.currency)}}</div>
                            </div>
                        </tool-tip>
                    </div>
                </span>
                <span
                    class="snipcart-summary-fees__amount"
                    v-if="summaryData.discountTotalAmount"
                >{{ summaryData.discountTotalAmount | money(summaryData.currency) }}</span>
            </div>

            <div
                class="snipcart-summary-fees__item snipcart__font--slim"
                v-if="summaryData.subtotal"
            >
                <span class="snipcart-summary-fees__title">{{ $localize('cart_summary.subtotal') }}</span>
                <span class="snipcart-summary-fees__amount">{{ summaryData.subtotal | money(summaryData.currency) }}</span>
            </div>

            <div
                class="snipcart-summary-fees__item snipcart__font--slim"
                v-if="summaryData.hasShipping"
            >
                <span class="snipcart-summary-fees__title">{{ $localize('cart_summary.shipping') }}</span>
                <span class="snipcart-summary-fees__amount">{{ summaryData.shippingInformation.cost | money(summaryData.currency) }}</span>
            </div>

            <div
                class="snipcart-summary-fees__item snipcart__font--slim"
                v-if="summaryData.hasTaxes"
            >
                <span class="snipcart-summary-fees__title">
                    {{ $localize('cart_summary.taxes') }}
                    <icon
                        name="question-mark"
                        class="snipcart-summary-fees__tax-notice"
                        v-if="summaryData.hasTaxesIncludedInPrice"
                        @mouseover.native="displayTaxesIncludedInPriceNotice = true"
                        @mouseleave.native="displayTaxesIncludedInPriceNotice = false"
                    ></icon>
                    <tool-tip
                        v-show="displayTaxesIncludedInPriceNotice"
                        class="snipcart-tool-tip--bordered snipcart-summary-fees__tool-tip"
                    >
                        {{ $localize('cart_summary.taxes_included_in_price') }}
                    </tool-tip>
                </span>
                <span class="snipcart-summary-fees__amount">{{ summaryData.taxTotalAmount | money(summaryData.currency) }}</span>
            </div>

            <div class="snipcart-summary-fees__item snipcart-summary-fees__total snipcart__font--bold snipcart__font--secondary">
                <span class="snipcart-summary-fees__title snipcart-summary-fees__title--highlight snipcart__font--large">{{ $localize('cart_summary.total')}}</span>
                <span class="snipcart-summary-fees__amount snipcart-summary-fees__amount--highlight snipcart__font--large">{{ summaryData.total| money(summaryData.currency) }}</span>
            </div>
        </div>
    </div>
    </summary-fees>