🚨 Important Update: Zid Themes

As part of our efforts to improve browsing speed and performance, customer-related information will no longer be rendered directly from the server. This document outlines new alternative methods to retrieve customer data.

---

Key Changes

• The customer object will no longer be available.
• The global object window.customer will also no longer be available.

The following examples will not work:

{{ customer.name }}  // no longer works
{{ customer.email }} // no longer works
{{ customer.wishlist }} // no longer works

{% if customer %} // no longer works
<div>HTML content</div>
{% endif %}

<script>
    window.customer // no longer works
</script>

---

Affected Files

1. Twig Files:

This change impacts all theme Twig files, including their associated include files, except for account-related files. The excluded files are:
- account-profile.twig
- account-addresses.twig
- account-orders.twig
- account-wishlist.twig

2. JavaScript Files:

All JavaScript files that directly access the window.customer object.

---

Alternative Methods to Retrieve Customer Information

1. Using Zid Tags:

For customer details such as name, email, and mobile number, use the new <zid-store-customer> tag.

Replace {{ customer.name }} with <zid-store-customer get="name"></zid-store-customer>.

Example:

<button type="button" class="btn btn-dark account-btn">
    <span class="icon-account_circle_black_24dp"></span>
    <span>
        {{ locals.hello }}
        <!-- old:  {{ customer.name }} -->
        <zid-store-customer get="name"></zid-store-customer>
    </span>
</button>

<button type="button" class="btn btn-dark account-btn">
    <span class="icon-envelop_black_24dp"></span>
    <span>
        {{ locals.hello }}
        <!-- old:  {{ customer.email }} -->
        <zid-store-customer get="email"></zid-store-customer>
    </span>
</button>

<button type="button" class="btn btn-dark account-btn">
    <span class="icon-phone_black_24dp"></span>
    <span>
        {{ locals.hello }}
        <!-- old:  {{ customer.mobile }} -->
        <zid-store-customer get="mobile"></zid-store-customer>
    </span>
</button>

The <zid-store-customer> tag dynamically retrieves and replaces customer details.

To conditionally display content based on whether the customer is logged in, replace {% if customer %} with zid-visible-customer="true" or zid-visible-guest="true".

Example:

<button zid-visible-customer="true"
    type="button"
    onclick="window.location.href='/account-profile'"
    class="btn btn-dark account-btn">
    <span class="icon-account_circle_black_24dp header-theme-icon-primary"></span>
    <span>
        {{ locals.hello }}
        <zid-store-customer get="name"></zid-store-customer>
    </span>
</button>

<button zid-visible-guest="true"
    type="button"
    onclick="window.location.href='/auth/login'"
    class="btn btn-dark account-btn">
  <span class="icon-account_circle_black_24dp header-theme-icon-primary"></span>
  <span>
      {{ locals.login }}
  </span>
</button>

When the customer is a guest, elements with zid-visible-customer="true" will be hidden

To show or hide elements based on whether a product is in the customer’s wishlist, use zid-visible-wishlist="{{ product.id }}" or zid-hidden-wishlist="{{ product.id }}".

Example:

<span class="add-to-wishlist" data-wishlist-id="{{ product.id }}">
  <span zid-visible-customer="true">
      <a zid-visible-wishlist="{{ product.id }}"
      class="icon-heart-mask filled"
      onclick="addToWishlist(this, '{{ product.id }}')"></a>
      <a zid-hidden-wishlist="{{ product.id }}"
      class="icon-heart-mask"
      onclick="addToWishlist(this, '{{ product.id }}')"></a>
  </span>
  <a zid-visible-guest="true" class="icon-heart-mask" href="/auth/login?redirect_to={{ requestUri() }}"></a>
  <img class="loader d-none" src="{{ asset_url }}spinner.gif" width="20" height="20"/>
</span>

2. Using JavaScript Event Listener:

You can listen for the zid-customer-fetched event to retrieve customer data. If the user is a guest, the customer object will be null.

Example:

document.addEventListener('zid-customer-fetched', function(event) {
    var customer = event.detail.customer; // null if the user is a guest
    if (customer) {
        $('.send-notify-name').val(customer.name);
        $('.send-notify-email').val(customer.email);
    }
});