Overview#
The address dialog feature allows users to add or edit their shipping addresses without leaving the current page. When enabled, it provides a modal dialog for address management, creating a smoother and more seamless user experience.Enabling the Feature#
The address dialog feature is enabled by including the template in your theme. There are no dashboard settings required.How to Enable#
To enable the address dialog in your theme, include the following template:{% include "vitrin:account/address_dialog.jinja" %}
Global API Objects#
window.address_dialog#
When the address dialog template is included, a global object address_dialog is added to the window object with the following methods:Methods#
open(data?) – Opens the address dialog.Without data → Opens in "Add New Address" mode
With { addressId: number } → Opens in "Edit Address" mode with the specified address
close() – Closes the address dialog
Usage Examples#
Events#
vitrin:address:submitted Event#
This event is fired immediately after a successful address submission (add or edit) through the dialog. Theme developers can listen to this event to update the DOM, refresh the address list, or reload the page.💡 Tip: You can skip dynamic updates entirely and just use window.location.reload() if reloading the page is sufficient for your theme's flow.Custom Styles Integration#
You can customize the look and feel of the Address Dialog using the Zid SDK Custom Styles system. This allows you to apply your own CSS overrides for specific components without affecting other areas of the store.How to Use Custom Styles#
The component key for the Address Dialog is address_dialog. Use this key to apply scoped style overrides.
Best Practices#
Include the template only in the address section pages, not globally.
Always use optional chaining (window?.address_dialog?.open).
Listen to vitrin:address:submitted event for updates.
Support both add and edit modes.
Prefer dynamic updates for better UX.
API Reference Summary#
| Method | Parameters | Description |
|---|
window.address_dialog.open() | none | Opens dialog in "Add New Address" mode |
window.address_dialog.open(data) | { addressId: number } | Opens dialog in "Edit Address" mode |
window.address_dialog.close() | none | Closes the address dialog |
Events#
| Event Name | Detail Structure | Description |
|---|
vitrin:address:submitted | { addressId?: number, isEditMode: boolean } | Fired after successful address submission |
Summary#
Enabled by including {% include "vitrin:account/address_dialog.jinja" %}
Should be included only in customer profile pages that have the address section
No dashboard settings required
Provides global window.address_dialog object
Supports Add and Edit address modes
Fires vitrin:address:submitted event on success
Safe with optional chaining
Fully customizable via window.zidCustomStyles.address_dialog
Modified at 2026-02-17 07:02:10
