[Reservation] How to output the expected shipping date to order information (for developers)

2023/11/29by keigo matsunari

Introducing the ideas and precautions to output the slower of the product as an Attributes of ordering, comparing the scheduled shipment date in the cart as an Attributes for comparing the scheduled shipment date in the cart by giving each product such as a reservation order!
* This is for developers.

Reservation customization approach

・If reserved products and regular products are purchased at the same time, we will ship them together according to the reserved product.

・ Do not purchase reserved products and regular products at the same time

・ If you purchase reserved products and regular products at the same time, perform shipping processing separately (updated by 20223/July).

Here are the first approaches.

The reason why such customization is needed is that SHOPIFY could not split the Order. 20223/July updates can now be processed separately for products in the same order. I think that this will reduce the number of patterns that require such customization. However, if you ship separately, the shipping fee will be different, so if you want to ship it together when you purchase it as before and purchase it at the same time as a regular product, please refer to this customization.

Concrete example

For example, there are products with three different shipment dates in the cart.

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, the expected shipment date of Product B is the slowest, so the expected shipping date of the entire order is set to 2025-01-16.
Orders (Attributes) can be customized in the Thank you page, order status page, My Page, and order confirmation email.
If the scheduled shipment date is automatically linked to the delivery company with a next engine, the scheduled shipping date of the reservation can be linked.

How to implement it is an idea introduction

Different shipments for each product will be prepared with metafield date type of the product.
If the cart is in the cart, customize the code to compare the scheduled shipping date.

-In the theme, there are patterns that can be implemented only with LIQUID and patterns that require JS. Please refer to the theme and the third patty application, so please refer to it.

When the quantity is changed in the mounting pattern only with LIQUID only, if the reload runs and the Liquid code is re -instialized, it is a case -by -case because the data can be passed directly with Liquid only because it is a 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 %}
	<p class="cart-attribute__field">
	  <label for="pre-order-deliver-date">Pre-order-deliver-date</label>
	  <input id="pre-order-deliver-date" type="text" name="attributes[Pre-order-deliver-date]" value="{{ latestEstimatedShipDate | date: '%Y-%m-%d' }}">
	</p>
{% endif %}

The endpoint of Ajax API that requires JScart/update.js Use the. Note. Even if you fetch from cart.js every time you change the quantity, the response of Cart.js does not include the meta field information, so it is necessary to devise a device such as bringing it from the Attribute of DOM.

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 customization approaches and specific implementation ideas for reserved products. If there is a reserved product, the shipping date and time of the shipping date and time is not specified, and the shipping date and time of the app is replaced, and it is replaced with the shipping date and time of the reservation. It can be applied in various ways depending on the requirements, such as specifying the customer at the same time or separately.

この著者の記事一覧

One -stop offered from EC construction to advertising operation.

Go Ride, a SHOPIFY official expert "SHOPIFY PLUS PARTNER", and Google Advertising "Google Partner", "Google Partner", we have built, develop and develop e -commerce sites on SHOPIFY. Please feel free to contact us.

WHITEPAPER DOWNLOAD inquiry