Výběr místa vyzvednutí - Zásilkovna, DPD, PPL - Profesionální tvorba webových stránek

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>

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

Zásilkovna

Trochu popisu ke scriptu.

DPD

PPL