Richard Polák logo
Wiki
Úvodní stránka
Témata

Výběr místa vyzvednutí – Zásilkovna, DPD, PPL

Za prvé je třeba říci, že tohle není jediné ani nejlepší řešení. Ale je funkční.

Pro vložení potřebného kódu jsem využil filtr ‘woocommerce_cart_shipping_method_full_label‘, který přidá HTML k názvu dopravy. Obvykle ho používám ke vložení log jednotlivých dopravců – viz. níže. V tomto konkrétním případě je na webu 6 doprav – Zásilkovna, DPD a PPL pro ČR a pro SR.

add_filter('woocommerce_cart_shipping_method_full_label', 'filter_woocommerce_cart_shipping_method_full_label', 10, 2);

function filter_woocommerce_cart_shipping_method_full_label($label, $method) {
  if ($method->id == 'flat_rate:2') {
    $label = $label . '<br><img class="shipping-logo-img" src="https://insideu.cz/wp-content/uploads/2024/05/zasilkovna.png">';
  } else if ($method->id == 'flat_rate:4') {
    $label = $label . '<br><img class="shipping-logo-img" src="https://insideu.cz/wp-content/uploads/2024/05/zasilkovna.png">';
  } else if ($method->id == 'flat_rate:5') {
     $label = $label . '<br><img class="shipping-logo-img" src="https://insideu.cz/wp-content/uploads/2024/05/dpd.png">';
  } else if ($method->id == 'flat_rate:7') {
     $label = $label . '<br><img class="shipping-logo-img" src="https://insideu.cz/wp-content/uploads/2024/05/dpd.png">';
  } else if ($method->id == 'flat_rate:6') {
     $label = $label . '<br><img class="shipping-logo-img" src="https://insideu.cz/wp-content/uploads/2024/05/ppl.png">';
  } else if ($method->id == 'flat_rate:8') {
     $label = $label . '<br><img class="shipping-logo-img" src="https://insideu.cz/wp-content/uploads/2024/05/ppl.png">';
  }
  return $label;
}

Kód pro vložení jednotlivých doprav jsem vložil za jednotlivá loga.

    if ($method->id == 'flat_rate:2') {
        $label = $label . '<br><img class="shipping-logo-img" src="https://insideu.cz/wp-content/uploads/2024/05/zasilkovna.png">[TADY BUDE VLOŽENÝ KÓD]';
    }

Zásilkovna

Nejprve něco HTML. Je třeba vytvořit tlačítko, na které zákazník klikne, dále musíme někam vypsat vybrané místo – vypisuje se do div.packetaAddress. Do skrytého pole ‘.packetaAddressID‘ se pak vypisuje ID výdejního místa pro pozdější použití.

<br><div id="packetaButton" class="packetaButton">Vyberte místo vyzvednutí</div>
<div id="packetaAddress" class="packetaAddress"></div>
<input type="hidden" id="packetaAddressID" class="packetaAddressID">

Vše je samozřejmě potřeba nastylovat.

<style>
  #packetaButton {
    padding: 10px 12px;
    border-radius: 3px;
    border: 1px solid #cb0000;
    background-color: #ffffff;
    color: #cd0000;
    display: inline-block;
  }
  #packetaButton:hover {
    cursor: pointer;
    color: #ffffff;
    background-color: #cd0000;
  }
  #packetaAddress {
    margin: 5px 0;
    font-weight: 400;
  }
</style>

A nakonec script, který zajistí, aby to celé fungovalo. API key získáte v klientské sekci Zásilkovny.

<script>
  var packetaSelectorOpen = "#packetaButton";
  var packetaSelectorBranchName = "#packetaAddress";
  var packetaSelectorBranchId = "#packetaAddressID";
  var packetaCountry = "cz";
  var packetaWidgetLanguage = "cs";
  var packetaPrimaryButtonColor = "#39b54a";
  var packetaBackgroundColor = "#ffffff";
  var packetaFontColor = "#555555";
  var packetaFontFamily = "Arial";
</script>
<script src="https://widget.packeta.com/v6/www/js/packetaWidget.js" data-api-key="[váš API key]"></script>

Trochu popisu ke scriptu.

var packetaSelectorOpen = "#packetaButton";

tady určujeme, který html prvek má sloužit, jako tlačítko.

  var packetaSelectorBranchName = "#packetaAddress";

v jakém html prvku se bude zobrazovat adresa výdejního místa

  var packetaSelectorBranchId = "#packetaAddressID";

kam se uloží ID výdejního místa

  var packetaCountry = "cz";
  var packetaWidgetLanguage = "cs";

packetaCountry určuje omezení výdejních míst na danou zemi, zde se zobrazí pouze výdejní místa v ČR
packetaWidgetLanguege určuje jazyk widgetu

DPD

Podobně jako Zásilkovnu vložíme i kód pro DPD. Zatímco Zásilkovna se o vše postará sama, u DPD si musíme vytvořit vlastní modální okno a jeho ovládání.

<div id="dpdButton">Místo vyzvednutí</div>
<div id="dpdAddress" class="dpdAddress"></div>
<input type="hidden" id="dpdAddressID" class="pplAddressID">
<div class="dpd-modal-overlay"></div>
<div class="dpd-modal-box">
  <div id="dpd-parcelshop-map">
    <iframe src="https://api.dpd.cz/widget/latest/index.html?countries=CZ"></iframe>
  </div>
</div>

Opět zde máme tlačítko .dpdButton pro výběr (otevření modálního okna). Div .dpdAddress, kam se vypíše adresa výdejního místa. A skrytý input .dpdAddressID pro uložení ID výdejního místa.

A opět musíme vše nastylovat.

<style>
  .shipping-logo-img {
    height: 20px;
    width: auto;
  }

  #dpdButton,
  #dpd-close-modal-button {
    padding: 10px 12px;
    border-radius: 3px;
    border: 1px solid #dc0031;
    background-color: #ffffff;
    color: #dc0031;
    display: inline-block;
  }

  #dpdButton:hover,
  #dpd-close-modal-button:hover {
    cursor: pointer;
    color: #ffffff;
    background-color: #dc0031;
  }

  .dpd-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 995;
  }

  .dpd-modal-box {
    position: fixed;
    left: 10vw;
    top: 10vh;
    margin: 0 auto;
    height: 80vh;
    width: 80vw;
    display: none;
    z-index: 996;
    background-color: #fff;
  }

  #dpd-close-modal-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
  }

  .dpd-parcelshop-map {
    height: 100%;
    width: 100%;
  }

  #dpdAddress {
    margin: 5px 0;
    font-weight: 400;
  }

  iframe {
    display: relative;
    width: 100%;
    height: 80vh;
    border: none;
  }
</style>

A nakonec opět script, u DPD nepotřebujete žádný API key.

<script>
  var dpdModalButton = document.querySelector("#dpdButton");
  var dpdModalOverlay = document.querySelector(".dpd-modal-overlay");
  var dpdModalBox = document.querySelector(".dpd-modal-box");
  var dpdCloseButton = document.querySelector("#dpd-close-modal-button");
  var dpdResultAddressInput = document.querySelector("#dpdAddress");
  var dpdResultIDInput = document.querySelector("#dpdAddressID");
    
  dpdModalButton.addEventListener("click", function () {
    dpdModalOverlay.style.display = "block";
    dpdModalBox.style.display = "block";
  });
    
  window.addEventListener("message", (event) => {
    if (event.data.dpdWidget) {
      dpdResultIDInput.value = event.data.dpdWidget.id
      dpdResultAddressInput.innerHTML = event.data.dpdWidget.pickupPointResult;
      dpdModalOverlay.style.display = "none";
      dpdModalBox.style.display = "none";
    }
  }, false);
    
  window.addEventListener("message", (event) => {
    if (event.data.dpdWidget && event.data.dpdWidget.message === "widgetClose") {
      dpdModalOverlay.style.display = "none";
      dpdModalBox.style.display = "none";
    }
  }, false);
</script>

PPL

<div id="pplButton">Místo vyzvednutí</div>
<div id="pplAddress" class="pplAddress"></div>
<input type="hidden" id="pplAddressID" class="pplAddressID">
<div class="modal-overlay"></div>
<div class="ppl-modal-box">
  <div id="ppl-close-modal-button">Zavřít okno</div>
  <div id="ppl-parcelshop-map" data-country="cz"></div>
</div>
<style>
  #pplButton, #ppl-close-modal-button {
    padding: 10px 12px;
    border-radius: 3px;
    border: 1px solid #014b94;
    background-color: #ffffff;
    color: #014b94;
    display: inline-block;
  }

  #pplButton:hover, #ppl-close-modal-button:hover {
    cursor: pointer;
    color: #ffffff;
    background-color: #014b94;
  }

  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 995;
  }
  
  .ppl-modal-box {
    position: fixed;
    left: 10vw;
    top: 10vh;
    margin: 0 auto;
    height: 80vh;
    width: 80vw;
    display: none;
    z-index: 996;
  }
  
  #ppl-close-modal-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
  }
  
  .ppl-parcelshop-map {
    height: 100%;
    width: 100%;
  }
        
  #pplAddress {
    margin: 5px 0;
    font-weight: 400;
  }
</style>
<script>
  var modalOverlay = document.querySelector(".modal-overlay");
  var modalBox = document.querySelector(".ppl-modal-box");
  var closeButton = document.querySelector("#ppl-close-modal-button");
  var resultAddressInput = document.querySelector("#pplAddress");
  var resultIDInput = document.querySelector("#pplAddressID");
  var modalButton = document.querySelector("#pplButton");

  modalButton.addEventListener("click", function () {
    modalOverlay.style.display = "block";
    modalBox.style.display = "block";

    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "https://www.ppl.cz/sources/map/main.css";

    var script = document.createElement("script");
    script.src = "https://www.ppl.cz/sources/map/main.js";

    document.head.appendChild(link);
    document.head.appendChild(script);
  });

  closeButton.addEventListener("click", function () {
    modalOverlay.style.display = "none";
    modalBox.style.display = "none";
  });

  document.addEventListener( "ppl-parcelshop-map", (event) => {
    resultAddressInput.innerHTML = event.detail["name"] + ", " + event.detail["street"] + ", " + event.detail["city"];
    resultIDInput.value = event.detail["id"];
    modalOverlay.style.display = "none";
    modalBox.style.display = "none";
  } );
</script>

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

19 − seventeen =


uděluji souhlas se zpracováním mých osobních údajů (jméno, e-mail) za účelem odpovědi na můj dotaz, zaslaný prostřednictvím kontaktního formuláře umístěného na webových stránkách správce.

 

Souhlas

Udělením tohoto souhlasu se zpracováním osobních údajů poskytujete souhlas k tomu, aby Richard Polák, Příčná 593, 330 08 Zruč-Senec (dále jako „správce“) zpracovávala Vaše osobní údaje poskytnuté na základě tohoto souhlasu dle dále uvedených podmínek.

 

Rozsah zpracování Vašich osobních údajů

Správce bude na základě tohoto souhlasu zpracovávat Vaše jméno a e-mail, a to za dále uvedeným účelem.

 

Účel zpracování Vašich osobních údajů

Správce bude Vaše osobní údaje poskytnuté na základě tohoto souhlasu zpracovávat za účelem evidence a zpracování odpovědi na položený dotaz, zaslaný prostřednictvím kontaktního formuláře umístěného na webových stránkách správce.

 

Právní základ zpracování osobních údajů

Právním základem zpracování je tento Váš souhlas. Vaše Osobní údaje jsou zpracovávány v souladu s Obecným nařízením o ochraně osobních údajů – Nařízením Evropského parlamentu a rady (EU) 2016/679 ze dne 27.4.2016 – (dále jako „GDPR“).

 

Doba, po níž budou Vaše osobní údaje zpracovávány

Správce bude Vaše osobní údaje zpracovávat po dobu nezbytně nutnou, maximálně však 5 let ode dne odeslání formuláře, pokud tento souhlas neodvoláte dříve.

 

Odvolání souhlasu se zpracováním osobních údajů

Tento Váš dobrovolně udělený souhlas se zpracováním osobních údajů můžete kdykoli bezplatně odvolat, a to prostřednictvím zaslání e-mailu na adresu: mail@richardpolak.cz
Odvoláním souhlasu není dotčena zákonnost zpracování vycházejícího ze souhlasu, který byl dán před jeho odvoláním.

 

Osoby s přístupem k Vaším osobním údajům

K Vašim osobním údajům bude mít přístup správce.

 

Kontaktní údaje správce

Správce můžete kontaktovat na e-mailu: mail@richardpolak.cz či písemně na adrese provozovny správce (Richard Polák, Příčná 593, 330 08 Zruč-Senec, Česká republika). Správce je oprávněn požadovat prokázání Vaší totožnosti za účelem zamezení přístupu neoprávněným osobám k Vašim osobním údajům.

 

Vaše práva související s ochranou Vašich osobních údajů

Máte právo kdykoliv odvolat svůj souhlas, opravit či doplnit osobní údaje, požadovat omezení zpracování, vznést námitku či stížnost proti zpracování osobních údajů, požadovat přenesení údajů, přístupu ke svým osobním údajům, být informován o porušení zabezpečení osobních údajů, výmazu a další práva stanovená v GDPR.

 

Právo podat stížnost u dozorového úřadu

Kdykoliv můžete podat stížnost týkající se zpracování Vašich osobních údajů nebo neplnění povinností správce plynoucích z GDPR k dozorovému úřadu – Úřad pro ochranu osobních údajů, se sídlem Pplk. Sochora 27, 170 00 Praha 7, www.uoou.cz.

 

Povinnost poskytnout osobní údaje. Následky neposkytnutí osobních údajů

Vaše osobní údaje poskytujete zcela dobrovolně. Nemáte žádnou povinnost je poskytnout. V případě, že Vaše osobní údaje neposkytnete, nehrozí Vám žádná sankce.