Tulostaa lomakkeen, johon asiakas voi syöttää alennuskampanjan tai lahjakortin koodin.

Kuvaus

Tagi on käytettävissä missä tahansa teeman näkymässä, mutta useimmiten sitä käytetään ostoskorissa.

Tilanteesta riippuen tagi voi lomakkeen sijasta tulostaa syötetyn koodin esikatselun ja siihen liittyvän painikkeen, jolla koodin voi poistaa. Jos haluat tulostaa pelkän koodin, käytä {CartCouponCode}-tagia.

Tagin tulosteeseen on myös mahdollista sisällyttää kaikki ilmoitukset ryhmästä Coupon.

Syntaksi

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

Näkyvyys

Toimii näkyvyydessä: globaali

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

Alennuskoodilomakkeen lähettäminen JavaScriptillä palvelimelle

{CampaignCode}-tagin ajax-attribuutin avulla voit asettaa tagin palauttamaan vain tuottamansa sisällön, 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>

Jättämällä mode-attribuutille oletusarvon 'auto' tagi asetetaan tulostamaan tilanteen mukaan joko koodin syöttölomake tai syötetyn koodin esikatselu.

Seuraava JavaScript-koodi lähettää syötetyn koodin verkkokaupan palvelimelle. Esimerkki käyttää jQueryn ajax()-funktiota:

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

Funktio liittyy kampanjakoodilomakkeen lähetyspainikkeeseen on()-funktion avulla, ja preventDefault()-funktiota käyttämällä estät lomakkeen automaattisen lähetyksen painikkeen painamisen yhteydessä:

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

Kutsun onnistuessa reloadCampaignCodeForm()-funktio saa syöttölomakkeen latautumaan uudelleen:

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

Kun asiakas on syöttänyt alennuskoodin, hänelle ei kannata enää näyttää avointa syöttölomaketta, koska useampaa alennuskoodia ei ole mahdollista syöttää kerralla. Lataamalla heti lähetyksen jälkeen lomakkeen uudestaan käyttäen attribuuttia mode: 'auto' voit näyttää syötetyn koodin esikatselun, jotta asiakkaalle tulee varmasti selväksi, että koodi on käytössä.

Jos samalla sivulla syöttölomakkeen 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ä kampanjan asettaminen tapahtuu {Products}-tagin campaign-attribuutilla. Haetut tuotteet tulostuvat targetElement-valitsimen määrittämään elementtiin.

Attribuutit

action:

Asettaa kohteen koodin syöttölomakkeeseen.

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

Sallitut arvot:

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

Esim. action:'checkout'

ajax:

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

Sallitut arvot:

  • true: palauttaa vain tagin tuottaman sisällön
  • false (oletusarvo): palauttaa koko sivun
label:

Määrittää lomakkeen otsikon.

Sallitut arvot: merkkijono
mode:

Määrittää tulostuvan sisällön tyypin.

Sallitut arvot:

  • 'form': tekstikenttä, johon asiakas voi syöttää koodin
  • 'preview': esikatselu jo syötetystä koodista sekä koodin poistopainike
  • 'auto' (oletusarvo): tilanteen mukaan joko lomake tai esikatselu ja poistopainike (suositeltava 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.

placeholder:

Määrittää täyttövinkin, joka näkyy lomakkeen tekstikentässä sen ollessa tyhjä.

Sallitut arvot: merkkijono
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.'