我在OutdoorProducts.Com上工作，我们已经提供了一个自定义视频播放器小部件。
<div id="carousel-home"></div>
<script>
(function(d, s) {
__TVPage__ = window.__TVPage__ || {};
__TVPage__.config = __TVPage__.config || {};
__TVPage__.config["carousel-home"] = {
loginid: "1759226",
channel: {"id":"179996403"},
targetEl : "carousel-home",
api_base_url: "//api.tvpage.com/v1"
};
window.addEventListener("load", function() {
var js = d.createElement(s),
fjs = d.getElementsByTagName(s)[0];
js.src = '//widgets-outdoorproducts-com.netlify.com/tvpwidget/carousel-
home/index.js';
fjs.parentNode.insertBefore(js, fjs);
}, false);
}(document, 'script'));
</script>
我能够将此代码放入索引文件中，但是由于Shopify使用主题自定义程序的各个部分，因此我只能将其添加到首页内容的顶部或底部，理想情况下，我希望在主标题下添加此代码
我们的shopify主题有一个可用于“ CUSTOM HTML”的部分，但是如果我在其中添加该代码，则不会显示该窗口小部件。
我已经想出了如何使用“自定义内容”部分的副本为主题编辑器创建自己的“部分”
{%- if section.settings.hidden_section -%}{%- capture check_admin -%}{{ content_for_header }}{%- endcapture -%}<style> #shopify-section-{{ section.id }} { {%- if check_admin contains 'design_mode' -%}opacity: .5;filter: alpha(opacity=50){%- else -%}display: none !important{%- endif -%}}</style>{%- endif -%}
{%- if section.settings.section_margin_top != blank or section.settings.section_margin_bottom != blank or section.settings.section_border != blank -%}
{%- assign s_margin_top = section.settings.section_margin_top | remove: ' ' | join: ' ' -%}
{%- assign s_margin_bottom = section.settings.section_margin_bottom | remove: ' ' | join: ' ' -%}
{%- assign s_border = section.settings.section_border | remove: ' ' | split: '-' | join: ' ' -%}
{%- endif -%}
{%- capture style_block_section -%}
{%- if section.settings.section_margin_top != blank or section.settings.section_margin_bottom != blank or section.settings.section_padding_top != blank or section.settings.section_padding_right != blank or section.settings.section_padding_left != blank or section.settings.section_padding_bottom != blank or section.settings.section_bg_color != blank or section.settings.section_bg_image != blank or section.settings.section_border != blank -%}
<style type="text/css">.gl_custom_{{section.id}}{ {%- if section.settings.section_margin_top != blank -%} margin-top: {{s_margin_top}} !important;{%- endif -%}{%- if section.settings.section_margin_bottom != blank -%} margin-bottom: {{s_margin_bottom}} !important;{%- endif -%}{%- if section.settings.section_padding_top != blank -%}padding-top: {{section.settings.section_padding_top}} !important;{%- endif-%}{%- if section.settings.section_padding_right != blank -%}padding-right: {{section.settings.section_padding_right}} !important;{%- endif-%}{%- if section.settings.section_padding_bottom != blank -%}padding-bottom: {{section.settings.section_padding_bottom}} !important;{%- endif-%}{%- if section.settings.section_padding_left != blank -%}padding-left: {{section.settings.section_padding_left}} !important; {%- endif -%}{%- if section.settings.section_bg_color != blank -%}background-color: {{ section.settings.section_bg_color }} !important;{%- endif -%}{%- if section.settings.section_bg_image != blank -%}{%- assign image = section.settings.section_bg_image -%}{%- assign image_size = image.width | append:'x' -%} background-image: url({%-include 'gl_image_format',src: image , size: image_size -%}) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important;{%- endif -%}{%- if section.settings.section_border != blank and section.settings.section_border_color != blank -%}border-width: {{ s_border }} !important; border-color: {{section.settings.section_border_color}} !important; border-style: {{section.settings.section_border_style}} !important{%- endif -%} }</style>
{%- endif -%}
{%- endcapture -%}
{{style_block_section}}
<div id="carousel-home"></div>
{%- schema -%}
{
"name": "TvPage",
"class": "index-section gl_custom_html_home",
"settings": [
{
"type": "html",
"id": "code",
"label": "HTML",
"default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
},
{
"type": "header",
"content": "== Design Options"
},
{
"type": "text",
"id": "section_margin_top",
"label": "Margin top",
"info": "60px"
},
{
"type": "text",
"id": "section_margin_bottom",
"label": "Margin bottom",
"info": "60px"
},
{
"type": "text",
"id": "section_padding_top",
"label": "Padding top",
"info": "60px"
},
{
"type": "text",
"id": "section_padding_right",
"label": "Padding right",
"info": "60px"
},
{
"type": "text",
"id": "section_padding_bottom",
"label": "Padding bottom",
"info": "60px"
},
{
"type": "text",
"id": "section_padding_left",
"label": "Padding left",
"info": "60px"
},
{
"type": "header",
"content": "== Basel Extras"
},
{
"type": "checkbox",
"id": "hidden_section",
"label": "Disable Section?",
"info": "If checked the section won't be visible on the public side of your website. You can switch it back any time.",
"default": false
}
],
"presets": [
{
"name": "TvPage",
"category": "Advanced layout"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
<script>
(function(d, s) {
__TVPage__ = window.__TVPage__ || {};
__TVPage__.config = __TVPage__.config || {};
__TVPage__.config["carousel-home"] = {
loginid: "1759226",
channel: {"id":"179996403"},
targetEl : "carousel-home",
api_base_url: "//api.tvpage.com/v1",
};
window.addEventListener("load", function() {
var js = d.createElement(s),
fjs = d.getElementsByTagName(s)[0];
js.src = '//widgets-outdoorproducts-com.netlify.com/tvpwidget/carousel-home/index.js';
fjs.parentNode.insertBefore(js, fjs);
}, false);
}(document, 'script'));
</script>
{% endjavascript %}
但是我无法显示该小部件。似乎我需要在“ SCHEMA”标签之间添加它，但是如果这样做，我会收到此消息“错误：标签'schema'中的JSON无效”
有没有办法做到这一点？