Html stránka s vyhledáváním a košíkem. Vytváříme nákupní košík pomocí čistého JavaScriptu a Local Storage. Náhled screencastu

Vše výše uvedené se týkalo situace, kdy již HTML web existuje a je potřeba na něj nainstalovat nákupní košík. Co když ještě žádný web neexistuje? Samozřejmě nejjistější (a nejdražší) možností by bylo vyvinout hotový web přímo na enginu, který obsahuje moduly elektronický obchod. To však není vždy optimální přístup - zvažte několik možností:

Potřebujeme vstupní stránku. V podstatě se jedná o jednostránkový web skládající se výhradně z rozvržených HTML formát rozložení. Potřebuje takový web engine, který by zajišťoval generování a správu obsahu – ve více než polovině případů ne, není potřeba. Je to neefektivní investice peněz a času. Mnohem snazší je využít právě metody implementace nákupního košíku prostřednictvím hotových widgetů.

Další možností pro stránky HTML jsou stránky vytvořené v vizuální editory a nahrát na server ve formuláři hotové stránky. Pokud jste původně uvažovali o vytvoření webu tímto způsobem a potřebujete košík zboží pouze k tomu, abyste si mohli objednat jeden jediný typ produktu, není absolutně potřeba implementovat systém řízení na webu (kromě budoucnosti) . A zde je docela možné vyřešit problém s košíkem zboží ve formě hotového widgetu.

Sečteno a podtrženo: na webové stránky HTML je možné nainstalovat nákupní košík. Ano, bude vyroben jinak, než jak se obvykle dělá, ale neztratí tím své funkce. V některých případech má prvotní volba ve prospěch HTML stránky + hotový košík zboží více nejlepší možnost. Toto řešení není nejhorší - je to jen alternativa, nyní mnoho služeb funguje na podobném principu od samého začátku a to je norma, například konzultanti na webových stránkách, nabízené služby zavolat zpět, sběrače pošty pro zásilky atd. Všechny nejsou implementovány pomocí enginu a nejsou spouštěny na serverech, ale jsou také zabudovány do webových stránek jako widgety, včetně čistě HTML.

Wicart je hotový skript pro velmi atraktivní nákupní košík pro webovou stránku internetového obchodu. Velmi užitečné řešení. Nemusíme sami vymýšlet kód nákupního košíku pro náš web: stačí k němu „připojit“ stávající – a vše bude fungovat: na našem webu se objeví hotový nákupní košík: kupující tam bude moci „přetáhnout“ zboží a provádět platby.

Jak vypadá:

Výhody.

Žádné PHP: pouze HTML a Javascript
Skript nákupního košíku je napsán pouze v jazyk Javascript(knihovna jOquery + Technologie AJAX). Co to znamená pro běžného uživatele? A skutečnost, že nákupní košík na webu funguje velmi rychle, nevyžaduje opětovné načítání webu a nezpomaluje se kvůli maličkostem. Nákupní košík na stránce je interaktivní a zároveň extrémně rychlý. To je jednoznačné plus pro kupujícího.

Wicart se velmi snadno připojuje k webu. Je jasné, že skript nákupního košíku je stále potřeba propojit se stránkou – je potřeba ručně vložit potřebné kousky kódu do správná místa Online. S tím ale nebudete mít žádné problémy. Vývojáři se již o vše postarali za vás. Návod k použití uvádí části kódu pro tento program (skript) a uvádí místa na webu, kam je třeba je vložit. Zvládne to každý, dokonce i ten nejzačátečník webmaster.

Sám webmaster nemusí nic přidávat. Skript je kompletní a připravený k použití. Stačí vložit zadané části kódu na správná místa na webu – a košík bude fungovat.

Připojování souborů

Otevírací HTML stránku naše stránky v textový editor, může to být poznámkový blok, který je součástí systému Windows.
Na začátku souboru by měl být blok:

< head>

Zde je potřeba vložit potřebné soubory z archivu.

1) Soubor CSS
Tento soubor je zodpovědný za vzhled náš košík. V našem případě je samotný soubor ve složce css, můžete nakonfigurovat jakoukoli jinou složku.

2) JQuery
Aby nákupní košík fungoval, potřebujeme knihovnu JQuery. Můžete si jej stáhnout z webu nebo použít CDN

< script src= "http://code.jquery.com/jquery-1.11.0.min.js" type= "text/javascript" >

3) Skript košíku

< script src= "js/wicart.js" type= "text/javascript" >

*Upozorňujeme, že skript funguje v kódování UTF-8, pokud má váš web vynikající kódování pro skripty, musíte výslovně specifikovat kódování, které potřebujeme

Minimální konfigurace je následující:

Ceník:

< script>
var priceList = (
"001" : ( "id" : "001" , "subid" : ( ) , "name" : "IPhone 5" , "price" : "20500" ),
"002" : ( "id" : "002" , "subid" : ( ) , "name" : "IPad MINI" , "price" : "10500" )
} ;

< script>
var vozík;
var config;
var wiNumInputPrefID;

$(dokument) . připraveno(funkce() (

Cart = new WICard("cart" ) ;
vozík. init("basketwidjet" , config) ;

} ) ;
dokument. addEventListener("visibilitychange" , funkce (e) (
vozík. init("basketwidjet" , config) ;
) , Nepravdivé ) ;

Proměnná košíku musí být globální;
basketwidjet je kontejner pro náš koš.

2) Widget košíku (blok, kam jde produkt po nákupu)

< div>
< span>Košík:
< a href= "#" onclick= "cart.clearBasket()" style= "float: right;" >Průhledná
< a href= "#" id= "basketwidjet" onclick= "cart.showWinow("bcontainer", 1)" > < span style= "font: normal 11px Arial" >

3) Objednávkový formulář
< div id= "order" class = "popup" >
< a href= "#" onclick= "cart.closeWindow("order", 0)" style= "float:right" >< img src= "img/close.png" />
< h4>Zadejte své kontaktní údaje
< p>< form id= "formToSend" >
< input id= "fio" type= "text" placeholder= "Vaše příjmení a jméno" class = "" />
< input id= "city" type= "text" placeholder= "Město" class = "" />
< input id= "phone" type= "text" placeholder= "kontaktní číslo" class = "" />
< input id= "email" type= "text" placeholder= "E-mailem" class = "" />

< button onclick= "cart.sendOrder("formToSend,overflw,bsum");" href= "#" >odeslat objednávku

4) Tlačítko Koupit

< button id= "wicartbutton_001" onclick= "cart.addToCart(this, "001", priceList["001"])" >Koupit

Nedostatky.

Tento skript nákupního košíku je stále ve vývoji. A některé funkce stále nejsou implementovány (například zatím není možné zaslat kupujícímu e-mailem fotografii jeho nákupu a některé další nuance).

Ve volném a standardní verze produktu, nemáte přístup k pomoci vývojáře při instalaci nákupního košíku na váš web. Instalace však není vůbec náročná. A osobní verze (kde je k dispozici pomoc pro vývojáře) je levná: pouze 1 200 rublů. V době nákupu osobní verze sami vývojáři nainstalují nákupní košík na váš web.

Pokud máte nějaké dotazy, doporučujeme použít náš

Což mělo pouze ukázat abstraktní příklad implementace nákupního košíku, nemyslel jsem si, že to vygeneruje tolik dotazů a požadavků, které se hrnuly na blog samotný, do mého emailu atd. Vlastně proto jsem se rozhodl napsat tento plugin „jqCart“, ale chci hned zdůraznit několik bodů:

Aby plugin fungoval, potřebujete knihovna jQuery>= 1.8, který je nutné připojit před připojením samotného pluginu. Mělo by fungovat ve všech moderní prohlížeč a teoreticky i v IE8. Problém pro staré „osly“ může být pouze v aplikovaných vlastnostech CSS a verze jQuery (Dovolte mi připomenout, že jQuery 2.x nepodporuje internet Explorer 6, 7 a 8). Data jsou přenášena na server z pomocí Ajaxu a proto velmi doporučuji používat kódování souborů UTF-8 bez kusovníku!

Spojení:

Používání:

$(function() ( "use strict"; // inicializace pluginu $.jqCart(( buttons: ".add_item", // tlačítko pro výběr, ala handler "Přidat do košíku": "/php/handler.php", / / cesta k obslužné rutině visibleLabel: false, // zobrazit/skrýt popisek, když prázdný vozík(výchozí: false) openByAdding: false, // automaticky otevře košík při přidávání produktu (výchozí: false) měna: "€", // měna: hodnota řetězce, mnemotechnické pomůcky (výchozí "$") cartLabel: ".label - place" /* selektor prvku, kam bude zástupce umístěn, také známý jako "tlačítko" pro otevření košíku */ )); // doplňkové metody$.jqCart("openCart"); // otevřít košík $.jqCart("clearCart"); // Prázdný koš ));

V tlačítkách ( "Přidat do košíku"), musí být zadány následující atributy dat:

Všechny hodnoty výše uvedených datových atributů se podílejí na vytváření okna košíku. Můžete přidat další datové atributy, jejichž hodnoty budou odeslány se zbytkem dat obslužné rutině. Klíče ve výsledném poli na serveru budou odpovídat názvu atributu za „data-“, tj. hodnota atributu "data-somevalue" bude v poli pod klíčem "somevalue" Na tagu tlačítka a jeho umístění na stránce nezáleží.

Přidat do košíku

V archivu naleznete příklad handlera (handler.php) s přípravou a odesláním dopisu emailem. Na konci handleru musí být odpověď klientovi in formát JSON.