I am using Shopify 2.0 with the Symmetry theme.
I need to add my Variant Global Status Metafield to the property line items that show up for a product on the checkout page without having to use authentication.
I am having little luck using AJAX API to add some info to a product in checkout.
I was able to pass along line item properties with a separate add-on item product, but it won’t seem to work with the current product variant.
Here is the script I have thus far:
// Wait until the document is fully loaded before executing the script
$(document).ready(function() {
// Retrieve the product JSON data embedded within the element with the ID 'ProductJson-product-template'
var productJson = $('#ProductJson-product-template').html();
if (productJson) {
// Parse the product JSON data to a JavaScript object
var product = JSON.parse(productJson);
// Get the first variant of the product (Note: Adjust this if needed to get the 'current' variant)
var currentVariant = product.variants[0];
if (currentVariant) {
// Extract various details about the current variant
var variantId = currentVariant.id;
var variantName = currentVariant.title;
var variantPrice = currentVariant.price;
var variantSku = currentVariant.sku;
// Log the extracted details to the console
console.log('Variant ID: ', variantId);
console.log('Variant Name: ', variantName);
console.log('Variant Price: ', variantPrice);
console.log('Variant SKU: ', variantSku);
}
}
});
// Event listener for the click event on the submit button inside the form with the class 'product-purchase-form' and method 'post'
$(".product-purchase-form[method='post'] button[type='submit']").on('click', function (event) {
// Prevent the default submit action to handle it with AJAX
event.preventDefault();
// Find the closest form element to the clicked button
var form = $(this).closest('form');
// Retrieve the variant ID and product ID from the respective input fields within the form
var variantId = $('input[name="id"]', form).val();
var productId = $('input[name="product_id"]', form).val(); // Note: You might need to add this input field in your liquid file
// Step 1: AJAX request to fetch the variant's metafields based on the product and variant IDs
$.ajax({
url: '/admin/api/2023-07/products/'+productId+'/variants/'+variantId+'/metafields.json',
method: 'GET',
dataType: 'json',
success: function(response) {
// Step 2: Find the 'status' metafield within the global namespace from the response
var statusMetafield = response.metafields.find(metafield => metafield.key === 'status' && metafield.namespace === 'global');
if(statusMetafield) {
// Step 3: Create a hidden input element to hold the value of the 'status' metafield
var hiddenInput = $('<input>').attr({
type: 'hidden',
name: 'properties[_Status]',
value: statusMetafield.value
});
// Step 4: Append the created hidden input to the form
form.append(hiddenInput);
}
// Step 5: Trigger the default submit action of the button (after removing the current click event handler to prevent a loop)
form.find("button[type='submit']").off('click').trigger('click');
},
error: function(xhr, textStatus, error) {
// Log an error message to the console if the AJAX request fails
console.error('Error fetching metafield: ', textStatus, error);
// In case of error, still allow the form to be submitted by triggering the default submit action of the button (after removing the current click event handler to prevent a loop)
form.find("button[type='submit']").off('click').trigger('click');
}
});
});
I put this in my product page’s liquid section:
{% assign status_metafield = product.metafields.global.status %}
And I put this in my buy-button (add to cart) class on the product page:
{% endif %}
{% if variant.metafields.global.status %}
<input type="hidden" name="properties[_Status]" value=" {{ variant.metafields.global.status }}" />
{% endif %}
Any help would be greatly appreciated.