Ερώτηση για React και WooCommerce API

MikeMenos · 28 Φεβρουαρίου 2021

Κάνω μια εφαρμογή όπου χρησιμοποιώ το WooCommerce API για την εμφάνιση και διαχείριση των εισερχόμενων παραγγελιών σε ένα front-end περιβάλλον, πιο εύχρηστο στον ιδιοκτήτη του μαγαζιού να το πω έτσι από το να μπαίνει στο WooCommerce backend. Τα δεδομένα στον πίνακα που δηλώνουν την ώρα της παραγγελίας που έγινε (πχ 21 λεπτά πριν, 2 ώρες πριν κτλ), ενημερώνονται σε πραγματικό χρόνο στο front-end μου, ενώ αν προστεθεί μια παραγγελία από έναν πελάτη ή της αλλάξω την κατάσταση από approved πχ σε completed μέσω του front-end πίνακα, στο back end του WC αλλάζει κατευθείαν ενώ στον πίνακα πάλι αργεί. Τέλος, έχω τρέξει τα API requests και στο Postman και ενημερώνονται επίσης αμέσως.

Ουσιαστικά το θέμα είναι στο front-end πίνακα που στο πόσο πριν έγινε η παραγγελία, υπάρχει real-time ανανέωση ενώ αν προστεθεί μια παραγγελία ή αλλάξω κάτι εγώ σε αυτή, τότε αργεί τουλάχιστον 10 λεπτά να φανεί.

Μήπως φταίει το ότι τρέχει μέσω localhost η εφαρμογή ενώ αν γίνει production ίσως δουλεύει κανονικά; Σας ευχαριστώ για το χρόνο σας.

Επεξ/σία 28 Φεβρουαρίου 2021 από MikeMenos

filip123go · 28 Φεβρουαρίου 2021

17 λεπτά πριν, MikeMenos είπε

Μήπως φταίει το ότι τρέχει μέσω localhost η εφαρμογή ενώ αν γίνει production ίσως δουλεύει κανονικά; Σας ευχαριστώ για το χρόνο σας.

Αυτό σίγουρα όχι. Στο xhr της κονσόλας, βλέπεις κανονικά τα requests σου από το front? Τα 10 λεπτά που λες είναι στάνταρ χρόνος; Η μπορεί άλλες φορές να είναι 8 και άλλες 12?

Επεξ/σία 28 Φεβρουαρίου 2021 από filip123go

MikeMenos · 28 Φεβρουαρίου 2021

1 ώρα πριν, filip123go είπε

Αυτό σίγουρα όχι. Στο xhr της κονσόλας, βλέπεις κανονικά τα requests σου από το front? Τα 10 λεπτά που λες είναι στάνταρ χρόνος; Η μπορεί άλλες φορές να είναι 8 και άλλες 12?

Νομίζω στο xhr φαίνονται κανονικά τα requests. Το πρώτο είναι το get, για να δω τις παραγγελίες και το δεύτερο είναι το put που έκανα την παραγγελία, μόλις τώρα, ως 'ολοκληρωμένη' και όπως βλέπεις στο dashboard του WC, έχει αλλάξει σε completed ενώ στον πίνακα λέει ακόμα waiting-approval. Όσον αφορά τους χρόνους απόκρισης, ναι ντάξει δεν είναι στάνταρ, αλλά δεν είναι άμεσο το update, παίρνει τουλάχιστον 2-3 λεπτά εκτός από την 'Ώρα Παραγγελίας' που ανανεώνεται real-time.

Spoiler

Αυτά που καθυστερούν είναι: Όταν προστίθεται μία παραγγελία, και όταν αλλάζει οποιαδήποτε κατάσταση της.

Αυτά που δεν καθυστερούν είναι: Η Ώρα της Παραγγελίας που ξέρω 'γω αν έγινε πριν 5 λεπτά, μετά από ένα λεπτό, θα λέει πριν 6 λεπτά (χωρίς refresh της σελίδας).

Επεξ/σία 28 Φεβρουαρίου 2021 από MikeMenos

filip123go · 28 Φεβρουαρίου 2021

Κάνε edit το μνμ σου πιο πάνω και γράψε τα πεδία του πίνακα που καθυστερούν για να τα έχουμε όλα μαζεμένα σε ένα σημείο, μήπως και βγάλουμε άκρη.
Πόσα προϊόντα έχει το κατάστημα;
Μήπως τα κάνεις loop ένα-ένα για να βρεις τις αλλαγές;

MikeMenos · 28 Φεβρουαρίου 2021

Είναι κατάστημα με πίτσες, οπότε έχει διάφορα από σαλάτες μέχρι burger.

Loop όχι δεν τα κάνω, με useEffect καλώ το axios request και τα βάζω στο DOM με .map() του response από το request.

Ουσιαστικά το παρακάτω κάνω, η 'Ώρα Παραγγελίας είναι μέσα στο ίδιο response με τα άλλα (id, τρόπος πληρωμής, status of order κτλ), οπότε γι' αυτο δεν καταλαβαίνω γιατί αργούν όλα να ενημερωθούν στον πίνακα ενώ είναι στο ίδιο response.

const fetchData = async () => {

await axios

.get(

`${api.url}?consumer_key=${api.key}&consumer_secret=${api.secret}&per_page=15`

)

.then((result) => {

setData(result.data);

console.log(result.data);

})

.catch((e) => {

console.log(e);

});

};

useEffect(() => {

fetchData();

}, []);

Επεξ/σία 28 Φεβρουαρίου 2021 από MikeMenos

filip123go · 28 Φεβρουαρίου 2021

Για πόσταρε και τον κώδικα στο οποίο γεμίζεις τον πίνακα. Επίσης βάλε ένα console.log ακριβώς κάτω από το σημείο που γεμίζεις το πεδίο του πίνακα, να δεις τι σου φέρνει την δεδομένη στιγμή.

Edit: Στο result σου επιστρέφει την σωστή ώρα η την λάθος;;

26 λεπτά πριν, MikeMenos είπε

Αυτά που καθυστερούν είναι: Όταν προστίθεται μία παραγγελία, και όταν αλλάζει οποιαδήποτε κατάσταση της.

Αυτά που δεν καθυστερούν είναι: Η Ώρα της Παραγγελίας που ξέρω 'γω αν έγινε πριν 5 λεπτά, μετά από ένα λεπτό, θα λέει πριν 6 λεπτά (χωρίς refresh της σελίδας).

Δηλαδή καθυστερούν τα data που φέρνεις από τον σερβερ, σωστά; Η ώρα της παραγγελίας (λογικά) την υπολογίζεις στον client.
Για να καταλάβω, απαντησε μου λίγο στα παρακάτω:
Βάζεις την παραγγελία , το request στέλνεται κατευθείαν;
Αφού στείλεις το request, το respose έρχεται κατευθείαν και σωστά;

Νομίζω ότι το πρόβλημά σου είναι στο update του πίνακα. Σε ποιο σημείο καλείς το fetchdata? Ποσταρε όλο το component του πίνακα...
Υποψιάζομαι ότι το καλείς μόνο την 1η φορά που καλείς την σελίδα. Οπότε μετά, ναι μεν παίρνεις τα data, αλλά δεν κάνεις update το dom. Με refresh παίρνει τις αλλαγες κατευθείαν;;

Επεξ/σία 28 Φεβρουαρίου 2021 από filip123go

MikeMenos · 28 Φεβρουαρίου 2021

Spoiler




<TableBody>
          {data.map((order) => (
            <StyledTableRow key={order.id}>
              <StyledTableCell component="th" scope="row" align="center">
                {order.id}
              </StyledTableCell>
              <StyledTableCell align="center">
                <Moment utc local fromNow>
                  {order.date_created}
                </Moment>
              </StyledTableCell>
              <StyledTableCell
                onClick={() => handleStatus(order.id)}
                align="center"
                style={{ cursor: "pointer" }}
              >
                {order.status}
              </StyledTableCell>
              <StyledTableCell align="center">{order.total}</StyledTableCell>
              <StyledTableCell align="center">
                {order.payment_method_title}
              </StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>

Έβαλα ενα console.log όταν κάνω το put method. Την άλλαξα από completed σε on-hold μέσα στο dashboard του WC και ξαναπάτησα το κελί της ΄Κατάστασης' ώστε να γίνει πάλι completed. (που έγινε όπως βλέπεις στο console αλλά πάλι στον πίνακα λέει 'on Hold'.

Μου επιστρέφει την ώρα 2 ώρες πρίν αλλά με το Moment package, την κάνω local όπως θα δεις και στα props του κελιού με την ώρα.

Spoiler

18 λεπτά πριν, filip123go είπε

Για πόσταρε και τον κώδικα στο οποίο γεμίζεις τον πίνακα. Επίσης βάλε ένα console.log ακριβώς κάτω από το σημείο που γεμίζεις το πεδίο του πίνακα, να δεις τι σου φέρνει την δεδομένη στιγμή.

Edit: Στο result σου επιστρέφει την σωστή ώρα η την λάθος;;

Δηλαδή καθυστερούν τα data που φέρνεις από τον σερβερ, σωστά; Η ώρα της παραγγελίας (λογικά) την υπολογίζεις στον client.
Για να καταλάβω, απαντησε μου λίγο στα παρακάτω:
Βάζεις την παραγγελία , το request στέλνεται κατευθείαν;
Αφού στείλεις το request, το respose έρχεται κατευθείαν και σωστά;

Νομίζω ότι το πρόβλημά σου είναι στο update του πίνακα. Σε ποιο σημείο καλείς το fetchdata? Ποσταρε όλο το component του πίνακα...
Υποψιάζομαι ότι το καλείς μόνο την 1η φορά που καλείς την σελίδα. Οπότε μετά, ναι μεν παίρνεις τα data, αλλά δεν κάνεις update το dom. Με refresh παίρνει τις αλλαγες κατευθείαν;;

Το request ναι, στέλνεται κατευθέιαν γιατί όταν πάω στο dashboard του WC, έχει αλλάξει αμέσως η κατάσταση του σε completed.

Κατάλαβα τι λες. Όταν κάνω μια εικονική παραγγελία από το site, όντως στο console δεν εμφανίζεται κάποιο fetch. Στο useEffect, σαν parameter έχω άδειο array που σημαίνει ότι καλέιται μόνο μία φορά. Οπότε λές γι' αυτό; Επίσης όχι, δε γίνεται update κατευθείαν με refresh. Μεσολαβούν αρκετά μέχρι να την πάρει την αλλαγή. Και αν δεν κάνω refresh, το έχω αφήσει και 20 λεπτά, δεν προσθέτει κάτι (ή τελοσπάντων όποια ενέργεια έκανα), μέχρι να κάνω refresh μετά από αυτά τα 20 λεπτά.

Επεξ/σία 28 Φεβρουαρίου 2021 από MikeMenos

filip123go · 28 Φεβρουαρίου 2021

Δεν μου πόσταρες όλο το component όμως. Το fetchdata δεν βλέπω από που το καλείς.

Δοκίμασε το εξής. Κάνε όλο το flow και άνοιξε διαφορετικό browser και δες αν πάλι παίρνεις τα ίδια δεδομένα.

21 λεπτά πριν, MikeMenos είπε

Όταν κάνω μια εικονική παραγγελία από το site, όντως στο console δεν εμφανίζεται κάποιο fetch.

Εν μέρη λογικό. Πως θα καταλάβει το custom back-office σου ότι έγινε παραγγελία; Πρέπει με κάποιο τρόπο να το ενημερώσεις. Πόση πρόσβαση έχεις στο σαιτ; Μπορείς να βάλεις ένα extra request που να καλεί το back office σου η το request που κάνει καταγραφή της παραγγελίας στο woo-comerce, να το στέλνεις κατευθείαν και στο custom back-office που έχεις κάνει. Το δεύτερο είναι ρίσκο και bad practice, γιατί μπορει να καταλήξει σε ασυμφωνία δεδομένων ανάμεσα στο woo-comerce και το back office που έχεις φτιάξει.

MikeMenos · 28 Φεβρουαρίου 2021

Spoiler



import React, { useState, useEffect } from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import axios from "axios";
import Moment from "react-moment";
import "moment-timezone";
import "./Orders.css";

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  body: {
    fontSize: 14,
  },
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    "&:nth-of-type(odd)": {
      backgroundColor: theme.palette.action.hover,
    },
  },
}))(TableRow);

const useStyles = makeStyles({
  table: {
    minWidth: 500,
  },
});

const api = {
  url: "https://dev-pizza-demo.pantheonsite.io/wp-json/wc/v3/orders/",
  key: "ck_...",
  secret: "cs_...",
};

const Orders = () => {
  const classes = useStyles();
  const [data, setData] = useState([]);

  const fetchData = async () => {
    await axios
      .get(
        `${api.url}?consumer_key=${api.key}&consumer_secret=${api.secret}&per_page=15`
      )
      .then((result) => {
        setData(result.data);
        console.log(result.data);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  useEffect(() => {
    fetchData();
  }, [data.status]);

  const handleStatus = async (id) => {
    await axios
      .put(
        `${api.url}${id}?consumer_key=${api.key}&consumer_secret=${api.secret}`,
        {
          status: "completed",
        }
      )
      .then((response) => console.log(response))
      .catch((e) => {
        console.log(e);
      });
  };

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="customized table">
        <TableHead>
          <TableRow>
            <StyledTableCell align="center">
              Αριθμός Παραγγελίας
            </StyledTableCell>
            <StyledTableCell align="center">Ώρα Παραγγελίας</StyledTableCell>
            <StyledTableCell align="center">Κατάσταση</StyledTableCell>
            <StyledTableCell align="center">Σύνολο</StyledTableCell>
            <StyledTableCell align="center">Τρόπος Πληρωμής</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((order) => (
            <StyledTableRow key={order.id}>
              <StyledTableCell component="th" scope="row" align="center">
                {order.id}
              </StyledTableCell>
              <StyledTableCell align="center">
                <Moment utc local fromNow>
                  {order.date_created}
                </Moment>
              </StyledTableCell>
              <StyledTableCell
                onClick={() => handleStatus(order.id)}
                align="center"
                style={{ cursor: "pointer" }}
              >
                {order.status}
              </StyledTableCell>
              <StyledTableCell align="center">{order.total}</StyledTableCell>
              <StyledTableCell align="center">
                {order.payment_method_title}
              </StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default Orders;

9 λεπτά πριν, filip123go είπε

Πόση πρόσβαση έχεις στο σαιτ;

Στο φτιάξιμο είμαι ακόμα του site, δεν είναι οτι τρέχει και δεν λειτουργεί η εφαρμογή μου και καίγομαι απλά θέλω να προσφέρω ως έξτρα υπηρεσία αυτό με τον πίνακα σε κάποιο subdomain πχ. Δηλαδή όταν έρχεται μια παραγγελία, να του έμφανίζεται άμεσα στον πίνακα και από 'κει να μπορεί να την κάνει approve, completed κτλ. Μόνο αυτό.

9 λεπτά πριν, filip123go είπε

Μπορείς να βάλεις ένα extra request που να καλεί το back office σου

Δεν το ξέρω αυτό, θα το ψάξω. Δεν έχω ακούσει καν τι είναι το back office χαχα.

Επεξ/σία 28 Φεβρουαρίου 2021 από MikeMenos
Privacy

filip123go · 28 Φεβρουαρίου 2021

7 λεπτά πριν, MikeMenos είπε

Δεν το ξέρω αυτό, θα το ψάξω. Δεν έχω ακούσει καν τι είναι το back office χαχα.

Το back office είναι το πρόγραμμα διαχείρισης (ο πίνακας που φτιάχνει δηλαδή).
Το flow σου θα πρέπει να είναι:
κάνει παραγγελία ο πελάτης -> αποθηκεύεται στο woo-comerce -> κάνεις update τον δικό σου πίνακα.
Έτσι όπως είναι τώρα, ο πίνακας σου είναι εκτός του flow σου.

14 λεπτά πριν, MikeMenos είπε

Στο φτιάξιμο είμαι ακόμα του site, δεν είναι οτι τρέχει και δεν λειτουργεί η εφαρμογή μου και καίγομαι απλά θέλω να προσφέρω ως έξτρα υπηρεσία αυτό με τον πίνακα σε κάποιο subdomain πχ.

Γενικώς τέτοιες παρεμβάσεις είναι μεγάλος πονοκέφαλος αν δεν έχεις φτιάξει εσύ ολόκληρο το project. Κοίτα μήπως έχει κάποιο flag το woo-comerce, που σε ενημερώνει για καινούριες παραγγελίες.
Το σαιτ είναι custom δικό σου ή είναι θέμα;

MikeMenos · 28 Φεβρουαρίου 2021

10 λεπτά πριν, filip123go είπε

Το back office είναι το πρόγραμμα διαχείρισης (ο πίνακας που φτιάχνει δηλαδή).
Το flow σου θα πρέπει να είναι:
κάνει παραγγελία ο πελάτης -> αποθηκεύεται στο woo-comerce -> κάνεις update τον δικό σου πίνακα.
Έτσι όπως είναι τώρα, ο πίνακας σου είναι εκτός του flow σου.

Α το dashboard με λίγα λόγια εννοείς.

Ναι ουσιαστικά αυτό συμβαίνει, ο πίνακάς μου είναι εκτός flow ενώ τα άλλα δύο λειτουργούν μια χαρά.

10 λεπτά πριν, filip123go είπε

Γενικώς τέτοιες παρεμβάσεις είναι μεγάλος πονοκέφαλος αν δεν έχεις φτιάξει εσύ ολόκληρο το project. Κοίτα μήπως έχει κάποιο flag το woo-comerce, που σε ενημερώνει για καινούριες παραγγελίες.
Το σαιτ είναι custom δικό σου ή είναι θέμα;

Με elementor έχει φτιαχτεί, σπασμένο βέβαια αλλά χωρίς κάποιο template.

Τέλοσπάντων, θα προσπαθήσω να το ψάξω κάπως, σε ευχαριστώ πολύ για το χρόνο σου παρόλαυτα και τις άμεσες απαντήσεις.

Επεξ/σία 28 Φεβρουαρίου 2021 από MikeMenos

Predatorkill · 28 Φεβρουαρίου 2021

Αμα θες πληρες realtime τοτε μονο με websockets.

Βαλε ενα interval καθε 20-30 secs να τσεκαρει για νεες παραγγελιες και αμα βρει κανε refresh τον πινακα, μπακαλης μεν, δουλευει δε.

Επεξ/σία 28 Φεβρουαρίου 2021 από Predatorkill

Papakaliati · 1 Μαρτίου 2021

23 ώρες πριν, Predatorkill είπε

Αμα θες πληρες realtime τοτε μονο με websockets.

Βαλε ενα interval καθε 20-30 secs να τσεκαρει για νεες παραγγελιες και αμα βρει κανε refresh τον πινακα, μπακαλης μεν, δουλευει δε.

Θα μπορουσε και με long poll, αν για καποιο λογο δεν ηθελε να παει σε websockets.

MikeMenos · 1 Μαρτίου 2021

Ωραία, θα δοκιμάσω και θα επανέλθω γιατί δεν έχω δουλέψει ποτέ τις επιλογές που μου αναφέρατε. Ευχαριστώ πολύ.

Σύνδεση

Ερώτηση για React και WooCommerce API

Προτεινόμενες αναρτήσεις

MikeMenos

filip123go

MikeMenos

filip123go

MikeMenos

filip123go

MikeMenos

filip123go

MikeMenos

filip123go

MikeMenos

Predatorkill

Papakaliati

MikeMenos

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση