如何在Shopify JavaScript拖拽功能中持久化新位置信息

步骤1：监听拖拽结束事件，收集元素新顺序 #

你用的Swappable提供了stop事件（拖拽完成后触发），可以用来抓取当前元素的排列顺序。首先给每个可拖拽元素加一个唯一标识（比如data-id），方便后续识别：

var containers = document.querySelectorAll(".draggable-zone");
var swappable = new Swappable.default(containers, {
    draggable: ".draggable",
    handle: ".draggable .draggable-handle",
    mirror: {
        appendTo: "body",
        constrainDimensions: true
    }
});

// 监听拖拽完成事件，收集排序
swappable.on("stop", function() {
    const sortedIds = Array.from(document.querySelectorAll(".draggable"))
        .map(el => el.getAttribute("data-id"));
    
    saveSortOrder(sortedIds);
});

步骤2：将排序数据保存到Shopify后端 #

在Shopify里，推荐用**元字段（Metafields）**存储排序数据，比如绑定到店铺、页面或对应资源上。下面是前端请求示例（注意：直接调用Admin API需要权限，更安全的方式是通过主题后端代理请求）：

function saveSortOrder(sortedIds) {
    const sortData = JSON.stringify(sortedIds);
    
    // 发送请求保存到元字段
    fetch('/admin/api/2024-07/shop.json', {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-Shopify-Access-Token': '你的访问令牌' // 建议通过后端代理避免暴露令牌
        },
        body: JSON.stringify({
            shop: {
                metafields: [
                    {
                        namespace: 'custom',
                        key: 'draggable_card_order',
                        value: sortData,
                        type: 'json'
                    }
                ]
            }
        })
    })
    .then(res => res.json())
    .catch(err => console.error('保存排序失败:', err));
}

步骤3：页面加载时恢复排序 #

刷新页面后，从后端读取保存的排序数据，重新排列元素：

document.addEventListener('DOMContentLoaded', function() {
    // 获取保存的排序数据
    fetch('/admin/api/2024-07/shop.json?fields=metafields')
        .then(res => res.json())
        .then(data => {
            const sortMeta = data.shop.metafields.find(m => 
                m.namespace === 'custom' && m.key === 'draggable_card_order'
            );
            if (!sortMeta) return;
            
            const sortedIds = JSON.parse(sortMeta.value);
            const container = document.querySelector('.draggable-zone');
            
            // 按保存的顺序重新挂载元素
            sortedIds.forEach(id => {
                const el = document.querySelector(`.draggable[data-id="${id}"]`);
                el && container.appendChild(el);
            });
        })
        .catch(err => console.error('读取排序失败:', err));
});

关键细节提醒 #

• 每个可拖拽元素必须有唯一的data-id，确保排序匹配准确。
• 如果是多容器拖拽，需要扩展数据结构，比如记录元素所属的容器ID，格式改成[{id: 'xxx', container: 'zone1'}, ...]。
• 前端直接调用Admin API存在安全风险，建议在主题中创建自定义后端端点，由后端完成API调用，前端只需要发送排序数据到这个端点。

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