Как стилизовать тег H1 с помощью Javascript в шаблоне Squarespace - PullRequest
Новая
       9

Как стилизовать тег H1 с помощью Javascript в шаблоне Squarespace

0 голосов
/ 29 января 2019

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

Использование инструментов Chrome Dev для названий продуктов,Я вижу, что html-класс называется «.ProductList h1.ProductList-title».

Я пытался реализовать приведенное ниже, но пока мне не очень повезло - я даже на правильном пути? 

function changeBrandName() 
{
  var prodList = document.getElementsByClassName(".ProductList h1.ProductList-title");
  for (i = 0, len = prodList.length; i < len; i++) 
  {
    prodList[i].style.color = 'red';
  }
}

window.onload = changeBrandName();

Структура класса Squarespace: 

<section class="ProductList-overlay">
          <div class="ProductList-meta">
            <h1 class="ProductList-title">Vifa - Pebble Grey Oslo Loudspeaker</h1><style></style>                                                 
            <div class="product-price">
<span class="sqs-money-native">0.00</span>
</div>
          </div>
        </section>

(это одна из страниц, на которой мы показываем продукты https://www.manilva.co/catalogue-electronics/).

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Вы указали, что должны использовать Javascript.Тем не менее, Squarespace поддерживает пользовательский CSS (в настоящее время в режиме редактирования Дизайн> Пользовательский CSS ).Прочитав вопрос, я не вижу подробностей, которые бы препятствовали использованию CSS (хотя, возможно, такие детали были просто опущены).

Если использование CSS является опцией, вставьте следующее с помощью Custom CSS - это все, что нужно: 

.ProductList h1.ProductList-title {
  color: red;
  font-weight: bold;
}

Если по какой-то причине вы хотите настроить таргетинг только на определенную коллекцию, вы можете добавить дополнительную специфичность к селектору через идентификатор коллекции, используемый в качестве атрибута idдля элемента body: 

#collection-5c1cf955898583ce09da99a0 .ProductList h1.ProductList-title {
  color: red;
  font-weight: bold;
}

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

0 голосов
/ 29 января 2019

Посмотрите: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

при использовании getElementsByClassName вам не нужно передавать селекторы CSS, как вы это сделали.Вам просто нужно передать фактическое имя классов.Или используйте querySelectorAll с параметрами, которые у вас были изначально.querySelector, как упоминал Дакш, будет возвращать только первый элемент, который соответствует 

function changeBrandName()
{
  var prodList = document.querySelectorAll(".ProductList h1.ProductList-title"); //returns static NodeList of all elements in DOM that match the provided classes
  for (i = 0; i < prodList.length; i++) 
  {
    prodList[i].style.color = 'red';
    prodList[i].style.fontWeight = 'bold'; //W is capital
  }
}
...