# InspiShop Vue.js Storefront

## Co je InspiShop Storefront?

InspiShop Storefront (ISF) je frontendový framework pro řešení InspiShop určené dlouhodobě rostoucím e-shopům.

Framework je postaven jako **standalone aplikace**, která komunikuje s tzv. headless backend e-commerce platformou pomocí **API**. Výhodou ISF je **modulovatelnost**, která umožňuje rozšiřování e-shopu bez závislosti na PHP napojení. Majitelům e-shopu šetří v dlouhodobém horizontu čas a peníze.

### Problém

Většina tradičně stavěných e-shopů má frontendový kód napevno navázaný na šablony backendového systému. Toto způsobuje nutnost hlídat backendovou funkčnost při frontendových úpravách, které se týkají funkčnosti objednávkového procesu a modulů. Proto většina úprav vyžaduje backendové úpravy, případně nutné kontroly funkčnosti, a **každou úpravu tak prodražuje**. Současně vzniká **nepřehledný kód**.

V případě větších frontendových úprav a nadstaveb, jako jsou například konfigurátory produktů, je nutné zásadních úprav na backendu.

Současně bylo vždy nutné při změnách na frontendu buildit pokaždé celý projekt.

### **Řešení**

InspiShop Storefront umožňuje naprostou většinu frontendových úprav udělat úplně nezávisle na backendové funkčnosti. Proto jsou úpravy v rámci ISF výrazně rychlejší a bezpečnější.

ISF je současně postaven kompletně na komponentovém designu (dodržuje principy tzv. atomického designu), který opět zjednodušuje, zpřehledňuje a zrychluje proces kódování.

## **FAQ**

### Q: Jsem frontend vývojář na InspiShopu, v čem mi Storefront pomůže?

Oproti staré verzi:

* **Transparentnost toku dat** mezi BE a FE. FE si sám načítá, co potřebuje, “neotravuje” BE pro úpravy kontrolerů. Nemusí si přeposílat data přes pageData&#x20;
* **Jednotnost kódů**, některé komponenty (productBox, customerSupport, všechny atomy) musely dříve být psané jak ve Vue, tak v Blade šablonách.&#x20;
* **Možnost předzpracovat data**, která nám z backendu přijdou. Dříve bylo nutné hacky v podobě @php v blade šablonách, nebo opět řešit s BE člověkem.

Jako takový:

* Volnost rozhodování nad strukturou aplikace
* Čistá struktura aplikace a komponent postavená pouze na JS a HTML
* Moderní SSR přístup, FE si sám rozhoduje o dynamických prvcích aplikace
* Jednotný datový store pro komunikaci s backendem


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.inspishop.cz/vue-storefront.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
