Project: Shopify Plus Checkout Customization for Pudo Locker Selection

Shopify Apps
1

Seeking Shopify Plus Developer for Custom Checkout Feature with Pudo Locker Integration

I am looking to hire an experienced Shopify Plus developer for a custom checkout project. I need a “Collect at Pudo Locker” shipping option added to my Shopify Plus checkout. When selected, this option should display a Google Map and a dropdown list of Pudo locker locations, which users can choose from. This selection should be recorded with the checkout details and visible in my Shopify admin.

What I’m Paying For:

  • Setup and configuration of Git, Shopify CLI, and the development environment.
  • Implementation of the Pudo Locker shipping option using Shopify’s Checkout UI Extension.
  • Integration with Pudo API for dynamic locker location data.
  • Functional Google Map display and dropdown list for locker selection.
  • Recording of selected locker information in order details.
  • Testing and deployment on Shopify Plus.

Requesting Quotes:
Please provide a quote, including estimated time and cost, based on the details above. Feel free to ask if you need more specifics for an accurate quote.

Deliverables:
A fully functional, tested, and deployed custom checkout feature for my Shopify Plus store with Pudo locker integration.

Objective:
To add a “Collect at Pudo Locker” shipping option to the Shopify Plus checkout page, which, when selected, displays an embedded Google Map and a dropdown list of Pudo locker locations. The user should be able to choose a Pudo locker location, and this selection needs to be recorded with the checkout details.

Requirements:

  1. Environment Setup:

    • Ensure Git and Shopify CLI are installed and correctly set up on the local development environment.
    • Use Shopify’s Checkout UI Extension to build the custom checkout feature.

  2. Functionality:

    • Add a new shipping method called “Collect at Pudo Locker” on the Shopify Plus checkout page.
    • When “Collect at Pudo Locker” is selected, dynamically display:
      • A Google Map centered on the selected Pudo locker location.
      • A dropdown list populated with all available Pudo locker locations.

  3. Data Source:

    • Fetch Pudo locker locations using the Pudo API (documentation link: https://api-docs.pudo.co.za/), which provides latitude, longitude, and addresses of lockers.
    • The map and dropdown should update based on API data.

  4. Tracking and Checkout Recording:

    • Capture the selected locker location and store it with the order details at checkout as either a line-item property or order attribute.
    • This data should be accessible from Shopify’s admin order view.

  5. Technology Stack:

    • Use Shopify CLI for app initialization and extension management.
    • Code the Checkout UI Extension using React (src/index.jsx).
    • Integrate with Google Maps for the map view and Pudo API for locker data.

  6. Testing and Deployment:

    • Set up a testing environment to preview and test the checkout customization in development mode.
    • Deploy the Checkout UI Extension to Shopify Plus once functionality is confirmed.

Skills Required:

  • Shopify Plus and Checkout UI Extensions experience
  • JavaScript (React)
  • Familiarity with APIs (for Pudo API integration)
  • Experience with Git, Shopify CLI, and custom checkout development

Additional Information:

  • Access to the Shopify Plus store will be provided for testing and final deployment.
  • Further customization options may be discussed as needed.