Nuvemshop Installation

​

Installation

<script
  src="https://cdn.alana.shopping/nuvemshop/alana-search-snippet.js"
  data-api-key="ak_your_api_key"
  data-api-url="https://app.alana.shopping">
</script>

​

Configuration

​

How It Works

1. Finds the Nuvemshop search form via these selectors (in order):
   • #search-form
   • form[action="/search"]
   • form[action*="search"]
   • .search-form
   • Falls back to input[name="q"] and traverses to the parent <form>
2. Intercepts form submit — calls POST /api/v1/search instead of native search
3. Attaches an autocomplete dropdown to the search input (200ms debounce)
4. Renders a product grid in #alana-search-results at the top of <main>
5. Updates the URL to /search?q=... without page reload (history.pushState)
6. Restores search state on direct navigation to /search?q=...

​

Autocomplete

​

Event Tracking

​

Programmatic API

// Trigger a search programmatically
window.AlanaSearch.search("tênis running", 0, 20);

// Get autocomplete suggestions
window.AlanaSearch.autocomplete("tênis").then(({ suggestions }) => {
  console.log(suggestions);
});

​

Troubleshooting

• Your theme doesn’t use a standard search form selector
• Add name="q" to your search input, or contact Alana Support with your theme name

• Confirm the script tag is loading (check Network tab in browser DevTools)
• Check the browser console for [Alana Search] Initialized successfully.

• Ensure products in your catalog have image_url set
• Trigger a catalog sync from Workspace → Products → Sync