Shopify JSON 格式的模板代码错误问题-解网

问：

我一直在为客户的电子商务网站开发产品自定义小部件代码，该代码以前是用 HTML 创建的，效果很好，但现在需要匹配 JSON 代码以与他新安装的网站的模板格式保持一致。在编辑代码管理模式下，我不断收到来自Shopify的某些代码行错误消息，尽管我努力修复它，但Shopify的错误说明没有指定实际错误是什么，这使得它变得困难。如果有更多 JSON 代码/Shopify 模板“North”知识渊博的人有几分钟的时间在这里直接给我发消息，如果我能回复我一直在使用的代码片段，我将不胜感激，到目前为止，如果你看到我无法辨认的错误，我会很感激。谢谢！

首先，我将通过index.liquid页面为您提供位于客户电子商务shopify网站原始主题上方的原始HTML代码 -

然后，我将提供我制作的原始 HTML 代码，该代码在创建后运行良好并将其保存到新的“部分”，然后将“部分代码”输入到我客户原始主题中的“index.liquid”模板中，这是 Shopify 为新的电子商务付费会员提供的免费模板，称为“Boundless”。

然后，我将为无边界主题网站粘贴同一 index.liquid 模板的最终 HTML 代码。

接下来，我将粘贴的是我尝试创建的 JSON 代码（因为我是 JSON 新代码）并以相同的方式放入 index.json 模板中，但在某些预先创建的代码中，我并不真正知道将其插入到何处（查找代码输入的自定义图表部分，因为我现在正在从此 index.json 页面复制/粘贴整个代码以供参考，与我为上面的主题网站索引 .HTML 代码页分离 HTML 代码部分的方式不同）。

最后，我将粘贴我还需要帮助的内容 - 我在管理员编辑代码工具的“部分”部分创建了一个 product-customization.liqud 页面，这是根本不起作用或显示的代码。

    <!-- /templates/index.liquid -->
    {% comment %}
    Define your section markup, using `section.settings.[setting_name]` to access specific settings.
    * Sections do not have access to global liquid variables.
    {% endcomment %}

    {% assign slider_enabled = true %}

    {% section 'slideshow' %}

    <div class="hero__header">
    <div class="action-area">
    {% include 'action-bar' %}

    </div>
    </div>
    </div>


    {{ content_for_index }}

    {% section 'customization-chart' %}

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    /* Add your custom styling here */
    body {
    margin: 0;
    font-family: 'YourFont', sans-serif; /* Replace 'YourFont' with your desired font */
    }

    #buy-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    }
    </style>
    </head>
    <body>

    <div id="buy-button-container">
    <div id='product-component-1697576261507'></div>
    <script type="text/javascript">
    /*<![CDATA[*/
    (function () {
    var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
    if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
    ShopifyBuyInit();
    } else {
    loadScript();
    }
    } else {
    loadScript();
    }
    function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
    }
    function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
    domain: 'my-city-teez.myshopify.com',
    storefrontAccessToken: 'cd5e428dae687c2fe371e58ddb1ca7f8',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
    ui.createComponent('product', {
    id: '7301883003035',
    node: document.getElementById('product-component-1697576261507'),
    moneyFormat: '%24%7B%7Bamount%7D%7D',
    options: {
    /* Your options here */
    },
    });
    });
    }
    })();
    /*]]>*/
    </script>
    </div>


    </body>
    </html>


    <!-- /templates/index.liquid -->
    {% comment %}
    Define your section markup, using `section.settings.[setting_name]` to access specific settings.
    * Sections do not have access to global liquid variables.
    {% endcomment %}

    {% assign slider_enabled = true %}

    {% section 'slideshow' %}

    <div class="hero__header">
    <div class="action-area">
    {% include 'action-bar' %}

    </div>
    </div>
    </div>

    {{ content_for_index }}

    {% section 'customization-chart' %}

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    /* Add your custom styling here */
    body {
    margin: 0;
    font-family: 'YourFont', sans-serif; /* Replace 'YourFont' with your desired font */
    }

    #buy-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    }
    </style>
    </head>
    <body>

    <div id="buy-button-container">
    <div id='product-component-1697576261507'></div>
    <script type="text/javascript">
    /*<![CDATA[*/
    (function () {
    var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
    if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
    ShopifyBuyInit();
    } else {
    loadScript();
    }
    } else {
    loadScript();
    }
    function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
    }
    function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
    domain: 'my-city-teez.myshopify.com',
    storefrontAccessToken: 'cd5e428dae687c2fe371e58ddb1ca7f8',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
    ui.createComponent('product', {
    id: '7301883003035',
    node: document.getElementById('product-component-1697576261507'),
    moneyFormat: '%24%7B%7Bamount%7D%7D',
    options: {
    /* Your options here */
    },
    });
    });
    }
    })();
    /*]]>*/
    </script>
    </div>

    </body>
    </html>


{% schema %}
  {
    "name": "Section name",
    "settings": []
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{
  "widget": {
    "title": "Customize Your T-Shirt or Hat",
    "thumbnails": {
      "productType": {
        "T-Shirt": "path/to/tshirt-thumbnail.jpg",
        "Hat": "path/to/hat-thumbnail.jpg"
      },
      "color": {
        "Red": "path/to/red-thumbnail.jpg",
        "Blue": "path/to/blue-thumbnail.jpg",
        "Green": "path/to/green-thumbnail.jpg"
      },
      "logo": {
        "Logo 1": "path/to/logo1-thumbnail.jpg",
        "Logo 2": "path/to/logo2-thumbnail.jpg",
        "Logo 3": "path/to/logo3-thumbnail.jpg"
      }
    },
    "options": [
      {
        "label": "Text",
        "type": "text",
        "id": "text-input",
        "placeholder": "Enter your text"
      },
      {
        "label": "Color",
        "type": "select",
        "id": "color-select",
        "options": ["Red", "Blue", "Green"]
      },
      {
        "label": "Product Type",
        "type": "select",
        "id": "product-type-select",
        "options": ["T-Shirt", "Hat"]
      },
      {
        "label": "Logo",
        "type": "select",
        "id": "logo-select",
        "options": ["Logo 1", "Logo 2", "Logo 3"]
      }
      // Add more customization options as needed
    ],
    "button": {
      "label": "Shop Now",
      "id": "shop-now-button"
    }
  }
}
<div id="customization-widget">
  <h2>{{ widget.title }}</h2>
  <!-- Add logic to display thumbnails based on selected options -->
  {% for type in widget.thumbnails.productType %}
    <img src="{{ widget.thumbnails.productType[type] }}" alt="{{ type }} Thumbnail">
  {% endfor %}

  <!-- Add logic to generate dropdowns -->
  {% for option in widget.options %}
    {% if option.type == "select" %}
      <label for="{{ option.id }}">{{ option.label }}:</label>
      <select id="{{ option.id }}">
        {% for item in option.options %}
          <option value="{{ item }}">{{ item }}</option>
        {% endfor %}
      </select>
    {% endif %}
  {% endfor %}

  <button id="{{ widget.button.id }}">{{ widget.button.label }}</button>
</div>

{% javascript %}
{% endjavascript %}

数组 json shopify shopify-template shopify-storefront-api

0赞 Nick 11/13/2023

你没有粘贴任何东西......

0赞 Julia 11/14/2023

嗨，@Nick我不知道我是否正确发布了它，但我把我的解释文字放在我的帖子正文中，下面是代码所在的位置

答： 暂无答案

上一个：修改包含两个对象数组的数组

下一个：Node.js 双引号 json 数组有什么办法

Shopify JSON 格式的模板代码错误问题

Shopify JSON formatted template code errors issue

评论