This is my first question, so I will start with a useless bit. I want to say thank you, I've been a stack overflow lurker for a while now and a lot of contributors on different questions in jQuery and PHP have helped me without even knowing that they hepled me, so I want to start with a thank you to every contributor on stack overflow.
Currently I'm trying to program a simple compare tool for a website. In Holland people can pick there own electrical company that should supply them with power/gas. Because of the price difference people will try to find one that is the cheapest for them.
I'm combining a PHP array and using a 'for each' to produce HTML content. The array looks something like this:
<?php
$leverancierarray = array(
// Iedere array hieronder is één leverancier.
array (
'leverancier' => 'Nuon',
'korting_tekst' => '100 euro korting',
'korting_value' => 100,
'contract_duur' => '12 maanden', // Aantal maanden in tekst
'contract_duur_value' => 12, // Aantal maanden
'tarief_enkel_stroom' => 0.18, // In cent ipv euro's. Makkelijker om de komma te berekenen
'tarief_dubbel_stroom' => 0.21, // In cent ipv euro's. Makkelijker om de komma te berekenen
'tarief_piek_stroom' => 0.21, // In cent ipv euro's. Makkelijker om de komma te berekenen
'tarief_gas' => 0.60, // In cent ipv euro's. Makkelijker om de komma te berekenen
'tarief_vastrecht_stroom' => 1.05, // In euro's.
'tarief_vastrecht_gas' => 1.05, // In euro's.
'tarief_transport_stroom' => 350, // In euro's.
'tarief_transport_gas' => 124, // In euro's.
'heffingskorting' => 347, // heffingskorting.
),
array (
'leverancier' => 'Qurrent',
'korting_tekst' => '100 euro korting',
'korting_value' => 75,
'contract_duur' => '12 maanden', // In tekst
'contract_duur_value' => 12, // Aantal maanden
'tarief_enkel_stroom' => 0.19, // In cent ipv euro's. Makkelijker om de komma te berekenen
'tarief_dubbel_stroom' => 0.21, // In cent ipv euro's. Makkelijker om de komma te berekenen
'tarief_piek_stroom' => 0.21, // In cent ipv euro's. Makkelijker om de komma te berekenen
'tarief_gas' => 0.58, // In cent ipv euro's. Makkelijker om de komma te berekenen
'tarief_vastrecht_stroom' => 5.75, // In euro's.
'tarief_vastrecht_gas' => 5.75, // In euro's.
'tarief_transport_stroom' => 350, // In euro's.
'tarief_transport_gas' => 124, // In euro's.
'heffingskorting' => 347, // heffingskorting.
),
array (
'leverancier' => 'Oxxio',
'korting_tekst' => '100 euro korting',
'korting_value' => 80,
'contract_duur' => '12 maanden', // Aantal maanden in tekst
'contract_duur_value' => 12, // Aantal maanden
'tarief_enkel_stroom' => 0.20, // In cent ipv euro's. Makkelijker om de komma te berekenen
'tarief_dubbel_stroom' => 0.21, // In cent ipv euro's. Makkelijker om de komma te berekenen
'tarief_piek_stroom' => 0.21, // In cent ipv euro's. Makkelijker om de komma te berekenen
'tarief_gas' => 0.58, // In cent ipv euro's. Makkelijker om de komma te berekenen
'tarief_vastrecht_stroom' => 3.75, // In euro's.
'tarief_vastrecht_gas' => 3.75, // In euro's.
'tarief_transport_stroom' => 350, // In euro's.
'tarief_transport_gas' => 124, // In euro's.
'heffingskorting' => 347, // heffingskorting.
),
);
?>
While part of the page looks like this (Using Joomla CMS):
<div class="leverancier-container vergelijkbox" id="box-one">
<?php
foreach ($leverancierarray as $leverancierrow) {
$lowerleverancier = strtolower($leverancierrow['leverancier']);
$displayleverancier = ucwords($leverancierrow['leverancier']);
$totaal_stroom_kosten = (($leverancierrow['tarief_enkel_stroom']*3500)+($leverancierrow['tarief_vastrecht_stroom']*12));
$totaal_gas_kosten = (($leverancierrow['tarief_gas']*1600)+($leverancierrow['tarief_vastrecht_gas']*12));
$transport_kosten = ($leverancierrow['tarief_transport_stroom']+$leverancierrow['tarief_transport_gas']);
$heffingskorting = $leverancierrow['heffingskorting'];
$totaal_transport_kosten = ($transport_kosten-$heffingskorting);
$korting = $leverancierrow['korting_value'];
$jaarbedrag = ($totaal_stroom_kosten+$totaal_gas_kosten+$totaal_transport_kosten);
$totaal_jaarbedrag = str_replace('.',',',round(($jaarbedrag-$korting),0));
$maandbedrag = str_replace('.',',',round(($totaal_jaarbedrag/12),0));
echo '<div data-sort="'.$maandbedrag.'" class="leverancier-box" id="'.$lowerleverancier.'">
<div class="leverancier-logo">
<div><a href="/aanbieder/'.$lowerleverancier.'" target="_blank" rel="nofollow"><span class="logo_'.$lowerleverancier.'"></span></a></div>
</div>
<div class="leverancier-contract">
<div>
<h3>Contract</h3>
</div>
<div class="leverancier-voorwaarden">
<div>Duur: <span>'.$leverancierrow['contract_duur'].'</span></div>
<div>Actie: <span>'.$leverancierrow['korting_tekst'].'</span></div>
</div>
<div>
<div><a href="#">Bekijk de tarieven.</a></div>
</div>
</div>
<div class="leverancier-prijs">
<div>
<h3>Gemiddelde prijs</h3>
</div>
<div class="leverancier-voorwaarden">
<div class="prijs_div_homepage"><span class="prijs_groot_homepage">€ '.$maandbedrag.'</span> per maand</div>
</div>
<div>
<div><span>€ '.$totaal_jaarbedrag.'</span> per jaar</div>
</div>
</div>
<div class="leverancier-bestellen">
<div>
<div><a href="/aanbieder/'.$lowerleverancier.'" target="_blank" rel="nofollow"><span class="knop_3">Overstappen</span></a></div>
<div><a href="#">Meer informatie</a></div>
</div>
</div>
</div>';
}
?>
</div>
The for each will create 3 separate 'leverancier-box' divs that contain information from the array. I'm trying to make this as easy as possible for colleague's that will update the prices. They only have to change the 'tarief_enkel_stroom' etc so that the $maandbedrag value will update. Because the third provider in the array can be cheaper, I'm trying with jQuery to sort the divs based on the value of $maandbedrag.
I tried to sort the divs with data-sort="'.$maandbedrag.'" in the parent element. I tried to use this question as a reference but I could not make it work. I also tried to use this method, however I do not understand the code completely of both methods and I believe that is the biggest problem for solving this riddle.
Once again thank you looking at this problem, I hope someone can enlighten me on how I can solve the problem I'm facing.
PS: I presumed jQuery was the best approach to sort the 3 divs based on the value of $maandbedrag.
Kind regards,
Kevin.
Edit:
I've solved the problem using jQuery. I used this topic as guide.
