Maksunvälittäjän bannerin lisääminen

Kehittäjille › Koodausohjeet › Maksunvälittäjän bannerin lisääminen

Taustaa

Verkkokaupan asiakas näkee maksunvälittäjän maksutapabanneria katsomalla, millä maksutavoilla hän voi maksaa ostoksensa. Tässä malliesimerkissä vaakamallinen banneri sijoitetaan verkkokaupan sivujen loppuun ja bannerista tehdään linkki ostoskorisivulle.

Sivun loppuosa on erinomainen paikka bannerille, koska verkkokaupan asiakas näkee bannerin silloin tällöin, mutta ei häiritsevän usein.

Tarvittavat ohjelmistot

Tässä työssä tarvitaan

• verkkoselain (esim. Chrome)

Toteutusohjeet

• Kirjaudu verkkokaupan hallintaliittymään (demo).
• Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
• Klikkaa Lisää uusi -painiketta.
• Valitse tyypiksi "HTML5".
• Syötä nimeksi "Maksutapabanneri" tai mitä tahansa.
• Valitse Sivu-kohdasta [ei merkitystä].
• Valitse Sijainti-kohdasta "end of #bottom_around jalkeen".
• Lisää Koodi-kohtaan (korvaa bannerin verkko-osoite oikealla):
  

  <div class="oma_maksutapabanneri">
  <a href="shopping_cart.php"><img src="https://www.example.com/banneri.jpg" alt="Maksutavat" /></a>
  </div>
  

• Klikkaa Tallenna-painiketta.
• Klikkaa Lisää uusi -painiketta.
• Valitse tyypiksi "CSS3".
• Syötä nimeksi "Maksutapabanneri" tai mitä tahansa.
• Valitse Sivu-kohdasta [ei merkitystä].
• Lisää Koodi-kohtaan:
  

  @media (max-width: 1099px) {
    div.oma_maksutapabanneri {
      margin: 15px;
      text-align: center;
    }
    div.oma_maksutapabanneri img {
      max-width: 100%;
    }
  }
  @media (min-width: 1100px) {
    div.oma_maksutapabanneri {
      width: 100%;
      margin: 15px auto 15px auto;
      text-align: center;
    }
  }
  

• Klikkaa Tallenna-painiketta.

Vastuunrajoitus

Näillä ohjeilla ja koodiesimerkeillä ei ole minkäänlaista toimivuustakuuta. Emme vastaa välittömistä, välillisistä, satunnaisista tai epäsuorista vahingoista, menetyksistä, korvauksista, tai kolmannen osapuolen esittämistä vaatimuksista, jotka johtuvat näiden ohjeiden tai koodiesimerkkien noudattamisesta.