What's the problem?
I want to add a PayU plugin installment widget for a product subpage for WooCommerce, but I have a problem with displaying the product price in the calculator provided in the documentation.
Code source for implementing such a calculator:
https://developers.payu.com/en/installments.html#installments_best_practices_mini
<p><span id="installment-mini"></span></p>
<script type="text/javascript">
var value = 1234.56;
if (value >= 300 && value <= 50000) {
var options = {
creditAmount: value, // amount in PLN
posId: '67328', // point of sale identifier
key: 'zQ', // first two characters of API key
showLongDescription: true
};
OpenPayU.Installments.miniInstallment('#installment-mini', options)
.then(function(result) {
// This fragment of code will be executed after widget is shown
// parameter ‘result’ contains additional functions
})
.catch(function(e) {
console.error(e.toString()); // This snippet writes config errors
// to developer’s console
});
}
What do i want to get?
I want only the product price in the product card to be downloaded to the installment calculator. There is no input field in the product card, only , I thought about a positive in the php code but it did not work. I want to add a regular price or the price of a product variant to the JS code to show the customer what he can do when choosing installments, so the price must be taken to the code above.
Related
I am using Saleor shopping cart GraphQL, and actually Stepzen to merge it with a Strapi GraphQL. So all Saleor mutations and queries go through the Stepzen GraphQL.
I have followed Saleors tutorial here:
https://learn.saleor.io/checkout/displaying-cart-content/
This works 90% of the time so generally the code should be OK, but I must be missing something because occasionally when adding to the cart the contents are different. The item is not added. In fact, it's possible the cart seen is an older version but am not sure. I could add to cart 4 times and it updates to the correct products and quantities each time, then the 5th time it shows the cart from the last time or even time before.
After a few seconds, if you refresh the page, the cart displays correct.
EDIT: I have just noticed, if you refresh the page several times, the cart sometimes changes, and a refresh changes back, then a refresh it changes to something else and just keeps changing on refreshes!
When the cart works, there is a little delay adding it, but when it doesn't work the cart page loads much faster, almost instantly. It's as if when it works it waits for Saleors response for the cart items list, but when it doesn't it doesn't wait for the response. Just a hunch.
This is my query code to get cart items from Saleor. It does work, 90% of the time.
const Cart = () => {
const [token] = useCookies('["token"]')
const { data, loading, error } = useCheckoutFetchByTokenQuery({
variables: { checkoutToken: token.token },
skip: !token.token,
});
const [CheckoutremoveProduct] = useCheckoutRemoveProductMutation();
if (loading) return <div>Loading...</div>;
if (error) return <div>Error</div>;
if (!data || !data.saleorcheckout) return null;
const products = data.saleorcheckout?.lines || [];
return (
<Layout title="Cart">
.....
</Layout>
);
}
The actual saleorcheckout query:
query CheckoutFetchByToken($checkoutToken: saleorUUID!) {
saleorcheckout(token: $checkoutToken) {
id
email
lines {
id
quantity
totalPrice {
gross {
amount
currency
}
}
variant {
id
product {
id
name
slug
thumbnail {
url
alt
}
cmsContent {
SaleorID
Title
Featured_image
{
data
{
attributes
{
url
width
height
alternativeText
}
}
}
}
}
pricing {
price {
gross {
amount
currency
}
}
}
name
}
}
totalPrice {
gross {
amount
currency
}
}
}
}
Interestingly the saleorcheckoutLinesAdd mutation which adds lines to the cart returns with the correct products in the cart, after the new one is added, but on the cart page that uses saleorcheckout to fetch them returns a lower amount, until you refresh later.
The actual saleorcheckoutLinesAdd mutation:
mutation ProductAddVariantToCart($checkoutToken: saleorUUID!, $variantId: ID!) {
saleorcheckoutLinesAdd(
token: $checkoutToken
lines: [{ quantity: 1, variantId: $variantId }]
) {
checkout {
id
lines {
id
quantity
variant {
id
name
product {
name
}
}
}
}
errors {
message
}
}
}
Thanks
UPDATE:
My first post above included this below, but it may be a red herring as I have added the variant ID in the query now, and dont get this error below anymore, but the problem above still exists.
Previously when it doesn't work the following error was in console:
react_devtools_backend.js:4026 Cache data may be lost when replacing the variant field of a saleorCheckoutLine object.
To address this problem (which is not a bug in Apollo Client), either ensure all objects of type saleorProductVariant have an ID or a custom merge function, or define a custom merge function for the saleorCheckoutLine.variant field, so InMemoryCache can safely merge these objects:
existing: {"__typename":"saleorProductVariant","product":{"__ref":"saleorProduct:UHJvZHVjdDoxNjY="},"pricing":{"__typename":"saleorVariantPricingInfo","price":{"__typename":"saleorTaxedMoney","gross":{"__typename":"saleorMoney","amount":100,"currency":"USD"}}},"name":"UHJvZHVjdFZhcmlhbnQ6NDAy"}
incoming: {"__typename":"saleorProductVariant","name":"UHJvZHVjdFZhcmlhbnQ6NDAy","product":{"__typename":"saleorProduct","name":"52-00 Base Plate"}}
I have looked this up, and the solution is to set typePolicies the ApolloClient to state to merge the new and old carts. BUT I cannot get this to work, if it is the solution. Online some examples of typePolicies and merge have console.log() outputs but mine are just not firing. So I am assuming I have not set the typePolicies up correct perhaps.
This is my typePolicies code, although I have tried many variations, and the fact lines is nested may be complicating it.
const client = new ApolloClient({
uri: "https://my-stepzen-graphql-url.com/__graphql",
cache: new InMemoryCache({
typePolicies: {
Query: {
fields: {
saleorcheckoutLinesAdd: {
lines: {
merge(existing, incoming, { mergeObjects }) {
console.log(existing)
console.log(incoming)
return mergeObjects(existing, incoming);
},
},
},
},
},
},
}),
})
I have tried many versions of the above typePolicies, but can never get console.log to fire, so assume I have fond the correct format.
I want to get the variation price on my single product page, On change the variation drop-down using jQuery, Is there any way to doing this... ?
Thanks in advance.
woocoommerce has build in callback result product details (attributes, price, images, etc..)
you can see variation details on console
jQuery(document).ready(function() {
jQuery( '.variations_form' ).each( function() {
// when variation is found, do something
jQuery(this).on( 'found_variation', function( event, variation ) {
console.log(variation);
console.log(variation.display_price);//selectedprice
});
});
});
When showing grouped products in NopCommerce. It doesn't show links to each grouped product. The simple product configuration shows this but the tiered pricing does not work.
I used javascript to get all the grouped products and added the html back in.
$('.variant-name').each(function () {
var str = $(this).html().trim();
str = str.replace(/\s+/g, '-').toLowerCase();
$(this).attr('id', str);
$('.product-name').append('<div>' + $(this).html().trim() + '</div>');
});
I've created a google content experiment without redirects using the docs.
The basic implementation involves a javascript snippet that uses the following code to choose the version of the experiment:
<!-- Load the Content Experiment JavaScript API client for the experiment -->
<script src="//www.google-analytics.com/cx/api.js?experiment=YOUR_EXPERIMENT_ID"></script>
<script>
// Ask Google Analytics which variation to show the user.
var chosenVariation = cxApi.chooseVariation();
</script>
<!-- Load the JQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
// Define JavaScript for each page variation of this experiment.
var pageVariations = [
function() {}, // Original: Do nothing. This will render the default HTML.
function() { // Variation 1: Banner Image
document.getElementById('banner').src = 'bay-bridge.jpg';
},
function() { // Variation 2: Sub-heading Text
document.getElementById('heading').innerHTML = 'Look, a Bridge!';
},
function() { // Variation 3: Button Text
document.getElementById('button').innerHTML = 'Learn more';
},
function() { // Variation 4: Button Color
document.getElementById('button').className = 'button button-blue';
}
];
// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(
// Execute the chosen view
pageVariations[chosenVariation]
);
</script>
However, when I visit the page using an incognito window, I only see the first variation of the experiment. When I check chosenVariation in the console, it's always 0. In fact, when I call cxApi.chooseVariation(); in the console, it always returns 0.
Is this because google recognizes my incognito browser windows, or is something broken with cxApi.chooseVariation(); or in my implementation?
I had the same problem, 100% of the sessions were given the original (0) variation. In order to fix the problem, I added the javascript code provided by the experiment. Go to your experiment (edit), click Setting up your experiment code, manually insert the code, copy the code in there.
Now since you (and I) don't want to have a redirect, remove this part at the end of the code <script>utmx('url','A/B');</script>. If your page is templated, you can use a variable and insert your experiment key (not experiment id) where you see var k='########-#'
Now either very few people use the experiments in a client-only fashion or we're totally stupid because it would seem to me that the guide is wrong and there's absolutely no documentation that shows a working client-only setup.
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.