Display data from wix-stores Orders collection or push new orders to a new collection

Ask the community
, , ,
1

I have a site that is selling registrations for a physical class and for multiple reasons (issues with filtering and categorizing and seat inventory) I can’t use Wix Booking app. I have everything set up perfectly so users can type in the name of their child before adding a product to cart but there is no view where I can see all the orders for this class that also shows this additional field.

I had 2 ideas for solutions to this problem so I could see all the attendees for a class:

  1. Create a custom Orders (all) dynamic page that displays the class and the custom field in a repeater, and add a filter at the top to filter orders by class.
    The problem is the LineItems field is an array of Objects and I can’t figure out how to access it in a way that can be filtered nor in a way that can be displayed in a repeater

  2. Create another collection with the plain text items I need and create a listener for new orders to push relevant data (product, additional info field) to the new collection then display it in a normal repeater
    The problem here is I can’t find any documentation on a listener that will work for this in the wix-stores documentation

I have a deadline this week so any help here would be greatly appreciated!

2

For your first item any sort of data should be displayable in a Repeater and you can use onItemReady() to tell the repeater how to populate elements within it when a new item is added to the repeater.

https://www.wix.com/velo/reference/$w/repeater/onitemready

For filtering that sounds like something you can do in vanilla JS (perhaps using some lodash functions), or are you talking about filtering queries by properties of an Object in a Data Collection?

In the second case you can query properties of objects in a Data Collection like so:

import wixData from 'wix-data';

$w.onReady(function () {

    wixData.query("myCollection")
        .eq("myObject.myProperty", true)
        .find()
        .then(results => {
            console.log(results.items);
        })
});

My data looked like this:

825×257 16 KB

And my results of the query were:

{
  "myObject": {
    "myProperty": true
  },
  "title": "should include too"
}
{
  "myObject": {
    "myProperty": true
  },
  "title": "should include"
}
3

I ended up doing both options once I found the wix-stores onNewOrder function in the documentation. Then I built a separate collection to store the order info customly and link to the appropriate references (member, Student, Order) etc.

Then built a dynamic page for classes (Products) and had each link to an individual item page that fetches the registry and displays info the way I need it to.

events.js

import wixData from ‘wix-data’ ;

export function wixStores_onNewOrder ( event ) {
getFullOrder ( event . orderId )
. then ( async ( order ) => {
insertOrderDetails ( order );
})
. catch (( err ) => {
console . log ( err );
});
}

function insertOrderDetails ( order ) {
let lineItems = order . lineItems ;
let orderId = order . _id ; //
let orderDate = order . _dateCreated ; //
let orderDateTime = order . _dateCreated ; //
let parentId = order . buyerInfo . id ; //
let studentName = order . customField . value ;

lineItems . forEach ( lineItem  => { 
    **let**  toInsert  = { 
        "orderId"  :  orderId , 
        "class"  :  lineItem . productId , 
        "className"  :  lineItem . name , 
        "linkedClass"  :  lineItem . productId , 
        "studentName"  :  studentName , 
        "orderDate"  :  orderDate , 
        "orderDateTime"  :  orderDateTime , 
        "order"  :  orderId , 
        "parent"  :  parentId , 
    } 
    wixData . query ( "Students" ) 
      . eq ( "title" ,  studentName ) 
      . find () 
      . then (( results ) => { 
        **if** ( results . items . length  >  0 ) { 
          toInsert . linkedStudent  =  results . items [ 0 ]. _id ; 
          addRecord ( "OrderDetails" , toInsert ); 
        }  **else**  { 
          addRecord ( "OrderDetails" ,  toInsert ); 
        } 
        console . log ( "added record " ,  toInsert ); 
      }) 
      . **catch** (( err ) => { 
        console . log ( err ); 
      }); 

    //console.log("toInsert is ", toInsert); 
}); 
//console.log("order is ", order );

}

function getFullOrder ( orderId ) {
return wixData . get ( ‘Stores/Orders’ , orderId );
}

function addRecord ( collection , toInsert ) {
wixData . insert ( collection , toInsert )
. then (( item ) => {
console . log ( item );
})
. catch (( err ) => {
console . log ( err );
});
}

Hopefully this helps someone struggling with the same thing later!

4

Glad you got it solved and thanks for sharing your code and process for others to benefit from!