💡 [FEATURE]: Create Template for Viewing and Managing Addresses

[tanujbordikar]

Duplicate check

• [X] I have searched the existing issues

Related Issues

No response

Feature Description

Currently, our Shopify store lacks a robust address management system for customers. To enhance user experience and streamline the process of managing shipping and billing addresses, we need to implement a comprehensive address management feature. This feature will include functionalities for adding, editing, deleting, and setting addresses as default.

Specifications:

Address Management Page:

• Create a dedicated page for customers to view and manage their addresses.
• List all saved addresses with options to edit, delete, and set as default.

Address Form Modal:

• Implement a modal form for adding and editing addresses.
• Form fields: First Name, Last Name, Company, Address 1, Address 2, City, Country, Province (dynamic based on selected country), Zip, Phone.
• Include a checkbox to set the address as default.
• Provide "Save" and "Cancel" buttons in the modal.

Functionality:

• Ability to add a new address.
• Ability to edit an existing address.
• Ability to delete an address.
• Ability to set an address as the default.
• Dynamic fetching of provinces based on the selected country (e.g., selecting "India" displays "Maharashtra", "Assam", "Punjab", etc.).

Styling and Design:

• Use dynamic Tailwind CSS for styling to ensure a responsive and visually appealing design.
• Ensure the modal and address list are consistent with the overall theme of the Shopify store.

JavaScript Integration:

• Use necessary JavaScript to handle form submissions, dynamic province fetching, and address operations (add, edit, delete, set as default).

Motivation:

Acceptance Criteria:

• The address management page and modal form should be fully functional and responsive.
• Users should be able to add, edit, delete, and set addresses as default seamlessly.
• Dynamic fetching of provinces based on the selected country should work correctly.
• The design should be consistent with the store’s theme and visually appealing.

Technical Details (If Known):

• Use Tailwind CSS for styling.
• Implement necessary JavaScript for dynamic form handling and address management operations.
• Ensure compatibility with existing Shopify infrastructure and user authentication.

Motivation

Enhanced User Experience:

• A user-friendly address management system will make it easier for customers to update and manage their shipping and billing information, leading to a smoother checkout process.

Increased Efficiency:

• Providing a seamless way to manage addresses reduces the need for customer support intervention, as users can handle their address changes independently.

Improved Customer Satisfaction:

• Enabling customers to set default addresses and quickly update their information improves their overall experience and satisfaction with the store.

Brand Loyalty:

• A well-implemented address management feature demonstrates our commitment to user convenience and can enhance customer loyalty and retention.

By implementing this feature, we aim to provide a more efficient and user-friendly platform for our customers to manage their addresses, thereby improving their overall shopping experience on our Shopify store.

Thank you.

Additional Context

Feature Reference lookup video from dawn theme:

https://github.com/dear-digital/shopify-theme-skeleton/assets/91179998/4737084c-fe5f-4561-9df9-94807286baaf

Edit a particular address in the form:

https://github.com/dear-digital/shopify-theme-skeleton/assets/91179998/519b4671-9f0b-4c9a-85a7-b1b507b221dd

Modal preview and overall design:

File Modifications

Create dev__customer-addresses.liquid file and update addresses.json file.

Information Completeness

• [X] Yes, I have provided all the necessary information

[deardigital-evaluation[bot]]

Thanks for opening this issue @tanujbordikar :)

[tanujbordikar]

/attempt

[deardigital-evaluation[bot]]

@tanujbordikar has requested to attempt this issue #318. Here are their stats:	📇 Username	💯 XP	⭐RP	🥇 Badges
tanujbordikar	104	104	🧪[Beta Tester]

This message was generated automatically. Please check the contribution guidelines for more details.

[deardigital-evaluation[bot]]

@tanujbordikar has successfully contributed to this issue #318. Here are their updated stats:	📇 Username	💯 XP	⭐RP	🥇 Badges
tanujbordikar	123	123	🧪[Beta Tester]

This message was generated automatically. Please check the contribution guidelines for more details.