shopify开发好的产品列表页面 sections/main-collection.liquid

<div
  id="CollectionSection"
  data-section-id="{{ section.id }}"
  data-section-type="collection-template"
  {% if section.settings.parallax %}data-parallax="true"{% endif %}>

  {%- if section.settings.collection_image_enable and collection.image -%}

    {%- style -%}
    .collection-hero {
      height: {{ section.settings.collection_image_height }}px;
    }
    @media screen and (max-width: 768px) {
      .collection-hero {
        height: {{ section.settings.collection_image_height | times: 0.6 }}px;
      }
    }
    {%- endstyle -%}

    <div class="collection-hero">

      {%- if section.settings.parallax -%}
        <parallax-image class="parallax-container">
          <div class="parallax-image" data-movement="15%" data-parallax-image data-angle="{{ section.settings.parallax_direction }}">
      {%- endif -%}

        {%- render 'image-element',
          img: collection.image,
          img_width: 2400,
          classes: 'collection-hero__image image-fit',
          preload: true,
          loading: 'eager',
        -%}

      {%- if section.settings.parallax -%}
          div>
        parallax-image>
      {%- endif -%}

      <div class="collection-hero__content">
        <div class="page-width">
          <header class="section-header section-header--hero">
            <h1 class="section-header__title section-header__title--medium">
              <div class="animation-cropper">
                <div class="animation-contents collection-title">
                  {{ collection.title }}
                div>
              div>
            h1>
          header>
        div>
      div>
    div>
  {%- endif -%}

  <div class="page-width page-content">
    {%- render 'breadcrumbs' -%}
    {%- render 'collection-sidebar', section: section -%}

    {%- unless section.settings.collection_image_enable and collection.image -%}
      <header class="section-header">
        <h1 class="section-header__title collection-title block12345">
          {{ collection.title }}
        h1>
      header>
    {%- endunless -%}


    {% render 'collection-filters',
      collection: collection,
      enable_sort: section.settings.enable_sort,
      collection_tags_style: section.settings.collection_tags_style
    %}
    
    {%- for block in section.blocks -%}
      {%- assign block_index = forloop.index -%}

      {%- case block.type -%}
      {%- when 'collection_description' -%}
        {%- if collection.description != blank -%}
          {%- unless forloop.first -%}
            <hr class="hr--clear hr--medium" {{ block.shopify_attributes }}>
          {%- endunless -%}

          <div class="collection-description rte" {{ block.shopify_attributes }}>
            <div class="enlarge-text">
              {{ collection.description }}
            div>
          div>

          {%- unless forloop.last -%}
            <hr class="hr--clear hr--small" {{ block.shopify_attributes }}>
          {%- endunless -%}
        {%- endif -%}
      {%- when 'product_grid' -%}
        {%- liquid
          assign per_row = block.settings.per_row
          assign paginate_by = per_row | times: 5
          if block.settings.collection_subnav_style == 'inline'
            assign paginate_by = paginate_by | minus: 1
          endif
        -%}

        {%- paginate collection.products by paginate_by -%}





    
        <div id="CollectionAjaxResult" {{ block.shopify_attributes }} class="clx">


<div class="sdfdf123" style="    width: 27%; float: left;position:relative;">




<div class="aaaio000">
<span class="category">Categoryspan>
{% comment %}到这里开始{% endcomment %}
          
<div class="classbox clx Dildosbox topclass123" id="Dildosbox">   
<div class="bigclass" id="Dildos">
Dildos(149)
div>
<a href="/collections/vibrating-dildo" class="smallclasssname">Vibrating Dildoa> (20)<br/>
<a href="/collections/silicone-dildo" class="smallclasssname">Silicone  Dildoa> (43)<br/>
<a href="/collections/sliding-skin-dildo" class="smallclasssname">Sliding Skin Dildoa> (29)<br/>
<a href="/collections/squirting-dildo-1" class="smallclasssname">Squirting Dildoa> (9)<br/>
<a href="/collections/big-dildo" class="smallclasssname">Big Dildoa> (42)<br/>
<a href="/collections/double-dildo" class="smallclasssname">Double Dildoa> (4)<br/>
div>

		<div class="classbox clx Dildosbox topclass123" id="Vibrating">        
		<div class="bigclass">
		Vibrating Dildo(20)
		div>
		div>

		<div class="classbox clx Dildosbox topclass123" id="Silicone">        
		<div class="bigclass">
		Silicone  Dildo(43)
		div>
		div>

		<div class="classbox clx Dildosbox topclass123" id="Sliding">        
		<div class="bigclass">
		Sliding Skin Dildo(29)
		div>
		div>

		<div class="classbox clx Dildosbox topclass123" id="Squirting">        
		<div class="bigclass">
		Squirting Dildo(9)
		div>
		div>

		<div class="classbox clx Dildosbox topclass123" id="BigDildo">        
		<div class="bigclass">
		Big Dildo(42)
		div>
		div>

		<div class="classbox clx Dildosbox topclass123" id="DoubleDildo">        
		<div class="bigclass">
		Double Dildo(4)
		div>
		div>  
  
  
<div class="classbox clx straponbox topclass123" id="straponbox"> 
<div class="bigclass">
Strap On(24)       
div>
<a href="/collections/strap-on-harness" class="smallclasssname">Strap On Harnessa> (23)<br/>
<a href="/collections/hollow-strap-on" class="smallclasssname">Hollow Strap Ona> (2)<br/>
div>


		<div class="classbox clx Dildosbox topclass123" id="Strap">        
		<div class="bigclass">
		Strap On Harness(23)
		div>
		div>  

		<div class="classbox clx Dildosbox topclass123" id="Hollow">        
		<div class="bigclass">
		Hollow Strap On(2)
		div>
		div>  
  

<div class="classbox clx straponbox topclass123" id="Vibrator"> 
<div class="bigclass">
Vibrator(27)     
div>
<a href="/collections/vibrating-panties" class="smallclasssname">Vibrating Pantiesa> (2)<br/>
<a href="/collections/rechargeable-vibrator" class="smallclasssname">Classic Vibratora> (23)<br/>
<a href="/collections/suction-vibrator" class="smallclasssname">Suction Vibratora> (2)<br/>
div>

		<div class="classbox clx Dildosbox topclass123" id="Vibrating">        
		<div class="bigclass">
		Vibrating Panties(2)
		div>
		div>  

		<div class="classbox clx Dildosbox topclass123" id="Classic">        
		<div class="bigclass">
		Classic Vibrator(23)
		div>
		div>   

		<div class="classbox clx Dildosbox topclass123" id="Suction">        
		<div class="bigclass">
		Suction Vibrator(2)
		div>
		div> 

		<div class="classbox clx straponbox topclass123" id="Anal"> 
		<div class="bigclass">
		Anal Toy(48)       
		div>
		div>          

		<div class="classbox clx straponbox topclass123" id="Bondage"> 
		<div class="bigclass">
		Bondage(4)       
		div>
		div> 

		<div class="classbox clx straponbox topclass123" id="Glass"> 
		<div class="bigclass">
		Glass Sex Toy(10) 
		div>
		div> 

<div class="classbox clx straponbox topclass123" id="Love"> 
<div class="bigclass">
Love Egg&Ball(6)       
div>  
<a href="/collections/remote-control-vibrator" class="smallclasssname">Remote Control Vibratora> (3)<br/>
<a href="/collections/ben-wa-ball-1" class="smallclasssname">Ben Wa Balla> (3)<br/>
div>

		<div class="classbox clx straponbox topclass123" id="Remote"> 
		<div class="bigclass">
		Remote Control Vibrator(3) 
		div>
		div> 

		<div class="classbox clx straponbox topclass123" id="Ben"> 
		<div class="bigclass">
		Ben Wa Ball(3) 
		div>
		div>           

<div class="classbox clx straponbox topclass123" id="Male"> 
<div class="bigclass">
Male Sex Toy(49)       
div>
<a href="/collections/penis-sleeve" class="smallclasssname">Penis Sleevea> (31)<br/>
<a href="/collections/masturbator" class="smallclasssname">Masturbatora> (37)<br/>
<a href="/collections/cock-ring" class="smallclasssname">Cock Ringa> (4)<br/>
<a href="/collections/prostate-massager" class="smallclasssname">Prostate Massagera> (6)<br/>
div>
		          
		<div class="classbox clx straponbox topclass123" id="Penis"> 
		<div class="bigclass">
		Penis Sleeve(31) 
		div>
		div>  

		<div class="classbox clx straponbox topclass123" id="Masturbator"> 
		<div class="bigclass">
		Masturbator(37) 
		div>
		div>  

		<div class="classbox clx straponbox topclass123" id="Cock"> 
		<div class="bigclass">
		Cock Ring(4) 
		div>
		div>  

		<div class="classbox clx straponbox topclass123" id="Prostate"> 
		<div class="bigclass">
		Prostate Massager(6) 
		div>
		div> 
{% comment %}到这里结束{% endcomment %}


{% comment %}
<div class="aaaio111 fgds11122">
{% for collection in collections %}
  <a href="{{ collection.url }}">{{collection.title}}a>
 ({{ collection.all_products_count }})<br/> 
{% endfor %}
div>
<span style="border-bottom: 2px solid #e72b7f;cursor: pointer;
    padding-bottom: 4px;" class="" id="toggle333" onclick="toggle222()">Show 10 morespan> 
{% endcomment %}
          
div>  
<script>


var url = window.location.href; 
var urlsss = url.split('/')[url.split('/').length-1].split('?')[0];
//alert(urlsss);
          
// var startIndex = url.lastIndexOf("/");  
// if (startIndex != -1) {  
// var urlsss = url.substring(startIndex + 1);  
// //  alert(vibrator); // 输出 "vibrator"  

// } else {  
//   console.log("未找到斜杠");  
// }
// 根据页面参数显示不同的区块内容  
    if (urlsss === 'all') {  
        document.getElementById('Dildosbox').style.display = 'block'; 
        document.getElementById('straponbox').style.display = 'block'; 
        document.getElementById('Vibrator').style.display = 'block';  
        document.getElementById('Anal').style.display = 'block'; 
        document.getElementById('Bondage').style.display = 'block'; 
        document.getElementById('Glass').style.display = 'block'; 
        document.getElementById('Love').style.display = 'block'; 
        document.getElementById('Male').style.display = 'block'; 
      } else if (urlsss === 'dildo') {  
        document.getElementById('Dildosbox').style.display = 'block';  
      } else if (urlsss === 'vibrating-dildo') {  
        document.getElementById('Vibrating').style.display = 'block';  
      } else if (urlsss === 'silicone-dildo') {  
        document.getElementById('Silicone').style.display = 'block';  
      }else if (urlsss === 'sliding-skin-dildo') {  
        document.getElementById('Sliding').style.display = 'block';  
      }else if (urlsss === 'squirting-dildo-1') {  
        document.getElementById('Squirting').style.display = 'block';  
      }else if (urlsss === 'big-dildo') {  
        document.getElementById('BigDildo').style.display = 'block';  
      }else if (urlsss === 'double-dildo') {  
        document.getElementById('DoubleDildo').style.display = 'block';  
      }




      else if (urlsss === 'strap-on') {  
        document.getElementById('straponbox').style.display = 'block';  
      }else if (urlsss === 'strap-on-harness') {  
        document.getElementById('Strap').style.display = 'block';  
      }else if (urlsss === 'hollow-strap-on') {  
        document.getElementById('Hollow').style.display = 'block';  
      } 


      else if (urlsss === 'vibrator') {  
        document.getElementById('Vibrator').style.display = 'block';  
      }else if (urlsss === 'vibrating-panties') {  
        document.getElementById('Vibrating').style.display = 'block';  
      }else if (urlsss === 'rechargeable-vibrator') {  
        document.getElementById('Classic').style.display = 'block';  
      }else if (urlsss === 'suction-vibrator') {  
        document.getElementById('Suction').style.display = 'block';  
      }



       else if (urlsss === 'anal-toys') {  
        document.getElementById('Anal').style.display = 'block';  
      } else if (urlsss === 'bondage') {  
        document.getElementById('Bondage').style.display = 'block';  
      } else if (urlsss === 'glass-sex-toy') {  
        document.getElementById('Glass').style.display = 'block';  
      } 


      else if (urlsss === 'love-egg-ball-1') {  
        document.getElementById('Love').style.display = 'block';  
      }else if (urlsss === 'remote-control-vibrator') {  
        document.getElementById('Remote').style.display = 'block';  
      }else if (urlsss === 'ben-wa-ball-1') {  
        document.getElementById('Ben').style.display = 'block';  
      } 



      else if (urlsss === 'male-sex-toy') {  
        document.getElementById('Male').style.display = 'block';  
      }else if (urlsss === 'penis-sleeve') {  
        document.getElementById('Penis').style.display = 'block';  
      }else if (urlsss === 'masturbator') {  
        document.getElementById('Masturbator').style.display = 'block';  
      }else if (urlsss === 'cock-ring') {  
        document.getElementById('Cock').style.display = 'block';  
      }else if (urlsss === 'prostate-massager') {  
        document.getElementById('Prostate').style.display = 'block';  
      } else {  
        // 默认显示首页内容  
      }  


  
// let aaaio111 = document.querySelector('.aaaio111');
// aaaio111.style.height = "166px";
// function toggle222() {
//   //alert(aaaio111.style .height);
//    if (aaaio111.style.height === '166px') {
//       aaaio111.style.height = 'auto';
//       document.querySelector("#toggle333").innerHTML = "Show fewer";
//    }else {
//      // alert(aaaio111.style .height);  
//       aaaio111.style.height = '166px';document.querySelector("#toggle333").innerHTML = "Show 10 more";
//    };
// }
script>

<div id="template_box">div>
  
{%- render 'collection222-sidebar-filters', location: 'SidebarDrawer', section: section, collection: collection -%}
          
div>
          
          <div id="CollectionAjaxContent" style="width: 70%;float: right;">

            {% render 'collection-grid',
              collection: collection,
              items: collection.products,
              collection_subnav_style: block.settings.collection_subnav_style,
              mobile_flush_grid: block.settings.mobile_flush_grid,
              quick_shop_enable: settings.quick_shop_enable,
              per_row: block.settings.per_row
            %}
    
            {%- if paginate.pages > 1 -%}
              {%- render 'pagination', paginate: paginate -%}
            {%- endif -%}



            
          div>
        div>

        {%- endpaginate -%}
      {%- endcase -%}
    {%- endfor -%}
  div>
div>
<style>
.topclass123{display:none}
.bigclass{font-weight:600}
.category{display:block;font-size: 20px;    margin-bottom: 10px;
    font-weight: 600;}
  .aaaio111{    height: 166px;
    overflow: hidden;}
.fgds11122 a{font-size: 16px;line-height: 2;}
.fgds11122 a:hover{text-decoration:underline}
.clx:before,.clx:after{content:"";display:block;}.clx:after{clear:both;}.clx{*zoom:1;}
.smallclasssname{font-size: 16px;line-height: 2;}
.smallclasssname:hover{text-decoration:underline}
.smallclasssname{margin-left:20px}
.classbox{margin-bottom: 10px;}
@media only screen and (max-width: 589px){
.sdfdf123{display:none!important}
#CollectionAjaxContent{float:none!important;width:100%!important}                                         
.Filterby{display:none!important} 
.collection123456 {
    clear: none!important;}
}
style>
<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "CollectionPage",
    {% if collection.description != blank %}
      "description": {{ collection.description | strip_html | json }},
    {% endif %}
    {% if page_image %}
      {% assign image_size = page_image.width | append: 'x' %}
      "image": {
        "@type": "ImageObject",
        "height": {{ page_image.height | json }},
        "url": {{ page_image | img_url: image_size | prepend: "https:" | json }},
        "width": {{ page_image.width | json }}
      },
    {% endif %}
    "name": {{ collection.title | json }}
  }
script>

{% schema %}
{
  "name": "t:sections.main-collection.name",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.main-collection.settings.header_image"
    },
    {
      "type": "checkbox",
      "id": "collection_image_enable",
      "label": "t:sections.main-collection.settings.collection_image_enable.label",
      "default": true
    },
    {
      "type": "range",
      "id": "collection_image_height",
      "label": "t:sections.main-collection.settings.collection_image_height.label",
      "default": 550,
      "min": 350,
      "max": 750,
      "step": 100,
      "unit": "px"
    },
    {
      "type": "checkbox",
      "id": "parallax",
      "label": "t:sections.main-collection.settings.parallax.label",
      "default": true
    },
    {
      "type": "select",
      "id": "parallax_direction",
      "label": "t:sections.background-image-text.settings.parallax_direction.label",
      "default": "top",
      "options": [
        {
          "value": "top",
          "label": "t:sections.background-image-text.settings.parallax_direction.options.top.label"
        },
        {
          "value": "left",
          "label": "t:sections.background-image-text.settings.parallax_direction.options.left.label"
        }
      ]
    },
    {
      "type": "header",
      "content": "t:sections.main-collection.settings.header_filtering_and_sorting"
    },
    {
      "type": "checkbox",
      "id": "enable_sidebar",
      "label": "t:sections.main-collection.settings.enable_sidebar.label",
      "default": true,
      "info": "t:sections.main-collection.settings.enable_sidebar.info"
    },
    {
      "type": "checkbox",
      "id": "collapsed",
      "label": "t:sections.main-collection.settings.collapsed.label",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_color_swatches",
      "label": "t:sections.main-collection.settings.enable_color_swatches.label",
      "info": "t:sections.main-collection.settings.enable_color_swatches.info"
    },
    {
      "type": "checkbox",
      "id": "enable_sort",
      "label": "t:sections.main-collection.settings.enable_sort.label",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "collection_description",
      "name": "t:sections.main-collection.blocks.collection_description.name",
      "limit": 1
    },
    {
      "type": "product_grid",
      "name": "t:sections.main-collection.blocks.products.name",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "collection_subnav_style",
          "label": "t:sections.main-collection.blocks.products.settings.collection_subnav_style.label",
          "default": "inline",
          "options": [
            {
              "value": "none",
              "label": "t:sections.main-collection.blocks.products.settings.collection_subnav_style.options.none.label"
            },
            {
              "value": "inline",
              "label": "t:sections.main-collection.blocks.products.settings.collection_subnav_style.options.inline.label"
            }
          ]
        },
        {
          "type": "range",
          "id": "per_row",
          "label": "t:sections.main-collection.blocks.products.settings.per_row.label",
          "default": 4,
          "min": 1,
          "max": 5,
          "step": 1
        },
        {
          "type": "checkbox",
          "id": "mobile_flush_grid",
          "label": "t:sections.main-collection.blocks.products.settings.mobile_flush_grid.label",
          "default": false
        }
      ]
    }
  ]
}
{% endschema %}