Skip to content
🛒 Ajax ostukorv WooCommerce'is: 3 viisi pluginast kohandatud koodini
WooCommerceVeebiarendusWordPress
7 min1,345 sõna

🛒 Ajax ostukorv WooCommerce'is: 3 viisi pluginast kohandatud koodini

„Lisa ostukorvi" nupp WooCommerce platvormil laadib vaikimisi lehe iga klõpsuga uuesti. Ostja valib toote, klõpsab ja ootab. Poolteist sekundit, kaks, kolm. Mobiilis kõik viis. Iga selline viivitus lõikab osa publikust ära: Baymard Institute'i andmetel on e-kaubanduses keskmine ostukorvi hülgamise määr umbes 70% ja aeglane ostukorv on üks peamisi tegureid.

AJAX-põhine ostukorv kõrvaldab lehe uuesti laadimise. Toode lisatakse koheselt, päises olev loendur uueneb ilma lehe vilkumiseta ja ostja jääb täpselt sinna, kus ta oli. Poe jaoks on see otsetee konversioonini: vähem hõõrdumist, rohkem lõpule viidud oste.

WooCommerce'is saab AJAX-põhise ostukorvi ehitada kolmel viisil. Allpool on igaüks neist: alates pistikprogrammi paigaldamisest minutiga kuni kohandatud PHP ja JavaScripti koodini.

💡 Kiire ülevaade:

  • 1. meetod: paigalda tasuta pistikprogramm, 2 klõpsu, töötab lihtsate ja muutuvate toodetega
  • 2. meetod: sisseehitatud WooCommerce'i seadistus, ainult arhiivilehed, ei toeta muutuvaid tooteid
  • 3. meetod: PHP + JavaScript alamteemas, täielik kontroll, kaasaegne wc-ajax lõpp-punkt

Mis on AJAX-põhine ostukorv ja miks su pood seda vajab

clipboard 2026 08 01T13 56 23

Tavaline WooCommerce'i ostukorv töötab nii: ostja klõpsab „Lisa ostukorvi" → brauser saadab vormi → server töötleb selle → leht laaditakse uuesti → ostja näeb tulemust. Neljast sammust koosnev ahel ja igal sammul võid sa inimese kaotada.

AJAX-põhine ostukorv muudab mehaanikat. Brauser saadab serverile asünkroonse päringu, server tagastab JSON-i uuendatud ostukorvi andmetega ja JavaScript uuendab loendurit ning mini-ostukorvi jooksvalt. Leht jääb paigale. Ostja ei pane tähelegi, et midagi juhtus: toode on juba ostukorvis.

Poe vaatenurgast on erinevus tuntav. 2023. aasta Google'i uuring näitas, et iga lisasamm ostulehtris vähendab konversiooni 10-15%. Lehe uuesti laadimise eemaldamisega eemaldad sa ühe sammu. Lisaks väheneb serveri koormus: terve lehe renderdamise asemel serveerib see kergekaalulist JSON-i.

Kuid on üks nüanss: WooCommerce võimaldab AJAX-it kohe kasutada ainult poe- ja kategoorialehtedel. Toote üksiklehel ja muutuvate toodete puhul jääb lehe uuesti laadimine alles. Just selle lünga me sulgemegi.

1. Meetod: Ajax add to cart for WooCommerce pistikprogramm

clipboard 2026 08 01T13 56 39

Kiireim tee, tasuta Ajax Add to Cart for WooCommerce pistikprogramm. Paigaldub minutiga, ei vaja seadistamist, töötab kohe pärast aktiveerimist.

Pistikprogramm käsitleb AJAX-lisamist lihtsate ja muutuvate toodete jaoks igal lehel: toote-, arhiivi-, kategoorialehel. Mini-ostukorv uueneb automaatselt. WordPress.org andmetel on sellel 10 000+ aktiivset paigaldust, hinne 4,7/5, ühildub WordPress 7.0+ ja uuemate WooCommerce'i versioonidega. Uuendatakse regulaarselt: viimane väljalase 2.6.5 tuli välja juunis 2026.

Paigaldamine:

  • Mine WordPressi administraatoriliidesesse → Plugins → Add New
  • Otsi „Ajax add to cart for WooCommerce"
  • Klõpsa „Install", seejärel „Activate"

See ongi kõik. Mine ükskõik millisele tootelehele ja klõpsa „Lisa ostukorvi": lehte uuesti ei laadita, toode on lisatud. Pistikprogramm ei vaja lisaseadeid. Kui sul on vaja AJAX teatud lehtedel keelata, on pistikprogrammi seadetes vastav filter.

Alternatiiv, FunnelKit Cart (samuti tasuta). Lisaks AJAX-põhisele ostukorvile pakub see väljalibisevat ostukorvi külgpaneeli ja selle sees lisamüügivõimalusi. See on veidi raskem, kuid keskmisele ostusummale keskendunud poodide jaoks on see õigustatud.

2. Meetod: sisseehitatud WooCommerce'i seadistus

clipboard 2026 07 31T19 38 09

WooCommerce suudab AJAX-põhist ostukorvi pakkuda kohe kasutusvalmilt, kuid kahe piiranguga. See töötab ainult arhiivilehtedel (pood, kategooriad, sildid) ega toeta muutuvaid tooteid. Toote üksiklehel jääb lehe uuesti laadimine alles.

Kui su pood müüb ainult lihtsaid tooteid ja ostjad lisavad neid ostukorvi poe vaateväljalt, on see piisav. Lubatakse ühe märkeruuduga:

  • Admin → WooCommerce → Settings → Products → General
  • Plokis „Add to cart behaviour" märgi linnuke „Enable AJAX add to cart buttons on archives"
  • Salvesta

Valmis. Poelehel ja kategoorialehtedel töötab nupp „Lisa ostukorvi" nüüd ilma lehe uuesti laadimiseta. Kuid külasta toote üksiklehte ja seal on ikka sama: täielik uuesti laadimise tsükkel. Enamiku poodide jaoks sellest ei piisa, nii et liigume edasi kolmanda meetodi juurde.

3. Meetod: PHP ja JavaScript alamteemas

must sülearvuti laual sisse lülitatud

Täielik kontroll AJAX-põhise ostukorvi üle tuleb kohandatud koodist. Sina otsustad, millistel lehtedel AJAX töötab, kuidas vigu käsitletakse ja mida ostja pärast toote lisamist näeb.

Kirjutame töötleja kaasaegsele wc-ajax lõpp-punktile; see mängib hästi kokku vahemälu pistikprogrammidega (WP Rocket, LiteSpeed Cache välistavad ?wc-ajax= vaikimisi vahemälust), erinevalt vanast admin-ajax.php-st, mis käitub vahemällu salvestatud saitidel sageli ettearvamatult.

3.1 Alamteema

Kood paigutatakse alamteemasse: see on kindlustus muudatuste kaotamise vastu, kui põhiteema uueneb. Kui sul veel alamteemat pole, loo see või kasuta pistikprogrammi nagu Code Snippets; see võimaldab lisada PHP koodi ilma teemafaile muutmata.

Miks alamteema on kohustuslik: järgmine kord, kui põhiteema uueneb, kirjutatakse kõik sinu muudatused failides functions.php ja JS-failides üle. Alamteema elab eraldi ja uuendused seda ei puuduta.

3.2 JavaScripti kaasamine

Alamteema functions.php failis registreerime ja lokaliseerime skripti:

1function sd_ajax_add_to_cart_script() {
2    if (is_admin()) {
3        return;
4    }
5 
6    wp_register_script(
7        'sd-ajax-add-to-cart',
8        get_stylesheet_directory_uri() . '/js/ajax-add-to-cart.js',
9        array('jquery', 'wc-add-to-cart'),
10        '1.0',
11        true
12    );
13    wp_enqueue_script('sd-ajax-add-to-cart');
14 
15    wp_localize_script('sd-ajax-add-to-cart', 'sdAjaxCart', array(
16        'wc_ajax_url' => WC_AJAX::get_endpoint('sd_ajax_add_to_cart'),
17        'nonce'       => wp_create_nonce('sd_ajax_cart_nonce'),
18    ));
19}
20add_action('wp_enqueue_scripts', 'sd_ajax_add_to_cart_script');

Analüüs. wp_register_script registreerib meie tulevase JS-faili sõltuvustega jQuery'st ja sisseehitatud wc-add-to-cart-ist. wp_localize_script edastab JavaScriptile kaks võtmeparameetrit: wc-ajax lõpp-punkti URL-i ja nonce-võtme CSRF-kaitseks. Nonce on krüptograafiline allkiri, mida server päringu töötlemisel kontrollib: ilma selleta võiks iga väline sait sinu ostukorvi torkida.

3.3 JavaScripti töötleja

Loo alamteema juurkausta js kaust ja sinna fail ajax-add-to-cart.js:

1jQuery(function ($) {
2    $('form.cart').on('submit', function (e) {
3        var $form = $(this);
4        var $button = $form.find('.single_add_to_cart_button');
5 
6        if (!$button.length || $button.hasClass('disabled')) {
7            return;
8        }
9 
10        e.preventDefault();
11 
12        var data = {
13            product_id: $form.find('input[name=product_id]').val() || $button.val(),
14            quantity: $form.find('input[name=quantity]').val() || 1,
15            variation_id: $form.find('input[name=variation_id]').val() || 0,
16        };
17 
18        $button.removeClass('added').addClass('loading');
19 
20        $.ajax({
21            type: 'POST',
22            url: sdAjaxCart.wc_ajax_url,
23            data: $.param(data) + '&nonce=' + sdAjaxCart.nonce,
24            success: function (response) {
25                if (response && response.error) {
26                    window.location = response.product_url;
27                    return;
28                }
29                $(document.body).trigger('added_to_cart', [
30                    response.fragments,
31                    response.cart_hash,
32                    $button,
33                ]);
34            },
35            complete: function () {
36                $button.addClass('added').removeClass('loading');
37            },
38        });
39    });
40});

Peamine erinevus vananenud õpetustest: me kasutame sdAjaxCart.wc_ajax_url (wc-ajax lõpp-punkti) wc_add_to_cart_params.ajax_url (vana admin-ajax.php) asemel. wc-ajax on vahemälu pistikprogrammide poolt automaatselt välistatud ega vaja eraldi wp_ajax_nopriv_ konksu; WooCommerce ise käsitleb nii autenditud kui ka autentimata kasutajaid.

3.4 PHP töötleja

Lisa alamteema functions.php faili kohe pärast esimest plokki järgmine:

1function sd_ajax_add_to_cart_handler() {
2    if (!wp_verify_nonce($_POST['nonce'], 'sd_ajax_cart_nonce')) {
3        wp_send_json_error(array('message' => 'Security error'), 403);
4    }
5 
6    $product_id = apply_filters(
7        'sd_ajax_add_to_cart_product_id',
8        absint($_POST['product_id'])
9    );
10    $quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
11    $variation_id = absint($_POST['variation_id']);
12 
13    $passed = apply_filters(
14        'sd_ajax_add_to_cart_validation',
15        true,
16        $product_id,
17        $quantity
18    );
19 
20    $product_status = get_post_status($product_id);
21 
22    if ($passed && 'publish' === $product_status
23        && WC()->cart->add_to_cart($product_id, $quantity, $variation_id)
24    ) {
25        do_action('sd_ajax_added_to_cart', $product_id);
26 
27        if ('yes' === get_option('woocommerce_cart_redirect_after_add')) {
28            wc_add_to_cart_message(array($product_id => $quantity), true);
29        }
30 
31        WC_AJAX::get_refreshed_fragments();
32    } else {
33        wp_send_json(array(
34            'error'       => true,
35            'product_url' => apply_filters(
36                'sd_ajax_cart_redirect_after_error',
37                get_permalink($product_id),
38                $product_id
39            ),
40        ));
41    }
42 
43    wp_die();
44}
45add_action('wc_ajax_sd_ajax_add_to_cart', 'sd_ajax_add_to_cart_handler');

Töötleja teeb kolme asja. See kontrollib nonce'i: kui päring tuli väliselt saidilt, tagastab see kohe 403. See lisab toote ostukorvi WC()->cart->add_to_cart() kaudu, mis on standardne WooCommerce'i meetod, mis tegeleb ise laoseisu, variatsioonide ja valideerimisega. See kutsub välja WC_AJAX::get_refreshed_fragments(); see meetod tagastab mini-ostukorvi uuendatud HTML-fragmendid, mille meie JavaScript üles korjab.

Konks wc_ajax_sd_ajax_add_to_cart on wc-ajax lõpp-punkt, mida WooCommerce töötleb enamikust vahemälu pistikprogrammidest mööda minnes. Pole vaja wp_ajax_ / wp_ajax_nopriv_ konksusid: wc-ajax teab ise, kas kasutaja on sisse logitud või mitte.

Levinud vead AJAX-põhise ostukorvi juurutamisel

AJAX-põhine ostukorv puruneb etteaimatavalt; peaaegu alati on süüdi kolm asja. Siin on, mida esmalt kontrollida.

Konflikt vahemälu pistikprogrammidega. Kui mini-ostukorv ei uuene või uueneb viivitusega, salvestas vahemälu pistikprogramm AJAX-vastuse vahemällu. Lahendus: kasuta wc-ajax lõpp-punkti (see on automaatselt vahemälust välistatud) ja veendu, et WP Rocket / LiteSpeed Cache ei minifitseeriks ostukorvi sisestatud JS-i. Vahemälu seadetest otsi üles „Delay JavaScript" direktiiv ja lisa /wc-ajax= välistuste hulka.

Teema ei toeta WooCommerce'i fragmente. Mõned teemad kohandavad mini-ostukorvi nii, et standardsed WooCommerce'i selektorid lakkavad töötamast. Sümptom: AJAX töötab, toode on ostukorvis, kuid päises olev loendur ei uuene. Parandatakse selektorite asendamisega woocommerce_add_to_cart_fragments filtri kaudu.

Mobiilse nupu paigutus. Puutetundlikel seadmetel käivitub click sündmus teisiti kui lauaarvutil, mõnikord 300 ms viivitusega või topeltkäivitusena. Kui mobiilis lisatakse toode kaks korda, mähkige töötleja $button.hasClass('disabled') lipu kontrolli, nagu ülaltoodud koodis.

⁉️🤔 Korduma kippuvad küsimused

Kas AJAX-põhine ostukorv töötab muutuvate toodetega?

Jah. Nii Ajax Add to Cart for WooCommerce pistikprogramm kui ka 3. meetodi kohandatud kood käsitlevad muutuvaid tooteid õigesti. Variatsioon edastatakse päringu kehas variation_id kaudu ja WooCommerce asendab õige hinna ja atribuudid. Ainus tingimus: kõik nõutavad variatsiooniatribuudid peavad olema enne nupule klõpsamist valitud.

Kas pärast AJAX-põhise ostukorvi lubamist pean vahemälu tühjendama?

Absoluutselt. Tühjenda saidi vahemälu (vahemälu pistikprogramm → purge all), CDN-i vahemälu, kui seda kasutatakse, ja brauseri vahemälu. AJAX-vastused võidakse vahemällu salvestada juba esimese päringuga ja mini-ostukorv lakkab uuenemast. Tootmissaidil pärast AJAX-i lubamist läbi terve tsükkel: lisa toode → kontrolli loendurit → ava ostukorv → veendu, et toode on seal.

Kas ma võin wc-ajax asemel kasutada vana admin-ajax.php-d?

Tehniliselt jah, kuid sa ei peaks seda tegema. admin-ajax.php nõuab kahte konksu (wp_ajax_ autenditud kasutajatele ja wp_ajax_nopriv_ külalistele) ning vahemälu pistikprogrammid blokeerivad või salvestavad selle lõpp-punkti sageli vahemällu. wc-ajax on kaasaegne WooCommerce'i standard; see on usaldusväärsem ja lihtsamini seadistatav. Kui teisaldad koodi vanast õpetusest, mis kasutab admin-ajax.php-d, asenda see wc-ajax-iga.

Mis siis, kui ostukorvi loendur ei uuene pärast AJAX-lisamist?

Tõenäoliselt kasutab teema mittestandardset mini-ostukorvi märgendust. WooCommerce uuendab fragmente woocommerce_add_to_cart_fragments filtri poolt registreeritud selektorite kaudu. Kontrolli teema functions.php failist seda filtrit ja võrdle selektoreid tegeliku mini-ostukorvi märgendusega brauseri inspektoris. Kui selektorid ei ühti, paranda need filtris ja loendur hakkab tööle.

Kokkuvõte

AJAX-põhine ostukorv ei ole kaunistus; see on otsene konversioonihoob. Minut pistikprogrammi paigaldamiseks või tund kohandatud koodi jaoks tasub end ära madalama ostukorvi hülgamise määra ja rohkemate lõpule viidud ostude kaudu. Vali oma vajadustele sobiv meetod:

  • Pole aega ja vajad tulemusi kohe: paigalda Ajax Add to Cart for WooCommerce, aktiveeri see ja mine testi oma poodi.
  • Müüd ainult lihtsaid tooteid poe vaateväljalt: luba sisseehitatud WooCommerce'i seadistus.
  • Vajad täielikku kontrolli ja usaldusväärsust vahemällu salvestatud saidil: vali 3. meetod, kasutades wc-ajax lõpp-punkti ja nonce-kontrolli.

Kui su pood töötab plokiteemal või kasutab tootelehel WooCommerce Blocks'e, kontrolli ühilduvust: plokid renderdavad nupu „Lisa ostukorvi" Reacti kaudu ja standardsed jQuery töötlejad ei pruugi külge haakuda. Sellistel juhtudel on pistikprogramm usaldusväärsem.

Toimetus
ToimetusToimetuse meeskond→ Kõik publikatsioonid

Professionaalne kirjanike ja toimetajate meeskond, kes on spetsialiseerunud kvaliteetse sisu loomisele.