Сценарий работает только после обновления страницы?Не на начальной навигации? - PullRequest
Новая
       14

Сценарий работает только после обновления страницы?Не на начальной навигации?

0 голосов
/ 13 мая 2019

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

Страница сайта здесь: https://www.oakhurstpublishing.com/books/mistys-tale

Вот код заголовка: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>

   <script>
      $(function() {
        $(".sqs-add-to-cart-button").replaceWith("<div class='amazoncheckoutbuttonwrapper'><a class='amazoncheckoutbutton' target='_blank' href='https://www.amazon.com/Mistys-Tale-Leopold-J-Cimino/dp/1733605800/'>SHOP NOW</a></div>");        
      });
      </script>

Вот CSS: 

.amazoncheckoutbuttonwrapper{
     margin-top: 45px;
     margin-bottom: 45px;
   }
.amazoncheckoutbutton {
    display: inline-block;
    visibility: visible !important;
    font-family: "proxima-nova";
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: normal;
    font-family: proxima-nova;
    padding: 21px 34px;
    background-color: rgba(92,183,204, 1);
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.amazoncheckoutbutton:hover {
    color: #fff;
    background-color: rgba(92,183,204, 0.5) !important;
    cursor: pointer;
}

1 Ответ

0 голосов
/ 13 мая 2019

Первая проблема состоит в том, что рассматриваемый код удаляет элемент, который затем ищет собственный код Squarespace, что вызывает ошибку, которая приводит к сбою ImageLoader Squarespace.

Вместо загрузки JQuery и заменыэлемент (в соответствии с кодом в вашем вопросе), используйте следующее: 

<script>
  window.Squarespace.onInitialize(Y, function() {
    var parent = document.getElementsByClassName("sqs-add-to-cart-button-wrapper")[0];
    var oldBtn;
    var newBtn;

    oldBtn = document.getElementsByClassName("sqs-add-to-cart-button")[0];
    if (oldBtn) {
      oldBtn.style="display: none;"
    }

    if (parent) {
      newBtn = document.createElement("div");
      newBtn.className = "amazoncheckoutbuttonwrapper";
      newBtn.innerHTML = "<a class='amazoncheckoutbutton' target='_blank' href='https://www.amazon.com/Mistys-Tale-Leopold-J-Cimino/dp/1733605800/'>SHOP NOW</a>";
      parent.appendChild(newBtn);
    }
  });
</script>

То, что вышеупомянутый код делает, показывает новую кнопку и скрывает исходную кнопку вместо ее удаления, что должно предотвратить ошибку.Вместо этого вы также можете скрыть исходную кнопку с помощью CSS.

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

В-третьих, ваш сайт в какой-то момент содержалстрока Javascript, которая вызывала ошибку. 

document.querySelector('.ProductItem-details .sqs-add-to-cart-button').classList.remove('sqs-editable-button');

Неясно, понадобится ли вам эта строка или нет.Но если вы это сделаете, измените его на: 

window.Squarespace.onInitialize(Y, function() {
  var pid = document.querySelector('.ProductItem-details .sqs-add-to-cart-button');
  if (pid) {
    pid.classList.remove('sqs-editable-button');
  }
});

Чего здесь избегают, так это запускают код, если кнопка / класс отсутствует на странице.Приведенный выше код также учитывает загрузку AJAX в Squarespace, если вы в какой-то момент включили его.

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

...