How do you add an item to an existing cart using BigCommerce's Storefront Cart API? - fetch

I'm having difficulty using the BigCommerce Storefront Cart API as described in their docs
When I manually send an http request through the fetch api using a console window open on the storefront website, it always comes back with 404 "Cart does not exist".
This is the fetch request I'm using:
fetch(
'/api/storefront/carts/e475da57-e9d1-4da0-b9bf-ac4c34b8d601/items',
{
credentials: 'same-origin',
method: 'POST',
body: JSON.stringify({ lineItems: [{ quantity: 1, productId: 2968 }]})
}
).then(res => res.json()).then(console.log)
I got the id by going to <store-url>/api/storefront/cart
When I simply do a GET on the same cart id, it sends back an object as expected.
I have no trouble when I make a new cart. It's only a problem if I want to add items to an existing cart.
I've tried adding a trailing forward slash, singular and plural forms of carts and items and lineItems

Related

How to e.preventDefault() when clicking on Update in Gutenberg, WordPress

How to e.preventDefault() when clicking on Update in Gutenberg, WordPress?
What I'm trying to do is check something and if there is any error, I will prevent the update process and show the error.
My code:
$(document).on('click', '#editor .editor-post-publish-button', function (e) {
e.preventDefault();
// Show Errors...
});
However, the e.preventDefault() is not preventing the process and the post is getting updated.
With JavaScript, you can use the core WordPress Block API to issue error notices if your own validation logic detects any issues and prevent the post from saving if errors are present, eg:
JavaScript
// Create error notice
wp.data.dispatch('core/notices').createErrorNotice(
'A value is required', // Message displayed to User
{
id: 'my-field', // Used to remove notice and check if notice is present
isDismissible: false,
}
);
// Remove notice
wp.data.dispatch('core/notices').removeNotice('my-field'); // unique id 'my-field'
// Prevent post from saving
wp.data.dispatch( 'core/editor' ).lockPostSaving( 'my-field' );
// Enable post saving
wp.data.dispatch( 'core/editor' ).unlockPostSaving( 'my-field' );
By using native WordPress API, displaying and styling of the notices is taken care of and keeps the UX consistent. The Documentation also has an example of preventing a post from publishing which may be helpful as well.

How can i remove billing address field in stripe checkout form?

I am using a custom code in WordPress for redirecting to checkout page of stripe but stripe checkout form is showing billing address
var data = {
action:'sendpayment',
currency:currency,
amount:amount,
payment_method_types:["card"]
};
jQuery.post(window.location.origin+'/wp-admin/admin-ajax.php', data, function(response) {
response= JSON.parse(response);
if(response.sessionId){
stripe.redirectToCheckout({
sessionId: response.sessionId,
}).then(handleResult);
}else{
handleResult(response);
}
});
You can specify billing_address_collection as required which will only collect it if it's necessary (at Stripe's determination). There is not an option to tell Stripe to never collect it, though.

Retrieve thumbnails for Linkedin Video Post (ugcPost API)

I try to retrieve a thumbnails for a Video Post with the ugcPost api without any success.
I retrieve always an empty array for thumbnails.
Regarding the doc Retrieve UGC Posts, like the sample response:
"com.linkedin.ugc.ShareContent": {
"media": [
{
"media": "urn:li:digitalmediaAsset:123ABDEFHAG",
"status": "READY",
"thumbnails": []
}
],
Any idea about how to retrieve a thumbnails with some projection or using the digitalmediaAsset urn?
EDIT: I've already tried this https://stackoverflow.com/a/58401470/2270041 without any success
According to the docs this is not possible, simply stating
Video thumbnails are not retrievable.

Sharing dymanically changing image in Linked IN using meta tag og:image is not working

Below is Our Requirement:
Sharing the dynamically changing content of a page in Linked IN (URL, title, summary and image).
Problem Statement:
1. All other content except Image is getting shared in Linked IN
Approach 1: Using Linked In Share URL
<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<<OUR URL>>&title=<<Our TITLE>>&summary=<<OUR SUMMARY>>">Share</a>
Issue:
1. The URL above doesn’t have the parameter to pass the image like title, summary etc.It is fetching the image from meta tag content which is having the property as “og:image” in the page
<meta property="og:image" content="<<IMAGE URL>>">enter code here
Since the image is changed dynamically in the page, we tried dynamically changing the content of this meta tag using jQuery. But when the new share window is opened it is trying to fetch the default image available in meta tag and not the one set using jQuery.
Approach 2: Using AJAX Post Submit Action
function shareOnLinkedInTest() {
var dataJson= {"share": {
"comment": "Posting from the API using XML",
"content": {
"title": "A title for your share",
"submitted-url": "http://developer.linkedin.com",
"submitted-image-url":
"ImageURL",
},
"visibility": { "code": "anyone" }
}};
$.ajax({
type: 'POST',
crossDomain : true,
contentType: "application/json",
dataType:"jsonp",
jsonp: 'jsonp-callback',
url: "https://api.linkedin.com/v1/people/~/shares?format=json",
data:dataJson,
success: function(data) {
alert("it works>>>>>>>>>>>>>>"+data);
},
error : function (xhr, ajaxOptions, thrownError){
alert("error");
console.log(xhr);
console.log(thrownError);
}
}); }
Issue:
This is throwing 401 –Unauthorized exception as there is no option to enter the user credentials in the above script while sharing the content
It has been observed while going through various reference sites that Linked In is having cache issue while sharing the content.
https://www.wix.com/support/html5/ugc/e828aa26-d50b-4e5a-a982-ff563ca7e3dd/061f3e24-55e1-418d-ab65-9d6b0457b863
Getting old image while sharing page in LinkedIn
Can anyone help on this please????
Thanks In Advance,
Saritha
LinkedIn's crawler does not execute in-page Javascript, so if you are relying on client-side code to set the value of the meta tags, it will not be picked up when LinkedIn grabs the page for sharing. The value has to be rendered into the page statically (and if it has to be a dynamic value, that would have to be chosen at the back-end and rendered into the page).
Regarding your second approach, you have to authenticate a user before you attempt to post a share, which is why you're getting a 401 Unauthorized error when you try. There's more information about making an authenticated REST API call available at https://developer.linkedin.com/docs/rest-api

Redirect user to a page after payment in shopify

I am using shopify,
I send user to shopify with certain product number and quantity, which is being populated with price on shopify where user can make a payment,
Now i want the user to be redirected to a certian page in my website, after successful payment,
I created webhook order payemnt and given the url of the page to be redirected after payment, but it is not working
Please suggest
Thanks
You could set up a redirect by visiting Settings > Checkout and pasting this into the text box for Additional content & scripts.
<style type="text/css">body {display:none}</style>
<script type="text/javascript">
window.location.replace("http://yahoo.com");
</script>
If you are looking to redirect a customer to a different URL depending on the product they purchased, then here is some code I created to do that.
NOTE: This code is inserted into the Additional Scripts section of the Checkout area. To go there go to Settings > Checkout > scroll down to Additional Scripts.
This solutions uses the Shopify checkout object selector #Altin provided.
Keep in mind, this solution works uniquely for my Shopify experience because customers can only buy 1 product at a time. If your customers can add multiple items to their carts, than a for loop should be used, likely around the for in loop.
<script>
const idUrlList = {
// Replace the content below here with your own
"product1": {
"url": "https://www.URL-HERE.com",
"product_id": 1234567898765,
},
"product2": {
"url": "https://www.URL-HERE.com",
"product_id": 1234567898765,
},
"product3": {
"url": "https://www.URL-HERE.com",
"product_id": 1234567898765,
},
"product4": {
"url": "https://www.URL-HERE.com",
"product_id": 1234567898765,
},
// Replace the content above here with your own
};
// Do NOT change anything below this line
const productPurchasedId = Shopify.checkout.line_items[0].product_id;
for (const product in idUrlList) {
if (idUrlList[product].product_id === productPurchasedId) {
window.location.replace(`${idUrlList[product].url}`);
}
else {
console.log(`Found no matches in dictionary.
The dictionary ID is ${idUrlList[product].product_id}
The product ID is ${productPurchasedId}`);
};
};
</script>
To make this work for you, make the following replacements:
Replace "product1" with the name of the product or redirect that you will find memorable. For example, in one of mine I wrote "20_off_2020".
Replace https://www.URL-HERE.com with the link you want people to go to. For example, https://theamsalems.com/
Replace 1234567898765 with the unique product ID that you want to check for. This can be found in Shopify. Go to Products, click on a product, and grabbing the string of numbers at the end of the URL.
Add/remove the other products depending on how many products you have. For example, if you only have two products, remove the code from "product3" all the way up to the line which says // Replace the content above here with your own.
The rest of this code will automatically handle finding product IDs and handling their correct redirects.
Here are some of my references to building this solution:
Shopify checkout object, line_items array
Line items product ID
I also found out you can test your pages using a Bogus Gateway. Shopify documentation available here.

Resources