Tulostaa lomakkeen alennuskoodin syöttämistä varten.

Kuvaus

Mikäli kävijä on jo syöttänyt alennuskoodin, tagi tulostaa esikatselun syötetystä koodista ja painikkeen, jolla koodin voi poistaa.

Jos haluat tulostaa pelkän syötetyn alennuskoodin, käytä {CartCouponCode}-tagia.

notifications-attribuutin avulla on mahdollista asettaa tagi tulostamaan myös kaikki ilmoitukset ryhmästä Coupon.

Syntaksi

{CampaignCode(
    action: string,
    ajax: boolean,
    mode: string,
    notifications: boolean
)}

Näkyvyys

Toimii näkyvyydessä: globaali

Globaalin näkyvyyden tageja on mahdollista käyttää missä tahansa sivupohjassa ja minkä tahansa tagin sisällä.

Alennuskoodilomakkeen toteuttaminen teemassa

Tässä ohjeessa käydään läpi erilaiset tavat toteuttaa alennuskoodin syötekenttä omassa kaupan teemassa.

Alennuskoodin syöttämiseen tarvittavat työkalut tulostetaan {CampaignCode}-tagin avulla. Tagilla on mahdollista tulostaa tarpeen mukaan joko alennuskoodin syötekenttä tai esikatselu jo syötetystä koodista ja koodin poistopainike. Kun tagin mode-attribuutin arvoksi asetetaan 'auto', tulostuva sisältö valikoituu automaattisesti tilanteen mukaan.

{CampaignCode}-tagia on mahdollista käyttää missä tahansa teeman näkymässä, mutta useimmiten sitä käytetään ostoskorissa.

Alennuskoodilomakkeen lähettäminen JavaScriptillä palvelimelle

{CampaignCode}-tagilla on käytössään ajax-attribuutti, jonka avulla tagi voidaan asettaa palauttamaan vain tuottamansa sisältö, mikä on hyödyllistä, kun tagia kutsutaan AJAX-pyynnöllä. Tämä mahdollistaa siis alennuskoodilomakkeen lähettämisen palvelimelle, ilman että sivua täytyy ladata uudestaan.

Seuraavalla Interface-merkkauksella saat luotua lähtökohdan asynkronisen alennuskoodilomakkeen luonnille:

<div id="CampaignCodeFormContainer">
{CampaignCode(
    ajax: true
)}
</div>

Tagin mode-attribuutille jätetään oletusarvo 'auto', jolloin tagi tulostaa tarpeen mukaan joko alennuskoodin syötelomakkeen tai syötetyn koodin esikatselun.

Seuraavalla JavaScript-koodilla voit lähettää syötetyn koodin verkkokaupan palvelimelle. Esimerkissä käytetään jQueryn ajax()-funktiota:

function submitCampaignCode() {
  $.ajax({
    type: "POST",
    url: "/cart",
    data: $("#CampaignCodeFormContainer>form").serialize(),
    success: function(response) {
      reloadCampaignCodeForm();
    }
  });
}

Funktio liitetään kampanjakoodilomakkeen lähetyspainikkeeseen on()-funktion avulla:

$("#CampaignCodeFormContainer>form button").on("click", function(event) {
  event.preventDefault();
  submitCampaignCode();
});

Huomaa että lomakkeen automaattinen lähetys painikkeen painamisen yhteydessä estetään käyttämällä preventDefault()-funktiota.

Kampanjakoodin lähetysfunktiossa käytetään kutsun onnistuessa reloadCampaignCodeForm()-funktiota, joka saa kampanjakoodilomakkeen latautumaan uudelleen lähetyksen onnistuessa:

function reloadCampaignCodeForm() {
  $("#CampaignCodeFormContainer").empty();
  $.ajax({
    type: "GET",
    url: "/interface/CampaignCode?mode=auto&ajax=true",
    success: function(response) {
      $("#CampaignCodeFormContainer").html(response);
    }
  });
}

Kun alennuskoodi on syötetty, ei kannata enää näyttää asiakkaille avointa syötelomaketta, koska useampaa alennuskoodia ei ole mahdollista syöttää kerralla. Lataamalla lomakkeen uudestaan attribuutilla mode: 'auto' voit näyttää heti lähetyksen jälkeen syötetyn alennuskoodin esikatselun, jotta asiakkaalle tulee varmasti selväksi, että koodi on käytössä.

Jos samalla sivulla alennuskoodilomakkeen kanssa on tuotelista, voit myös ladata listan uudestaan AJAX-kutsulla:

function getCampaignProducts(targetElement) {
  $.ajax({
    type: "GET",
    url: "/interface/Products?campaign=n",
    success: function(response) {
      $(targetElement).html(response);
    }
  });
}

Esimerkissä kampanja asetetaan {Products}-tagin campaign-attribuutilla. Haetut tuotteet tulostetaan elementtiin, joka valitaan targetElement-valitsimen avulla.

Attribuutit

action:

Asettaa kohteen alennuskoodin syötelomakkeelle.

Kun lomake lähetetään normaalin sivupyynnön mukana (ei JavaScriptillä), action-attribuutin arvon perusteella valitaan myös paluuosoite lomakkeen käsittelyn jälkeen.

Sallitut arvot:

  • 'cart': tiedot lähetetään osoitteeseen /cart/ (oletusarvo)
  • 'checkout': tiedot lähetetään osoitteeseen /checkout/

Esim. action:'checkout'

ajax:

Asettaa tagin palauttamaan joko koko sivun tai vain tuottamansa sisällön vastauksena AJAX-pyyntöön, kun lomake lähetetään JavaScriptin avulla.

Sallitut arvot:

  • true: Palautetaan vain tagin tuottama sisältö.
  • false: Palautetaan koko sivu (oletusarvo).
mode:

Määrittää tulostettavan sisällön.

Sallitut arvot:

  • 'form': tulostetaan alennuskoodin syötekenttä
  • 'preview': tulostetaan esikatselu jo syötetystä alennuskoodista ja alennuskoodin poistopainike
  • 'auto' (oletusarvo): tulostetaan tilanteen mukaan joko lomake tai esikatselu ja poistopainike (suositellaan useimmissa tapauksissa)

Esim. mode:'form'

notifications:

Määrittää, tulostuvatko sisällön mukana myös ilmoitukset ryhmästä Coupon.

Sallitut arvot: true/false. Oletusarvo true.

after/before:

after- ja before-attribuuteilla voit määrittää sisällön, joka tulostuu ennen tagin tuottamaa sisältöä tai sen jälkeen.

Sallitut arvot: HTML- ja Interface-merkkaus

Esim.:

  • before: '<p>Tämä merkkaus näkyy ennen tagin omaa sisältöä.</p>'
  • after: '<p>Tämä taas näkyy tagin oman sisällön jälkeen.</p>'

Mikäli tagi ei tuota mitään sisältöä, myöskään after- ja before-attribuuttien sisältö ei tulostu.

escape:

Asettaa tulostuvassa sisällössä pakomerkin ennen lainausmerkkejä.

Attribuutin tarkoitus on helpottaa tagin palauttaman sisällön käyttämistä JavaScriptin avulla.

Sallitut arvot: true/false. Oletusarvo false.

or:

Määrittää vaihtoehtoisen sisällön, joka näkyy mikäli tagi ei itse tuota mitään sisältöä.

Sallitut arvot: HTML- ja Interface-merkkaus

Esim. or: 'Sisältöä ei löytynyt.'