Woocommerce Rest Api - add to cart with custom data - woocommerce

is there any way to add a product to the cart with its own data that will not be displayed in the checkout, but only in the administration under a specific order?
I found only: product_id quantity variation_id variations
The problem is that I have a native woocommerce eshop, but I have the configurator developed in React.
After complete filling (by the customer), the configurator should send all its inputs, checkboxes and choices as custom data to the basket, where after the subsequent order, these data would be visible in the administration.
Something like this:
export const addToCart = (productId, qty, customData) => {
const addOrViewCartConfig = getApiCartConfig();
setLoading(true);
axios.post(
CART_ENDPOINT,
{
product_id: productId,
quantity: qty,
//customData
},
addOrViewCartConfig
);
};
My customData:
{
obj1: {
font: "arial",
text: "Some string.",
size: 12,
is_edited: false
},
obj2: {
font: "sans-serif",
text: "Some string.",
size: 15,
is_edited: true,
},
}
Please, is there any solution for my problem?
Thanks

Related

How to indentify the purchased products after checkout?

I have a Stripe checkout session that triggers a webhook when a transaction is completed. The webhook retrieves a list of line_items that were purchased and is supposed to identify the products in the database so that it can set the status in the database to 'sold'.
// api/checkout
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
mode: 'payment',
line_items: req.body.itemsIDs.map(itemId => {
const storeItem = items.find(i => i.id === itemId);
return {
price_data: {
currency: 'usd',
product_data: {
name: "My Product",
images: [storeItem.preview]
// Can I save the itemId here somehow? I need it in the webhook later to identify the product in the db
},
unit_amount: storeItem.price * 100
},
quantity: 1
}
}),
success_url: `${process.env.SERVER_URL}/success`,
cancel_url: `${process.env.SERVER_URL}`
});
In the webhook, I have access to the session's purchased items (line_items), but I have no way of finding this item in the database. Here's what the line_item object looks like:
{
id: 'li_1M4iB1DjiBaV2GrrFmb0bTVD', // this is NOT the MongoDB Id that I need, it's a Stripe-generated id
object: 'item',
amount_discount: 0,
amount_subtotal: 100,
amount_tax: 0,
amount_total: 100,
currency: 'usd',
description: 'My Product',
price: {
id: 'price_1M4iB1DjiBaV2Grr6SnKEWdC',
object: 'price',
active: false,
billing_scheme: 'per_unit',
created: 1668591903,
currency: 'usd',
custom_unit_amount: null,
livemode: false,
lookup_key: null,
metadata: {},
nickname: null,
product: 'prod_Mo4ql746Hw4pck',
recurring: null,
tax_behavior: 'unspecified',
tiers_mode: null,
transform_quantity: null,
type: 'one_time',
unit_amount: 100,
unit_amount_decimal: '100'
},
quantity: 1
}
When passing line_items.price_data [1] to the creation request of the Checkout Session, you are creating a new price on each purchase. You should instead use line_items.price [2] with existing Stripe Prices[3] and Product[4]. You can set your own Ids in the Metadata of both prices [5] and products[6].
After completing the Checkout Session and when receiving the Webhook, you’ll get the Prices with its metadata that contains your database related Ids, as you have access to the session's purchased items (line_items).
[1] https://stripe.com/docs/api/checkout/sessions/create#create_checkout_session-line_items-price_data
[2] https://stripe.com/docs/api/checkout/sessions/create#create_checkout_session-line_items-price
[3] https://stripe.com/docs/api/products/create
[4] https://stripe.com/docs/api/prices/create
[5] https://stripe.com/docs/api/prices/create#create_price-metadata
[6] https://stripe.com/docs/api/products/create#create_product-metadata
[7] https://stripe.com/docs/api/events/types#event_types-checkout.session.completed

Google Analytics 4 via Google Tag Manager add_to_cart event doesn't pass the item price correctly

I'm trying to pass the add_to_cart event for my online shop to Google Analytics 4 via Google Tag Manager and I'm having an issue on the item price. Specifically, I send the following event data:
const eventData = {
event: 'add_to_cart',
ecommerce: {
items: [{
item_id: data.id,
item_name: data.title,
price: data.totalPrice,
quantity: 1
}]
}
}
When spying on it via the Google Tag Assistant I get this dataLayer value:
{
event: "add_to_cart",
gtm: {
//google stuff here
},
ecommerce: {
items: [
{
item_id: 3047,
item_name: "Something something",
price: 2.39,
quantity: 1
}
]
}
When I look at the resulting event in Google Analytics 4 via the DebugView, I get this:
item_id: 3047
quantity: 1
item_name: Something something
price: 2390000
Specifically the price is 2390000 instead of 2.39.
Any idea what could be missing here? The whole setup is pretty straightforward.
Thanks!

How to get included model data count in prisma with where clause?

i need to get user details with post count(Number of posts for today).
const usersWithCount = await prisma.user.findMany({
select: {
_count: {
select: {
posts: {
where: {
createdAt: moment().format("YYYY-MM-DD"),
},
},
recipes: true,
},
},
},
})
You cannot filter in relations count, this is not currently supported by prisma.
Here is the Feature Request for adding filters in relations count.
In your use case you can get filtered relations as described below:
const usersWithCount = await prisma.user.findMany({
select: {
posts: {
where: {
createdAt: moment().format("YYYY-MM-DD"),
},
},
recipes: true
},
});
In the response of the above query you will get posts array with records satisfying your where condition, you can use the array's length as a count.

storybook argType and defaultValue with a select losing values when changing view in the sidebar

I am trying to use argTypes with a select to allow the user to change fields, I have this default export:
const themes = {
defaultTheme,
salesTheme,
cuttingTheme,
} as const;
export default {
title: 'atoms/Button',
component: Button,
argTypes: {
theme: {
options: Object.keys(themes), // iterator
mapping: Object.values(themes), // values
control: {
type: 'select',
labels: Object.keys(themes),
values: Object.values(themes), //
},
defaultValue: themes.defaultTheme,
},
},
} as ComponentMeta<typeof Button>;
defaultValue works fine when the page first loads but if I change a menu item on the sidebar pane it loses its value.

How to obtain a specific document from Firebase in Vue

How to obtain and display a single document from a list of documents from Firebase Firestore data?
I’m able to grab the collection of documents and display the information but I just want to grab one so I can display it elsewhere without duplicating multiple elements with data.
Firebase example:
DocID: title - “Pizza”
DocID: title - “Pancakes”
DocID: title - “Cereal”
Vue template example:
H1-tag {{display the title of Pizza here}} h1tag
Is there a way to do this without having multiple h1 elements with different titles?
DocID: title - “Pizza” DocID: title - “Pancakes” DocID: title - “Cereal”
One of the options:
Must be an array or convert to an array. And then receive data from it.
items: [
{
title: 'Pizza',
price: ''
},
{
title: 'Pancake',
price: ''
},
{
title: 'Cereal',
price: ''
}
]
<h1>{{items[0].title}}</h1>
vue3
setup () {
const items = ref([])
db.collection('products').onSnapshot((snapshotChange) => {
items.value = []
snapshotChange.forEach((doc) => {
items.value.push({
key: doc.id,
title: doc.data().title,
price: doc.data().price
})
})
})
return {
items
}
}

Resources