配送希望日時指定ウィジェットを翻訳する方法はありますか?
大変申し訳ありませんが、「CC 配送日時指定」に翻訳機能はありません。
以下3つの代替方法を提案しています。
1. 言語ごとに表示を切り替える
「CC 配送日時指定」の設定画面から オプション => ”言語毎の表示の切り替え” で、どの言語で配送日時指定ウィジェットを表示するかを選ぶことができます。
2. 日本語と英語を併記する
表示ラベル に ”配送希望日/Request Delivery Date” などと日本語と英語を表記します。
3. JavaScriptを使って、動的に変更する
以下のコードを使用して言語毎に文字列を変更します。
//設定ファイル
const languages = [
{
lang: "en",
"#cc-date-label": "Request Delivery Date",
"#cc-time-label": "Request Delivery Time",
"#cc-calendar-input-column": "no request",
"#cc-time-options": ["no request", "morning", "evening"], // 日本語に合わせて変更してください。
"#not-specified": "no request",
"#cc-main-note-context": "notes",
//↓配送オプションを設定している場合のみ
"#slot-label": "Delivery Options",
"#slot-body": ["Delivery", "Store pick up"],
"#cc-calendar-slot-note pre": "this is example notes",
},
];
const config = { attributes: true, childList: true, subtree: true };
const callback = () => {
const locale = Shopify.locale;
const language = languages.find((l) => l.lang === locale);
if (!locale) return;
const changeLabel = (elmTxt, replaceTxt) => {
document.querySelectorAll(elmTxt).forEach((elm) => {
switch (elmTxt) {
case "#cc-calendar-input-column":
const jaText = "指定しない"; // 設定を変更している場合は文字列を変更してください。
if (elm.value === jaText) elm.value = replaceTxt;
break;
case "#cc-time-options":
case "#slot-body":
elm
.querySelectorAll(elmTxt === "#slot-body" ? "span" : "option")
.forEach((o, n) => {
if (replaceTxt[n] && o.textContent !== replaceTxt[n])
o.textContent = replaceTxt[n];
});
break;
default:
if (elm.textContent !== replaceTxt) elm.textContent = replaceTxt;
}
});
};
Object.entries(language).forEach(([key, value]) => {
changeLabel(key, value);
});
};
const observer = new MutationObserver(callback);
callback();
const mTime = { start: Date.now(), end: Date.now() };
const mo = new MutationObserver(function (records) {
mTime.start = Date.now();
setTimeout(async () => {
mTime.end = Date.now();
if (mTime.end - mTime.start >= 1000) {
callback();
}
}, 1000);
});
observer.observe(document.querySelector("body"), config);
