Shopify. Таймер для коллекции товаров

Shopify timer
  • 26.08.2020

Задача: добавить таймер на страницу коллекции товаров, с возможностью задать время завершения в настройщике темы. Также таймер должен отображаться только на конкретной странице с коллекцией товаров.

Для редактирования внешнего вида коллекций перехожу в редактор кода темы Shopify. Далее к файлу отвечающему за внешний вид коллекций Section -> collection-template.liquid. Находим место куда необходимо вставить код таймера. В моём случае после тега <h1>. Чтобы таймер отображался только на указанной странице, у меня это Weekdeals, прописываем следующий код:

{% if collection.handle == 'weekdeals' %}

{% endif %}

Код для таймера будет находиться в отдельном файле. Соответственно создаю этот файл в разделе Snippets. Название файла: my-timer.liquid

Возвращаемся к файлу collection-template.liquid и прописываем ссылку на наш файл, между тегами условия:

{% if collection.handle == 'weekdeals' %}
  {% include 'my-timer' %}
{% endif %}

В файле my-timer прописываем html код:

<div class="my_box">
<p class="my_box-title">You only have</p>

<svg style="height: 65px;margin-right: -9px;z-index: 99;color: #4394f2;" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="history" class="svg-inline--fa fa-history fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M504 255.531c.253 136.64-111.18 248.372-247.82 248.468-59.015.042-113.223-20.53-155.822-54.911-11.077-8.94-11.905-25.541-1.839-35.607l11.267-11.267c8.609-8.609 22.353-9.551 31.891-1.984C173.062 425.135 212.781 440 256 440c101.705 0 184-82.311 184-184 0-101.705-82.311-184-184-184-48.814 0-93.149 18.969-126.068 49.932l50.754 50.754c10.08 10.08 2.941 27.314-11.313 27.314H24c-8.837 0-16-7.163-16-16V38.627c0-14.254 17.234-21.393 27.314-11.314l49.372 49.372C129.209 34.136 189.552 8 256 8c136.81 0 247.747 110.78 248 247.531zm-180.912 78.784l9.823-12.63c8.138-10.463 6.253-25.542-4.21-33.679L288 256.349V152c0-13.255-10.745-24-24-24h-16c-13.255 0-24 10.745-24 24v135.651l65.409 50.874c10.463 8.137 25.541 6.253 33.679-4.21z"></path>
</svg>

<div class="my_timer" >
    <div class="my_timer-content" id="demo">
</div>

Код svg соответственно иконка таймера FontAwesome.

И также javascript код:

<script>
// Set the date we're counting down to
  var countDownDate = new Date("{{ section.settings.start_month }} {{ section.settings.start_day }}, {{ section.settings.start_year }} {{section.settings.start_hours}}:{{section.settings.start_minute}}:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
    document.getElementById("demo").innerHTML = days + "d " + hours + "h " + ": "
  + minutes + "m " + ": " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

Для стилей создаём отдельный файл в разделе Assets -> custom.css. Для того чтобы наши стили отобразились переходим к файлу отвечающему за индексный файл Layout -> theme.liquid находим, где добавляются стили для темы. В моём случае это следующий код:

{{ 'theme.scss.css' | asset_url | stylesheet_tag }}

И после него прописываем ссылку на наш файл со стилями:

{{ 'custom.css' | asset_url | stylesheet_tag }}

Далее возвращаемся к нашему файлу custom.css и добавляем стили:

.my_timer{
  display: flex;
  border: 3px solid #4394f2;
  height: 40px;
  justify-items: center;
  border-radius: 30px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.my_box{
 display: flex;
 justify-content: center; 
 align-items: center;
 margin-bottom: 30px;
}
.my_box-title{
 font-weight: bold;
 color: #ff7b28;
 margin-bottom: 0;
 margin-right: 15px;
}
.my_timer-content{
 width: 200px;
 display: flex;
 justify-content: center;
 align-items: center;
 margin-left: -9px;
 color: #4394f2;
 font-weight: bold;
}

Для того чтобы в настройщике темы можно было задавать время окончания таймера переходим к файлу collection-template.liquid в раздел {% schema %}. Добавляем в settings следующий код:

      {
        "type": "header",
        "content": "Start date"
      },
     {
      "type": "range",
      "id": "start_year",
      "label": "Year",
        "min": 2019,
        "max": 2023,
        "step": 1,
      "default": 2019
    },
    {
      "type": "range",
      "id": "start_month",
      "label": "Month",
        "min": 1,
        "max": 12,
        "step": 1,
      "default": 11
    },
    {
      "type": "range",
      "id": "start_day",
      "label": "Day",
        "min": 1,
        "max": 31,
        "step": 1,
      "default": 27
    },
    {
      "type": "range",
      "id": "start_hours",
      "label": "Hours",
        "min": 0,
        "max": 23,
        "step": 1,
      "default": 16
    },
    {
      "type": "range",
      "id": "start_minute",
      "label": "Minute",
        "min": 0,
        "max": 60,
        "step": 1,
      "default": 0
    },

Полный код schema вместе с нашим:

{% schema %}
  {
    "name": "Collection pages",
	"class": "collection-section",
    "settings": [
      {
        "type": "header",
        "content": "Start date"
      },
     {
      "type": "range",
      "id": "start_year",
      "label": "Year",
        "min": 2019,
        "max": 2023,
        "step": 1,
      "default": 2019
     },
     {
      "type": "range",
      "id": "start_month",
      "label": "Month",
        "min": 1,
        "max": 12,
        "step": 1,
      "default": 11
     },
     {
      "type": "range",
      "id": "start_day",
      "label": "Day",
        "min": 1,
        "max": 31,
        "step": 1,
      "default": 27
     },
     {
      "type": "range",
      "id": "start_hours",
      "label": "Hours",
        "min": 0,
        "max": 23,
        "step": 1,
      "default": 16
     },
     {
      "type": "range",
      "id": "start_minute",
      "label": "Minute",
        "min": 0,
        "max": 60,
        "step": 1,
      "default": 0
     },
	  {
		"type": "header",
		"content": "Sorting"
	  },
      {
        "type": "checkbox",
        "id": "collection_tags_enable",
        "label": "Show collection tags",
		"default": true
      },
      {
        "type": "checkbox",
        "id": "collection_sort_enable",
        "label": "Show collection sorting",
		"default": true
      },
      {
        "type": "checkbox",
        "id": "show_label",
        "label": "Show label",
		"default": true
      },
      {
        "type": "select",
        "id": "tag_selector",
        "label": "Tag picker type",
		"default": "select",
        "options": [
          {
            "value": "button",
            "label": "Button"
          },
          {
            "value": "select",
            "label": "Dropdown"
          }
        ]
      },
	  {
		"type": "header",
		"content": "Grid"
	  },
	  {
        "type": "select",
        "id": "rows",
        "label": "Number of rows",
        "default": "2",
        "options": [
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          },
          {
            "value": "6",
            "label": "6"
          }
        ]
      },
       {
	"type": "select",
	"id": "desktop_grid",
	"label": "Products per row (desktop)",
        "default": "4",
        "options": [
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          }
         ]
	  },
	  {
	  	"type": "select",
		"id": "mobile_grid",
		"label": "Product per row (mobile)",
		"default": "2",
		"options":[
		  {
		    "value": "1",
		    "label": "1"
		  },
		  {
		    "value":"2",
		    "label": "2"
		  }
		]
	  }
    ]
  }
{% endschema %}

Внешний вид в настройщике темы:

Таймер

И сам таймер:

Таймер

Tags
GeekBrains

Добавить комментарий

Your email address will not be published. Please mark all required fields.