Question

我编写此代码的目的是使用它们创建选项卡。建立在别人的代码上。计划是创建块，然后使用这些块创建选项卡。如果您使用Shopify，那么您会明白我的意思，但是我将在此处发布完整的代码供您查看。目前没有关于如何创建选项卡的想法...想一个for循环以将它们放入列表中，但似乎无法将我的头扎在完成这项工作上，也许这甚至是错误的方法...？

这是部分代码：

{% comment %}
** Single featured collection - homepage partial **
- Draggable section
{% endcomment %}

{% include 'include-featured-collection-custom' %}

{% schema %}
{
  "name": "Featured collection Cust",
  "class": "featured-collection-section",
  "max_blocks": 6,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Custom Featured collection"
    } 
],
   "blocks": [
    {
		"type": "collection",
		"name": "Tabbed Collection",
		"settings": [
					  {
      					"type": "collection",
      					"id": "collection",
      					"label": "Collection"
    				  },
					  {
						"type": "text",
						"id": "tabtitle",
						"label": "Tab Title",
						"default": "Tab Title"
					  },
                      {
                        "type": "radio",
                        "id": "collection_style",
                        "label": "Collection layout",
                        "default": "slider",
                        "options": [
                          {
                            "value": "slider",
                            "label": "Slider"
                          },
                          {
                            "value": "grid",
                            "label": "Grid"
                          }
                        ]
                      },
                      {
                        "type": "range",
                        "id": "products_per",
                        "label": "Products per row",
                        "min": 2,
                        "max": 7,
                        "step": 1,
                        "default": 3
                      },
                      {
                        "type": "range",
                        "id": "products_limit",
                        "label": "Limit products",
                        "min": 3,
                        "max": 20,
                        "step": 1,
                        "default": 5
                      }
    	]
  }
  ],
  "presets": [{
    "name": "Featured collection Cust",
    "category": "Collection",
    "settings": {

    },
	"blocks": [
        { 
          "type": "collection"
        },
        {
          "type": "collection"
        },
		{
		  "type": "collection"
		}
      ]
  }]
}
{% endschema %}

这是代码段：

  {% assign title = section.settings.title %}

<div class="container featured_products product-{{ collection_style }}">
  <div class="sixteen columns center homepage_content">
    {% if title != blank %}
      <a href="{{ collections[settingCollection].url }}"><h2 class="title">{{ title }}</h2></a>
      <div class="feature_divider"></div>
    {% endif %}
    {% if collection_description and collections[settingCollection].description != blank %}
      <div class="section clearfix">
        {{ collections[settingCollection].description }}
      </div>
    {% endif %}
  </div>
</div>
{% for block in section.blocks %}
  {% assign settingCollection = block.settings.collection %}
  {% assign collection_style = block.settings.collection_style %}
  {% assign collection_description = block.settings.collection_description %}
  {% assign products_per = block.settings.products_per %}
  {% assign products_limit = block.settings.products_limit %}


{% if settingCollection == blank %}
  {%- assign section_onboarding = true -%}
  {% comment %}assign product length to be selected limit for onboarding{% endcomment %}
  {% assign products_length = products_limit | plus: 0 %}
{% else %}
  {%- assign section_onboarding = false -%}
{% endif %}



{% assign limit = products_limit %}

{% if collection_style == 'slider' %}
  {% assign col = settingCollection %}
  {% assign products = collections[settingCollection].products %}
  {% assign per_slide = products_per %}

  <div class="container js-product-slider homepage-product-slider full-width--true {% if per_slide == 2 or per_slide == 4 or per_slide == 6 %}even-num-slides{% endif %}">
    <a href=""><h3 class="title" style="text-align: center;font-size: 20px;border: 1px solid;width: 200px;padding: 5px;"> {{ block.settings.tabtitle }} </h3></a>
    {% if section_onboarding == false %}
      {% if col and collections[col].all_products_count > 0 %}
        {% include 'product-slider', per_slide: products_per, featured_collection: col  %}
      {% endif %}
    {% else %}

      <div class="slider-gallery products-slider products-length-{{ products_length }}"
            data-products-per-slide="{{ per_slide }}"
            data-products-limit="{{ limit }}"
            data-products-available="{{ products_length }}">
        {% for i in (1..limit) %}
          {% assign per_slide_num = products_per | plus: 0 %}
          <div class="gallery-cell thumbnail
          {% if products_length > per_slide_num %}visible-{{ per_slide }}{% else %}visible-{{ products_length }}{% endif %}
          ">
            <div class="product-wrap">
              <div class="relative product_image">
                <a href="#" itemprop="url">
                  <object class="placeholder-image">
                    {% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
                    {{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
                  </object>
                </a>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>
{% else %}
  {% if section_onboarding == false %}
    {% assign limit = products_limit %}
    {% assign collection = collections[settingCollection] %}
    {% assign products = collections[settingCollection].products %}
    {% assign products_per_row = products_per %}
    <div class="container">
      <div class="sixteen columns">
        {% include 'product-loop' %}
      </div>
    </div>
  {% else %}
    {% assign products_per_row = products_per %}
    <div class="container equal-columns--outside-trim">
      <div class="sixteen columns">
        {% capture new_row %}
            <br class="clear product_clear" />
        {% endcapture %}

        <div itemtype="http://schema.org/ItemList" class="product-list collection-matrix clearfix">
          {% for i in (1..limit) %}
            {% comment %}{% assign collection_group = products | map: 'id' %}{% endcomment %}
            {% assign collection_group_thumb = collection_group | append : 'thumb' %}
            {% assign collection_group_mobile = collection_group | append : 'mobile' %}
              <div class="
              {% if products_per_row == 2 %}
                eight columns {% cycle collection_group_thumb: 'alpha', 'omega' %}
              {% elsif products_per_row == 3 %}
                one-third column {% cycle collection_group_thumb: 'alpha', '', 'omega' %}
              {% elsif products_per_row == 4 %}
                four columns {% cycle collection_group_thumb: 'alpha', '', '', 'omega' %}
              {% elsif products_per_row == 5 %}
                one-fifth column {% cycle collection_group_thumb: 'alpha', '', '', '', 'omega' %}
              {% elsif products_per_row == 6 %}
                one-sixth column {% cycle collection_group_thumb: 'alpha', '', '', '', '', 'omega' %}
              {% else %}
                one-seventh column {% cycle collection_group_thumb: 'alpha', '', '', '', '', '', 'omega' %}
              {% endif %} thumbnail {% cycle collection_group_mobile: 'even', 'odd' %}
              {% if settings.mobile_products_per_row == '1' %}
                medium-down--one-half
                small-down--one-whole
              {% else %}
                medium-down--one-half
                small-down--one-half
              {% endif %}">

              <div class="product-wrap">
                <div class="relative product_image swap-{{ settings.collection_secondary_image }}">
                  <a href="#" itemprop="url">
                    {% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
                    {{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
                  </a>
                </div>
              </div>
            </div>

            {% if products_per_row == 2 %}
              {% cycle collection_group: '', new_row %}
            {% elsif products_per_row == 3 %}
              {% cycle collection_group: '', '', new_row %}
            {% elsif products_per_row == 4 %}
              {% cycle collection_group: '', '', '', new_row %}
            {% elsif products_per_row == 5 %}
              {% cycle collection_group: '', '', '', '', new_row %}
            {% elsif products_per_row == 6 %}
              {% cycle collection_group: '', '', '', '', '', new_row %}
            {% elsif products_per_row == 7 %}
              {% cycle collection_group: '', '', '', '', '', '', new_row %}
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>
  {% endif %}
{% endif %}
{% endfor %}

这是到目前为止的前端结果。 front end screenshot

混淆如何标签此内容

0 个答案: