Gift card

How to implement giftcards in DW10

Gift cards are a unique type of product that generate a one-of-a-kind code upon purchase. This code can be used as payment for other products in the webshop. To integrate gift cards into your solution, follow these steps:

1. Create the gift card product(s)
2. Modify the receipt/order confirmation to include the gift card code
3. Add a field to the checkout, for the user to enter their gift card code

Create the gift card product

Creating gift cards is similar to setting up any other product:

1. Navigate to the product folder where you'd like to add the gift card(s)
2. Click + New Product and configure it as desired
   • The price of the gift card is the value of it
3. The key difference lies in the Purchasability section, where you must select the GiftCard product type

This ensures the product functions as a gift card and generates a unique code upon purchase.

Modifying the receipt/order confirmation

To ensure customers can use their gift cards for future purchases, it is important to update the receipt and/or order confirmation to display the gift card codes.

Here is how to include the gift card codes in the order confirmation email:

1. Find the template used for order confirmations. It is typically stored in the same directory as your cart templates
2. Update the template with the following code to display the gift card codes:

  @{
      var giftCards = GetLoop("GiftCards").ToList();
  }

  @if (giftCards.Any())
  {
      @foreach (var item in giftCards)
      {
          <p>Gift Card Code: @item.GetValue("Ecom:Order.GiftCard.Code")</p>
      }
  }

To modify the receipt template to show the gift card code(s) after checkout, you could add something like this:

@if (GetLoop("GiftCards").Count > 0)
{
    <div class="list-group-item py-2">
        <div class="grid">
            <dt class="g-col-4 lh-base fw-normal text-nowrap">@Translate("Gift Card Codes")</dt>
            <dd class="g-col-12 g-col-md-8 mb-0">
                @foreach (LoopItem item in GetLoop("GiftCards"))
                {
                    <p>@item.GetValue("Ecom:Order.GiftCard.Code")</p>
                }
            </dd>
        </div>
    </div>
}

Add a gift card code field to checkout

To enable customers to use their gift cards, we need to modify the checkout flow. This involves adding an input field with the attributes name and id set to EcomOrderGiftCardCode, it can be done as simple as this:

<label for="giftCardCode" class="form-label me-2">@Translate("Gift_Card", "Gift Card Code"):</label>
<input type="text" id="EcomOrderGiftCardCode" name="EcomOrderGiftCardCode" class="form-control me-2" placeholder="@Translate("Enter_gift_card", "")" style="width: 200px;" />

Remember to place the gift card input field inside the ordersubmit form to ensure it is submitted correctly with the order.

If your checkout process has multiple steps, it is important to include the gift card input field as a hidden element in the other steps. For example, if your checkout process includes a delivery step and a payment step, and the gift card input is available in the delivery step, it should be hidden in the Payment step.

<input type="hidden" id="EcomOrderGiftCardCode" name="EcomOrderGiftCardCode" value="@GetValue("Ecom:Order.GifTCardCode")" />

After these steps, you should be able to successfully buy and use gift cards in your DW10 solution