logo   OOP - Ajax - Lille indkøbskurv




Nedenfor er - i liniær form - vist flowet i opbygning af kode til vedligehold af "lille indkøbskurv" (i hjørnet af andre skærmbilleder).

En del af den viste kode udføres ikke liniært, men indlejret. Den er typisk vist efter det sted, hvor den skal bruges. Der må under læsning tages højde for denne situation.


PHP-programnavne med:
lille begyndelsesbogstav er HTML-programmer.
Stort begyndelsesbogstav er klasse-programmer.


basket_left.php       Vindue med lille indkøbskurv
Placeres i "_header"-delen af sitet.
Opdateres med "basket_small_refesh.php". Se nedenfor.
<?php $objBasket = new Basket(); ?>
<h2>Your Basket</h2>
<dl id="basket_left">
<dt>No. of items:</dt>
<dd class="bl_ti"><span><?php echo $objBasket->_number_of_items; ?></span></dd>
<dt>Sub-total:</dt>
<dd class="bl_st">£<span><?php echo number_format($objBasket->_sub_total, 2); ?></span></dd>
<dt>VAT (<span><?php echo $objBasket->_vat_rate; ?></span>%):</dt>
<dd class="bl_vat">£<span><?php echo number_format($objBasket->_vat, 2); ?></span></dd>
<dt>Total (inc):</dt>
<dd class="bl_total">£<span><?php echo number_format($objBasket->_total, 2); ?></span></dd>
</dl>
<div class="dev br_td"> </div>
<p><a href="/?page=basket">View Basket</a> | <a href="/?page=checkout">Checkout</a></p>
<div class="dev br_td"> </div>
_header.php      Indsæt lille indkøbskurv i _header
<div id="left">
<?php require_once('basket_left.php'); ?>
<?php if (!empty($cats)) { ?>
_footer.php      Links til javaScript programmer"
I stedet for at indsætte jquery-xxx.min.js kan der også etableres CDN-link dertil.
Se basket.js nederst på denne side.
<script src="/js/jquery-xxx.min.js" type="text/javascript"></script>
<script src="/js/basket.js" type="text/javascript"></script>
</body>
catalogue.php      Indsæt linket "activeButton()"
Toggler mellem "Remove from basket" og "Add to basket".
Linket til funktionen indsættes ved hver enkelt vare i kataloget og anvendes til at etablere "køb" af en vare eller annullere tidligere "køb" af varen.
<p><?php echo Basket::activeButton($row['id']); ?></p>
Basket.php Funktionen "activeButton()"
public static function activeButton($sess_id) {
   if(isset($_SESSION['basket'][$sess_id])) {
      $id = 0;
      $label = "Remove from basket";
      } else {
      $id = 1;
      $label = "Add to basket";
   }
   $out = "<a href=\"#\" class=\"add_to_basket";    //klasse i basket.js
   $out .= $id == 0 ? " red" : null;
   $out .= "\" rel=\"";
   $out .= $sess_id."_".$id;
   $out .= "\">{$label}</a>";
   return $out;
}
basket.js      Ajax: Henter data for vare selekteret med "add_to_basket".
Ved klik på "add_to_basket" hentesopsamles i nye data til kurven for den pågældende vare.Udtrukne data returneres til browser som json-fil med basket.js | refreshSmallBasket().
Startes fra Basket.php | activeButton
$(document).ready(function() {

    if ($(".add_to_basket").length > 0) {
       $(".add_to_basket").click(function() {
          var trigger = $(this);
          var param = trigger.attr("rel");
          var item = param.split("_");
          $.ajax({
             type: 'POST',
             url: '/mod/basket.php',   //se nedenfor
             dataType: 'json',
             data: ({ id : item[0], job : item[1] }),
             success: function(data) {
                var new_id = item[0] + '_' + data.job;   job se basket.php nedenfor.
                if (data.job != item[1]) {
                   if (data.job == 0) {
                      trigger.attr("rel", new_id);
                      trigger.text("Remove from basket");
                      trigger.addClass("red");
                   } else {
                      trigger.attr("rel", new_id);
                      trigger.text("Add to basket");
                      trigger.removeClass("red");
                   }
                   refreshSmallBasket();
                }
             },
             error: function(data) {
                alert("An error has occurred");
             }
          });
          return false;
       });
    }

basket.php      Behandler ajax-request fra "add_to_basket".
Læser json-fil fra basket.js.
Starter objCatalogue | getProduct($id).
Udfører Session::x funktion.
Uddata leveres son JSON-fil ($out) - javaScript array
Startes fra "add_to_basket"
<?php
require_once('../inc/autoload.php');

if (isset($_POST['job']) && isset($_POST['id'])) {

    $out = array();

    $job = $_POST['job'];
    $id = $_POST['id'];

    $objCatalogue = new Catalogue();
    $product = $objCatalogue->getProduct($id);

    if (!empty($product)) {

       switch($job) {

          case 0:
          Session::removeItem($id);
          $out['job'] = 1;
          break;

          case 1:
          Session::setItem($id);
          $out['job'] = 0;
          break;
       }
       echo json_encode($out);
    }
}
Catalogue.php      Hent data for selekteret vare
Startes fra basket.php
public function getProduct($id) {
   $sql = "SELECT * FROM `{$this->_table_2}
`          WHERE `id` = '".$this->db->escape($id)."'";
   return $this->db->fetchOne($sql);
}
Session.php | setItem() / removeItem()      Opdaterer $_SESSION[basket]
Opdaterer varenummer og mængdedata til indkøbskurv i $_SESSION[basket]
Startes fra basket.php
class Session {

    public static function setItem($id, $qty = 1) {
       $_SESSION['basket'][$id]['qty'] = $qty;
    }

    public static function removeItem($id, $qty = null) {
       if ($qty != null && $qty < $_SESSION['basket'][$id]['qty']) {
          $_SESSION['basket'][$id]['qty'] = ($_SESSION['basket'][$id]['qty'] - $qty);
       } else {
          $_SESSION['basket'][$id] = null;
          unset($_SESSION['basket'][$id]);
       }
    }
basket.js | refreshSmallBasket()      Ajax: JSON-response opdaterer "small_basket"-vinduet
Selve opdateringen foretages med: $("#basket_left." + k + " span").text(v);
Startes fra "add_to_basket"

    function refreshSmallBasket() {
       $.ajax({
          url: '/mod/basket_small_refresh.php',   //se nedenfor
          dataType: 'json',
          success: function(data) {
             $.each(data, function(k, v) {
                $("#basket_left ." + k + " span").text(v);
             });
          },
          error: function(data) {
             alert("An error has occurred");
          }
       });
    }

basket_small_refesh.php      Etablerer response-data for "refreshSmallBasket()"
Etablerer data til opdatering af Small basket i browser.
Startes fra basket.js | refreshSmallBasket()
<?php
require_once("../inc/autoload.php");
$objBasket = new Basket();
$out = array();
$out['bl_ti'] = $objBasket>;
$out['bl_st'] = number_format($objBasket->_sub_total, 2);
$out['bl_vat'] = number_format($objBasket->_vat, 2);
$out['bl_total'] = number_format($objBasket->_total, 2);
echo json_encode($out);
Basket.php      __construct() til Basket.php
Startes fra basket_small_refesh.php
Funktionerne opdaterer parametrene ved instantiering.
class Basket {

    public $_inst_catalogue;
    public $_empty_basket;
    public $_vat_rate;
    public $_number_of_items;
    public $_sub_total;
    public $_vat;
    public $_total;

    public function __construct() {
       $this->_inst_catalogue = new Catalogue();
       $this->_empty_basket = empty($_SESSION['basket']) ? true : false;
       $objBusiness = new Business();
       $this->_vat_rate = $objBusiness->getVatRate();
       $this->noItems();
       $this->subtotal();
       $this->vat();
       $this->total();
    }

   public function noItems() {
       $value = 0;
       if (!$this->_empty_basket) {
          foreach($_SESSION['basket'] as $key => $basket) {
             $value += $basket['qty'];
          }
       }
       $this->_number_of_items = $value;
    }

    public function subtotal() {
       $value = 0;
       if (!$this->_empty_basket) {
          foreach($_SESSION['basket'] as $key => $basket) {
             $product = $this->_inst_catalogue->getProduct($key);
             $value += ($basket['qty'] * $product['price']);
          }
       }
       $this->_sub_total = round($value, 2);
    }

    public function vat() {
       $value = 0;
       if (!$this->_empty_basket) {
          $value = ($this->_vat_rate * ($this->_sub_total / 100));
       }
       $this->_vat = round($value, 2);
    }

    public function total() {
       $this->_total = round(($this->_sub_total + $this->_vat), 2);
    }
Business.php | getVatRate()      Henter data til parameteret _vat_rate.
Startes fra __Construct()
public function getVatRate() {
   $business = $this->getBusiness();
   return $business['vat_rate'];
}




















x
x