We Keep Coding

Using Shopify JS Buy SDK, unable to remove variant item from cart

I have a button to remove an item from the cart on my cart page, but I'm receiving this error: Variable $lineItemIds of type [ID!]! was provided invalid value.
I've gone through the GraphQL list and tried every single ID, title, and variant, but it still gives me this error. Which ID should I be using and how should I format the ID correctly?
$('.remove-item').on('click', function() {
const lineItems = checkout.attrs.lineItems;
const checkoutId = 'gid://shopify/Checkout/xxxxxxxxxxx';
var dataid = this.getAttribute('data-id');
var varid = btoa(lineItems[dataid].variant.id);
var lineItemsToRemove = [{
variantId: varid,
quantity: 1
}];
client.checkout.removeLineItems(checkoutId, lineItemsToRemove).then((checkout) => {
});
});

After reviewing the documentation, I realized I was adding an id attribute. It should just pass the plain ID.
var lineItemsToRemove = [
varid2
];
instead of
var lineItemsToRemove = [{
id:varid2
}];

Use array of invoice numbers to create invoice objects within which each invoice number from the initial array serves as id property

Building a script in google apps script.
I get values from an invoice data sheet with multiple lines per invoice so as to account for line items.
My progress so far has been to extract individual invoice numbers from the column (each invoice number occurs as many line items the individual invoice has).
The array todaysInvoices looks like this: [35033817, 35033818, 35033819, 35033820, 35033821]
Now, I need a way to create an object for each of these invoice numbers that has different properties (such as invoiceDate and customerName etc.). The initial invoice number as in the array should thereby be assigned as 'id' property to the new invoice object.
I need help to use objects in javascript.
If you require additional information, please let me know.
Below is a screenshot of a simplified version of my order sheet:
This is a clipping of my order sheet. Before and after the shown columns there are many more with more details but the hierarchies of information are already in the image
Below is the code I have so far:
const orderSheet = SpreadsheetApp.openById('SPREADSHEETID').getSheetByName('SHEETNAME');
const invoiceTemplate = DriveApp.getFileById('DOCUMENTID');
const tempFolder = DriveApp.getFolderById('FOLDERID');
const invoiceData = orderSheet.getRange(4,7, orderSheet.getLastRow() - 1, 57).getDisplayValues().filter(function (rows){ return rows[0] === 'INVOICED'});
const invDataRepo = SpreadsheetApp.openById('SPREADSHEETID2');
var timestamp = new Date();
function printBulkInvoices() {
logLineItems ();
var todaysInvoices = uniqueInvIDs ();
todaysInvoices.sort();
todaysInvoices.map(String);
//fetchInvData (todaysInvoices);
Logger.log (todaysInvoices)
}
function fetchInvData (invoiceIDs) {
let invoices = {
}
Logger.log(invoices)
invoiceIDs.forEach
}
function fetchLineItems (invoiceDataArray) {
}
// send array of todays unique invoice numbers (later all inv data?) to invdata sheet and log them
function logTodaysInvoices (invIDArr){
invIDArr.forEach
invDataRepo.getSheetByName('invdata').getRange(invDataRepo.getSheetByName('invdata').getLastRow()+1,1,invIDArr.length,1).setValue(invIDArr);
}
// return an array of unique invoice ids from todays invoice data
function uniqueInvIDs (){
let singleArray = invoiceData.map(row => row[5]);
let unique = [...new Set(singleArray)];
return unique;
}
//log incoicedata to invdatarepo-sheet 'lineitems'
function logLineItems (){
invDataRepo.getSheetByName('lineitems').getRange(invDataRepo.getSheetByName('lineitems').getLastRow()+1,2,invoiceData.length,invoiceData[0].length).setValues(invoiceData);
}

It's hard to say exactly what you need since we cannot see your Invoice Data Sheet.
But here's something that might give you a start:
let iobj = {idA:[]};
[35033817, 35033818, 35033819, 35033820, 35033821].forEach((id => {
if(!iobj.hasOwnProperty(id)) {
iobj[id]={date: invoiceDate, name: customName, items:[]};
iobj.idA.push(id);//I find it handy to have an array of object properties to loop through when I wish to reorganize the data after it's all collected
} else {
iobj[id].items.push({item info properties});//I am guessing here that you may wish to addition additional information about the items which are on the current invoice
}
});
Javascript Object
To follow up from your question:
Your loop to collect object data would start to look something like this:
function getInvoiceData() {
const ss = SpreadsheetApp.getActive();
const ish = ss.getSheetByName('Invoice Data');
const isr = 2;
const hA = ish.getRange(1, 1, 1, ish.getLastColumn()).getValues()[0];
let idx = {};//object return head index into row array based on header title which in this case I assume invoice number is labeled 'Invoicenumber'
hA.forEach((h, i) => {idx[h] = i});
const vs = ish.getRange(isr, 1, ish.getLastRow() - isr + 1, ish.getLastColumn()).getValues();
let iobj = { idA: [] };
vs.forEach(r => {
if (!iobj.hasOwnProperty(r[idx['invoicenumber']])) {
iobj[r[idx['invoicenumber']]] = { date: r[idx['invoicedate']], name: r[idx['customername']], items: [] };
iobj.idA.push(r[idx['invoicenumber']]);
} else {
iobj[r[idx['invoicenumber']]].items.push({ iteminfoproperties:'' });
}
});
}

I want to use localStorage to save some data which is entered by the user so I can display the information back in HTML

So I am building a restaurant ordering system for some practice, the user chooses a waiter and adds an order or comment to the selected waiter.
This is then pushed to the Waiter object using the methods created.
I want to store the data which is imputed by the user, so it can be viewed in the console after the page is reloaded.
I want to accomplish this using JSON not PHP/other.
So when I reopen the the page any data pushed to the arrays are still visible when logged to the console.
Any links or code would be very appreciated
/*
//Waiters Section
*/
//Waiter Constructor
class Waiter {
constructor(name) {
this.name = name;
this.order = [];
this.total = 0;
this.comment = [];
}
//Methods to map() the price argument
//and then reduce() to get the total
addFood(item) {
this.order.push(item);
this.total = this.order
.map(o => o.price, 0)
.reduce((a, b) => a + b, 0);
};
//Method to push any comments to the selected waiter
addComment(c){
this.comment.push(c) + " ";
}
};
//Array to store waiters
const waiters = [
new Waiter('Timo'),
new Waiter('Lucian'),
new Waiter('Arpi')
];
//Adding the waiters to the options menu
const waitersEl = document.getElementById('waiters');
waiters.forEach(({
name
}) => waitersEl.options.add(new Option(name)));
/*
//Food Section Main
*/
//Food Constructor
class Item {
constructor(item, price) {
this.item = item;
this.price = price;
this.label = `${item} (${price})`;
}
}
//Main food array
const mainFood = [
new Item('Peene Primvera', 14),
new Item("Lasagne", 14),
new Item("Fillet Steak", 20)
];
//Addin the options for each food and price item inside the dropdown menu
const foodMain = document.getElementById('menuMain');
mainFood.forEach(({
label,
item
}, index) => foodMain.options.add(new Option(label, index)));
/*
//Fucntion for when the form is submited it adds the
*/
const formEl = document.getElementById('mainForm');
formEl.onsubmit = function (e) {
//Selecting the comment input on the form to pass to the
//comment waiters array.
const comment = document.getElementById('comment').value;
//Selecting the choosen index from the user food and which waiter orderd //it which waiter.
//Selects the choosen food to pass to the addFood method in the waiter //class.
const foodItemIndex = foodMain.options[foodMain.selectedIndex].value;
const foodItem = mainFood[foodItemIndex];
//Selecting the waiter to push valid informaiton to.
const waiterName = waitersEl.options[waitersEl.selectedIndex].value;
const waiter = waiters.find(({name}) => name === waiterName);
//Logic to check when submited if both feilds are true proceed.
//The statements check to see which feild values have been entered
//Then it call's the corresponding method from the waiter class and
//pushes the value to the choosen array
if (waiter && foodItem && comment) {
waiter.addFood(foodItem)
waiter.addComment(comment);
console.log(waiters);
}
else if (waiter && comment) {
waiter.addComment(comment);
console.log(waiters);
}
else if (waiter && foodItem){
waiter.addFood(foodItem)
console.log(waiters);
}
formEl.reset();
return false; // prevents redirect/refresh
};
After the form has been submitted once:
0: Waiter
comment: ["This form has been submitted I will now close the window and when I reopen I will not be here"]
name: "Timo"
order: [Item]
total: 14
Now when I reopen:
0: Waiter
comment: []
name: "Timo"
order: []
total: 0
I want it so when I reopen the data is still inside the array.

After form submission, you write to localStorage using localStorage.setItem(key,value);
OnSubmit of the form: push each WaiterObject to an array of items and then save items array to localStorage
using localStorage.getItem() method retrieve the value from localStorage and set to items and display the items,
here is an example of storing and retrieve logic explained above
https://coderwall.com/p/ewxn9g/storing-and-retrieving-objects-with-localstorage-html5

You could perform
localStorage.setItem('waiters', JSON.stringify(waiters))
when any update is made.
Then before waiters creation check if
localStorage.getItem('waiters', JSON.stringify(waiters))
exists and use it instead of creation.

How clear the same object from localStorage and increase quantity?

I am creating a client side shopping cart. Added products are saved in local storage, but how can increase product quantity if it is already added to local storage? I have function that adds product to local store and in this function I increase quantity, but products become duplicated.
Product.prototype.addObjToLocalStore = function() {
var obj = {
'name': this.name,
'qty': this.qty,
'price': this.price,
'total': this.getPrice()
}
var oldItems = JSON.parse(localStorage.getItem('itemsArray')) || [];
for (k in oldItems) {
if(oldItems[k].name == obj.name) {
oldItems[k].qty += parseInt(obj.qty);
localStorage.setItem('itemsArray', JSON.stringify(oldItems[k].qty));
}
}
oldItems.push(obj);
localStorage.setItem('itemsArray', JSON.stringify(oldItems));
}

Well, regardless of whether or not you've found the item, you oldItems.push(obj) to it, duplicating the item.
So what I would do in this case is not use an array, but an object. The key of the object being the item's identifier (in your case, the name), and the value being the item's properties (quantity, price, etc). Like so:
Product.prototype.addObjToLocalStore = function() {
// oldItems is an object, not an array
var oldItems = JSON.parse(localStorage.getItem('itemsObject')) || {};
// If it exists, grab its quantity. If not, 0.
var oldQuantity = (oldItems[this.name] && oldItems[this.name].qty) || 0;
var obj = {
'name': this.name,
'qty': oldQuantity + this.qty,
'price': this.price,
'total': this.getPrice()
}
// Replace the old entry with the new.
// If doesn't exist, will be created.
oldItems[this.name] = obj;
// We're done here. Store the new object.
logalStorage.setItem('itemsObject', JSON.stringify(oldItems));
};

If you want to not duplicate your object delete two last lines:
oldItems.push(obj);
localStorage.setItem('itemsArray', JSON.stringify(oldItems));

Saving Object Array to local storage not working

Hello i am trying to create a simple client side cart, in my controller when the page loads i define the array objects that will hold my items, if they are undefined or have a length of 0 i set them to '[]' by default:
$scope.cart = JSON.parse($window.localStorage.getItem('cart')) || [];
$scope.cart.items = $scope.cart.items || [];
This is the function that adds the item to the cart:
$scope.addItem = function(item) {
if (item.quantity > 0)
{
var cartItem = {
id: item.id,
description: item.class + ' item' + (item.quantity > 1 ? 's' : '') + ' to ' + $scope.details.name,
quantity: item.quantity
}
// Adding item to cart array
$scope.cart.items.push(cartItem)
// Saving cart to storage
$window.localStorage.setItem('cart', JSON.stringify($scope.cart));
// Checking to see if data has indeed been stored in localstorage
console.log(JSON.parse($window.localStorage.getItem('cart')));
}
}
Now my cart in storage always turns up as empty, there were times i played around with the code and got it to work(dunno what i did) but when i reloaded the page everything got cleared.

You are initializing cart as array but then assigning properties to it.
It should be an object:
$scope.cart = JSON.parse($window.localStorage.getItem('cart')) || {};
Also before you can push to an array within cart that array needs to be defined.
Simplest might be to have all the properties available in one object first:
var newCart = {
tickets:[],
items:[]
}
$scope.cart = JSON.parse($window.localStorage.getItem('cart')) || newCart ;

You should check if there is already a value stored as
if(!$window.localStorage.getItem('cart'))
{
// Saving cart to storage
$window.localStorage.setItem('cart', JSON.stringify($scope.cart));
}