К основному контенту

Google api Spreadsheets Javascript


Возникла задача создать в админке интернет-магазина кнопку. Кнопка должна быть на странице заказа, при нажатии на которую данные заказа должны передаваться в таблицу Гугл.
К таблице имеют доступ несколько человек, в том числе и склад, где собираются и готовятся на отправку все заказы.
Почитав документацию удалось создать такую кнопку.
Советую для начала пройти все шаги 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>

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Вывод SKU (артикула) на странице категорий или карточках товаров в Opencart

17 апреля 2014 By Сергей Нечипорук 24 комментария Здравствуйте читатели моего блога. Случаются ситуации, когда клиенты просят вывести артикул в категориях интернет магазина. Зачем это нужно, я не совсем понимаю, как с точки юзабилити так и с точки логики, но это их дело. Чтобы осуществить эту задачу нужно проделать ряд несложных действий. 1.) Подключаемся к ftp нашего сайта и заходим в директорию — upload/catalog/controller/product/. В ней находим файл — category.php. Именно его мы и будем править. Находим строчку кода: 'name'         => $result [ 'name' ], И под ней дописываем следующее: 'sku'          => ( empty ( $result [ 'sku' ])) ? '' : $this ->language->get( 'text_sku' ) . ' ' . $result [ 'sku' ], 2.) Теперь подключим языковую переменную. Для этого переходим в директорию — upload/catal...

Clean-param: tracking синтаксис не распознается Вебмастер Гугл

В вебмастере google обнаружил такую ошибку в разделе "Сканирование" - "инструмент проверки файла robot.txt"   - Clean-param: tracking  - синтаксис не распознаётся на форумах читаю,

Фиксируем кнопку при прокрутке. Используем Intersection Observer JavaScript API

При прокрутке колесика вниз - кнопка подымается вверх экрана. Это обычное поведение всех элементов.  Но наша задача сделать так, что бы кнопка задержалась вверху экрана и не ушла выше. Задержалась и замерла в своей секции. Как только секция закончиться, то кнопка скрывается вверху экрана и уступает место следующей секции.  Верстаем простенький шаблон. Хэдеру и Футеру делаем фон серенький и задаем высоту около 100 пикселей. А в контенте будут секции, которые разбиваем на три одинаковые колонки.  В первой колонке будет только кнопка,  с которой будем работать. А в двух остальных - произвольный текст. И продублируем эту секцию четыре раза. Для массовости.  Все шаблон готов.  Далее нам нужно отслеживать viewport - видимый контент. Когда блок, в которой находится кнопка, прибывает в зоне видимости, то кнопку необходимо фиксировать в верхней части, когда она ее достигнет. Такое можно добиться свойством css sticky. Остается только добавлять и удалять его к нашей ...