![[予約]Shopifyでの商品ごとに異なる発送予定日を注文情報に出力する方法(開発者向け)](http://goriderep.com/cdn/shop/articles/dalle-2023-11-29-16.40.11---create-an-image-suitable-for-a-blog-post-with-the-title-shopify.-the-image-should-represent-the-concep-1701243630679.png?v=1712548018&width=3584)
[Reservation] How to output the expected shipping date to order information (for developers)
We will introduce ideas and points to note for allowing different shipping schedule information for each product, such as pre-orders, and for comparing the shipping schedules of products in the cart to output the latest one as an order attribute!
*This content is intended for developers.
Pre-order Customization Approach
・If pre-ordered and regular products are purchased at the same time, they will be shipped together according to the pre-ordered product.
・Do not allow simultaneous purchase of pre-ordered and regular products.
・If pre-order and regular products are purchased at the same time, they will be shipped separately. (This became possible with the July 2023 update.)
This time, I will explain the first approach.
The reason why this kind of customization becomes necessary is because Shopify could not split orders. With the July 2023 update, it became possible to process products in the same order separately in fulfillment. I believe this will reduce the pattern where such customization becomes necessary. However, when shipping separately, the shipping cost will differ, so if you want to ship pre-order and regular products together when purchased at the same time, please refer to this customization.
Example
For instance, there are products in the cart with three different estimated shipping dates.
Product A - Estimated shipping date: 2025-01-05
Product B - Estimated shipping date: 2025-01-16
Product C - Estimated shipping date: 2025-01-12
In this case, since the estimated shipping date for Product B is the latest, the estimated shipping date for the entire order will be set to 2025-01-16.
The order attributes can be displayed in customized formats on the Thank you page, order status page, My page, and order confirmation email.
If the estimated shipping date is automatically linked to a delivery company like Next Engine, it is possible to link the scheduled shipping date for pre-orders.
Implementation Method Introduction
Different estimated shipping dates for each product are prepared in the product's metafield date format.
When pre-order products are in the cart, customize the code to compare the estimated shipping dates.
- Depending on the theme, there are patterns where only liquid can be implemented and patterns where JS is required. The implementation content may vary depending on the theme or third-party apps, so please use this as a reference only.
In cases where the quantity is changed in the Cart, the reload runs and the liquid code is reinitialized, it is necessary to verify whether the data can be passed directly with only liquid, as this is case-by-case. This is a relatively simple implementation.
cart.liquid
{% liquid
assign latestEstimatedShipDate = 'today' | date: '%s'
assign isPreorderInCart = false
for item in cart.items
if item.product.tags contains 'pre-order'
assign isPreorderInCart = true
assign curretItemDeliverDate = item.product.metafields.preorder.deliver-date | date: '%s'
if latestEstimatedShipDate < curretItemDeliverDate and item.product.metafields.preorder.deliver-date != blank
assign latestEstimatedShipDate = curretItemDeliverDate
endif
endif
endfor
%}
{% if isPreorderInCart %}
{% endif %}
Patterns requiring JS use the Ajax API endpoint cart/update.js. Note: Since metafield information is not included in the response from cart.js when fetching after every quantity change, it is necessary to employ techniques such as retrieving from the DOM attribute.
Code Title
function getLatestShippingDate(cartPreOrderItems) {
let latestEstimatedShippingDate = new Date().getTime();
for (const item of cartPreOrderItems) {
if (latestEstimatedShippingDate < new Date(item.shippingDate).getTime()) {
latestEstimatedShippingDate = new Date(item.shippingDate).getTime();
}
}
return new Date(latestEstimatedShippingDate);
}
function updateShippingDateAttribute(shippingDate) {
const formData = JSON.stringify({
attributes: {
'Pre-order-deliver-date': shippingDate,
}
});
fetch('cart/update.js', {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: formData
})
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.catch((error) => {
console.error('Fetch error:', error);
});
}
const cartPreOrderItems = document.querySelectorAll(".pre-order").getAttribute('deliveryDate');
updateShippingDateAttribute(getLatestShippingDate(cartPreOrderItems));We introduced a customized approach and specific implementation ideas for pre-order items. By applying these, when there are pre-order items, it makes the shipping date specification in the app unavailable and replaces it with the pre-order shipping date. Depending on the requirements, customers can choose whether to ship at the same time when purchasing together or separately, making it highly adaptable.
Popular articles
