✅ WEB і WordPress новини, теми, плагіни. Тут ми ділимося порадами і кращими рішеннями для сайтів.

Короткий посібник з API REST WooCommerce

39

Ви хочете взаємодіяти з WESTCommerce REST API? WooCommerce надає REST API, який отримуватиме вам дані в реальному часі із серверної бази, які можна розмістити де завгодно у вашому зовнішньому додатку. За допомогою свого REST API можна керувати їхніми даними WooCommerce, натискаючи кінцеві точки. У цій статті ми вивчаємо, як використовувати WooCommerce REST API та надсилати запити HTTP до WooCommerce.

Якщо ви хочете створити власний магазин, тоді ви можете використовувати WooCommerce як серверну систему для управління вашими продуктами, зображеннями товарів, галереєю тощо. А потім, використовуючи REST API, отримайте дані про товар і відображте їх у своєму зовнішньому додатку. WooCommerce надає документацію REST API для взаємодії з серверною базою. Тут ви отримаєте детальну інформацію про все, наприклад про товари, клієнтів, замовлення, податки тощо. У цій статті ми збираємося взаємодіяти з кінцевими точками Продукту. Подібним чином ви можете інтегрувати інші варіанти, такі як клієнти, замовлення тощо.

Отримайте ваш ключ споживача та споживчу таємницю

Для того, щоб розпочати роботу з WooCommerce REST API, спочатку потрібно отримати ключ споживача та секрет споживача. Ці ключі є ідентифікацією магазину і необхідні під час здійснення дзвінка через API до WooCommerce.

Ви повинні встановити WooCommerce на вашому сервісі WordPress. Потім перейдіть на сторінку WooCommerce-> Налаштування. Клацніть на вкладку Додатково, а потім на посилання REST API.

Короткий посібник з API REST WooCommerce

На цій сторінці натисніть кнопку "Створити ключ API".

Короткий посібник з API REST WooCommerce

Введіть опис, виберіть дозволи на читання / запис і натисніть кнопку «Створити API». Ви також можете вибрати Дозвіл на читання. Це залежить від ваших вимог. Якщо вам просто потрібно прочитати дані з WooCommerce, виберіть опцію "Читати". А якщо ви хочете виконувати як операції читання, так і запису, тоді ви можете вибрати "Читання / запис".

Короткий посібник з API REST WooCommerce

Скопіюйте свій ключ споживача та секрет споживача, які будуть потрібні під час здійснення дзвінків через API.

Короткий посібник з API REST WooCommerce

Взаємодійте з WESTCommerce REST API

Коли ви будете готові до свого споживчого ключа та споживчого секрету, ми можемо розпочати з коду, який взаємодіє з WooCommerce. Оскільки нам потрібно надсилати запити HTTP, встановіть бібліотеку Guzzle, використовуючи команду нижче.

composer require guzzlehttp/guzzle

Guzzle – PHP-HTTP-клієнт, що полегшує надсилання HTTP-запитів та тривіальну інтеграцію з веб-службами.

Тепер давайте візьмемо деякі кінцеві точки, такі як отримати всі продукти, отримати один продукт, оновити продукт та інтегрувати його.

Отримати продукти

Під час виклику кінцевих точок API WooCommerce вам потрібно встановити заголовок авторизації, який є кодованим рядком base64 вашого споживчого ключа та споживчого секрету.

<?php
require_once "vendor/autoload.php";
  
use GuzzleHttpClient;
 
define('WC_CONSUMER_KEY', 'PASTE_CONSUMER_KEY');
define('WC_CONSUMER_SECRET', 'PASTE_CONSUMER_SECRET');
  
$client = new Client([
    // Base URI is used with relative requests
    'base_uri' => 'YOUR_DOMAIN_BASE_URL',
]);
 
try {
    $response = $client->request('GET', '/wp-json/wc/v3/products', [
        'headers' => [
            "Authorization" => "Basic ". base64_encode(WC_CONSUMER_KEY.':'.WC_CONSUMER_SECRET)
        ],
        'query' => [
            'per_page' => 18,
        ],
        'verify' => false, //only needed if you are facing SSL certificate issue
    ]);
     
    $body = $response->getBody();
    $arr_body = json_decode($body);
    print_r($arr_body);
} catch (Exception $e) {
    echo $e->getMessage();
}

У наведеному вище коді я назвав кінцеву точку, яка містить список продуктів. Тут я передав 18 як значення "per_page", яке дасть 18 даних про товар у відповідь. Ви можете передати це значення відповідно до ваших вимог. Не забудьте замінити заповнювачі фактичними значеннями, перш ніж потрапляти в кінцеву точку.

Отримайте єдиний продукт

Якщо ви хочете отримати дані одного товару, ваша кінцева точка буде такою.

$response = $client->request('GET', '/wp-json/wc/v3/products/PRODUCT_ID_HERE', [
    'headers' => [
        "Authorization" => "Basic ". base64_encode(WC_CONSUMER_KEY.':'.WC_CONSUMER_SECRET)
    ],
    'verify' => false,
]);

Оновіть продукт

Ви можете оновити продукт, надіславши запит PUT кінцевій точці API. Скажімо, ви хочете оновити регулярну_цінку свого товару.

$response = $client->request('PUT', '/wp-json/wc/v3/products/PRODUCT_ID_HERE', [
    'headers' => [
        "Authorization" => "Basic ". base64_encode(WC_CONSUMER_KEY.':'.WC_CONSUMER_SECRET)
    ],
    'json' => [
        'regular_price' => '12.20',
    ],
    'verify' => false,
]);

Це кілька основних дзвінків. Таким же чином користувач може надсилати HTTP-запит для Клієнтів, Замовлення, Купони тощо. Більше про це можна прочитати в їх офіційній документації.

Взаємодійте з API WESTCommerce REST за допомогою JavaScript

WooCommerce випускає власну бібліотеку JavaScript, яка корисна для надсилання виклику API до WooCommerce з фреймворку JavaScript. Скажімо, ви хочете взаємодіяти з REST API із вашої програми на основі React.

У такому випадку встановіть бібліотеку ‘@ woocommerce / woocommerce-rest-api’ за командою:

npm install --save @woocommerce/woocommerce-rest-api

Далі у вашому компоненті React ви можете отримати список продуктів, використовуючи наведений нижче код.

import React from 'react';
import ReactDOM from 'react-dom';
import WooCommerceRestApi from "@woocommerce/woocommerce-rest-api";
 
class ProductsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: []
    };
  }
 
  componentDidMount() {
    const api = new WooCommerceRestApi({
      url: "YOUR_DOMAIN_BASE_URL",
      consumerKey: "PASTE_CONSUMER_KEY",
      consumerSecret: "PASTE_CONSUMER_SECRET",
      version: "wc/v3"
    });
 
    // List products
    api.get("products", {
      per_page: 18, // 18 products per page
    })
      .then((response) => {
        // Successful request
        this.setState({
          products: response.data
        });
      })
      .catch((error) => {
        // Invalid request, for 4xx and 5xx statuses
      })
      .finally(() => {
        // Always executed.
      });
  }
 
  render() {
    return (      <div>
        <h2>Products</h2>
        <ul>
        {this.state.products.map(product => (          <li key={product.id}>{product.name} - ${product.regular_price}</li>
        ))}
        </ul>
      </div>
    );
  }
}
 
const element = <ProductsComponent></ProductsComponent>
 
ReactDOM.render(element, document.getElementById("root"));

Тут я друкую список назв товарів та ціну товару. Користувач може надрукувати й інші дані. Якщо ви хочете побачити всі дані в консолі, увійдіть в файл response.data у методі успіху. Як і у наведеному вище прикладі, ви можете надсилати інші HTTP-запити із своєї програми React.

Висновок

У цьому підручнику ми вивчаємо виклик WooCommerce REST API за допомогою PHP та JavaScript. Ми пройшли декілька кінцевих точок API WooCommerce. Користувач може грати з іншою кінцевою точкою, слідуючи документації та надсилаючи необхідні запити HTTP.

Джерело запису: artisansweb.net

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі