Внедрение кода Squarespace jQuery

Что реализовать

1. Включите раскрывающийся список доставки, который показывает время и цены доставки, читайте информацию о доставке на другой странице.

2. Добавьте панель поиска в заголовок, которая отображается в виде увеличительного стекла, а затем расширяется в панель поиска при нажатии. Она также должна всплывать с результатами поиска, когда пользователь начинает печатать.

3. Измените способ отображения цветов и размеров из раскрывающегося списка в палитру выбора цвета.

Внедрение моего первого кода

Я никогда раньше не внедрял JavaScript в Squarespace, поэтому сначала решил попробовать сделать что-то очень простое, работающее, чтобы дать мне хорошую отправную точку.

Я добавил следующий JavaScript в заголовок, это должно добавить html "<h1>Hello World!</h1>" в элемент с идентификатором "block-ca33eeb90eb2c5aa8c35" :

<script>
  window.onload = function() {
  	document.getElementById("block-ca33eeb90eb2c5aa8c35").innerHTML = "<h1>Hello World!</h1>";
  }
</script>

Это сайт до сохранения кода:

При сохранении кода это имело следующий эффект:

Затем я решил использовать библиотеку jQuery Javascript, так как многие предлагаемые ею функции были бы полезны для того, что я хотел реализовать. Я нашел следующий веб-сайт очень полезным для понимания синтаксиса.

https://www.w3schools.com/jquery/

Я загрузил библиотеку jQuery на свой сайт Squarespace, используя следующую строку кода:

<script src="<https://code.jquery.com/jquery-3.6.0.js>"></script>

Реализация выпадающего списка доставки 1)

Во-первых, я добавил раскрывающийся список и элемент div, используя блок HTML:

<div class="country-container">
	<select id="country-select" >
      <option value="">Select your country</option>
    </select>
    <div id="country-display">Delivery Times and Cost</div>
</div>

Я создал новую несвязанную страницу и назвал ее доставкой, на этой странице я создал текстовый блок и вставил данные о доставке для каждой страны в следующем формате.

COUNTRY_NAME, DELIVERY_TIME, DELIVERY_COST

Обратите внимание, что запятые в приведенном выше очень важны и используются для разделения каждого ввода.

Наличие данных для информации о доставке на этой странице позволит любому, у кого есть доступ к веб-сайту в Squarespace, обновить эту информацию.

Немного поиграв с jQuery, мне удалось заставить работать следующий код:

<script>
$(document).ready(function () {
	//read all options in from shipping page
	$.get("/shipping", function (data) {
		data = $(data).find("p");
		//print them into a hidden div so they can be read in through an each loop
		$("div#test").html(data);
		//for each item add an option element with number of days and cost data attributes
		$("div#test p").each(function () {
			const countryArray = $(this).text().split(",");  //Split each paragraph using the comma
		//Add each country to a select element and add the delivery days and costs as attributes	
		$("select#country-select").append(
				"<option data-country=" +
					countryArray[0].trim() +
					" data-days=" +
					countryArray[1].trim() +
					" data-cost=" +
					countryArray[2].trim() +
					">" +
					countryArray[0].trim() +
					"</option>"
			);
		});
		//Select the UK as the default option
		$("select#country-select option[data-country=UK]")
			.attr("selected", "selected")
			.change();
	});
	//When the selected option is changed, change the text displayed in the div
	$("#country-select").change(function () {
		var optionSelected = $(this).find("option:selected");
		var day = optionSelected.data("days") + " days - ";
		var cost = "£" + optionSelected.data("cost");
		var country = optionSelected.data("country") + " - ";
		$("#country-display").text(country + day + cost);
	});
});
</script>

Ограничения

• Информация о доставке будет обновляться только тогда, когда кто-то обновляет ее вручную, она никоим образом не связана с фактической ценой доставки, которая предоставляется Squarespace в другой момент.

Реализация панели поиска 2)

Наличие панели поиска в заголовке не является стандартной функцией Squarespace, я нашел следующее руководство, в котором объясняется, как ее туда добавить:

https://www.will-myers.com/articles/adding-a-search-bar-to-your-header-in-squarespace-71

После выполнения вышеуказанных шагов я хотел изменить его так, чтобы показывалось только увеличительное стекло, пока пользователь не щелкнул его, для этого я использовал увеличительное стекло из библиотеки значков шрифта awesome и добавил некоторые jQuery и CSS, чтобы скрыть и показать некоторые элементы, когда пользователь щелкнул.

//Link to the fontawesome icon
<script src="<https://kit.fontawesome.com/95625e95a1.js>" crossorigin="anonymous"></script>
<script>
	$(document).ready(function(){
		$(function () {
			//Change the id to the id of the search block in the footer
			let searchBlock = $("#block-48b06b63c27b9bc086e0")
				.attr("id", "")
				.addClass("header-search-bar");
	
			//Display the magnifiying glass icon
			$("<i class='fa-solid fa-magnifying-glass'></i>").insertBefore(
				$(".showOnDesktop .header-actions-action--cart")
			);
			$("<div class='search hide'></div>").insertBefore("header");
			$("div.search").append(searchBlock);
			$("div.search").append("<i class='fa-solid fa-xmark'></i>");
	
			//When the magnificy glass is clicked
			$("i.fa-magnifying-glass").click(function () {
				//hide everything in the header and display the search bar full width
				$("header").addClass("hide"); //hide the header
				$("div.search").removeClass("hide"); //unhide the search bar
			});
			
			//Show an X mark icon that will re show the header when clicked
			$("i.fa-xmark").click(function () {
				$("header").removeClass("hide"); //unhide the header
				$("div.search").addClass("hide"); //hide the search bar
			});
		})
	});
</script>;

Ограничения

• Панель поиска в настоящее время ограничена функциональностью, которую добавил Squarespace.
• В настоящее время не отображается в пользовательском меню

Реализация селекторов цвета и размера 3)

Я начал с того, что скрыл предыдущие раскрывающиеся списки:

//Hides both dropdown boxes
$("div.variant-select-wrapper").hide();

Затем добавление тега <ul> с использованием правильных селекторов здесь немного сложно:

$("div.variant-select-wrapper:has(select[data-variant-option-name='Color'])")
.after("<ul class='color-selector'>");

Затем для каждого параметра в раскрывающемся списке, кроме первого параметра, который используется в качестве заполнителя, мы добавляем тег <li> с некоторым встроенным CSS для установки цвета.

//for every option in the select tag except the first
$("div.variant-select-wrapper:has(select[data-variant-option-name='Color']) option:not(:first)")
.each(function () {
		var color = $(this).val(); //store the color
		$(
			"<li class='color-selector-item'> <button class='color-selector-button' type='button' title='" +
				color +
				"' style='background-color: " +
				color +
				" !important;'>" +
				color +
				"</button></li>"
		).appendTo("ul.color-selector");
	});
	//after the loop close the <ul> tag
	$("li.color-selector-item:last").after("</ul>");

При нажатии любого из селекторов цвета мы хотим отобразить цвет на экране в виде текста и выбрать его в раскрывающемся списке, скрытом на заднем плане:

$("button.color-selector-button").click(function () {
		//Chnage the text on the screen
		$("div.variant-option-title:contains('Color')").html(
			"Color: " + $(this).text()
		);
	});

К сожалению, я столкнулся с проблемами при настройке скрытых выпадающих меню.

Проблемы с реализацией селектора цвета и размера:

Изменение значения элемента select, как показано ниже, не изменит цвет, который был написан в раскрывающемся меню на экране.

$("select[data-variant-option-name=Color]")
			.val($(this).text());

Даже запуск события изменения не сработал:

$("select[data-variant-option-name=Color]")
			.val($(this).text())
			.change();

Единственный способ, которым я нашел изменить то, что было в раскрывающемся списке, - это изменить атрибут data-text, выделенный в приведенном выше HTML.

<div class="variant-select-wrapper color-wrapper" data-text="White" id="yui_3_17_2_1_1651002078249_616">
      <select aria-label="Select Color" data-variant-option-name="Color" id="yui_3_17_2_1_1651002078249_615">
        <option value="">Select Color</option>
        <option value="Black">Black</option><option value="White">White</option><option value="Grey">Grey</option><option value="Teal">Teal</option><option value="Charcoal">Charcoal</option><option value="Purple">Purple</option>
      </select>
    </div>
$("div.variant-select-wrapper.color-wrapper")
			.attr("data-text", $(this).text())
			.change();

Хотя это работало с точки зрения отображения цвета в раскрывающемся списке при нажатии на один из новых селекторов цветов, это не позволяло мне добавить этот элемент в корзину с надписью «Пожалуйста, выберите цвет и размер».

Я просмотрел HTML-код и заметил, что, когда я вручную делал выбор в раскрывающихся списках, было изменено несколько заметных атрибутов.

data-unselected-options="["Color","Size"]"

Вышеприведенное изменится, чтобы удалить один или оба элемента при выборе, когда был выбран цвет:

data-unselected-options="["Size"]"

Также будет добавлен новый атрибут, когда будут выбраны и цвет, и размер:

data-selected-variant="{"attributes":{"Size":"M","Color":"White"},"optionValues":[
{"optionName":"Size","value":"M"},{"optionName":"Color","value":"White"}],
"id":"ae248023-a7b2-4ebb-89ef-55764797f7e1","sku":"SQ2275958","price":4000,
"salePrice":0,"priceMoney":{"currency":"GBP","value":"40.00"},
"salePriceMoney":{"currency":"GBP","value":"0.00"},"onSale":false,"unlimited":true,
"qtyInStock":0,"width":0,"height":0,"weight":0,"imageIds":[],"images":[],"len":0}"

Также будет добавлен следующий атрибут, если вариант был на складе

data-variant-in-stock="true"

Если бы я вручную жестко закодировал эти значения и установил data-unselected-options пустым, data-variant-in-stock истинным, а data-selected-variant реальным значением, я смог бы добавить товар в корзину, проблема в том, что я не смог бы чтобы легко получить всю информацию по атрибуту data-selected-variant, а также узнать, был ли вариант в наличии.

Мне нужно найти способ выбрать раскрывающийся список в фоновом режиме, как если бы пользователь просто щелкал его вручную.

Решение

Наконец, я нашел решение для запуска выбора селекторов Squarespace как цвета, так и размера.

document.querySelector("select[data-variant-option-name='Color']").dispatchEvent(new Event("change"));

В следующем коде просто показано, как выбрать цвет и размер с помощью jQuery, а затем инициировать событие изменения, чтобы при нажатии кнопки «Добавить в корзину» в корзину добавлялся нужный товар:

$(document).ready(function () {
	let myColour = "Grey";
	let mySize = "M";
  
	$(".variant-option-title").click(function () {
		$("select[data-variant-option-name=Color]").val(myColour);
		document.querySelector("select[data-variant-option-name='Color']").dispatchEvent(new Event("change"));
		$("select[data-variant-option-name=Size]").val(mySize);
    document.querySelector("select[data-variant-option-name='Size']").dispatchEvent(new Event("change"));
	});
});

Ограничения

• Цвета будут отображаться только в том случае, если они являются цветами html, как в этом списке (поддерживается всеми браузерами), это означает, что вариант продукта также должен называться этим цветом, в будущем это можно обойти, связав цвета. в шестнадцатеричные значения или значения RGB или даже изображения, но это упрощает его на данный момент (предупреждение отображается, когда цвет не существует, обнаружит опечатки и т. д.)
• Изображение не изменяется для отображения другого цветового варианта при его изменении.

Посмотреть сайт здесь

https://crane-cinnamon-w8mr.squarespace.com/

Пароль — 123