Как вывести таблицу на ajax, код уже готов?

Question

[Денис Вяземский]

Вопрос такой, как обновить корзину на сайте, при добавлении товара? Кнопка добавления работает на ajax, есть метод который якобы должен выводить содержимое корзины, а как вывести ее я не знаю!

Вот код js который якобы должен выводить содержимое корзины!

// Метод выводит содержимое корзины
  SimpleBasket.getData = function (callback)
  {
    jQuery.ajax({
      url: SimpleBasket.ajaxurl,
      type: 'POST',
      data: ({
        action: 'getData',
        nonce: SimpleBasket.nonce
      }),
      success: function (data)
      {
        if (callback) callback(data);
      }
    });
  }

Это код php (ajax-api.php)

/**
   * Функция инициализации AJAX
   */
  public function init()
  {
    wp_enqueue_script('simple-basket', plugin_dir_url( __FILE__ ) . 'js/simple-basket.js', array( 'jquery' ) );
    wp_localize_script('simple-basket', 'SimpleBasket', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'nonce' => wp_create_nonce( 'ajax-example-nonce' )
    ) );
  }
  /**
   * Функция проверки токена
   */
  public function validateNonce()
  {
    if ( ! isset( $_REQUEST['nonce'] ) || ! wp_verify_nonce( $_REQUEST['nonce'], 'ajax-example-nonce' ) )
      die ( 'Invalid Nonce' );
  }

  /**
   * Функция ответа
   */
  public function responce($result)
  {
    header('Content-Type: application/json');
    echo json_encode($result);
    exit;
  }

  // Возврат корзины
  public function getData()
  {
    $this->validateNonce();
    $this->responce($this->basket);
  }

Answer 1

[asdz]

Содержимое корзины выводит callback, а SimpleBasket.getData - просто получает json и передает в callback. Сначала вам надо найти откуда ноги у callback растут, и уже дергать этот метод самому.

Comments

[Денис Вяземский]

Так код вродебы готов, как мне его на страницах вывести?
Вот эта функция выводит содержимое корзины!
// Возврат корзины
public function getData()
{
$this->validateNonce();
$this->responce($this->basket);
}

[asdz]

Денис Вяземский: вам функцию надо написать или в общем? Если в общем, то это делает ф. callback. Найдите ее и посморите как она выводит корзину.

[Денис Вяземский]

asdz: функцию, нужна функция для вывода!

[asdz]

Денис Вяземский: для этого надо сначала посмотреть что лежит в json который возвращает вордпресс, структуру. Затем подумать, как эту структуру вывести в хтмл. Затем подумать куда на странице это выводить - т.е. как найти контейнер корзины на странице.

[Денис Вяземский]

asdz: Вот что передал JSON:
--------------------------------------------------------------------------------
{"items":{"110":{"SIMPLE_BASKET_TITLE":"\u0411\u0443\u0440\u0433\u0435\u0440 KFC1","SIMPLE_BASKET_QUO":12,"SIMPLE_BASKET_PRICE":55,"SIMPLE_BASKET_CATEGORY":"kfc"},"117":{"SIMPLE_BASKET_TITLE":"\u0411\u043b\u044e\u0434\u043e","SIMPLE_BASKET_QUO":"4","SIMPLE_BASKET_PRICE":220,"SIMPLE_BASKET_CATEGORY":"kfc"},"113":{"SIMPLE_BASKET_TITLE":"\u0411\u0443\u0440\u0433\u0435\u0440","SIMPLE_BASKET_QUO":"4","SIMPLE_BASKET_PRICE":80,"SIMPLE_BASKET_CATEGORY":"kfc"},"107":{"SIMPLE_BASKET_TITLE":"\u0427\u0435\u0440\u043d\u044b\u0439 \u0431\u0443\u0440\u0433\u0435\u0440","SIMPLE_BASKET_QUO":"1","SIMPLE_BASKET_PRICE":180,"SIMPLE_BASKET_CATEGORY":"kfc"},"62":{"SIMPLE_BASKET_TITLE":"\u0427\u0438\u0437\u0431\u0443\u0440\u0433\u0435\u0440","SIMPLE_BASKET_QUO":"1","SIMPLE_BASKET_PRICE":200,"SIMPLE_BASKET_CATEGORY":"kfc"}},"userName":"Denis","userEmail":"[e-mail]","userPhone":"[phone]","userComment":"","errorMessages":[],"restoran":"kfc"}
---------------------------------------------------------------------------------

[Денис Вяземский]

asdz: Сама корзина хранится в сессии в виде масива
===================================================================
Array
(
[110] => Array
(
[SIMPLE_BASKET_TITLE] => Бургер KFC1
[SIMPLE_BASKET_QUO] => 12
[SIMPLE_BASKET_PRICE] => 55
[SIMPLE_BASKET_CATEGORY] => kfc
)

[117] => Array
(
[SIMPLE_BASKET_TITLE] => Блюдо
[SIMPLE_BASKET_QUO] => 4
[SIMPLE_BASKET_PRICE] => 220
[SIMPLE_BASKET_CATEGORY] => kfc
)

[113] => Array
(
[SIMPLE_BASKET_TITLE] => Бургер
[SIMPLE_BASKET_QUO] => 4
[SIMPLE_BASKET_PRICE] => 80
[SIMPLE_BASKET_CATEGORY] => kfc
)

[107] => Array
(
[SIMPLE_BASKET_TITLE] => Черный бургер
[SIMPLE_BASKET_QUO] => 1
[SIMPLE_BASKET_PRICE] => 180
[SIMPLE_BASKET_CATEGORY] => kfc
)

[62] => Array
(
[SIMPLE_BASKET_TITLE] => Чизбургер
[SIMPLE_BASKET_QUO] => 1
[SIMPLE_BASKET_PRICE] => 200
[SIMPLE_BASKET_CATEGORY] => kfc
)

)

================================================================

[asdz]

Проходите по массиву, значения свойств выводите в колонки таблицы, а табличку генерируете уже в jquery. Пример - stackoverflow.com/a/10301494

[Денис Вяземский]

==============================
public function getData()
{
$this->validateNonce();
$this->responce($this->basket);
}
===============================
$this->responce() // Преобразует массив в JSON
$this->basket // Массив хранит в себе корзину!

[Денис Вяземский]

asdz: А вы можете мне начало написать функции, с одним каким нибудь ключом из массива, я дальше сам допишу!) Типа таблица, и там выводится просто название продукта!

[Денис Вяземский]

asdz: Сможете мне помочь?)

[asdz]

Денис Вяземский: Как вывести получаемый с сервера JSON в таблицу?

[asdz]

Денис Вяземский: ru.stackoverflow.com/questions/16722/%D0%92%D1%8B%...

[Денис Вяземский]

asdz: Я все равно затрудняюсь написать функцию вывода, можете мне начало написать, я сам закончу, мне просто надо функцию связать с этим файлом ajax-api.php, я не могу понять как здесь происходит взаимосвязь файла ajax-api.php с этим с кодами, которые находятся в simple-basket.js
КОД simple-basket.js
======================================================
/**
* JS API корзины
*/

jQuery(function ($)
{

// Демо-метод вывода времени с сервера
SimpleBasket.getTime = function (callback)
{
jQuery.ajax({
url: SimpleBasket.ajaxurl,
type: 'POST',
data: ({
action: 'getTime',
nonce: SimpleBasket.nonce
}),
success: function (data)
{
$('#reloadcart').attr(data);
if (callback) callback(data);
}
});
}

// Метод выводит содержимое корзины
SimpleBasket.getData = function (callback)
{
jQuery.ajax({
url: SimpleBasket.ajaxurl,
type: 'POST',
data: ({
action: 'getData',
nonce: SimpleBasket.nonce
}),
success: function (data)
{
if (callback) callback(data);
}
});
}


// Метод добавляет товар в корзину
SimpleBasket.add = function (id, callback)
{
if (!id) return;
jQuery.ajax({
url: SimpleBasket.ajaxurl,
type: 'POST',
data: ({
action: 'add',
nonce: SimpleBasket.nonce,
'id': id
}),
success: function (data)
{
console.log(data);
if (callback) callback(data);
}
});
}

});
=======================================================
а файл ajax-api.php
=======================================================
<?php
/**
* AJAX API корзины
*/

$simpeBasketAPI = new SimpleBasketAPI();

class SimpleBasketAPI
{
/**
* Корзина
* var SimpleBasketOrder
*/
private $basket;

/**
* Конструктор класса
*/
public function __construct()
{
if ( is_admin() )
{
add_action( 'wp_ajax_nopriv_getTime', array( &$this, 'getTime'));
add_action( 'wp_ajax_getTime', array( &$this, 'getTime'));

add_action( 'wp_ajax_nopriv_getData', array( &$this, 'getData'));
add_action( 'wp_ajax_getData', array( &$this, 'getData'));

add_action( 'wp_ajax_nopriv_add', array( &$this, 'add'));
add_action( 'wp_ajax_add', array( &$this, 'add'));

}
add_action( 'init', array( &$this, 'init' ) );

$this->basket = SimpleBasketOrder::create();
}

/**
* Функция инициализации AJAX
*/
public function init()
{
wp_enqueue_script('simple-basket', plugin_dir_url( __FILE__ ) . 'js/simple-basket.js', array( 'jquery' ) );
wp_localize_script('simple-basket', 'SimpleBasket', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'ajax-example-nonce' )
) );
}

/**
* Функция проверки токена
*/
public function validateNonce()
{
if ( ! isset( $_REQUEST['nonce'] ) || ! wp_verify_nonce( $_REQUEST['nonce'], 'ajax-example-nonce' ) )
die ( 'Invalid Nonce' );
}

/**
* Функция ответа
*/
public function responce($result)
{
header('Content-Type: application/json');
echo json_encode($result);
exit;
}

public function clear()
{
$this->validateNonce();
$this->responce($this->basket);
$this->items = array();
$this->userComment = '';
}

/* --------------------- AJAX методы ---------------------- */
public function getTime()
{
$this->validateNonce();
$this->responce(array(
'time' => date('d.m.Y H:i:s')
));
}

// Возврат корзины
public function getData()
{
$this->validateNonce();
$this->responce($this->basket);
}

// Добавление товара в корзину
public function add()
{
$this->validateNonce();
if (!isset($_REQUEST['id']))
die ( 'ID not specified' );

// Код товара
$id = (int) $_REQUEST['id'];
$product = get_post($id);
$title = $product->post_title;
// Цена
$price = simple_basket_custom_fields($id, get_option('simple_basket_catalog_price'));
// Вычисляем категорию по таксономии
$category = '';
// Тип записи каталога товара
$postType = $product->post_type;
// Таксономии записи
$taxonomies = get_object_taxonomies($postType);
// Ищем таксономию, которая не тег
foreach ($taxonomies as $taxonomy)
{
if (strpos($taxonomy, 'tag') !== FALSE) continue;
// Берем элементы этой таксономии
$categories = get_the_terms($id, $taxonomy);
$category = (count($categories) > 0) ? $categories[0]->name : '';
// Следующие таксономии не рассматриваем
break;
}

// Добавляем в корзину
if (!empty($title)) $this->basket->add($id, $title, $price, $category);
$this->responce($this->basket);
}
}
=======================================================
И Вот еще файл js скриптов который работает с кнопками
=======================================================
(function($){

$(function() {

$( ".spinner" ).spinner( {
min: 0,
max: 2500
});

var cres = readCookie("__zk_cart_summury__")
if ( cres ) {
$('#zk-cart-summury').text(cres);
}

$('.simple-basket-buy-now').click(function(e){
e.preventDefault();
var p1 = $('');
var p2 = $('');
var p3 = $('');
if ($(this).parent().parent().children().length == 6) {
var img = $(this).parent().prev().prev().prev().find('img:first').clone();
var price = $(this).parent().prev().prev().prev().prev().find('p:first').html();
var deskr = $(this).parent().prev().prev().prev().prev().prev().find('a:first').text();
} else {
var img = $('#medium-photo').find('img:first').clone();
var w = img.width() / 2;
var h = img.height() / 2;
img.width(w);
img.height(h);
var price = $(this).parent().parent().prev().find('td:first').text();
var deskr = $('#post-single').find('h1:first').text();
}
p1.append(img);
p2.append(price);
p3.append(deskr);
$('#zk-modal-content').html('').append(p1).append(p2).append(p3);
//$('#basketModal').reveal();
var link = $(this).attr('href');
$.get(link, {}, function(response){
var str = response.split('|_|_|_|_|_|_|');
var res = str[1];
createCookie("__zk_cart_summury__", res, 1);
$('#zk-cart-summury').text(res);
});
});

$('.zk-del').click(function(e){
e.preventDefault();
$(this).prev().find('input:first').val(0);
recost();
$('#zk-basketForm').submit();
});

$('#zk-update').click(function(e){
e.preventDefault();
recost();
$('#zk-basketForm').submit();
});

$('#zk-send-order').click(function(e){
e.preventDefault();
createCookie("__zk_cart_summury__", '', 1);
$('#zzzzz').submit();
});
});

function recost() {
var q = 0;
var p = 0;
$('#zk-basketForm table tr').each(function(){
var quo = $(this).find('td.quo span input:first').val();
var cos = $(this).find('td.price').data('value');
if (quo != undefined) {
q = q + (quo*1);
p = p + cos*quo;
}
});
var res = q + ' товаров | ' + p + ' руб.';
createCookie("__zk_cart_summury__", res, 1);
}

function createCookie(name, value, days) {
var expires;

if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
}

function readCookie(name) {
var nameEQ = escape(name) + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return unescape(c.substring(nameEQ.length, c.length));
}
return null;
}

function eraseCookie(name) {
createCookie(name, "", -1);
}

})(jQuery);

[Денис Вяземский]

asdz: Спасибо, за помошь! Слушай, тут вот штука есть сто пудов ты знаешь как сделать=)) Как извлечь данные из JSON в JQuery (все правильно, но один косяк присутствует)?

Answer 2

[LittleFatNinja]

нам за тебя просто код написать?

Comments

[Денис Вяземский]

ахахах, да! Я просто начало кода хоть напишите с выводом названия товара, а дальше я сам допишу, чтобы я хоть понимал на что мне в дальнейшем опираться, и самому дописать! С нуля я не смогу это сам сделать!=(((