Hello, I'm learning Shopify app development,
currently, I'm developing an app using PHP App Template,
the concept is to share cart URLs using the Whatsapp button,
my final code is below,
now from here, I don't know about that how to share cart URLs,
if even the user is not logged in then display the cart with the product?
below is my code,
fetch('https://jpeg-notes-tips-many.trycloudflare.com/api/get-cart-url')
.then(response => response.json())
.then(cartData => {
// Fetch the form data
return fetch('https://jpeg-notes-tips-many.trycloudflare.com/api/get-saved-form-data')
.then(response => response.json())
.then(formData => {
// Access the form values from the response
const selected = formData[0].wp_cart_enable_disable;
const blt = formData[0].wp_button_label_text;
const cmwsl = formData[0].wp_cart_mesage_on_link;
const selected1 = formData[0].wp_button_position;
var checkoutButton = document.querySelector('[name="checkout"]');
if (selected === 'yes') {
// Share the cart URL with the product
fetch('https://ncodeshop.myshopify.com/cart.js')
.then(response => response.json())
.then(data => {
// Create the WhatsApp button
var customButton = document.createElement('button');
customButton.innerText = blt;
customButton.style.backgroundColor = '#006E52';
// Add CSS styles to the button
customButton.addEventListener('mouseenter', function() {
customButton.style.color = 'white'; // Change text color to white
});
// Add CSS styles to the button
customButton.style.position = '';
customButton.style.zIndex = '';
// Set the button position based on the selected1 value
switch (selected1) {
case 'bydefault':
// Set the default button position
customButton.style.top = '0';
customButton.style.right = '0';
break;
case 'topleft':
customButton.style.position = 'absolute';
customButton.style.top = '0';
customButton.style.left = '2%';
break;
case 'topcenter':
customButton.style.position = 'absolute';
customButton.style.top = '0';
customButton.style.left = '50%';
customButton.style.transform = 'translateX(-50%)';
break;
case 'topright':
customButton.style.position = 'absolute';
customButton.style.top = '0';
customButton.style.right = '2%';
break;
case 'middleleft':
customButton.style.position = 'absolute';
customButton.style.top = '57%';
customButton.style.left = '2%';
customButton.style.transform = 'translateY(-50%)';
break;
case 'middleright':
customButton.style.position = 'absolute';
customButton.style.top = '57%';
customButton.style.right = '2%';
customButton.style.transform = 'translateY(-50%)';
break;
case 'bottomleft':
customButton.style.position = 'absolute';
customButton.style.bottom = '0';
customButton.style.left = '2%';
break;
case 'bottomcenter':
customButton.style.position = 'absolute';
customButton.style.bottom = '0';
customButton.style.left = '50%';
customButton.style.transform = 'translateX(-50%)';
break;
case 'bottomright':
customButton.style.position = 'absolute';
customButton.style.bottom = '0';
customButton.style.right = '2%';
break;
default:
// Set the default button position if the selected1 value is not recognized
customButton.style.top = '0';
customButton.style.right = '0';
break;
}
const cartUrl = data.items[0].url;
const cartToken = data.token; // Extract the cart token from the response data
const productUrl = cartUrl; // Replace with the desired product URL
const sharedCartData = data.items.map(item => {
const variantId = item.variant_id;
return `https://ncodeshop.myshopify.com/cart/${cartToken}:${variantId}`;
});
console.log('Shared Cart URLs:', sharedCartData);
customButton.addEventListener('click', function() {
// Access the cart data from the previous fetch call
console.log('Cart Data 1:', cartData);
var cartItems = cartData || [];
console.log('Cart Items:', cartItems);
var cartUrl = cartData.cartUrl;
var message = cmwsl + ' \nCart URL: ' + cartUrl;
var whatsappUrl = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(message);
window.open(whatsappUrl, '_blank');
});
// Append the WhatsApp button to the parent container of the checkout button
//checkoutButton.parentNode.appendChild(whatsappButton);
checkoutButton.parentNode.insertBefore(customButton, checkoutButton);
})
.catch(error => {
console.error('Error fetching cart URL:', error);
});
}
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
below the code, I'm trying to generate the cart URL, that I have asked in the question,
const cartUrl = data.items[0].url;
const cartToken = data.token; // Extract the cart token from the response data
const productUrl = cartUrl; // Replace with the desired product URL
const sharedCartData = data.items.map(item => {
const variantId = item.variant_id;
return `https://ncodeshop.myshopify.com/cart/${cartToken}:${variantId}`;
});
console.log('Shared Cart URLs:', sharedCartData);
but it generates the wrong URL, and the URL says Not Found.
https://myshopify.myshopify.com/cart/116368554783f0f8f92b898d6743fd2e:ricejagger,43535971483896
Note : my store is password protected
please help me with this that how can I generate the cart URLs with product and share it
Thanks.
@Ryo14 @Moeed @seejessletter @evolutionlures @truereachAi @Timmy_EDOCODE
@
Shopify Beginner.
