В магазине Shopify не работают вкладки товаров - PullRequest
Новая
       15

В магазине Shopify не работают вкладки товаров

0 голосов
/ 20 марта 2019

Поэтому я добавил вкладки продуктов в Shopify с помощью учебника по адресу https://help.shopify.com/en/themes/customization/products/features/add-tabs-to-product-descriptions

К сожалению, вкладки все еще не работают.Хотя вкладки появляются, если щелкнуть одну из них, она прокручивает страницу, а не переключается на новую вкладку.

Похоже, что jQuery не работает.Вот код, который я сейчас использую (к вашему сведению, я использую тему «Повествование», а веб-сайт https://wellprepared.com).

$(document).ready(function() {
$('ul.tabs').each(function(){
  var active, content, links = $(this).find('a');
  active = links.first().addClass('active');
  content = $(active.attr('href'));
  links.not(':first').each(function () {
    $($(this).attr('href')).hide();
  });
  $(this).find('a').click(function(e){
    active.removeClass('active');
    content.hide();
    active = $(this);
    content = $($(this).attr('href'));
    active.addClass('active');
    content.show();
    return false;
  });
}); });
ul.tabs {
  border-bottom: 1px solid #DDDDDD;
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
}
ul.tabs li a {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #F5F5F5;
  border-color: #DDDDDD !important;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  display: block;
  font-size: 13px;
  height: 29px;
  line-height: 30px;
  margin: 0;
  padding: 0 20px;
  text-decoration: none;
  width: auto;
  color: #303030;
  border-bottom:none !important;
}
ul.tabs li a.active {
  background: none repeat scroll 0 0 #FFFFFF;
  border-left-width: 1px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #111111;
  height: 30px;
  margin: 0 0 0 -1px;
  padding-top: 4px;
  position: relative;
  top: -4px;
}
ul.tabs li:first-child a.active {
  margin-left: 0;
}
ul.tabs li:first-child a {
  border-top-left-radius: 2px;
  border-width: 1px 1px 0;
}
ul.tabs li:last-child a {
  border-top-right-radius: 2px;
}
ul.tabs:before, ul.tabs:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
ul.tabs:after {
  clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <ul class="tabs">
    <li><a href="#tab1">Description</a></li>
    <li><a href="#tab2">Reviews</a></li>
  </ul>
  <div id="tab1">
    <h5>Description</h5>
  {{ product.description }}
  </div>
  <div id="tab2">
  <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  </div>
</div>

1 Ответ

0 голосов
/ 27 марта 2019

Ваш jQuery не загружается.

Попробуйте добавить jQuery в theme.liquid между тегами <head></head>, а не в заголовке.

Добавьте строки jQuery непосредственно передтег.

Также подтвердите, что у вас есть следующий код:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Между тегами <head></head>;выше других строк кода jQuery, и что у вас его нет дважды, в противном случае он конфликтует.

Надеюсь, это поможет.

...