How can we do authentication process with remix app template using javascript language ??

[Sagar_102]

I build the app named as "delivery estimator". In this app I've created multiple pages like date calculation, template. In date calculation page, showing estimating date timing as below. 

The line "🚛 Get your Item delivery between Wed Dec 13 2023 and Sat Dec 16 2023."

I want to show on product page as per my app template. I'm confused how to do that. How I can linked the app page to product page. Please give me suggestions for that. I'm using remix template with javascript language. 

[SajalTimilsina]

Follow the following Steps:

1. App Integration: Ensure your app is properly integrated into the Shopify store.

2. App Initialization: Within the product page template (product.liquid or equivalent), initialize the app and its functionalities. Use the necessary JavaScript libraries or SDKs provided by your app to load its features.

3. Displaying Delivery Estimate: Identify the section of the product page where you want to display the delivery estimate. This might be within a specific <div> or a designated area.

4. Passing Data: Use JavaScript to fetch the estimated delivery dates from your app's date calculation page. This can involve making AJAX requests to retrieve the calculated delivery date range.

5. Rendering Delivery Information: Once you've fetched the delivery estimate data, use JavaScript to dynamically update the product page's designated area with the delivery information. You can inject HTML or modify the DOM elements to display the delivery details fetched from your app.
   
   

   // Sample code to fetch delivery estimate data and update product page

   // Function to fetch delivery estimate from your app's date calculation page
   function fetchDeliveryEstimate(productId) {
   // Make an AJAX request to your app's endpoint to retrieve delivery estimates
   // Use productId to fetch relevant delivery details
   // Upon receiving the response, updateProductPage() with the fetched data
   $.ajax({
   url: '/your-app-endpoint',
   method: 'GET',
   data: { productId: productId },
   success: function(response) {
   updateProductPage(response.deliveryInfo);
   },
   error: function(error) {
   console.error('Error fetching delivery estimate:', error);
   }
   });
   }

   // Function to update product page with delivery information
   function updateProductPage(deliveryInfo) {
   // Identify the HTML element where you want to display the delivery estimate
   var deliveryDisplayElement = document.getElementById('deliveryEstimateSection');

   // Update the element's content with the fetched delivery information
   deliveryDisplayElement.innerHTML = deliveryInfo;
   }

   // Trigger fetchDeliveryEstimate function when the product page loads
   $(document).ready(function() {
   var productId = 'your_product_id'; // Replace with actual product ID
   fetchDeliveryEstimate(productId);
   });
   
   
   we have implemented Similar features in:
   Emerdepot - Medical supply store Toronto.

[Sagar_102]

@SajalTimilsina Thanks for replying. I've done all functionality of the app. Now I want to show the app data (date calculation page data) means the line "Get your Item delivery between Wed Dec 13 2023 and Sat Dec 16 2023."  on product page. How I can the linked to products page or product?? 

   for example - When we install the any app on store then we go to customize section, then go to "App Embeds" --> then enable the app --> go to the product page section --> In product Info we add block i.e, App block. The data will be show on product page of the app.

I want to exactly that. My app is ready using polaris components and also use react. How can I fetched the app data on product page of store?? 

[SajalTimilsina · Accepted solution]

You have to use the Shopify Theme extension, 
https://shopify.dev/docs/apps/online-store/theme-app-extensions

For your reference, you can check in this video.
https://www.youtube.com/watch?v=2DltuZHZpSw

Emerdepot Medical Store Toronto

[Sagar_102]

@SajalTimilsina Thanks for suggestion. But I've another question about this. I've created app using remix template(use react[jsx] language), In above reference video it's showing the when we create app extension, files are automatically created in .liquid file. How can we replaced my app data file(.jsx file) into liquid file. I want to my app data on product page. Can you please give solution on this?? Thanks in advance.