基于星期几在Shopify结账页面展示对应运费费率

前提准备 #

先在Shopify后台创建两组独立的运费方式：

• 一组用于工作日（如命名为「工作日常规运费」）
• 一组用于周末（如命名为「周末专属运费」）
  记住它们的名称或内部handle（可在运费设置页面查看）。

方案1：通用版（非Plus商家适用） #

通过在结账页面添加自定义脚本，利用DOM操作隐藏/显示对应运费方式。将以下代码添加到 Shopify后台 > 设置 > 结账 > 附加脚本 中：

{% assign current_day = 'now' | date: '%w' %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  // 替换为你实际的运费方式名称
  const REGULAR_SHIPPING_NAME = '工作日常规运费';
  const WEEKEND_SHIPPING_NAME = '周末专属运费';

  // 获取所有运费方式元素
  const shippingMethods = document.querySelectorAll('.shipping-radio-wrapper');
  
  // 判断是否为周末（0=周日，6=周六）
  const isWeekend = {{ current_day }} == 0 || {{ current_day }} == 6;

  shippingMethods.forEach(method => {
    const methodName = method.querySelector('.shipping-method__title').textContent.trim();
    const radioInput = method.querySelector('input[type="radio"]');
    
    if (isWeekend) {
      // 周末只显示专属运费
      if (methodName !== WEEKEND_SHIPPING_NAME) {
        method.style.display = 'none';
        if (radioInput) radioInput.disabled = true;
      }
    } else {
      // 工作日只显示常规运费
      if (methodName !== REGULAR_SHIPPING_NAME) {
        method.style.display = 'none';
        if (radioInput) radioInput.disabled = true;
      }
    }
  });
});
</script>

注意事项

• 确保替换代码中的运费名称与后台创建的完全一致，可通过浏览器开发者工具查看页面元素确认名称
• 'now'使用的是商店设置的时区，需在 Shopify后台 > 设置 > 常规 > 时区 中调整为你需要的时区，避免日期判断错误
• 若Shopify更新结账页面结构，可能需要调整选择器（如.shipping-radio-wrapper、.shipping-method__title）

方案2：Shopify Plus专属（更稳定） #

使用Checkout UI Extensions通过官方API控制运费方式，避免DOM操作的不稳定问题。以下是React示例代码：

import { useShippingMethods, useApplyShippingMethodChange } from '@shopify/checkout-ui-extensions-react';
import { useEffect } from 'react';

export default function WeekendShippingFilter() {
  const { shippingMethods } = useShippingMethods();
  const applyShippingChange = useApplyShippingMethodChange();

  useEffect(() => {
    // 获取当前星期几（0=周日，6=周六）
    const currentDay = new Date().getDay();
    const isWeekend = currentDay === 0 || currentDay === 6;

    // 替换为你实际的运费方式handle
    const allowedHandle = isWeekend ? 'weekend-premium-shipping' : 'regular-weekday-shipping';

    // 筛选允许显示的运费方式
    const filteredMethods = shippingMethods.filter(method => method.handle === allowedHandle);

    // 应用筛选结果
    applyShippingChange({ shippingMethods: filteredMethods });
  }, [shippingMethods, applyShippingChange]);

  // 该组件无需渲染UI，返回null即可
  return null;
}

说明

• 需按照Shopify官方文档搭建Checkout UI Extensions开发环境，将上述代码打包后上传至商店
• 此方式直接通过官方API控制运费列表，不会受页面结构变化影响，稳定性更高

内容的提问来源于stack exchange，提问作者ERM