Using the new gift cards may require changes to your online store's theme.

Supporting the new gift cards in a store theme requires defining the <GiftCards supported="true/false" /> setting in the theme's setting file. Below you can see an example of how you can use the setting:

<?xml version="1.0"?>
<Theme>
  <ImageSizes>
    <Mini width="80" height="80" />
    <List width="180" height="180" />
    <Normal width="600" height="600" />
    <Big width="1200" height="1200" />
  </ImageSizes>
  <Features>
    <Checkout>
      <SinglePage supported="true" default="default" />
      <MultiPage supported="false" />
    </Checkout>
    <GiftCards supported="true" />
    <ProductBundles supported="true" />
    <ProductListFilters supported="true" />
  </Features>
  <Settings>
    <Doctype standard="HTML5" />
    <ProductList>
      <PageSizes>
        <PageSize>25</PageSize>
        <PageSize>50</PageSize>
        <PageSize>100</PageSize>
      </PageSizes>
    </ProductList>
  </Settings>
</Theme>

When the <GiftCards/> setting is set to true

  • The {CartTotal} tag prints the cart subtotal including discounts
  • {CartOpenTotal} returns the open balance
  • There's no need for the customer to select a payment method at checkout if, after enabling a gift card, the order total is 0 €.

Using the value false

  • {CartTotal} prints the open balance (after a gift card has been applied)
  • {CartOpenTotal} does nothing because the tag is only enabled for the new gift cards
  • the customer must select a payment method at checkout even if there's nothing left to pay.

Examples of gift card implementations

Here you can see the examples of gift card tools' implementations in a theme.

Implementing a gift card listing in a theme

Below you can see an implementation of a gift card listing in the default theme Barebones:

Barebones-teeman lahjakorttilistaus – helpers/full-cart.html
{CartGiftCards(
	helper: '{{
		<div class="FullCartSection FullCartTotal">
			{%CartPaidByGiftCard}: {GiftCardBalanceReserved}
		</div>
	}}',
	after: '
		{CartOpenTotal(
			before: '
				<div class="FullCartSection FullCartTotal">
					<span class="H4">{%CartOpenTotal}:&nbsp;',
			after: '</span></div>'
		)}',
	or: '
		{CartTotal(
			before: '<div class="FullCartSection FullCartTotal"><span class="H4">{%Total}:&nbsp;',
			after: '</span></div>'
		)}'
)}

The gift card listing itself is printed with the {CartGiftCards} tag.

The {GiftCardBalanceReserved} tag prints the sum paid with a gift card on the listing. After that the open balance is printed in the after attribute by using the {CartOpenTotal} tag.

If the customer hasn't used any gift cards, only the shopping cart total will be printed via the or attribute.

Implementing a form for removing gift cards

Below you can see how to implement a form for removing gift cards in a theme:

{CartGiftCards(
  helper: {{
    <form action="{GiftCardRemoveUrl}" method="post">
      <button type="submit">
        {%CartGiftCardRemove}
      </button>
    </form>
  }}
)}

The gift card listing is created by using the {CartGiftCards} tag. The <form> element for disabling gift cards is placed in the tag's helper attribute.

The removal URL is added to the <form> element's action attribute, and the method="post" attribute is defined for the form.

The text for the removal button is retrieved from the dictionary's CartGiftCardRemove item.

In this example no functions other than removal are added to the form. Use gift card tags to add desired features to the listing.