JAK UPRAVIT COKOLIV V SHOPTETU POMOCÍ AI 🤖

Šimon Šťastný · @evrocz

Nechcete za úpravy Shoptetu platit programátorům tisíce, desetitisíce ani statisíce? Tenhle návod vám ukáže, jak si je udělat sami — rychle, levně a pomocí umělé inteligence, která kódování zvládne spolehlivě. 👌

Jak budeme postupovat

  1. Nainstalujeme moje rozšíření do Chromu, díky kterému Claude uvidí, jak je váš e-shop postavený
  2. Nainstalujeme a nastavíme WinSCP
  3. Nainstalujeme Claude Code
  4. Upravíme, co potřebujeme

Video s celým postupem

Video bude doplněno

Jak nainstalovat rozšíření do Chromu

Aby Claude přesně viděl, jak je váš e-shop postavený, použijte moje rozšíření do Chromu. Nainstalujete ho takto:

  1. Stáhněte si Shoptet HTML Extrahovač a rozbalte ho
  2. Zadejte do Chromu: chrome://extensions
  3. Vpravo nahoře zapněte „Režim pro vývojáře“, klikněte na „Načíst rozbalené“ a vyberte složku s rozšířením
shoptet-html-extrahovac.zip ZIP

Jak nainstalovat a nastavit WinSCP

  1. Stáhněte si a nainstalujte WinSCP
  2. V Shoptetu si vytvořte přístupy k FTP
  3. Pomocí nich se ve WinSCP připojte k souborům e-shopu

Jak nainstalovat Claude Code

Pokud už Claude Code máte, tenhle krok přeskočte. Pokud ne, pokračujte takto:

  1. Jděte na claude.ai a zaregistrujte se
  2. Kupte si plán Pro ($15)
  3. Nainstalujte si aplikaci Claude do počítače

Začátek konverzace v Claude Code

  1. Pomocí rozšíření v Chromu extrahujte vzhled stránky e-shopu, kterou chcete upravit
  2. Zadejte mu tento prompt 
    Jsi profesionální UI UX designér a programátor pro Shoptet. Toto je e-shop, který budeme upravovat. V každém úkolu zvaž použití skillu UI UX Pro Max, který ti tu brzo nainstaluju. Řiď se barevnou paletou, fonty a tónem značky e-shopu. Pokud ve složce, kde operujeme, nenajdeš .css a .js soubory, sám vytvoř složky „assets“ a „upload“ a do složky „assets“ vytvoř soubory „style.css“ a „custom.js“. Pokud .css a .js soubory najdeš, vše si o nich nastuduj a i přesto do složky „assets“ (pokud neexistuje, vytvoř) vytvoř soubory „style.css“ a „custom.js“. Všechno, co do nich zapíšeš, ručně nahraju na e-shop, kde se to propíše do aktuální podoby, a nahraju ti znovu zpátky, jak to vypadá. Pokaždé když ti dám .html soubor, tak mi ho zobraz v browseru.
  3. Nainstalujte skill UI UX Pro Max 
    npx claude-code-templates@latest --skill creative-design/ui-ux-pro-max
  4. Otevřete si v Claudovi prohlížeč — můžete v něm klikat na jednotlivé prvky a rovnou k nim zadávat úkoly ohledně úprav
  5. Jakmile budou úpravy ve style.css a custom.js hotové, přenahrajte je do složky assets ve WinSCP
  6. Otevřete si HTML Editor v Návrháři šablon v Shoptetu a do „Záhlaví <HEAD>“ napište: 
    <link href="/user/documents/assets/style.css?v=1" rel="stylesheet" />
    a do „Zápatí <BODY>“ vložte tento kód: 
    <script src="/user/documents/assets/custom.js?v=1" type="text/javascript"></script>

⚠️ Tohle hned propíše změny do konceptu. Pro zákazníky e-shopu se ale projeví až ve chvíli, kdy kliknete na tlačítko Zveřejnit.

Opakujte stále dokola

Chcete upravit něco dalšího, nebo se vám změna nelíbí? Proces opakujte:

  1. Extrahujte HTML e-shopu a dejte ho Claudovi
  2. Popište mu znovu, co chcete změnit
  3. Počkejte, až aktualizuje soubory style.css a custom.js, a pak je nahraďte ve WinSCP
  4. V Editoru HTML jen aktualizujte u obou řádků verzi, čímž se zobrazí změny v konceptu 
    ?v=1 ---> ?v=2
    <link href="/user/documents/assets/style.css?v=1" rel="stylesheet" />
                                               |
                                               V
<link href="/user/documents/assets/style.css?v=2" rel="stylesheet" />
    <script src="/user/documents/assets/custom.js?v=1" type="text/javascript"></script>
                                                |
                                                V
<script src="/user/documents/assets/custom.js?v=2" type="text/javascript"></script>

Potřebujete poradit?