Website zoek formulier van externe site

Status
Niet open voor verdere reacties.
@bron, je bent een held! Het werkt :thumb: :)

Ik dacht al dat het met de classes te maken had en had thumb al toegvoegd maar wist niet dat ik volledige "pad" moest toevoegen.

Nog 1 klein dingetje, bij bijv 40 resultaten komt het allemaal onder elkaar te staan. Is dat te pagineren? Je hoeft het niet precies te vertellen maar een hint zou fijn zijn :)
 
Dit conceptje heb ik niet getest, probeer het eerst uit in een klein testbestand.
Code: 
<div id="prodPage1" class="prodPage show">
  product 1-10
</div>
<div id="prodPage2" class="prodPage">
  product 11-20
</div>
<div id="prodPage3" class="prodPage">
  product 21-30
</div>

<div id="prodPageNav">
  <a href="#" data-target="#prodPage1"> [1] </a>
  <a href="#" data-target="#prodPage2"> [2] </a>
  <a href="#" data-target="#prodPage3"> [3] </a>
</div>

var i, prodPageBtns = document.querySelectorAll("#prodPageNav a");
for (i = 0; i < prodPageBtns.length; i++) {
  prodPageBtns[i].addEventListener("click", function(event) {
    event.preventDefault();
    var dt, target = this.getAttribute("data-target");
    for (dt = 0; dt < prodPageBtns.length; dt++) prodPageBtns[i].classList.remove("show");
    document.querySelector(target).classList.add("show");
  });
}

.prodPage { display: none; }
.prodPage.show { display: block; }
 
@bron, ik weet nog niet hoe ik dit de vorige code moet implementeren, maar ik heb er een standaard html bestand van gemaakt om de code te testn.
Gaat nog niet zoals hoort lijkt me. Klikken op 2 of 3 geeft geen inhoud van 2 of 3 weer.

PHP: 
<!DOCTYPE html>
<html>
    <style type="text/css">
        .prodPage { display: none; }
        .prodPage.show { display: block; }
    </style>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>titel</title>
        <meta name="description" content="test">
    </head>
    <body>
        
        <div id="prodPage1" class="prodPage show">
          product 1-10
        </div>
        <div id="prodPage2" class="prodPage">
          product 11-20
        </div>
        <div id="prodPage3" class="prodPage">
          product 21-30
        </div>

        <div id="prodPageNav">
          <a href="#" data-target="#prodPage1"> [1] </a>
          <a href="#" data-target="#prodPage2"> [2] </a>
          <a href="#" data-target="#prodPage3"> [3] </a>
        </div>

        <script>
        var i, prodPageBtns = document.querySelectorAll("#prodPageNav a");
        for (i = 0; i < prodPageBtns.length; i++) {
          prodPageBtns[i].addEventListener("click", function(event) {
            event.preventDefault();
            var dt, target = this.getAttribute("data-target");
            for (dt = 0; dt < prodPageBtns.length; dt++) prodPageBtns[i].classList.remove("show");
            document.querySelector(target).classList.add("show");
          });
        }
        </script>

    </body>
</html>
 
Laatst bewerkt:
Het was hierboven even snel-snel. Deze snippet heb ik wel getest.
PHP: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
.prodPage { display: none; }
.prodPage.show { display: block; }
</style>
</head>
<body>

<div id="prodPage1" class="prodPage show">
	product 1-10
</div>
<div id="prodPage2" class="prodPage">
	product 11-20
</div>
<div id="prodPage3" class="prodPage">
	product 21-30
</div>

<div id="prodPageNav">
	<a href="#" data-target="#prodPage1"> [Page 1] </a>
	<a href="#" data-target="#prodPage2"> [Page 2] </a>
	<a href="#" data-target="#prodPage3"> [Page 3] </a>
</div>

<script>
var i, prodPageBtns = document.querySelectorAll("#prodPageNav a");
for (i = 0; i < prodPageBtns.length; i++) {
	prodPageBtns[i].addEventListener("click", function(event) {
		event.preventDefault();
		var j, pages = document.querySelectorAll(".prodPage");
		for (j = 0; j < pages.length; j++) pages[j].classList.remove("show");
		document.querySelector( this.getAttribute("data-target") ).classList.add("show");
	});
}
</script>

</body>
</html>
 
Laatst bewerkt:
Ja top @bron dat werkt.
Alleen weet ik niet precies hoe ik dat dan met de vorige code, de output (zie hieronder) kan implementeren.

PHP: 
    <div class="results">
        <?php
        $extFile = '';
        if (isset($_POST['query'])) {
            $url = 'https://shop.naam.nl/search/?easy=true&text=' . urlencode($_POST['query']);
            $extFile = file_get_contents($url);
        }
        // <= hier tekst in extFile wat uitkleden
        echo $extFile;
        ?>
    </div>
 
Je gebruikt toch Wordpress?
Dan kan je dit het beste in een add-on gieten...
https://codex.wordpress.org/Writing_a_Plugin

En met add_shortcode() kan je dan eenvoudig een shortcode aanmaken, zodat je dit op elke page kan gebruiken, zoals bijvoorbeeld: [get-url=http://www.example.org]
 
Laatst bewerkt:
Alleen weet ik niet precies hoe ik dat dan met de vorige code
Klik om te vergroten...
Haha, de glazen bol is erg mistig want ik zie hier niet wat er uit https://shop.naam.nl/search/?easy komt in het stukje hieronder.
Code: 
$url = 'https://shop.naam.nl/search/?easy=true&text=' . urlencode($_POST['query']);
$extFile = file_get_contents($url);
 
Ah ok @bron ik zal vandaag kijken of ik de mist kan laten optrekken, alleen als ik naar buiten nu kijk... ;-) Kom er nog op terug!

@PHP4U bedankt; misschien dat een plug-in kan maar het is een eenmalig iets; maar ga er even over nadenken.
 
damnsharp zei:
@PHP4U bedankt; misschien dat een plug-in kan maar het is een eenmalig iets; maar ga er even over nadenken.
Klik om te vergroten...
Je kan er mogelijk ook een functie in je theme van maken. Een functie of plug-in is wel de werkwijze als je Wordpress wilt uitbreiden.

Ik hoop dat niemand ooit de ideeën krijgt om de code van WordPress zelf aan te passen. :p
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan