Прямая ссылка на вкладку с использованием прототипа

#magento #hyperlink #tabs #prototypejs

#magento #гиперссылка #вкладки #prototypejs

Вопрос:

Я использую Magento для создания витрины магазина — я не привык к прототипированию, но это то, что они используют по умолчанию, поэтому я пытаюсь играть красиво. Я использовал настройку вкладок, предоставленную в современной теме (созданной командой Magento), и я интегрировал ее в свою тему, и она отлично работает.

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

1) Нажмите на ссылку 2) Откроется вкладка отзывов, и страница переместит вас на нее — как обычный якорь.

Значение href для вкладки просто:

 javascript:void(0);
  

Javascript, который запускает операцию, заключается в следующем:

     Varien.Tabs = Class.create();
    Varien.Tabs.prototype = {
      initialize: function(selector) {
        var self=this;
        $$(selector ' a').each(this.initTab.bind(this));
      },

      initTab: function(el) {
          el.href = 'javascript:void(0)';
          if ($(el.parentNode).hasClassName('active')) {
            this.showContent(el);
          }
          el.observe('click', this.showContent.bind(this, el));
      },

      showContent: function(a) {
        var li = $(a.parentNode), ul = $(li.parentNode);
        ul.select('li', 'ol').each(function(el){
          var contents = $(el.id '_contents');
          if (el==li) {
            el.addClassName('active');
            contents.show();
          } else {
            el.removeClassName('active');
            contents.hide();
          }
        });
      }
    }
    new Varien.Tabs('.product-tabs');
  

Я предполагаю, что мне нужно вызвать функцию showContent и просто заставить ее использовать вкладку reviews, но я не совсем уверен, как это сделать. Если кто-нибудь может пролить некоторый свет на это, я был бы признателен.

Спасибо.

Ответ №1:

Не совсем правильный ответ, т.Е. он немного вводит в заблуждение, но мы решили это, используя функцию jQuery ‘click ()’ для имитации нажатия на вкладку.

ie присвоил привязке заголовка вкладки отзывов идентификатор ‘tab-reviews-tab’ и в нашей ссылке вверху страницы добавил следующий JS:

 jQuery('#tab-reviews-tab').click();
  

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

Комментарии:

1. Оглядываясь назад, я должен был бы разобраться в этом самостоятельно. Учитывая то, что я знаю сейчас, запуск щелчка — очевидный взлом. (кроме того, в каком магазине magento еще не запущен jQuery в режиме noConflict ?!?)

Ответ №2:

Если кто-то все еще заинтересован в решении, вот подсказка на тот же вопрос:

итак, ссылка http://www.magentocommerce.com/boards/viewthread/59930/#t262411

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

Комментарии:

1. Добро пожаловать в Stack Overflow! Вы не должны просто давать ссылку на другой сайт в качестве ответа, поскольку сайт может устареть в будущем. Вместо этого нажмите ссылку «редактировать» в этом ответе и включите сюда основные части решения с этой страницы. Смотрите: meta.stackexchange.com/q/8259

Ответ №3:

Ответ на ваш вопрос касается сути и вкуса.

Вот это краткое изложение:

Вам нужно сохранить вариант.Объект Tabs в переменной, поэтому замените new Varien.Tabs('.product-tabs'); на var csTabs = new Varien.Tabs('.product-tabs');

Если вы делаете это только один раз, просто создайте ссылку как таковую:

 <a href="#" onclick="javascript:csTabs.showContent($$('#product_tabs_email_or_other_id a')[0]);" >The Link</a>
  

Если вы собираетесь делать это часто, просто добавьте новый метод в вариант.Вкладки (в строке 75)

 openTab:  function(b) {
  var controlledLink = $$("#" b " a")[0];
  this.showContent(controlledLink);
}
  

Теперь ваши ссылки работают следующим образом:

 <a href="#" onclick="javascript:csTabs.openTab('product_tabs_email');">Email</a>
<a href="#" onclick="javascript:csTabs.openTab('product_tabs_info');">Further Info</a>
  

Комментарии:

1. Вероятно, это более полный ответ… но это появилось через два года после первоначального решения, которое все еще работает.