Возникла задача создать в админке интернет-магазина кнопку. Кнопка должна быть на странице заказа, при нажатии на которую данные заказа должны передаваться в таблицу Гугл.
К таблице имеют доступ несколько человек, в том числе и склад, где собираются и готовятся на отправку все заказы.
Почитав документацию удалось создать такую кнопку.
Советую для начала пройти все шаги quickstart для javascript самому.
Вот ссылка - https://developers.google.com/google-apps/calendar/quickstart/js
Что важно, так это создать проект в консоле гугл (это первый шаг) откуда мы будем брать Клиент АйДи
Основную часть кода я взял из этого примера. Это основа.
Главное это функция по которой добавляются данные и читаются. Читаю данный для того, что бы определить пустую ячейку в столбце.
Все что я написал в коде это две функции:
makeApiCall() и myMakeApiCall()
Полностью код вставленный в шаблон.
<div id="profile" style="margin: 0 20px;">
<b class="name"></b><br/>
<i class="email"></i>
</div>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
<br />
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize-button" style="display: none;">Authorize</button>
<button id="signout-button" style="display: none;">Sign Out</button>
<pre id="content"></pre>
<script type="text/javascript">
// Client ID and API key from the Developer Console
var CLIENT_ID = 'здесь ваш клиент айди.apps.googleusercontent.com';
// Array of API discovery doc URLs for APIs used by the quickstart
var DISCOVERY_DOCS = ["https://sheets.googleapis.com/$discovery/rest?version=v4"];
// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
var SCOPES = "https://www.googleapis.com/auth/spreadsheets";
var authorizeButton = document.getElementById('authorize-button');
var signoutButton = document.getElementById('signout-button');
/**
* On load, called to load the auth2 library and API client library.
*/
function handleClientLoad() {
gapi.load('client:auth2', initClient);
}
/**
* Initializes the API client library and sets up sign-in state
* listeners.
*/
function initClient() {
gapi.client.init({
discoveryDocs: DISCOVERY_DOCS,
clientId: CLIENT_ID,
scope: SCOPES
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
});
}
/**
* Called when the signed in status changes, to update the UI
* appropriately. After a sign-in, the API is called.
*/
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
/**
* Sign in the user upon button click.
*/
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
/**
* Sign out the user upon button click.
*/
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
/**
* Append a pre element to the body containing the given message
* as its text node. Used to display the results of the API call.
*
* @param {string} message Text to be placed in pre element.
*/
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
function makeApiCall(row) {
var cell = "A";
var rangeAll = cell+row;
var dannie = '<?php echo date("d.m.Y",strtotime($date_added)); ?>';
var params = {
// https://docs.google.com/spreadsheets/d/1UjSdb1Oh3mEEhzaGcjDoKMxNqKOMC6tTwjEX0jMDWQ4/edit#gid=0
spreadsheetId: '1UjSdb1Oh3mEEhzaGcjDoKMxNqKOMC6tTwjEX0jMDWQ4', // TODO: Update placeholder value.
// The A1 notation of the values to update.
range: rangeAll,
valueInputOption: 'USER_ENTERED',
values: [
[
'<?php echo date("d.m.Y",strtotime($date_added)); ?>',
'Lavka1',
'<?php echo date("d.m.Y",strtotime($date_added . "+6 days")); ?>',
'<?php echo $product["model"]; ?>',
'',
'',
'=HYPERLINK("<?php echo $ssilka_product; ?>";"Ссылка на товар")',
'<?php echo $product["quantity"]; ?>'
]
],
// How the input data should be interpreted.
};
var request = gapi.client.sheets.spreadsheets.values.update(params);
request.then(function(response) {
// TODO: Change code below to process the `response` object:
}, function(reason) {
console.error('error: ' + reason.result.error.message);
});
}
function myMakeApiCall(){
var row =1;
gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: '1UjSdb1Oh3mEEhzaGcjDoKMxNqKOMC6tTwjEX0jMDWQ4',
range: 'A1:A100',
}).then(function (response) {
var range = response.result;
var rows = range.values.length;
var row = rows+1;
makeApiCall(row);
}, function(response) {
appendPre('Error: ' + response.result.error.message);
});
}
function onSignIn(user) {
var profile = user.getBasicProfile();
$('#profile .name').text(profile.getName());
$('#profile .email').text(profile.getEmail());
}
</script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
<input type="button" onclick="myMakeApiCall();" value="Передать данные в таблицу" name="najmi menya" />
</div>
это типо обещанное подробное описание??
ОтветитьУдалить