Checkout extension not rendering TextField for specific store

Extensions
1

Hey,

I built a Checkout extension to add a Delivery instructions textfield to the Checkout page. This field renders for all stores except for two. The two stores that the TextField does not render on are owned by the same client with the same name in their MyShopify URL. The client has two other stores that render OK. This has been tested for another client as well as two other dev stores and is OK. There is zero errors. I’ve spent days trying to figure out why this textfield won’t render for two specific stores and I’m completely stumped without some kind of error.

I am a Reaction/Remix n00b so excuse my mess. Any help would be greatly appreciated! Thank you for your time!

Checkout.jsx

import {
  reactExtension,
  TextField,
  BlockStack,
  useShop,
  useCustomer,
  useCartLines,
  useShippingAddress,
  useMetafield,
  useApplyMetafieldsChange,
  useAppMetafields,
} from "@shopify/ui-extensions-react/checkout";
import React from "react";

// Set the entry points for the extension
const delivery_address_before = reactExtension('purchase.checkout.delivery-address.render-before', () => <App />);
export { delivery_address_before };

const delivery_address_after = reactExtension('purchase.checkout.delivery-address.render-after', () => <App />);
export { delivery_address_after };

const shipping_option_list_before = reactExtension('purchase.checkout.shipping-option-list.render-before', () => <App />);
export { shipping_option_list_before };

const shipping_option_list_after = reactExtension('purchase.checkout.shipping-option-list.render-after', () => <App />);
export { shipping_option_list_after };

function App() {
  // Get Customer ID
  const customer = useCustomer();
  const customer_id = customer?.id?.replace('gid://shopify/Customer/', '');

  // Line-items
  const line_items = useCartLines();
  let delivery_line_item_exists = false;

  // If items in cart are BOPIS, so far
  if(delivery_line_item_exists === false) {
    // Loop line-items
    line_items.forEach(line_item => {
      if(line_item.attributes[0]?.value === 'Ship to Home' || line_item.attributes[0]?.value === 'Same Day Delivery' || line_item.attributes[0]?.value === 'Local Delivery') {
        // Set delivery_line_item_exists to true
        delivery_line_item_exists = true;
      }
    });
  }

  // Define the Order metafield namespace and key
  const metafield_namespace = "frd";
  const metafield_key = "delivery_instructions";

  // Get a reference to the Order metafield
  const delivery_instructions = useMetafield({
    namespace: metafield_namespace,
    key: metafield_key,
  });
  let delivery_instructions_input_value = delivery_instructions?.value;

  // Set a function to handle updating the Order metafield
  const applyMetafieldsChange = useApplyMetafieldsChange();
  
  // If at least one item in the cart is not BOPIS
  if(delivery_line_item_exists === true) {
    // Show Delivery Instructions
    return (
      <BlockStack>
        <TextField
          label="Delivery instructions (optional)"
          multiline={3}
          onChange={(value) => {
            // Apply the change to the Order metafield
            applyMetafieldsChange({
              type: "updateMetafield",
              namespace: metafield_namespace,
              key: metafield_key,
              valueType: "string",
              value,
            });

            // If Customer
            if(customer_id) {
              // Apply the change to the Customer metafield
              // function...
            }
          }}
          value={delivery_instructions_input_value}
        />
      </BlockStack>
    );
  }
}
2

Hi Anxiouspenguin,

Do you know if other checkout extensions are rendering on this store? It’s possible there’s something specific on this store that’s preventing checkout extensions from being displayed.

Your best option may be to ask the merchant who is experiencing this to reach out to support directly. It sounds like there’s an environmental issue that our support team would need to dig into to determine why the checkout extension is not rendering. It doesn’t sound like it’s an issue with your app however.

3

Have you checked if your “useMetafield” hook is returning some data? Can you confirm this metafield definition has been created successfully on the admin?

1 Like
4

Hey @Liam-Shopify, the other extensions render. This includes other extensions I’ve developed. Only this extension will not render for their store or their dev store for that store. So strange that it renders for all of their other stores. They are using the same attributes as well.

An update… I commented out the lines below (trial and error at this point) and the extension renders on their dev store. I’ll experiment with this area and see if I can figure out why the loop or logic would break it?

// If items in cart are BOPIS, so far
  /*if(delivery_line_item_exists === false) {
    // Loop line-items
    line_items.forEach(line_item => {
      if(line_item.attributes[0]?.value === 'Ship to Home' || line_item.attributes[0]?.value === 'Same Day Delivery' || line_item.attributes[0]?.value === 'Local Delivery') {
        // Set delivery_line_item_exists to true
        delivery_line_item_exists = true;
      }
    });
  }*/

I appreciate everyones help so far!

5

Hey @rafathsweb ,

Yes, the definitions have been created in the admin and I also tested them in the theme. Good idea, though! Thank you for your help so far!

1 Like