Hi there 
I would like to invert the delivery line with the tax line, but I can’t find the corresponding component in the Default theme reference.
The “cart-summary-fees” component is what I would like to modify, but it does not appear in the documentation since version 3.0.31.
Is there a way to modify this component in the last version of Snipcart?
Thanks!
Hi @Bagage thanks for reaching out!
This component is not overridable, but you can achieve that by using:
.snipcart-summary-fees {
display: grid;
}
and
.snipcart-summary-fees__item:nth-child(3) {
grid-row: 2/3;
}
This should make the third item of the grid (taxes) go to the second line.
Just make sure to user more specific selectors to avoid any issues.
Let me know if that solves your issue.
Thanks!
Snipcart docs and support feel all over the place on this. Release notes for v3.1.0 explicitly state that <summary-fees> is overridable, as does the source code (as of 3.4.0)
return n('overridable', {
attrs: {
name: 'summary-fees'
}
}, [ etc...
As far as I was able to cobble together based on source code, this seems to be the default markup (using a modified version of component listed in the v3.0.13 default theme guide as a baseline):
<summary-fees
class="snipcart-summary-fees--reverse"
:summaryData="summaryFeesProvider"
>
<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" v-if="summaryData.discounts">
<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 snipcart__font--black">{{ discount.name }}</div>
<div class="snipcart-summary-fees__discount-amount-saved snipcart__font--black">-{{ discount.amountSaved | money(summaryData.currency)}}</div>
</div>
</tool-tip>
</div>
</span>
<span class="snipcart-summary-fees__amount">{{ summaryData.discountsTotal | 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-for="tax in summaryData.taxes" :key="tax.name">
<span class="snipcart-summary-fees__title">
{{ summaryData.tax.name }}</span>
<span class="snipcart-summary-fees__amount">{{ summaryData.tax.amount | 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>
</summary-fees>
It would be great if some attention could be given to the documentation as to what is and is not truly overridable.
Is it possible to have the “official” template of the summary-fees component listed in the documentation?
Btw: thanks @ andrewmenich for your super useful answer!
Thank you very much
Hey @azicchetti
Here is the official template: Snipcart Overridable Template: SummaryFees (v3.4.1) · GitHub
Cheers,