When you have unlocked the code for your theme and are making custom changes, you may need to add gift card functionality. You can add gift card functionality without any code changes by adding gift card as a menu option.

Menu item snippet

For the menu item in the navigation.

You can insert this snippet into any code that populates the navigation bar in the theme editor.

{% if shop.sells_gift_cards_online %}
<li class="item{% if template == 'pages/giftcard.rain' %} active{% endif %}">
  <a class="itemLink" href="{{ 'buy-gift-card' | url }}" title="{{ 'Gift cards' | t }}">{{ 'Gift cards' | t }}</a>
</li>
{% endif %}

Cart page snippet

Displays a gift card field in the cart page above the Buy button. The field can be used by customers to redeem a gift card.

{% if cart.omni_gift_card.is_active %}
{% include 'blocks/giftcard-check-modal.rain' %}
<div class="gui-block gui-div-cart-discount" role="region" aria-labelledby="cart-block-discount-codes-title">
<div class="gui-block-title" id="cart-block-gift-card-codes-title">
<strong>{{ 'Gift card' | t }}</strong>
</div>
<div class="gui-block-content">
<form id="gui-form-gift-card" action="{{ 'cart/setGiftCard' | url }}" method="post">
<div class="gui-form">
<table>
<tr>
<td>
<div class="gui-input">
<input id="gui-form-code" type="text" name="code" value="" placeholder="{{ 'Enter gift card code' | t }}" aria-labelledby="cart-block-gift-card-codes-title" />
</div>
</td>
<td width="10">&nbsp;</td>
<td width="1">
<a href="javascript:;" role="button" onclick="guiCartUpdate($('#gui-form-gift-card'))" class="gui-button-small" title="{{ 'Apply' | t }}">
{{ 'Apply' | t }}
</a>
</td>
</tr>
<tr>
<td><em></em></td>
</tr>
</table>
</div>
</form>
<div class="gui-div-giftcard-check-balance">
<p class="giftcard-check-balance">
<span class="glyphicon glyphicon-gift" /></span><a id="giftcard-modal-open">
{{'Check gift card balance' | t}}</a>
</p>
</div>
</div>
</div>
{% endif %}

Cart page snippets

A new property has been added to the cart.products.## object called is_gift_card.   In the table of products on the cart page, make sure to add the following changes per column:

Image column

Remove the link to the product page on the image. The image source is in product.image.

{% if product.is_gift_card == true %}
<img src="{{ product.image}}" width="50" height="50" alt="{{ product.fulltitle }}" />
{% else %}
Your normal product image code
{% endif %}

Product description column

Remove the link to the product page on the product description.

{% if product.is_gift_card == true %}
<a class="gui-bold">{{- product.fulltitle -}}</a>
{% else %}
Your normal product description with the link to the product page
{% endif %}

Quantity Column

Disable the ability to increase or decrease the quantity.

{% if product.is_gift_card == true %}
<span class="gui-nowrap">{{ product.quantity }}</span>
{% else %}
Your normal quantity input field
{% endif %}

Actions column

Change the link to remove the gift card product.

{% if product.is_gift_card == true %}
<a href="{{ ('cart/deleteGiftCardProduct/' ~ product.qid) | url }}" class="gui-action gui-action-delete" title="{{ 'Remove' | t }}">
{{ 'Remove' | t }}
</a>
{% else %}
<a href="{{ ('cart/delete/' ~ product.qid) | url }}" class="gui-action gui-action-delete" title="{{ 'Remove' | t }}">
{{ 'Remove' | t }}
</a>
{% endif %}