<div class="index-section home-product home-section {% if section.settings.is_effect_apply%}no_animation_effect{% else %}animation_effect{% endif %}" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" style="background-color: {{ section.settings.bg_color }}; border-top: {{ section.settings.border_top_width_size }}px solid {{ section.settings.border_top_color }}; border-bottom: {{ section.settings.bottom_width_size }}px solid {{ section.settings.border_bottom_color }};">

{%assign layoutType = section.settings.home_featured_products_layout_type%}
{%assign collection = collections[section.settings.home_featured_products_collection]%}
{%if collection.products.size > 0%}
  <div data-animation_name="{{ section.settings.animation_name }}" data-animation_delay="{{ section.settings.animation_delay }}" id="featuredProductsGrid" class="{% if section.settings.animation_name != 'noeffect' %}scroll_animation {% endif %}hasGrid fxInElement sectionWrap BlockTitleContain price_color_variations product_per_line_{{ section.settings.product_grid_perline_mobile }}" style="animation-duration: {{ section.settings.animation_duration }};">
    {%if section.settings.home_featured_products_title or section.settings.home_featured_products_desc%}
      <div class="fxInElement easeIn">
        <div class="blockTitle flexGrid">
          {%if section.settings.home_featured_products_title%}
           <h{{section.settings.heading_tag}} style="font-weight:{{ section.settings.heading_tag_text_style7}};color:{{section.settings.heading_color}};" class="top-heading-big flexItem">{{collection.title}}</h{{section.settings.heading_tag}}>
          {%endif%}
          {%if section.settings.home_featured_products_desc and collection.description != blank%}
            <div class="rte flexItem">{{collection.description}}</div>
          {%endif%}
        </div>
      </div>
    {%endif%}

    <div class="fxInElement easeIn  {% if section.settings.full_width_enabler %}grid_products{% else %}grid{% endif %}">
      <ul class="productListing flexGrid gridJustify centerColumns">
        {% assign counter = 0 %}
        
        {% assign countToDisplay = section.settings.product_limit %}
        {%for product in collection.products %}
        	
			
            {%if counter < countToDisplay %}
          	{%assign rows = section.settings.home_featured_products_rowSize%}
          	{%include 'product-thumb' with rows show_collection_in_link: section.settings.show_collection_in_link%}
        	{% assign counter = counter | plus: 1 %}
          {%endif%}

        {%endfor%}
      </ul>
    </div>
    {%if section.settings.btn_text != blank%}
    	<a href="{{section.settings.btn_link}}" class="button btn_feature_item">{{section.settings.btn_text}}</a>
    {%endif%}
  </div>
{%else%}
  <div class="sectionWrap hasGrid BlockTitleContain content_general">
    <div class="fxInElement easeIn">
      <div class="blockTitle flexGrid">
        <h2 style="font-weight:{{ section.settings.heading_tag_text_style7}};" class="top-heading-big flexItem">{{ 'homepage.upscoring.title' | t }}</h2>
        <div class="rte flexItem">
          <p>{{ 'homepage.upscoring.product_helper_text' | t }}</p>
          <p><a href="/admin/collections/new" >{{ 'homepage.upscoring.adminLink' | t }}</a></p>
        </div>
      </div>
    </div>
    <div class="fxInElement easeIn grid">
      <ul class="productListing flexGrid gridJustify centerColumns">
        {%for i in (1..6)%}
          {%include 'upscoring' with 'product-thumb'%}
        {%endfor%}
      </ul>
    </div>
  </div>
{%endif%}

 </div>



{% schema %}
  {
    "name": "Featured Products Grid",
    "settings": [
		{
              	"type": "paragraph",
              	"content": "Video Tutorial FR : [Featured Products Grid by Ulrich Vallée](https:\/\/www.ulrichvallee.com\/pages\/featured-products-grid)"
        },
      {
        "type": "paragraph",
        "content": "Display a single collection's products on the home page."
      },
	  {
		"type": "checkbox",
		"id": "full_width_enabler",
		"label": "Enable Full Width"
	  },
	  
      {
        "type": "checkbox",
        "id": "home_featured_products_title",
        "label": "Show  collection  title"
      },
	  
	  {
              "type": "select",
              "id": "heading_tag",
              "label": "Heading Tag",
              "default":"2",
              "options": [
                {
                    "value": "1",
                    "label": "H1"
                },
                {
                    "value": "2",
                    "label": "H2"
                },
                {
                    "value": "3",
                    "label": "H3"
                },
                {
                    "value": "4",
                    "label": "H4"
                },
                {
                    "value": "5",
                    "label": "H5"
                },
                {
                    "value": "6",
                    "label": "H6"
                }
              ]
      },
		{
              "type": "select",
              "id": "heading_tag_text_style7",
              "label": "Heading Font Style",
              "options": [
                {
                  "value": "300",
                  "label": "Lighter",
                  "group": "Font Style"
                },
                {
                  "value": "400",
                  "label": "Normal",
                  "group": "Font Style"
                },
                {
                  "value": "600",
                  "label": "Bold",
                  "group": "Font Style"
                },
                {
                  "value": "700",
                  "label": "Bolder",
                  "group": "Font Style"
                }
              ],
              "default": "300"
            },
 	  {
        "type": "color",
        "id": "heading_color",
        "label": "Heading Color"
      },
      {
        "type": "checkbox",
        "id": "home_featured_products_desc",
        "label": "Show collection description"
      },
      {
        "type": "collection",
        "id": "home_featured_products_collection",
        "label": "Products to feature"
      },
      {
        "type": "number",
        "id": "product_limit",
        "label": "Number of Products to display",
		"default":12
      },
      
      {
        "type": "select",
        "id": "home_featured_products_rowSize",
        "label": "Products Per Line",
        "info": "Applies only to the grid layout.",
        "options": [
          {
            "value": "full",
            "label": "1"
          },
          {
            "value": "half",
            "label": "2"
          },
          {
            "value": "thirds",
            "label": "3"
          },
          {
            "value": "quarters",
            "label": "4"
          },
		  {
			"value": "fifth",
			"label": "5"
		  },
		  {
			"value": "sixth",
			"label": "6"
		  },
          {
            "value": "mixGrid",
            "label": "Alternating 2-3"
          },
          {
            "value": "mixGridTwo",
            "label": "Alternating 3-2"
          }
        ]
      },
      {
        "type": "select",
        "id": "product_grid_perline_mobile",
        "label": "Product Per Line Mobile",
        "info": "Applies only to the grid layout.",
        "options": [
          {
            "value": "1",
            "label": "1"
          },
          {
            "value": "2",
            "label": "2"
          }
        ],
        "default": "1"
      },
	 
	  {
        "type": "text",
        "id": "btn_text",
        "label": "Button Text"
      },
	 	{
        "type": "text",
        "id": "btn_link",
        "label": "Button Link"
      },
		{
        "type": "checkbox",
        "id": "show_collection_in_link",
        "label": "SEO Links",
		"default":true
      },
		{
          "type": "range",
          "id": "padtop",
          "label": "Padding Top Desktop",
          "min": 0,
          "max": 100,  
          "step": 1,
          "unit": "px", 
          "default": 30
        },
        {
          "type": "range",
          "id": "padbot",
          "label": "Padding Bottom Desktop",
          "min": 0,
          "max": 100,  
          "step": 1,
          "unit": "px", 
          "default": 30
        },
        {
          "type": "range",
          "id": "padtop_mob",
          "label": "Padding Top Mobile",
          "min": 0,
          "max": 100,  
          "step": 1,
          "unit": "px", 
          "default": 30
        },
        {
          "type": "range",
          "id": "padbot_mob",
          "label": "Padding Bottom Mobile",
          "min": 0,
          "max": 100,  
          "step": 1,
          "unit": "px", 
          "default": 30
        },
        {
            "type":"checkbox",
            "id":"is_effect_apply",
            "label":"Apply Section Effect",
            "default":false
        },
        {
            "type": "select",
            "id": "animation_name",
            "label": "Animation Effect",
            "default": "noeffect",
            "options": [
              {
                "label": "No Effect",
                "value": "noeffect"
              },
              {
                "label": "bounce",
                "value": "bounce"
              },
              {
                "label": "flash",
                "value": "flash"
              },
              {
                "label": "pulse",
                "value": "pulse"
              },
              {
                "label": "rubberBand",
                "value": "rubberBand"
              },
              {
                "label": "shake",
                "value": "shake"
              },
              {
                "label": "headShake",
                "value": "headShake"
              },
              {
                "label": "swing",
                "value": "swing"
              },
              {
                "label": "tada",
                "value": "tada"
              },
              {
                "label": "wobble",
                "value": "wobble"
              },
              {
                "label": "jello",
                "value": "jello"
              },
              {
                "label": "bounceIn",
                "value": "bounceIn"
              },
              {
                "label": "bounceInDown",
                "value": "bounceInDown"
              },
              {
                "label": "bounceInLeft",
                "value": "bounceInLeft"
              },
              {
                "label": "bounceInRight",
                "value": "bounceInRight"
              },
              {
                "label": "bounceInUp",
                "value": "bounceInUp"
              },
              {
                "label": "fadeIn",
                "value": "fadeIn"
              },
              {
                "label": "fadeInDown",
                "value": "fadeInDown"
              },
              {
                "label": "fadeInDownBig",
                "value": "fadeInDownBig"
              },
              {
                "label": "fadeInLeft",
                "value": "fadeInLeft"
              },
              {
                "label": "fadeInLeftBig",
                "value": "fadeInLeftBig"
              },
              {
                "label": "fadeInRight",
                "value": "fadeInRight"
              },
              {
                "label": "fadeInRightBig",
                "value": "fadeInRightBig"
              },
              {
                "label": "fadeInUp",
                "value": "fadeInUp"
              },
              {
                "label": "fadeInUpBig",
                "value": "fadeInUpBig"
              },
              {
                "label": "flipInX",
                "value": "flipInX"
              },
              {
                "label": "flipInY",
                "value": "flipInY"
              },
              {
                "label": "lightSpeedIn",
                "value": "lightSpeedIn"
              },
              {
                "label": "rotateIn",
                "value": "rotateIn"
              },
              {
                "label": "rotateInDownLeft",
                "value": "rotateInDownLeft"
              },
              {
                "label": "rotateInDownRight",
                "value": "rotateInDownRight"
              },
              {
                "label": "rotateInUpLeft",
                "value": "rotateInUpLeft"
              },
              {
                "label": "rotateInUpRight",
                "value": "rotateInUpRight"
              },
              {
                "label": "hinge",
                "value": "hinge"
              },
              {
                "label": "jackInTheBox",
                "value": "jackInTheBox"
              },
              {
                "label": "rollIn",
                "value": "rollIn"
              },
              {
                "label": "zoomIn",
                "value": "zoomIn"
              },
              {
                "label": "zoomInDown",
                "value": "zoomInDown"
              },
              {
                "label": "zoomInLeft",
                "value": "zoomInLeft"
              },
              {
                "label": "zoomInRight",
                "value": "zoomInRight"
              },
              {
                "label": "zoomInUp",
                "value": "zoomInUp"
              },
              {
                "label": "slideInDown",
                "value": "slideInDown"
              },
              {
                "label": "slideInLeft",
                "value": "slideInLeft"
              },
              {
                "label": "slideInRight",
                "value": "slideInRight"
              },
              {
                "label": "slideInUp",
                "value": "slideInUp"
              },
              {
                "label": "heartBeat",
                "value": "heartBeat"
              }
            ]
          },
          {
            "type": "select",
            "id": "animation_duration",
            "label": "Animation Duration",
            "options": [
              {
                "value": "1s",
                "label": "1s"
              },
              {
                "value": "2s",
                "label": "2s"
              },
              {
                "value": "3s",
                "label": "3s"
              }
            ],
            "default": "1s"
          },
          {
            "type": "select",
            "id": "animation_delay",
            "label": "Animation Delay",
            "options": [
              {
                "value": "0",
                "label": "0"
              },
              {
                "value": "1",
                "label": "1s"
              },
              {
                "value": "2",
                "label": "2s"
              },
              {
                "value": "3",
                "label": "3s"
              },
              {
                "value": "4",
                "label": "4s"
              },
              {
                "value": "5",
                "label": "5s"
              },
              {
                "value": "6",
                "label": "6s"
              },
              {
                "value": "7",
                "label": "7s"
              },
              {
                "value": "8",
                "label": "8s"
              }
            ],
            "default": "0"
        },
		{
            "type": "color",
            "id": "bg_color",
            "label": "Background Color",
            "default": "#FFFFFF"
          },
          {
            "type": "color",
            "id": "border_top_color",
            "label": "Top Border Color",
            "default": "#FFFFFF"
          },
          {
            "type": "range",
            "id": "border_top_width_size",
            "label": "Top Border Width",
            "min": 0,
            "max": 10,
            "step": 1,
            "unit": "px",
            "default": 0
          },
          {
            "type": "color",
            "id": "border_bottom_color",
            "label": "Bottom Border Color",
            "default": "#FFFFFF"
          },
          {
            "type": "range",
            "id": "bottom_width_size",
            "label": "Bottom Border Width",
            "min": 0,
            "max": 10,
            "step": 1,
            "unit": "px",
            "default": 0
          }
	  
  ],
    "presets": [
      {
        "name": "Featured Products Grid",
        "category": "Product"
      }
    ]
  }
{% endschema %}

<style>
  #ProductSection-{{ section.id }} #featuredProductsGrid{
    padding-top:{{ section.settings.padtop }}px;
    padding-bottom:{{ section.settings.padbot }}px;
  }
  @media screen and (max-width: 768px) {
  	#ProductSection-{{ section.id }} #featuredProductsGrid{
    	padding-top:{{ section.settings.padtop_mob }}px;
      padding-bottom:{{ section.settings.padbot_mob }}px;
    }
  }
</style>
