Gift Feature

The gift feature from Zid allows customers to send orders as gifts, complete with the option to add a custom message and a video link that gets converted into a QR code. As a theme developer, here’s what you need to know:

Merchant Dashboard Configuration

Merchants configure the gifting options from their dashboard settings. Here’s the link to the gifting options configuration page: https://web.zid.sa/account/settings/gifting-options.

Merchants can switch on the gifting option, select desirable configurations from the listed options, and save their settings. They can also add custom templates for gift cards through the “Add new design” button.

Motivating Customers to Gift in Store

Merchants have the option of showing a motivating popup when the customer adds a product to the cart. This is configured through the “Motivating customers to gift in store” setting.

Gift Motivation Popup

The merchant has an option to show a motivating popup when a customer adds a product to the cart. This encourages the customer to send their purchase as a gift.

Here is a code sample to illustrate this feature:

{% if store.gift_order_settings.is_gift_order_customer_motivation_enabled == '1' %}
   <div id="tooltip" class="d-none popover" role="tooltip">
      <div class="arrow"></div>
      <div class="gift-popover-body">
        <img src="{{ asset_url }}gift-popover-icon.svg" width="24" height="24" />
        <p class="h6 my-2">
          {{ locals.cart_send_as_gift }}
        </p>
        <button class="btn round primary d-block">
          <a href="/cart/view" class="no-border d-block">
            {{ locals.continue }}
          </a>
        </button>
      </div>
   </div>
{% endif %}

In this snippet, the line {% if store.gift_order_settings.is_gift_order_customer_motivation_enabled == '1' %} checks whether the motivating popup feature is enabled by the merchant. If it’s enabled, a tooltip styled as a popover is displayed. This tooltip contains an icon, a message encouraging the customer to send their purchase as a gift, and a button leading to the cart.

Display of Gift Option and Form

Gifting Options Display The gifting options are displayed to the end customer in the cart. This includes a list of form fields that appear when a customer decides to send a product as a gift. The customer can preview the filled options and save the form.

Upon selection, a list of form fields will appear. The customer can preview the filled options and save the form to send the products as a gift.

Gifting Options in Cart View

A code snippet to show the gifting options in the cart view is available. It uses the template_for_cart_gifts_widget to display all the necessary fields for customers to customize their gifts.

{% if store.gift_order_settings.is_gift_order_enabled == '1' %}
   <div class="card border-0 mt-3 text-body">
      {{ template_for_cart_gifts_widget }}
   </div>
{% endif %}

This snippet checks if gifting orders are enabled (store.gift_order_settings.is_gift_order_enabled == '1'). If enabled, the template_for_cart_gifts_widget is displayed. This template handles the display of all gifting options for customers, such as choosing a gift card design or writing a custom message.

Note that all configuration settings for gifting, set by the merchant from the dashboard, are returned in the store.gift_order_settings object. These settings control how and when the gifting features are presented to the customers.

Display of Gifting Cart Information

When a customer decides to send a product as a gift and fills the form, the cart will display basic information about the gifting order.

This information is displayed using the following code:

{% if cart.gift_card_details | length > 0 %}
      <div class="cart-gift-card">
          <p class="font-weight-bold mb-2">
              <img src="{{ asset_url }}gift_icon.png" style="display: inline-block" />
              {{ locals.cart_send_as_gift_info }}
          </p>
          <p class="mb-2">
              <span>{{ locals.products_list_filter_price_from }}: {{cart.gift_card_details.sender_name}}</span>
              <span class="mx-2">{{ locals.products_list_filter_price_to }}: {{cart.gift_card_details.receiver_name}}</span>
          </p>
          {% if cart.gift_card_details.gift_message | length > 0 %}
              <p class="mb-0">
                  <span>{{ locals.cart_gift_card_info_message }}: </span> {{ cart.gift_card_details.gift_message }}
              </p>
          {% endif %}
      </div>
{% endif %}

The conditional {% if cart.gift_card_details | length > 0 %} checks if there are any gift card details present in the cart. If there are, it displays the sender’s name, receiver’s name, and the gift message using the provided variables.

Note: The gifting cart should be removed when the cart is empty.

You may need this plugin for these functionalities: https://github.com/CodeSeven/toastr

A sample starter theme can be found here: https://github.com/zidsa/custom-theme-sample

By incorporating these adjustments into your themes, you will ensure compatibility with the new gift feature, allowing merchants to offer a richer, more personalized shopping experience. If you have any questions or need further clarification, feel free to reach out to our support team.

Troubleshooting

Collapse doesn't open when clicking Send as Gift

If you're encountering an issue where the collapse doesn't open when clicking the Send as Gift button, the problem might be a mismatch in the version of Bootstrap you're using. The feature was developed using Bootstrap version 4, and if you're using Bootstrap version 5, there could be compatibility issues.

Specifically, in Bootstrap 5, the data-toggle attribute has been replaced with data-bs-toggle. Therefore, the button triggering the collapse should look like this in Bootstrap 5:

<button class="btn btn-lg btn-block" data-bs-toggle="collapse" data-bs-target="#showGiftCard" aria-controls="showGiftCard">
  <span class="mx-auto"></span>
</button>

After updating your code accordingly, verify that all other functionalities previously relying on Bootstrap 4 attributes are updated to their Bootstrap 5 equivalents.