为主页创建部分后,Shopify主题编辑器崩溃了

问题描述

我正在尝试使用液体和Schema创建用于Shopify的gallery部分。在对代码进行了一些处理之后,主题编辑器将无响应或崩溃。我尝试删除正在编辑的主题,然后发布备份,但是备份主题的编辑器也会崩溃(即使该版本上甚至不存在新的部分)。

一两天后,它似乎运行良好,但是如果我创建另一个要测试的部分,它将再次无响应。真的不知道我在这里想念的是什么。起初,Shopify支持人员告诉我这是在他们一边,但事实并非如此,因为在我创建新部分时会发生这种情况。他们的解决方案是更新我的主题,但是这没有发生,因为我没有进行广泛的自定义,并且Shopify的主题版本控制非常糟糕。无论如何,这是我要创建的部分:

<div class="grid grid--no-gutters image-bar image-bar--{{ section.settings.section_height }}">
    {% for block in section.blocks %}

        <div class="image-wrap" style="background-image: url('{{ block.settings.image | img_url: '500x500' }}');">
        <h3>{{ block.settings.mention-text }}</h3>
        </div>
        
    {% endfor %}
</div>


{% schema %}
{
    "name": "galeria","settings": [
        {
            "type": "select","id": "per-row","label": "Images per row","options": [
                {
                    "value": "49.5%","label": "2 per row"
                },{
                    "value": "33%","label": "3 per row"
                },{
                    "value": "24.5%","label": "4 per row"
                }
            ],"default": "24.5%"
        },{
           "type": "select","id": "height","label": "Image Height","options": [
               {
                "value": "100px","label": "100px"
               },{
                "value": "200px","label": "200px"
            },{
                "value": "300px","label": "300px"
            },{
                "value": "410px","label": "450px"
            },{
                "value": "500px","label": "500px"
            }
           ],"default": "500px"
        }
    ],"blocks": [
    {
        "type": "image","name": "Image Block","settings": [
                {
                    "type": "image_picker","id": "image","label": "Image"
                },{
                    "type": "text","id": "mention_text","label": "Mention user","placeholder": "@"
                }
            ]
        }
    ],"presets": [
        {
            "category": "galeria","name": "galeria"
        }
    ]
}
{% endschema %}
{% style %}

.image-wrap {
    display: inline-block;
    width: {{section.settings.per-row}};
    height: {{section.settings.height}};
    background-size: 100%;
}

.page-width.galeria-testimonial {
    width: 90%;
    margin: 0 auto;
}

{% endstyle %}

解决方法

我相信您需要从 settings_data.json 文件中删除部分信息。您创建的所有部分都将JSON对象存储在此处,有时在删除文件时不会将其删除,您需要手动将其删除。我建议您打开该文件并查找 Galeria 并删除该部分的json对象。

This article can help in your understanding of themes.

另一个建议是,可以在Shopify外部开始对主题进行版本控制,您可以进行版本控制,并使用暂存主题来测试新功能/更改,以便更好地进行版本控制和测试,而不会麻烦您的实时站点。