how to share cart url if even user not logged in then display cart with product?

rushikesh93
Excursionist
78 1 6

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.
Reply 1 (1)

rushikesh93
Excursionist
78 1 6

Link-expired.png

 generated URL's Output,
so the generated URL is right or wrong URL?
please help me with this.

Shopify Beginner.