Help with a Stadium feature

[Niklas10B]

We need a custom stadium passport feature for målminutter.dk, a Danish football stadium review platform built on Shopify. Each stadium is a product, and we use the Vendor field to indicate leagues (Superliga, 1. Division, etc.).

Requirements

Core Functionality:

1. Login-only access
   • Feature only available to logged-in customers
2. Track visited stadiums
   • Customers can mark stadiums as "visited"
3. Progress tracking
   • Show "X af Y besøgt" for each league
4. Visual indicators
   • Clear visited/not visited status on each stadium
5. Scalable
   • Automatically supports new leagues added via Vendor field

Technical Specifications:

• Data Storage: Customer metafield passport.visited_stadiums (List of product references)
• Frontend: Existing Liquid section displays data correctly
• Backend: Need API endpoint to update customer metafields from frontend
• Security: Ensure only logged-in customers can update their own data

Current Status:

• Display logic works perfectly (Liquid template complete)
• Customer metafield created and configured
• Interactive buttons fail (Shopify security restrictions)

What We Need: Either a custom app or backend service that provides:

1. API endpoint to safely update customer metafields
2. JavaScript integration for the existing frontend
3. Proper authentication and security

Existing Code: We have a complete Liquid section with styling and frontend logic - just need the backend functionality to make the "Marker som besøgt" buttons work.

[Small_Task_Help]

Hi,

Hope this will work

- Create a custom Shopify app with customer/metafield access
- Build a secure API endpoint to update visited stadiums
- Add frontend JavaScript to call that endpoint
JavaScript example

document.querySelectorAll('.mark-visited').forEach(button => {
  button.addEventListener('click', async () => {
    const stadiumId = button.dataset.stadiumId;
    const customerId = window.customerId; // Pass this from Liquid if needed

    const res = await fetch('https://your-backend.com/mark-visited', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ customerId, stadiumId })
    });

    const data = await res.json();
    if (data.status === 'success') {
      button.textContent = 'Besøgt';
    }
  });
});

- Use metafields to store and show visited stadiums
- Protect everything with login checks and access control