~ 1 min read

Jak vytvořit zásuvku pro košík v Shopify.

How to Create a Cart Drawer in Shopify

Obsah

  1. Úvod
  2. Porozumění zásuvce pro nákupní košík
  3. Vytvoření zásuvky pro nákupní košík v Shoptetu
  4. Nejlepší postupy pro zásuvky pro nákupní košíky
  5. Závěr
  6. Často kladené otázky

Úvod

Představte si zákazníka procházejícího váš online obchod, jak vzrušeně přidává položky do svého košíku, pouze aby byl náhle přesměrován na samostatnou stránku košíku. Tato zkušenost může být rušivá a často vede k opuštění košíku a ztraceným prodejům. Co kdyby existoval bezproblémovější způsob, jak umožnit zákazníkům zobrazit svůj košík, aniž by to přerušilo jejich nákupní zkušenost? Představujeme vám zásuvku pro nákupní košík— klouzavou off-canvas zásuvku, která zlepšuje uživatelskou zkušenost a zvyšuje konverzní poměry.

Zásuvka pro nákupní košík umožňuje zákazníkům prohlížet vybrané položky a celkové náklady, aniž by opustili aktuální stránku, čímž podporuje nepřerušenou nákupní cestu. V dnešním konkurenčním e-commerce prostředí je optimalizace tohoto aspektu vašeho obchodu klíčová pro udržení zákazníků a maximalizaci prodeje.

V tomto článku se podíváme na vše, co potřebujete vědět o vytváření zásuvky pro nákupní košík v Shoptetu. Vyjmenujeme výhody implementace této funkce, poskytneme vám podrobný návod k jejímu vytvoření a probereme, jak ji zahrnout do vaší strategie uživatelské zkušenosti. Na konci budete mít komplexní znalosti o tom, jak vytvořit zásuvku pro nákupní košík v Shoptetu, což zajistí, že zůstanete přátelští k uživatelům a efektivní.

Co se naučíte

  • Význam zásuvky pro nákupní košík v e-commerce.
  • Jak implementovat vlastní zásuvku pro nákupní košík ve vašem Shoptet obchodě bez používání aplikací třetích stran.
  • Nejlepší postupy pro zlepšení uživatelské zkušenosti s vaší zásuvkou pro nákupní košík.

Pojďme začít!

Porozumění zásuvce pro nákupní košík

Co je zásuvka pro nákupní košík?

Zásuvka pro nákupní košík, často označovaná jako vysouvací košík nebo mini košík, je prvek rozhraní, který umožňuje zákazníkům zobrazit obsah jejich nákupního košíku, aniž by museli opustit aktuální stránku. Místo toho, aby byli uživatelé přesměrováni na vyhrazenou stránku košíku, zásuvka se vysune z boční strany obrazovky a poskytne pohodlný přehled o vybraných položkách. Tento přístup nejen zjednodušuje nákupní zkušenost, ale také povzbuzuje uživatele, aby pokračovali v prozkoumávání vašeho obchodu, což nakonec vede k vyšším konverzním poměrům.

Význam zásuvky pro nákupní košík

Mít zásuvku pro nákupní košík ve vašem Shoptet obchodě má mnoho výhod:

  1. Zlepšená uživatelská zkušenost: Zákazníci mohou rychle vidět obsah košíku, aniž by narušili svůj procházející tok.

  2. Redukce opuštění košíku: Umožněním zákazníkům snadno vidět jejich položky a celkové náklady, zásuvka pro nákupní košík může pomoci snížit pravděpodobnost opuštění košíku.

  3. Zvýšení prodeje: Plynulý proces pokladny může vést k více dokončeným transakcím, pozitivně ovlivňující vaše finanční výsledky.

  4. Optimalizace pro mobilní zařízení: S rostoucím počtem spotřebitelů nakupujících na mobilních zařízeních, zásuvka pro nákupní košík poskytuje uživatelsky přívětivější zkušenost na menších obrazovkách.

  5. Možnosti přizpůsobení: Dobře navržená zásuvka pro nákupní košík může být přizpůsobena tak, aby odpovídala brandingové image vašeho obchodu, což zvyšuje celkovou estetiku.

Vytvoření zásuvky pro nákupní košík v Shoptetu

Předpoklady

Před tím, než se vrhnete do procesu vytváření, ujistěte se, že máte následující:

  • Přístup do administračního panelu vašeho Shoptet obchodu.
  • Základní znalost HTML, CSS a JavaScriptu.
  • Tema, které umožňuje vlastní kódování (většina Shoptet témat to umožňuje).

Podrobný návod

Krok 1: Přístup do editoru kódu Shoptetu

  1. Přihlaste se do administračního panelu Shoptetu.
  2. V levém postranním panelu přejděte na Online obchod a klikněte na Témata.
  3. Najděte vaše aktivní téma a klikněte na Akce > Upravit kód.

Krok 2: Vytvoření potřebných souborů

  1. Ve složce Assets vytvořte dva nové soubory: drawer.css a drawer.js.

  2. Otevřete drawer.css a přidejte následující styly pro správu vzhledu vaší zásuvky pro nákupní košík:

    .drawer {
    display: none;
}
.drawer__header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
}
.drawer__close {
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
.drawer__wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    max-width: 500px;
    z-index: 9999;
    overflow: auto;
    transition: transform 0.3s;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px #777;
}
.drawer.is-active {
    display: block;
}
.drawer.is-visible .drawer__wrapper {
    transform: translateX(0);
}

  3. Následně otevřete drawer.js a vložte následující JavaScript pro správu funkčnosti zásuvky:

    var drawer = function () {
    var settings = {
        activeClass: 'is-active',
        visibleClass: 'is-visible',
        selectorTarget: '[data-drawer-target]',
        selectorTrigger: '[data-drawer-trigger]',
        selectorClose: '[data-drawer-close]',
    };

    var openDrawer = function (trigger) {
        var target = document.getElementById(trigger.getAttribute('aria-controls'));
        target.classList.add(settings.activeClass);
        document.documentElement.style.overflow = 'hidden';
        setTimeout(function () {
            target.classList.add(settings.visibleClass);
        }, 50);
    };

    var closeDrawer = function (event) {
        var closestParent = event.closest(settings.selectorTarget);
        closestParent.classList.remove(settings.visibleClass);
        document.documentElement.style.overflow = '';
        setTimeout(function () {
            closestParent.classList.remove(settings.activeClass);
        }, 350);
    };

    var clickHandler = function (event) {
        var toggle = event.target,
            open = toggle.closest(settings.selectorTrigger),
            close = toggle.closest(settings.selectorClose);

        if (open) {
            openDrawer(open);
        }
        if (close) {
            closeDrawer(close);
        }
        if (open || close) {
            event.preventDefault();
        }
    };

    document.addEventListener('click', clickHandler, false);
};

drawer();

Krok 3: Vytvoření HTML struktury

  1. Ve složce Sections vytvořte nový soubor pojmenovaný drawer.liquid.

  2. Vložte následující HTML strukturu pro definici rozložení zásuvky:

    <section class="drawer" id="drawer-name" data-drawer-target>
    <div class="drawer__overlay" data-drawer-close tabindex="-1"></div>
    <div class="drawer__wrapper">
        <div class="drawer__header">
            <div class="drawer__title">Pokračovat v nakupování</div>
            <button class="drawer__close" data-drawer-close aria-label="Zavřít zásuvku"></button>
        </div>
        <div class="drawer__content" id="cart__drawer">
            <div id="cart__drawer_items"></div>
            <div style="margin-top: 50px">
                <h4>Celkem: <span id="cart__total_price"></span></h4>
                <a id="cart__checkout_btn" href="/cs/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">Pokračovat na pokladnu</a>
            </div>
        </div>
    </div>
</section>

  3. Přidejte potřebný JavaScript pro načtení a aktualizaci dat košíku:

    <script>
    fetch('/cart.js')
        .then((resp) => resp.json())
        .then((data) => {
            if (data.items.length > 0) {
                data.items.forEach(function(product) {
                    document.getElementById('cart__drawer_items').innerHTML += '<img src="' + product.featured_image.url + '" alt="' + product.featured_image.alt + '"><h5>' + product.title + '</h5><p>' + product.quantity + ' x ' + Shopify.formatMoney(product.line_price) + '</p>';
                });
                document.getElementById('cart__total_price').innerHTML = Shopify.formatMoney(data.total_price);
            } else {
                document.getElementById('cart__drawer_items').innerHTML = '<p>Košík je prázdný</p>';
            }
        });
</script>

Krok 4: Odkazování na zásuvku ve vašem tématu

  1. Otevřete theme.liquid a zahrňte CSS a JavaScript soubory, které jste vytvořili, do sekce <head>:

    {{ 'drawer.css' | asset_url | stylesheet_tag }}
{{ 'drawer.js' | asset_url | script_tag }}

  2. Odkazujte na vaši drawer.liquid sekci v rámci tagu <body>:

    {% section 'drawer' %}

Krok 5: Aktivace zásuvky z hlavičky

  1. Otevřete soubor header.liquid ve složce Sections.

  2. Najděte kotvu spojenou s ikonou vašeho košíku a upravte ji tak, aby aktivovala zásuvku následovně:

    <a href="#" class="site-header__icon site-header__cart" data-drawer-trigger aria-controls="drawer-name" aria-expanded="false">
    {% include 'icon-cart' %}
    <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
    <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}">
        <span data-cart-count>{{ cart.item_count }}</span>
    </div>
</a>

  3. Uložte všechny změny.

Testování vaší zásuvky pro nákupní košík

Po dokončení kroků je velmi důležité otestovat zásuvku pro nákupní košík ve vašem Shoptet obchodě:

  1. Otevřete svůj obchod v novém okně.
  2. Přidejte produkt do svého košíku.
  3. Klikněte na ikonu košíku v headeru a sledujte funkčnost zásuvky.
  4. Ujistěte se, že se košík aktualizuje dynamicky a celková cena je správná.

Nejlepší postupy pro zásuvky pro nákupní košíky

Aby bylo možné optimalizovat efektivitu vaší zásuvky pro nákupní košík, zvažte následující nejlepší praktiky:

  • Uživatelsky přívětivý design: Zajistěte, aby byla zásuvka pro nákupní košík vizuálně přitažlivá a snadno se navigovala. Používejte jasnou typografii, přiměřené rozestupy a intuitivní umístění tlačítek.

  • Reagující design: Testujte svou zásuvku pro nákupní košík na různých zařízeních a velikostech obrazovky, abyste zajistili bezproblémovou zkušenost pro všechny uživatele, zejména pro nakupující na mobilech.

  • Aktuální aktualizace: Implementujte funkčnost, která umožňuje zákazníkům aktualizovat množství nebo odstraňovat položky přímo v zásuvce, aniž by bylo potřeba obnovit stránku.

  • Povzbuzujte další prodeje: Použití zásuvky pro nákupní košík pro zobrazení návrhů na upsell nebo cross-sell, které povzbuzují zákazníky k přidání dalších položek do jejich košíku.

  • Jasné výzvy k akci: Ujistěte se, že tlačítko pokladny vyniká a je snadno dostupné v rámci zásuvky, což povzbuzuje uživatele k dokončení jejich nákupů.

Závěr

Vytvoření zásuvky pro nákupní košík v Shoptetu je strategický krok, který může významně zlepšit nákupní zkušenost vašich zákazníků. Dodržováním kroků uvedených v tomto průvodci můžete implementovat vlastní, efektivní a uživatelsky přívětivou zásuvku, která udržuje zákazníky zapojené a povzbuzuje je k dokončení nákupů.

Jak e-commerce i nadále vyvíjí, zajištění, že váš obchod splňuje očekávání moderních nakupujících, je zásadní. Dobře navržená zásuvka pro nákupní košík nejen zlepšuje uživatelskou zkušenost, ale také slouží jako mocný nástroj pro zvyšování konverzních poměrů a prodeje.

Pokud hledáte další pomoc s optimalizací vašeho obchodu Shoptet, zvažte prozkoumání služeb Praella. Jejich odborné znalosti v oblasti uživatelské zkušenosti a designu, webového a aplikovaného vývoje a strategie, kontinuitě a růstu vám mohou pomoci vytvořit nezapomenutelné nákupní zkušenosti, které osloví zákazníky.

Připraveni vylepšit svůj Shoptet obchod? Začněte implementovat svou zásuvku pro nákupní košík ještě dnes a uvidíte, jaký rozdíl to udělá!

Často kladené otázky

Co je zásuvka pro nákupní košík?

Zásuvka pro nákupní košík je prvek rozhraní v online obchodech, který umožňuje zákazníkům zobrazit obsah jejich košíku, aniž by museli opustit aktuální stránku. Obvykle se vysune z boční strany a poskytne rychlý přehled o položkách přidaných do košíku.

Jak zásuvka pro nákupní košík zlepšuje uživatelskou zkušenost?

Zásuvka pro nákupní košík zlepšuje uživatelskou zkušenost tím, že umožňuje zákazníkům zobrazit položky v košíku, aniž by opustili aktuální relaci procházení, což podporuje plynulejší nákupní cestu a snižuje míru opuštění košíku.

Mohu si přizpůsobit design své zásuvky pro nákupní košík?

Ano, můžete si přizpůsobit design vaší zásuvky pro nákupní košík pomocí CSS, aby byl v souladu s estetikou vaší značky a poskytoval atraktivní uživatelské rozhraní.

Jaké technické dovednosti potřebuji k vytvoření zásuvky pro nákupní košík?

Základní znalosti HTML, CSS a JavaScriptu jsou užitečné pro vytvoření zásuvky pro nákupní košík. Shoptet poskytuje rozsáhlou dokumentaci a zdroje, které pomohou majitelům obchodů implementovat vlastní funkce.

Jak mohu testovat svou zásuvku pro nákupní košík po implementaci?

Po implementaci zásuvky přidejte položky do svého košíku, klikněte na ikonu košíku pro otevření zásuvky a ujistěte se, že se položky a celková cena správně aktualizují bez obnovení stránky. Testujte na různých zařízeních, abyste zajistili reakci a funkčnost.

Je nutné používat aplikace třetích stran k vytvoření zásuvky pro nákupní košík?

Ne, můžete vytvořit zásuvku pro nákupní košík pomocí vlastního kódu bez spoléhání se na aplikace třetích stran. To umožňuje větší flexibilitu a přizpůsobení založené na potřebách vašeho obchodu.

Previous
Jak vytvořit tlačítko pro nákup v Shopify: Komplexní průvodce
Next
Jak vytvořit stránku pokladny v Shopify
čtyři jedna jedna

Odemknutí Vašeho úspěchu v e-commerce

Shopify POS pro začátečníky: Nastavení pro úspěch
Shopify POS pro začátečníky: Nastavení pro úspěch
Read Article
s