- 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 %}Внешний вид в настройщике темы:
И сам таймер:
Добавить комментарий
Нужен сайт?
