How to bypass character limit for Shopify line item when creating a product variant?

How to bypass character limit for Shopify line item when creating a product variant?

NicoWTD
Shopify Partner
2 0 0

Please bear with me as I am not a Shopify developer and the code built wasn't initially created by myself. I'm working with a client that requires to create a single product with Shopify's headless app, and that product creates a variant that includes a line item describing the configuration of the product, the issue I'm having is that the line item value I'm passing seems to be way too long (couldn't find documentation on character limit from Shopify).

To provide a visual idea, here's what the checkout looks like ("Options here" is the line item options value that's wreaking havoc when it is too long):

2024-04-04-17_02_18-screenshot.png

Here's where my code fails to create the product whenever the line item options value is too long:

const addProduct = async (req, res) => {
  const { variants } = req.body;
  console.log("Product create");
  const query = `mutation {
    productCreate(input: {
      bodyHtml: "Just another custom product",
      handle: "custom-product",
      productType: "Custom Products",
      title: "Custom Product",
      vendor: "Client",
      variants: ${JSON.stringify(variants).replace(/"([^"]+)":/g, "$1:")}
    }){
      product{
        id
        title
        variants (first: 50) {
          edges {
            node {
              id
              title
              price
              sku
            }
          }
        }
      }
    }
  }`;

  try {
    const response = await shopify.graphql(query);
    const published = await publishProduct(response.productCreate.product.id);
    const parsedResponse = cleanGraphQLResponse(response);

    return res.status(200).send({
      message: "Product created",
      product: { ...parsedResponse.productCreate.product, published },
    });
  } catch (error) {
    console.log(error);
    return res.status(501).send({ message: "Error", error });
  }
};

On the front-end, the information is being sent like this:

const createCheckout = () => {
    const report = obtainReport();
    let totalPrice = 0;
    let lineItemsConcat = '';
    report.map((item, index) => {
      const [title, value, price] = item;
      totalPrice = totalPrice + (+price); //unary operator
      lineItemsConcat = `${title}: ${value}; ${lineItemsConcat}`;
    });

    const lineItems = {
      title: lineItemsConcat,
      options: lineItemsConcat,
      price: totalPrice,
      sku: `Item-0`,
    };

    createShopifyProduct([lineItems]);
  };

Any idea on how I could overcome this blocker? Either by finding a way to pass all the information in a single line item options value, or by showing custom information in Shopify's checkout.

Replies 0 (0)