Statický e-shop s Apicart Vue.Js komponentami za 5 minut

09.03.2020

API Vue.Js Ecommerce

Vytvoření statického e-shopu pomocí zkopírování kusu kódu. Vše přizpůsobitelné, přeložitelné a bez programování. To byl náš cíl a dosáhli jsme ho pomocí Vue.Js.

Proč statický e-shop s Apicartem?

Dneska je trend vše vytvářet jednoduše a mít například pouze stránku se seznamem produktů a tlačitkem koupit, kterou jednoduše spustíte na Github Pages nebo Netlify. Zároveň si díky tomuto přístupu ušetříte starosti s cenou za hosting atd.

To je důvod, proč jsme vytvořili Vue.Js komponenty, které vám pomůžou vytvořit e-shop jednoduše a rychle. Díky ním můžete vytvořit e-shop pro kohokoliv, kdo chce prodávat pár produktu, potřebuje registrační stránku na své kurzy nebo plánuje prodávat lístky či vstupenky.

Ukázka Vue.js komponent

Příklad je možné zobrazit a upravit na Codepenu.

Kód za ukázkou je pouze na 45 řádků. Můžete ho nalézt také na Github Gists stránce.

Začínáme

Obsah:

  • Instalace
  • Změna měny a překladů
  • Přidání kategorií
  • Administration

1 | Instalace

V případě, že nechcete ukázku editovat na Codepenu: 
1. Vytvořte soubor index.html
2. Nakopírujte do něj následující kód
3. Otevřte soubor v prohlížeči (2x na něj klikněte)
Měli byste vidět stránku stejnou jako je ta nahoře v ukázce:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Apicart ukázka">
    <title>Apicart ukázka</title>
  </head>
  <body>
    <!-- You can use custom layout. This is just for the example -->
    <div style="max-width: 1902px; margin: 0 auto; padding: 0 20px;">
      <header style="margin: 50px 0; display: flex; justify-content: center;">
        <!-- #apicart-cart-dropdown is the target element for the Cart dropdown component. You can move it wherever you want -->
        <div id="apicart-cart-dropdown"></div>
      </header>
      <main>
        <!-- #apicart is the target for the application -->
        <div id="apicart"></div>
      </main>
    </div>
    <script src="https://cdn.jsdelivr.net/gh/apicart/packages-js@master/packages/vue-components/dist/bundles/default/default.full.min.js"></script>
    <script>
      Apicart
        .setDevEnv()
        .configure({
          // Replace tokens with your PUBLIC tokens from the administration
          store: new Apicart.Store({ token: "9mCu3DlBCa4REI?Q7kKly!Rw6!_FvD8K_dgPXe1b20?r6!sPTQMyCpq_ADt!jXOD" }),
          payments: new Apicart.Payments({ token: 'Q84lNQyLl?nBGvKxxbcdc!nWFKEZrK?L_Is2r9IaOJo14ONbXw1SMlPIeptcaFza' }),

          vueComponents: {
            category: {
              products: {
                list: [
                  // Replace tokens with your PUBLIC tokens from the administration
                  "https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json",
                  "https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json",
                  "https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json",
                  "https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json"
                ]
              }
            }
          }
        })
        .initVueBundle();
    </script>
  </body>
</html>

2 | Měna

Jako první asi budete potřebovat změnit měnu. To se dá provést přidáním vueComponentsTranslator sekce do kódu. Zkopírujte ji a vložte na vyznačené místo. (Tečky [...] smažte, pouze naznačují, že je zde kód z předchozí ukázky):

Apicart
  ...
  .configure({
     ... 
     vueComponentsTranslator: {
      currencyFormats: {
        cs: {
          currency: {
            currency: 'CZK'
          }
        }
      }
    }
  })

3 | Překlady

Všechny překlady mohou být upravovány přímo v inicializaci skriptu. Vždy si najděte klíč, který chcete změnit v překladovém souboru a přidejte ho do konfigurace. V tomto příkladě změníme text tlačítka pro přidání produktu do košíku na  Koupit:

Apicart
  ...
  .configure({
    vueComponentsTranslator: {
      ...
      localization: {
        cs: {
          buyButton: 'Koupit'
        }
      }
    }
  })

 

4 | Kategorie

V případě, že chcete prodávat různé produkty, pravděpodobně budete potřebovat přidat kategorie. Změňte sekci products v kódu následovně:

Apicart
  ...
  .configure({
     ... 
     vueComponents: {
       category: {
         products: {
           list: {
             clothes: {
               new: [
                 'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
                 'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json',
                 'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json',
                 'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json',
              ],
              discount: [
                 'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json',
                 'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json',
                 'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json',
                 'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
              ]
            }
          }
        }
      }
    }
  })

Zobrazí se kategorie a asynchronně načtou produkty. Kategorie ale potřebují název a popis, tak si pojďme nějaký přidat do nastavení. 
Cesta překladu musí být stejná jako cesta produktu v kategorii

Například cesta clothes.title přidá nadpis pro sekci clothes clothes
Cesta clothes.new.title  přidá nadpis pro clothes.new sekci atd.:

Apicart
  ...
  .configure({
    ... 
    vueComponentsTranslator: {
      ...
      localization: {
        cs: {
          categories: {
            clothes: {
              title: 'Nejhezčí oblečení',
              description: "Nejhezčí trička.",
              menu: 'T-shirts',
              new: {
                title: 'Nová kolekce',
                description: "Trička z naší nové kolekce.",
                menu: 'Nová kolekce'
              },
              discount: {
                title: 'Trička v akci',
                description: "Nejkrásnější trička za poloviční cenu",
                menu: 'Black Friday'
              }
            }
          }
        }
      }
    }
   ...
 })

5 | Výsledek

82 řádků! To je vše! 
Výsledký kód by měl vypadat takto:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Apicart ukázka">
    <title>Apicart ukázka</title>
  </head>
  <body>
    <div style="max-width: 1902px; margin: 0 auto; padding: 0 20px;">
      <header style="margin: 50px 0; display: flex; justify-content: center;">
        <div id="apicart-cart-dropdown"></div>
      </header>
      <main>
        <div id="apicart"></div>
      </main>
    </div>
    <script src="https://cdn.jsdelivr.net/gh/apicart/packages-js@1.0.0-alpha3/packages/vue-components/dist/bundles/default/default.full.min.js"></script>
    <script>
      Apicart
        .setDevEnv()
        .configure({
          store: new Apicart.Store({ token: '9mCu3DlBCa4REI?Q7kKly!Rw6!_FvD8K_dgPXe1b20?r6!sPTQMyCpq_ADt!jXOD' }),
          payments: new Apicart.Payments({ token: 'Q84lNQyLl?nBGvKxxbcdc!nWFKEZrK?L_Is2r9IaOJo14ONbXw1SMlPIeptcaFza' }),
          vueComponentsTranslator: {
            currencyFormats: {
              cs: {
                currency: {
                  currency: 'CZK'
                }
              }
            },
            localization: {
              cs: {
                categories: {
                  clothes: {
					title: 'Nejhezčí oblečení',
					description: "Nejhezčí trička.",
					menu: 'T-shirts',
					new: {
						title: 'Nová kolekce',
						description: "Trička z naší nové kolekce.",
						menu: 'Nová kolekce'
					},
					discount: {
						title: 'Trička v akci',
						description: "Nejkrásnější trička za poloviční cenu",
						menu: 'Black Friday'
					}
					}
                }
              }
            }
          },
          vueComponents: {
            category: {
              products: {
                list: {
                  clothes: {
                    new: [
                      'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
                      'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json',
                      'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json',
                      'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json',
                    ],
                    discount: [
                      'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json',
                      'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json',
                      'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json',
                      'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
                    ]
                  }
                }
              }
            }
          }
        })
        .initVueBundle();
    </script>
  </body>
</html>

Administrace

V ukázce jsou použité přístupové klíče pro https://sandbox.apicart.net

Aby jste mohli zobrazit vlastní produkty, je potřeba se zaregistrovat a nahradit cesty k produktům a přístupové klíče pomocí tohoto návodu.

Nepřemýšlejte nad cenou. Testovací prostředí je navždy zdarma!

Shrnutí

Díky Apicart Store, Vue.js komponentám a Github Pages hostingu jsme byly schopní rychle vytvořit plně funkční e-shop

A může to být ještě rychlejší! Stáhněte si Sandbox pomocí tohoto odkazu a nemusíte ani kód kopírovat. Pouze změníte produkty a přístupové klíče!

Dejte nám vědět, co si o tom myslíte!


Sledujte nás. Více článků a novinek již brzy!

👉 Slack, Twitter, Github, Instagram, LinkedIn

Create E-commerce in 5 minutes

Try it. It is for free.