i am trying to pass metafield data which appears in all pages but not in checkout page
my .toml file is this
api_version = "2023-10"
[[extensions]]
name = "Live Chat "
handle = "checkout-ui"
type = "checkout_ui_extension"
extension_points = [
'Checkout::Dynamic::Render'
]
[[extensions.targeting]]
module = "./src/Checkout.js"
target = "purchase.checkout.block.render"
[[extensions.targeting.metafields]]
namespace = "livechat_test"
key = "settings"
[extensions.capabilities]
api_access = true
network_access = true
[[metafields]]
namespace = "livechat_test"
key = "settings"
[[extensions.metafields]]
namespace = "livechat_test"
key = "settings"
[extensions.settings]
[[extensions.settings.fields]]
key = "shop"
type = "single_line_text_field"
name = "Shop Domain"
description = "Enter the shop domain for this installation."
index.js code in checkout page is this . i am not even able to pass myshopify domain name. best would be if i could pass metafield we are having in all other pages but we thought if metafield is not possible at least we will get data from our server but without shop name we cant do anything
import { extend, Text, Button, BlockStack } from '@shopify/ui-extensions/checkout';
extend('Checkout::Dynamic::Render', (root, { settings }) => {
// Access the shop domain from settings using the correct key
const shopDomain = settings.shop || 'default.myshopify.com';
// Construct the API URL with the shop domain
const apiUrl = `https://sitename/livechat1.php?shop=${shopDomain}`;
// Fetch data from the API
fetch(apiUrl)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
const blocks = data.metafields.settings.blocks;
const blockOrder = data.metafields.settings.block_order;
// Loop through the block order to create UI components
blockOrder.forEach(blockId => {
const blockData = blocks[blockId];
});
})
.catch(error => {
console.error("Error fetching data:", error);
});
});
