Opencart 3: how to add search method in the Ajax live search module? - opencart

By the default Ajax live search module can search by product name and SKU. I want to make it so that the search also takes place by manufacturer. I was able to add a manufacturer to the controller so that it appears in the search results, but it does not search for this criterion.
I've looked at the controller and Java Script code in the template, but I don't see a place anywhere that would be responsible for the search parameters. Maybe someone came across and knows where to look?
This is catalog/controller file:
<?php
class ControllerExtensionModuleLiveSearch extends Controller {
public function index() {
$json = array();
if (isset($this->request->get['filter_name'])) {
$search = $this->request->get['filter_name'];
} else {
$search = '';
}
if (isset($this->request->get['cat_id'])) {
$cat_id = (int)$this->request->get['cat_id'];
} else {
$cat_id = 0;
}
$tag = $search;
$description = '';
$category_id = $cat_id;
$sub_category = '';
$sort = 'p.sort_order';
$order = 'ASC';
$page = 1;
$limit = $this->config->get('module_live_search_limit');
$search_result = 0;
$error = false;
if( version_compare(VERSION, '3.0.0.0', '>=') ){
$currency_code = $this->session->data['currency'];
}
else{
$error = true;
$json[] = array(
'product_id' => 0,
'image' => null,
'name' => 'Version Error: '.VERSION,
'extra_info' => null,
'price' => 0,
'special' => 0,
'url' => '#'
);
}
if(!$error){
if (isset($this->request->get['filter_name'])) {
$this->load->model('catalog/product');
$this->load->model('tool/image');
$filter_data = array(
'filter_name' => $search,
'filter_tag' => $tag,
'filter_description' => $description,
'filter_category_id' => $category_id,
'filter_sub_category' => $sub_category,
'sort' => $sort,
'order' => $order,
'start' => ($page - 1) * $limit,
'limit' => $limit
);
$results = $this->model_catalog_product->getProducts($filter_data);
$search_result = $this->model_catalog_product->getTotalProducts($filter_data);
$image_width = $this->config->get('module_live_search_image_width') ? $this->config->get('module_live_search_image_width') : 0;
$image_height = $this->config->get('module_live_search_image_height') ? $this->config->get('module_live_search_image_height') : 0;
$title_length = $this->config->get('module_live_search_title_length');
$description_length = $this->config->get('module_live_search_description_length');
foreach ($results as $result) {
if ($result['image']) {
$image = $this->model_tool_image->resize($result['image'], $image_width, $image_height);
} else {
$image = $this->model_tool_image->resize('placeholder.png', $image_width, $image_height);
}
if (($this->config->get('config_customer_price') && $this->customer->isLogged()) || !$this->config->get('config_customer_price')) {
$price = $this->currency->format($this->tax->calculate($result['price'], $result['tax_class_id'], $this->config->get('config_tax')), $currency_code);
} else {
$price = false;
}
if ((float)$result['special']) {
$special = $this->currency->format($this->tax->calculate($result['special'], $result['tax_class_id'], $this->config->get('config_tax')), $currency_code);
} else {
$special = false;
}
if ($this->config->get('config_tax')) {
$tax = $this->currency->format((float)$result['special'] ? $result['special'] : $result['price'], $currency_code);
} else {
$tax = false;
}
if ($this->config->get('config_review_status')) {
$rating = (int)$result['rating'];
} else {
$rating = false;
}
$json['total'] = (int)$search_result;
$json['products'][] = array(
'product_id' => $result['product_id'],
'image' => $image,
'name' => utf8_substr(strip_tags(html_entity_decode($result['name'], ENT_QUOTES, 'UTF-8')), 0, $title_length) . '..',
'extra_info' => utf8_substr(strip_tags(html_entity_decode($result['description'], ENT_QUOTES, 'UTF-8')), 0, $description_length) . '..',
'price' => $price,
'special' => $special,
'url' => $this->url->link('product/product', 'product_id=' . $result['product_id'])
);
}
}
}
$this->response->addHeader('Content-Type: application/json');
$this->response->setOutput(json_encode($json));
}
}
This is JS code in the template:
var live_search = {
selector: '#search input[name=\'search\']',
text_no_matches: '{{ text_empty }}',
height: '50px'
}
$(document).ready(function() {
var html = '';
html += '<div class="live-search">';
html += ' <ul>';
html += ' </ul>';
html += '<div class="result-text"></div>';
html += '</div>';
//$(live_search.selector).parent().closest('div').after(html);
$(live_search.selector).after(html);
$(live_search.selector).autocomplete({
'source': function(request, response) {
var filter_name = $(live_search.selector).val();
var cat_id = 0;
var module_live_search_min_length = '{{ module_live_search_min_length|abs }}';
if (filter_name.length < module_live_search_min_length) {
$('.live-search').css('display','none');
}
else{
var html = '';
html += '<li style="text-align: center;height:10px;">';
html += '<img class="loading" src="catalog/view/theme/default/image/loading.gif" />';
html += '</li>';
$('.live-search ul').html(html);
$('.live-search').css('display','block');
$.ajax({
url: 'index.php?route=extension/module/live_search&filter_name=' + encodeURIComponent(filter_name),
dataType: 'json',
success: function(result) {
var products = result.products;
$('.live-search ul li').remove();
$('.result-text').html('');
if (!$.isEmptyObject(products)) {
var show_image = {{ module_live_search_show_image|abs }};
var show_price = {{ module_live_search_show_price|abs }};
var show_description = {{ module_live_search_show_description|abs }};
$('.result-text').html('{{ text_view_all_results|e }} ('+result.total+')');
$.each(products, function(index,product) {
var html = '';
html += '<li>';
html += '<a href="' + product.url + '" title="' + product.name + '">';
if(product.image && show_image){
html += ' <div class="product-image"><img alt="' + product.name + '" src="' + product.image + '"></div>';
}
html += ' <div class="product-name">' + product.name ;
if(show_description){
html += '<p>' + product.extra_info + '</p>';
}
html += '</div>';
if(show_price){
if (product.special) {
html += '<div class="product-price"><span class="price">' + product.special + '</span></div>';
} else {
html += ' <div class="product-price"><span class="price">' + product.price + '</span></div>';
}
}
html += '<span style="clear:both"></span>';
html += '</a>';
html += '</li>';
$('.live-search ul').append(html);
});
} else {
var html = '';
html += '<li style="text-align: center;height:10px;">';
html += live_search.text_no_matches;
html += '</li>';
$('.live-search ul').html(html);
}
$('.live-search').css('display','block');
return false;
}
});
}
},
'select': function(product) {
$(live_search.selector).val(product.name);
}
});
$(document).bind( "mouseup touchend", function(e){
var container = $('.live-search');
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
});
Also module has admin/controller file. But I think that he is not responsible for the search criteria. Any ideas where I can edit the search criteria?

Related

POST http://localhost:8000/api/posts/action/ 400 (Bad Request) when working with React and Django

I am trying to build a full-stack app with React and Django.
I am sending an API request from the Django server to React. This is my code how I do it:
posts/component.js:
import React, {useEffect, useState} from 'react'
import {
apiPostAction,
apiPostCreate,
apiPostList} from './lookup'
export function PostsComponent(props) {
const textAreaRef = React.createRef()
const [newPosts, setNewPosts] = useState([])
const handleBackendUpdate = (response, status) =>{
// backend api response handler
let tempNewPosts = [...newPosts]
if (status === 201){
tempNewPosts.unshift(response)
setNewPosts(tempNewPosts)
} else {
console.log(response)
alert("An error occured please try again")
}
}
const handleSubmit = (event) => {
event.preventDefault()
const newVal = textAreaRef.current.value
// backend api request
apiPostCreate(newVal, handleBackendUpdate)
textAreaRef.current.value = ''
}
return <div className={props.className}>
<div className='col-12 mb-3'>
<form onSubmit={handleSubmit}>
<textarea ref={textAreaRef} required={true} className='form-control' name='post'>
</textarea>
<button type='submit' className='btn btn-primary my-3'>Post</button>
</form>
</div>
<PostsList newPosts={newPosts} />
</div>
}
export function PostsList(props) {
const [postsInit, setPostsInit] = useState([])
const [posts, setPosts] = useState([])
const [postsDidSet, setPostsDidSet] = useState(false)
useEffect(()=>{
const final = [...props.newPosts].concat(postsInit)
if (final.length !== posts.length) {
setPosts(final)
}
}, [props.newPosts, posts, postsInit])
useEffect(() => {
if (postsDidSet === false){
const handlePostListLookup = (response, status) => {
if (status === 200){
setPostsInit(response)
setPostsDidSet(true)
} else {
alert("There was an error")
}
}
apiPostList(handlePostListLookup)
}
}, [postsInit, postsDidSet, setPostsDidSet])
const handleDidRepost = (newPost) => {
const updatePostsInit = [...postsInit]
updatePostsInit.unshift(newPost)
setPostsInit(updatePostsInit)
const updateFinalPosts = [...posts]
updateFinalPosts.unshift(posts)
setPosts(updateFinalPosts)
}
return posts.map((item, index)=>{
return <Post
post={item}
didRepost={handleDidRepost}
className='my-5 py-5 border bg-white text-dark'
key={`${index}-{item.id}`} />
})
}
export function ActionBtn(props) {
const {post, action, didPerformAction} = props
const likes = post.likes ? post.likes : 0
const className = props.className ? props.className : 'btn btn-primary btn-sm'
const actionDisplay = action.display ? action.display : 'Action'
const handleActionBackendEvent = (response, status) =>{
console.log(response, status)
if ((status === 200 || status === 201) && didPerformAction){
didPerformAction(response, status)
}
}
const handleClick = (event) => {
event.preventDefault()
apiPostAction(post.id, action.type, handleActionBackendEvent)
}
const display = action.type === 'like' ? `${likes} ${actionDisplay}` : actionDisplay
return <button className={className} onClick={handleClick}>{display}</button>
}
export function ParentPost(props){
const {post} = props
return post.parent ? <div className='row'>
<div className='col-11 mx-auto p-3 border rounded'>
<p className='mb-0 text-muted small'>Repost</p>
<Post hideActions className={' '} post={post.parent} />
</div>
</div> : null
}
export function Post(props) {
const {post, didRepost, hideActions} = props
const [actionPost, setActionPost] = useState(props.post ? props.post : null)
const className = props.className ? props.className : 'col-10 mx-auto col-md-6'
const handlePerformAction = (newActionPost, status) => {
if (status === 200){
setActionPost(newActionPost)
} else if (status === 201) {
if (didRepost){
didRepost(newActionPost)
}
}
}
return <div className={className}>
<div>
<p>{post.id} - {post.content}</p>
<ParentPost post={post} />
</div>
{(actionPost && hideActions !== true) && <div className='btn btn-group'>
<ActionBtn post={actionPost} didPerformAction={handlePerformAction} action={{type: "like", display:"Likes"}}/>
<ActionBtn post={actionPost} didPerformAction={handlePerformAction} action={{type: "unlike", display:"Unlike"}}/>
<ActionBtn post={actionPost} didPerformAction={handlePerformAction} action={{type: "repost", display:"Repost"}}/>
</div>
}
</div>
}
posts/lookup.js:
import {backendLookup} from '../lookup'
export function apiPostCreate(newPost, callback){
backendLookup("POST", "/posts/create/", callback, {content: newPost})
}
export function apiPostAction(postId, action, callback){
const data = {id: postId, action: action}
backendLookup("POST", "/posts/action/", callback, data)
}
export function apiPostList(callback) {
backendLookup("GET", "/posts/", callback)
}
lookup/component.js:
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
export function backendLookup(method, endpoint, callback, data) {
let jsonData;
if (data){
jsonData = JSON.stringify(data)
}
const xhr = new XMLHttpRequest()
const url = `http://localhost:8000/api${endpoint}`
xhr.responseType = "json"
const csrftoken = getCookie('csrftoken');
xhr.open(method, url)
xhr.setRequestHeader("Content-Type", "application/json")
if (csrftoken){
xhr.setRequestHeader("HTTP_X_REQUESTED_WITH", "XMLHttpRequest")
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
xhr.setRequestHeader("X-CSRFToken", csrftoken)
}
// xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
// xhr.setRequestHeader("X-CSRFToken", csrftoken)
xhr.onload = function() {
callback(xhr.response, xhr.status)
}
xhr.onerror = function (e) {
console.log(e)
callback({"message": "The request was an error"}, 400)
}
xhr.send(jsonData)
}
Also, when I run my serverside, it all works well on Django.
When I am on my React localhost and I try to submit some text in the text field after submitting there is no content sent. When I console.log() it shows that after typing some text content = null is sent.
Also, when I lick the "Repost" button. I get this error in the console: components.js:45 POST http://localhost:8000/api/posts/action/ 400 (Bad Request)
Any ideas? Why is my POST request wrong?

How to hide some categories in latest product module Opencart?

So I have Opencart 1.5.6 and I need to hide one category to not show up in latest product module... How can I fix php to do that and not use any 3rd party modules?
I understand it is somewhere in catalog\controller\module\latest.php, so here is my code:
<?php
class ControllerModuleLatest extends Controller {
protected function index($setting) {
$this->language->load('module/latest');
$this->data['heading_title'] = $this->language->get('heading_title');
$this->data['button_cart'] = $this->language->get('button_cart');
$this->load->model('catalog/product');
$this->load->model('tool/image');
$this->data['products'] = array();
$data = array(
'sort' => 'p.date_added',
'order' => 'DESC',
'start' => 0,
'limit' => $setting['limit']
);
$results = $this->model_catalog_product->getProducts($data);
foreach ($results as $result) {
if ($result['image']) {
$image = $this->model_tool_image->resize($result['image'], $setting['image_width'], $setting['image_height']);
} else {
$image = false;
}
if (($this->config->get('config_customer_price') && $this->customer->isLogged()) || !$this->config->get('config_customer_price')) {
$price = $this->currency->format($this->tax->calculate($result['price'], $result['tax_class_id'], $this->config->get('config_tax')));
} else {
$price = false;
}
if ((float)$result['special']) {
$special = $this->currency->format($this->tax->calculate($result['special'], $result['tax_class_id'], $this->config->get('config_tax')));
} else {
$special = false;
}
if ($this->config->get('config_review_status')) {
$rating = $result['rating'];
} else {
$rating = false;
}
$this->data['products'][] = array(
'product_id' => $result['product_id'],
'thumb' => $image,
'name' => $result['name'],
'price' => $price,
'special' => $special,
'rating' => $rating,
'reviews' => sprintf($this->language->get('text_reviews'), (int)$result['reviews']),
'href' => $this->url->link('product/product', 'product_id=' . $result['product_id']),
);
}
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/latest.tpl')) {
$this->template = $this->config->get('config_template') . '/template/module/latest.tpl';
} else {
$this->template = 'default/template/module/latest.tpl';
}
$this->render();
}
}
?>
First you must get product categories:
$get_categories = $this->model_catalog_product->getCategories($result['product_id']);
Then with in_array function, check if product has not a certain category, here for example 24 is the id of category, we don't want to show its products:
if(!in_array(24, $categories))
so your file will be:
<?php
class ControllerModuleLatest extends Controller {
protected function index($setting) {
$this->language->load('module/latest');
$this->data['heading_title'] = $this->language->get('heading_title');
$this->data['button_cart'] = $this->language->get('button_cart');
$this->load->model('catalog/product');
$this->load->model('tool/image');
$this->data['products'] = array();
$data = array(
'sort' => 'p.date_added',
'order' => 'DESC',
'start' => 0,
'limit' => $setting['limit']
);
$results = $this->model_catalog_product->getProducts($data);
foreach ($results as $result) {
if ($result['image']) {
$image = $this->model_tool_image->resize($result['image'], $setting['image_width'], $setting['image_height']);
} else {
$image = false;
}
if (($this->config->get('config_customer_price') && $this->customer->isLogged()) || !$this->config->get('config_customer_price')) {
$price = $this->currency->format($this->tax->calculate($result['price'], $result['tax_class_id'], $this->config->get('config_tax')));
} else {
$price = false;
}
if ((float)$result['special']) {
$special = $this->currency->format($this->tax->calculate($result['special'], $result['tax_class_id'], $this->config->get('config_tax')));
} else {
$special = false;
}
if ($this->config->get('config_review_status')) {
$rating = $result['rating'];
} else {
$rating = false;
}
$get_categories = $this->model_catalog_product->getCategories($result['product_id']);
$categories = array();
foreach($get_categories as $category){
$categories[] = $category['category_id'];
}
if(!in_array(24, $categories)){
$this->data['products'][] = array(
'product_id' => $result['product_id'],
'thumb' => $image,
'name' => $result['name'],
'price' => $price,
'special' => $special,
'rating' => $rating,
'reviews' => sprintf($this->language->get('text_reviews'), (int)$result['reviews']),
'href' => $this->url->link('product/product', 'product_id=' . $result['product_id']),
);
}
}
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/latest.tpl')) {
$this->template = $this->config->get('config_template') . '/template/module/latest.tpl';
} else {
$this->template = 'default/template/module/latest.tpl';
}
$this->render();
}
}
?>

Opencart Product - Discount display

everybody
Need to add label to discouted products.
When i add the discount price to product(admin - product - discount -add) it ok - the price become to that valuet. But i can't add the label, the $discount array is empty.
So my product.tpl:
<span><?php echo $price; ?></span><?php } ?></b>
<?php print_r($discounts);?>
and my conteroller/product.php
$discounts = $this->model_catalog_product->getProductDiscounts($product_id);
$this->data['discounts'] = array();
foreach ($discounts as $discount) {
$this->data['discounts'][] = array(
'quantity' => $discount['quantity'],
'price' => $this->currency->format($this->tax->calculate($discount['price'], $product_info['tax_class_id'], $this->config->get('config_tax')))
);
}
$this->data['options'] = array();
foreach ($this->model_catalog_product->getProductOptions($product_id) as $option) {
if ($option['type'] == 'select' || $option['type'] == 'radio' || $option['type'] == 'checkbox' || $option['type'] == 'image') {
$option_value_data = array();
foreach ($option['option_value'] as $option_value) {
if (!$option_value['subtract'] || ($option_value['quantity'] > 0)) {
if ((($this->config->get('config_customer_price') && $this->customer->isLogged()) || !$this->config->get('config_customer_price')) && (float)$option_value['price']) {
$price = $this->currency->format($this->tax->calculate($option_value['price'], $product_info['tax_class_id'], $this->config->get('config_tax')));
} else {
$price = false;
}
$option_value_data[] = array(
'product_option_value_id' => $option_value['product_option_value_id'],
'option_value_id' => $option_value['option_value_id'],
'name' => $option_value['name'],
'image' => $this->model_tool_image->resize($option_value['image'], 50, 50),
'price' => $price,
'price_prefix' => $option_value['price_prefix']
);
}
}
$this->data['options'][] = array(
'product_option_id' => $option['product_option_id'],
'option_id' => $option['option_id'],
'name' => $option['name'],
'type' => $option['type'],
'option_value' => $option_value_data,
'required' => $option['required']
);
} elseif ($option['type'] == 'text' || $option['type'] == 'textarea' || $option['type'] == 'file' || $option['type'] == 'date' || $option['type'] == 'datetime' || $option['type'] == 'time') {
$this->data['options'][] = array(
'product_option_id' => $option['product_option_id'],
'option_id' => $option['option_id'],
'name' => $option['name'],
'type' => $option['type'],
'option_value' => $option['option_value'],
'required' => $option['required']
);
}
}
if ($product_info['minimum']) {
$this->data['minimum'] = $product_info['minimum'];
} else {
$this->data['minimum'] = 1;
}
$this->data['review_status'] = $this->config->get('config_review_status');
$this->data['reviews'] = sprintf($this->language->get('text_reviews'), (int)$product_info['reviews']);
$this->data['rating'] = (int)$product_info['rating'];
$this->data['description'] = html_entity_decode($product_info['description'], ENT_QUOTES, 'UTF-8');
$this->data['attribute_groups'] = $this->model_catalog_product->getProductAttributes($product_id);
$this->data['products'] = array();
$results = $this->model_catalog_product->getProductRelated($product_id);
foreach ($results as $result) {
if ($result['image']) {
$image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_related_width'), $this->config->get('config_image_related_height'));
} else {
$image = false;
}
if (($this->config->get('config_customer_price') && $this->customer->isLogged()) || !$this->config->get('config_customer_price')) {
$price = $this->currency->format($this->tax->calculate($result['price'], $result['tax_class_id'], $this->config->get('config_tax')));
} else {
$price = false;
}
if ((float)$result['special']) {
$special = $this->currency->format($this->tax->calculate($result['special'], $result['tax_class_id'], $this->config->get('config_tax')));
} else {
$special = false;
}
if ($this->config->get('config_review_status')) {
$rating = (int)$result['rating'];
} else {
$rating = false;
}
$this->data['products'][] = array(
'product_id' => $result['product_id'],
'thumb' => $image,
'name' => $result['name'],
'price' => $price,
'special' => $special,
'rating' => $rating,
'reviews' => sprintf($this->language->get('text_reviews'), (int)$result['reviews']),
'href' => $this->url->link('product/product', 'product_id=' . $result['product_id'])
);
}
Mayby i need to look somewere else, can some body help?

Alternative to 'options' in backbone.js 1.1.2

From my view menuitemdetails.js i'am calling options in app.js - itemDetails
My menuitemdetails.js
var MenuItemDetails = Backbone.View.extend({
render: function () {
var markup = '<div>' +
'<h1>' + this.options.name + '</h1>' +
'<p><span class="label">' + this.options.category + '</span></p>' +
'<img src="photos/' + this.options.imagepath + '" class="img-polaroid" />' +
'</div>';
this.$el.html(markup);
return this;
}
});
My app.js
var AppRouter = Backbone.Router.extend({
routes: {
"": "list",
"menu-items/new": "itemForm",
"menu-items/:item": "itemDetails"
},
list: function () {
$('#app').html('List screen');
},
itemDetails: function (item) {
var view = new MenuItemDetails(
{
name: item,
category: 'Entree',
imagepath: 'garden-salad.jpg'
}
);
$('#app').html(view.render().el);
},
itemForm: function () {
$('#app').html('New item form');
}
});
var app = new AppRouter();
$(function () {
Backbone.history.start();
});
Looking forward for an alternative of 'options' because from my view it is not working in backbone.js 1.1.2

Facebook Javascript SDK show value of array

I'm trying to show the tags of a checkin in facebook javascript sdk, but shows only [object Object] because it is an array, I tried several ways to show this array, but could not.
The following code:
<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>New JavaScript SDK</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
window.fbAsyncInit = function() {
FB.init({
appId: '274371602680881',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
function updateButton(response) {
var button = document.getElementById('fb-auth');
if (response.authResponse) {
//user is already logged in and connected
var userInfo = document.getElementById('user-info');
FB.api('/me', function(response) {
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
button.innerHTML = 'Uninstall';
FB.api('/me/checkins', function(response) {
console.log('Got your check-ins: ', response);
if (!response.error) {
//displayCheckIns(response.data, document.getElementById('checkins'));
var markup = '<div class="data-header">Your last five check-ins:</div>';
for (var i=0; i < response.data.length && i < 5; i++) {
var checkin = response.data[i];
//alert(checkin.tags);
//alert(checkin.tags.length);
//alert(checkin.tags.name);
//alert(checkin.tags[0]);
//alert(checkin.tags[0].name);
markup += '<div class="place">'
+ '<div class="picture">Foto: <img src="http://graph.facebook.com/' + checkin.place.id + '/picture"></div>'
+ '<div class="info">'
+ '<div class="from">From: ' + checkin.from.name + '</div>'
+ '<div class="tags">Tags: ' + checkin.tags + '</div>'
+ '<div class="place">Place: ' + checkin.place.name + '</div>'
+ '<div class="place-location">Place Location: ' + checkin.place.location.latitude + ", " + checkin.place.location.longitude + '</div>'
+ '<div class="application">Application: ' + checkin.application.name + '</div>'
+ '<div class="created_time">Created time: ' + checkin.created_time + '</div>'
+ '<div class="likes">Likes: ' + checkin.likes + '</div>'
+ '<div class="check-in-msg">Mensagem: ' + (checkin.message || '') + '</div>'
+ '<div class="comments">Comments: ' + checkin.comments + '</div>'
+ '</div>'
+ '</div>';
}
document.getElementById('user-checkins').innerHTML = markup;
}
});
});
button.onclick = function() {
FB.api({
method: 'auth.revokeAuthorization'
}, function(response) {
window.location.reload();
});
/*
FB.logout(function(response) {
var userInfo = document.getElementById('user-info');
userInfo.innerHTML="";
});*/
};
} else {
//user is not connected to your app or logged out
button.innerHTML = 'Login';
button.onclick = function() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
var userInfo = document.getElementById('user-info');
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture" style="margin-right:5px"/>' + response.name;
});
} else {
//user cancelled login or did not grant authorization
}
}, {
scope:'user_status'
});
}
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol
+ '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
});
</script>
</head>
<body>
<div id="fb-root"></div>
<h2>Updated JS SDK example</h2><br />
<div id="user-info"></div>
<div id="user-checkins"></div>
<p><button id="fb-auth">Login</button></p>
</body>
</html>
I tried a few ways, such as:
checkin.tags // shows [object Object]
checkin.tags.length // shows undefined
checkin.tags.name // shows undefined
checkin.tags[0] // shows undefined
checkin.tags[0].name // Can not read property 'name' of undefined
This happens with tags, likes and comments. The others that are NOT array works fine, like "checkin.place.name", and even "checkin.place.location.latitude" brings the correct value.
I did an "console.log(JSON.stringify(checkin.tags));" and it returns:
{"data":[{"id":"100001702765878","name":"Mauricio Forte Neto"},{"id":"100001174670611","name":"Mario Celso"}],"paging":{"next":"https://graph.facebook.com/402127889842448/tags?access_token=AAAD5ih3qDDEBAIo3nB8P3ZCAwXrivw5lunDRAUvkRZCCFZBUy5au3ImicViq80HHVZC29hLDit6QwlZCXZB5WEBkDF3Pp2DrnUGWLrAwhpWddLoliyFDqd&limit=25&offset=25&__after_id=100001174670611"}}
Please, help.
Thanks in advance.
Since it's an object and has data in it, I have to request the data type in it.
What I been missing is to add an ".data" like:
checkin.tags.data[0].name
Now it works!!!