fork download
copy 
  1. {{ '12-12.js' | asset_url | script_tag}}
  2. {{ 'landingpage.css' | asset_url | stylesheet_tag }}
  3.  
  4.    <div class="mobile-hide" >
  5.       <img src="{{ collection.image | img_url: 'master' }}" alt="{{ collection.title }} Image">
  6. </div>
  7.  
  8. <div class="collection-box {{section.settings.style}}{% unless section.settings.section_width %} page-width{% else %} fullwidth-{{section.id}} fullwidth{% endunless %}" id="{{ section.id }}"
  9.      data-section-id="{{ section.id }}" {% if section.settings.masonary_grid %}data-section-type="masonary"{% endif %}>
  10.   {% if collection.description != blank %}<div class="rte collection-description top">{{ collection.description }}</div>{% endif %}  
  11.   {% case section.settings.grid %}
  12.   {% when 2 %}{%- assign grid_ds = 'large-up--one-half' -%}
  13.   {% when 3 %}{%- assign grid_ds = 'large-up--one-third' -%}
  14.   {% when 4 %}{%- assign grid_ds = 'large-up--one-quarter' -%}
  15.   {% when 5 %}{%- assign grid_ds = 'large--one-quarter widescreen--one-fifth' -%}
  16.   {% when 6 %}{%- assign grid_ds = 'large--one-fifth widescreen--one-sixth' -%}
  17.   {% when 7 %}{%- assign grid_ds = 'large--one-fifth widescreen--one-seventh' -%}
  18.   {% endcase %}
  19.  
  20.   {% case section.settings.tablet-grid %}
  21.   {% when 2 %}{%- assign grid_tb = 'medium--one-half' -%}
  22.   {% when 3 %}{%- assign grid_tb = 'medium--one-third' -%}
  23.   {% when 4 %}{%- assign grid_tb = 'medium--one-quarter' -%}
  24.   {% when 5 %}{%- assign grid_tb = 'medium--one-fifth' -%}
  25.   {% endcase %}
  26.  
  27.   {% case section.settings.mobile-grid %}
  28.   {% when 1 %}{%- assign grid_mb = 'small--one-whole' -%}
  29.   {% when 2 %}{%- assign grid_mb = 'small--one-half' -%}
  30.   {% when 3 %}{%- assign grid_mb = 'small--one-third' -%}
  31.   {% endcase %}
  32.  
  33.  
  34.   <div class="grid-mr-{{ section.settings.grid-spacing}}">
  35.  
  36.     <div class="mobile-show mobilebanner" style="display:none">
  37.   <img src="{{ 'quaid-mobile-banner.jpg' | asset_url }}" width="auto" height="auto"/>
  38. </div>
  39.     <div class="flashwrap">
  40.   <img src="{{ 'flash-sale-icon.png' | asset_url }}" width="auto" height="auto"/>
  41.   <strong> Sale Ending in</strong>
  42.   <div id="week-countdown"></div>
  43. </div>
  44. <div class="banners-wrap">
  45.   <div>
  46.     <a href="/collections/quaid-collection?gf_9345=Boys#gf-grid"> <img src="{{ 'quaid-boy.jpg' | asset_url }}" width="auto" height="auto"/></a>
  47.   </div>
  48.   <div>
  49.     <a href="/collections/quaid-collection?gf_9345=Men%27s#gf-grid"> <img src="{{ 'quaid-mens.jpg' | asset_url }}" width="auto" height="auto"/></a>
  50.   </div>
  51.   <div>
  52.     <a href="/collections/quaid-collection?gf_9345=Girls#gf-grid"> <img src="{{ 'quaid-girls.jpg' | asset_url }}" width="auto" height="auto"/></a>
  53.   </div>
  54.   <div>
  55.     <a href="/collections/quaid-collection?gf_9345=Women%27s#gf-grid"> <img src="{{ 'quaid-women.jpg' | asset_url }}" width="auto" height="auto"/></a>
  56.   </div>
  57. </div> 
  58.  
  59. </div>
  60.  
  61.  
  62. {% schema %}
  63.   {
  64.     "name": "Sub Collections List Page",
  65.     "settings": [
  66. 	 {
  67. 		"type":"checkbox",
  68. 		"id":"section_width",
  69. 		"label":"Fullwidth?",
  70. 		"default": true
  71. 	  },
  72. 	  {
  73.         "type": "paragraph",
  74.         "content": "Left/Right Padding : Fullwidth Section Only==="
  75.       }, 	
  76.       {
  77.         "type": "range",
  78.         "id": "pad-desk",
  79.         "label": "Desktop",
  80.         "default": 55,
  81.         "min": 0,
  82.         "max": 100,
  83.         "step": 1
  84.       },
  85.       {
  86.         "type": "range",
  87.         "id": "pad-ipad",
  88.         "label": "Tablet",
  89.         "default": 15,
  90.         "min": 0,
  91.         "max": 30,
  92.         "step": 1
  93.       },
  94.       {
  95.         "type": "range",
  96.         "id": "pad-mbl",
  97.         "label": "Mobile",
  98.         "default": 10,
  99.         "min": 0,
  100.         "max": 20,
  101.         "step": 1
  102.       },
  103. 	  {
  104.         "type": "header",
  105.         "content": "Collection Banner and Title",
  106. 		"info":"display collection name, description or image. You can upload image from each collection or select background color"
  107.       },
  108.       {
  109.         "type": "checkbox",
  110.         "id": "show_collection_image",
  111.         "label": "Show Collection Image?",
  112.         "default": true
  113.       }, 	
  114.  	  {
  115.         "type": "range",
  116.         "id": "bheight",
  117.         "label": "Banner Height : Desktop",
  118.         "default": 300,
  119.         "min": 50,
  120.         "max": 400,
  121.         "step": 10,
  122. 		"unit":"px"		
  123.       }, 
  124.  	  {
  125.         "type": "range",
  126.         "id": "bheightipad",
  127.         "label": "Banner Height : Tablet",
  128.         "default": 200,
  129.         "min": 50,
  130.         "max": 400,
  131.         "step": 10,
  132. 		"unit":"px"		
  133.       }, 	
  134.      {
  135.         "type": "range",
  136.         "id": "bheightmob",
  137.         "label": "Banner Height : Mobile",
  138.         "default": 100,
  139.         "min": 50,
  140.         "max": 400,
  141.         "step": 10,
  142. 		"unit":"px"		
  143.       },
  144.       {
  145.         "type": "color",
  146.         "id": "clr_text",
  147.         "label": "Title Text",
  148.         "default": "#000"
  149.       },
  150.       {
  151.         "type": "color",
  152.         "id": "clr_bg",
  153.         "label": "Background",
  154.         "default": "#eee"
  155.       },
  156.  	  {
  157.         "type": "header",
  158.         "content": "Appearance"
  159.       },
  160.       {
  161.         "type": "select",
  162.         "id": "style",
  163.         "label": "Box style",
  164.         "default": "style3",
  165.         "options": [
  166. 			{ "value": "style1", "label": "Style 1" },
  167. 			{ "value": "style2", "label": "Style 2" },
  168. 			{ "value": "style3", "label": "Style 3" },
  169. 			{ "value": "style4", "label": "Style 4" }
  170.         ]
  171.       },
  172. 	  {
  173. 		"type":"checkbox",
  174. 		"id":"product_count",
  175. 		"label":"Show Products Count",
  176. 		"default": true
  177. 	  },  
  178. 	  {
  179. 		"type":"checkbox",
  180. 		"id":"masonary_grid",
  181. 		"label":"Masonary Grid",
  182. 		"default": false
  183. 	  },
  184. 	  {
  185.         "type": "range",
  186.         "id": "grid-spacing",
  187.         "label": "Grid Spacing",
  188.         "default": 4,
  189.         "min": 0,
  190.         "max": 30,
  191.         "step": 2,
  192. 		"unit":"px",
  193. 		"info":"Space between two box/grid"
  194.       },	 
  195. 	   {
  196.         "type": "paragraph",
  197.         "content": "=== Collections per row ==="
  198.       }, 	
  199.       {
  200.         "type": "range",
  201.         "id": "grid",
  202.         "label": "Desktop",
  203.         "default": 4,
  204.         "min": 2,
  205.         "max": 7,
  206.         "step": 1
  207.       },
  208.       {
  209.         "type": "range",
  210.         "id": "tablet-grid",
  211.         "label": "Tablet",
  212.         "default": 3,
  213.         "min": 1,
  214.         "max": 5,
  215.         "step": 1
  216.       },
  217.       {
  218.         "type": "range",
  219.         "id": "mobile-grid",
  220.         "label": "Mobile",
  221.         "default": 2,
  222.         "min": 1,
  223.         "max": 3,
  224.         "step": 1
  225.       },           
  226. 	   {
  227.         "type": "color",
  228.         "id": "collection_ttl_hm",
  229.         "label": "Title",
  230.         "default": "#fff"
  231.       },
  232.       {
  233.         "type": "color",
  234.         "id": "collection_ttl_bg_hm",
  235.         "label": "Title Background",
  236.         "default": "#000"
  237.       },
  238.       {
  239.         "type": "range",
  240.         "id": "collection_ttl_opt_hm",
  241.         "min": 0,
  242.         "max": 1,
  243.         "step": 0.1,
  244.         "label": "Background Opacity",
  245.         "unit": "%",
  246.         "default": 0.7
  247.       }
  248.     ]
  249.   }
  250. {% endschema %}
Success #stdin #stdout 0.02s 25516KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
{{ '12-12.js' | asset_url | script_tag}}
{{ 'landingpage.css' | asset_url | stylesheet_tag }}

   <div class="mobile-hide" >
      <img src="{{ collection.image | img_url: 'master' }}" alt="{{ collection.title }} Image">
</div>

<div class="collection-box {{section.settings.style}}{% unless section.settings.section_width %} page-width{% else %} fullwidth-{{section.id}} fullwidth{% endunless %}" id="{{ section.id }}"
     data-section-id="{{ section.id }}" {% if section.settings.masonary_grid %}data-section-type="masonary"{% endif %}>
  {% if collection.description != blank %}<div class="rte collection-description top">{{ collection.description }}</div>{% endif %}  
  {% case section.settings.grid %}
  {% when 2 %}{%- assign grid_ds = 'large-up--one-half' -%}
  {% when 3 %}{%- assign grid_ds = 'large-up--one-third' -%}
  {% when 4 %}{%- assign grid_ds = 'large-up--one-quarter' -%}
  {% when 5 %}{%- assign grid_ds = 'large--one-quarter widescreen--one-fifth' -%}
  {% when 6 %}{%- assign grid_ds = 'large--one-fifth widescreen--one-sixth' -%}
  {% when 7 %}{%- assign grid_ds = 'large--one-fifth widescreen--one-seventh' -%}
  {% endcase %}
  
  {% case section.settings.tablet-grid %}
  {% when 2 %}{%- assign grid_tb = 'medium--one-half' -%}
  {% when 3 %}{%- assign grid_tb = 'medium--one-third' -%}
  {% when 4 %}{%- assign grid_tb = 'medium--one-quarter' -%}
  {% when 5 %}{%- assign grid_tb = 'medium--one-fifth' -%}
  {% endcase %}
  
  {% case section.settings.mobile-grid %}
  {% when 1 %}{%- assign grid_mb = 'small--one-whole' -%}
  {% when 2 %}{%- assign grid_mb = 'small--one-half' -%}
  {% when 3 %}{%- assign grid_mb = 'small--one-third' -%}
  {% endcase %}

  
  <div class="grid-mr-{{ section.settings.grid-spacing}}">

    <div class="mobile-show mobilebanner" style="display:none">
  <img src="{{ 'quaid-mobile-banner.jpg' | asset_url }}" width="auto" height="auto"/>
</div>
    <div class="flashwrap">
  <img src="{{ 'flash-sale-icon.png' | asset_url }}" width="auto" height="auto"/>
  <strong> Sale Ending in</strong>
  <div id="week-countdown"></div>
</div>
<div class="banners-wrap">
  <div>
    <a href="/collections/quaid-collection?gf_9345=Boys#gf-grid"> <img src="{{ 'quaid-boy.jpg' | asset_url }}" width="auto" height="auto"/></a>
  </div>
  <div>
    <a href="/collections/quaid-collection?gf_9345=Men%27s#gf-grid"> <img src="{{ 'quaid-mens.jpg' | asset_url }}" width="auto" height="auto"/></a>
  </div>
  <div>
    <a href="/collections/quaid-collection?gf_9345=Girls#gf-grid"> <img src="{{ 'quaid-girls.jpg' | asset_url }}" width="auto" height="auto"/></a>
  </div>
  <div>
    <a href="/collections/quaid-collection?gf_9345=Women%27s#gf-grid"> <img src="{{ 'quaid-women.jpg' | asset_url }}" width="auto" height="auto"/></a>
  </div>
</div> 

</div>


{% schema %}
  {
    "name": "Sub Collections List Page",
    "settings": [
	 {
		"type":"checkbox",
		"id":"section_width",
		"label":"Fullwidth?",
		"default": true
	  },
	  {
        "type": "paragraph",
        "content": "Left/Right Padding : Fullwidth Section Only==="
      }, 	
      {
        "type": "range",
        "id": "pad-desk",
        "label": "Desktop",
        "default": 55,
        "min": 0,
        "max": 100,
        "step": 1
      },
      {
        "type": "range",
        "id": "pad-ipad",
        "label": "Tablet",
        "default": 15,
        "min": 0,
        "max": 30,
        "step": 1
      },
      {
        "type": "range",
        "id": "pad-mbl",
        "label": "Mobile",
        "default": 10,
        "min": 0,
        "max": 20,
        "step": 1
      },
	  {
        "type": "header",
        "content": "Collection Banner and Title",
		"info":"display collection name, description or image. You can upload image from each collection or select background color"
      },
      {
        "type": "checkbox",
        "id": "show_collection_image",
        "label": "Show Collection Image?",
        "default": true
      }, 	
 	  {
        "type": "range",
        "id": "bheight",
        "label": "Banner Height : Desktop",
        "default": 300,
        "min": 50,
        "max": 400,
        "step": 10,
		"unit":"px"		
      }, 
 	  {
        "type": "range",
        "id": "bheightipad",
        "label": "Banner Height : Tablet",
        "default": 200,
        "min": 50,
        "max": 400,
        "step": 10,
		"unit":"px"		
      }, 	
     {
        "type": "range",
        "id": "bheightmob",
        "label": "Banner Height : Mobile",
        "default": 100,
        "min": 50,
        "max": 400,
        "step": 10,
		"unit":"px"		
      },
      {
        "type": "color",
        "id": "clr_text",
        "label": "Title Text",
        "default": "#000"
      },
      {
        "type": "color",
        "id": "clr_bg",
        "label": "Background",
        "default": "#eee"
      },
 	  {
        "type": "header",
        "content": "Appearance"
      },
      {
        "type": "select",
        "id": "style",
        "label": "Box style",
        "default": "style3",
        "options": [
			{ "value": "style1", "label": "Style 1" },
			{ "value": "style2", "label": "Style 2" },
			{ "value": "style3", "label": "Style 3" },
			{ "value": "style4", "label": "Style 4" }
        ]
      },
	  {
		"type":"checkbox",
		"id":"product_count",
		"label":"Show Products Count",
		"default": true
	  },  
	  {
		"type":"checkbox",
		"id":"masonary_grid",
		"label":"Masonary Grid",
		"default": false
	  },
	  {
        "type": "range",
        "id": "grid-spacing",
        "label": "Grid Spacing",
        "default": 4,
        "min": 0,
        "max": 30,
        "step": 2,
		"unit":"px",
		"info":"Space between two box/grid"
      },	 
	   {
        "type": "paragraph",
        "content": "=== Collections per row ==="
      }, 	
      {
        "type": "range",
        "id": "grid",
        "label": "Desktop",
        "default": 4,
        "min": 2,
        "max": 7,
        "step": 1
      },
      {
        "type": "range",
        "id": "tablet-grid",
        "label": "Tablet",
        "default": 3,
        "min": 1,
        "max": 5,
        "step": 1
      },
      {
        "type": "range",
        "id": "mobile-grid",
        "label": "Mobile",
        "default": 2,
        "min": 1,
        "max": 3,
        "step": 1
      },           
	   {
        "type": "color",
        "id": "collection_ttl_hm",
        "label": "Title",
        "default": "#fff"
      },
      {
        "type": "color",
        "id": "collection_ttl_bg_hm",
        "label": "Title Background",
        "default": "#000"
      },
      {
        "type": "range",
        "id": "collection_ttl_opt_hm",
        "min": 0,
        "max": 1,
        "step": 0.1,
        "label": "Background Opacity",
        "unit": "%",
        "default": 0.7
      }
    ]
  }
{% endschema %}
https://ideone.com/ys160S
language:
PHP (php 7.3.5)
created:
59 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!