Nastavení expand či collapse na vybraném widgetu

[PetrParticipant Web]

Prosím o radu, pokud jste někdo již řešil něco podobného…

Na http://www.investinart.biz/obchod/ používám ajax widgety, které jsou při načtení stránky defaultně expanded.
Potřeboval bych vybraným (kategorie, technika) říct, že se mají defaultě zobrazovat collapsed.

V souboru \theme\assets\js\woocommerce.js je kód:
$(‘#sidebar-shop-sidebar .widget h3’).prepend(‘<div class=”minus”>-</div>’);
který když odstraním a místo toho vložím kód:
$(‘#sidebar-shop-sidebar .widget h3’).prepend(‘<div class=”plus”>+</div>’);
$(‘#sidebar-shop-sidebar .widget h3’).parent().find(‘> *:not(h3)’).slideToggle();
tak se zavřou všechny widgety. Což ale nepotřebuji, potřebuji jen vybrané.

Umí mi někdo poradit, jak tomu dát parametr, kterého widgetu se to týká?

Díky moc.

Petr

[HiLowParticipant Web]

Pro Kategorie je správný selektor #yith-woo-ajax-navigation-3 nebo .widget-6
Pro Technika #yith-woo-ajax-navigation-4 nebo .widget-7

[PetrParticipant Web]

Díky za rychlou odpověď. Přiznám se, že moc nevím, jak to použít, aby to fungovalo.
Zkusil jsem pod řádek:
$(‘#sidebar-shop-sidebar .widget h3’).prepend(‘<div class=”minus”>-</div>’);
přidat nový řádek s upraveným selektorem:
$(‘#yith-woo-ajax-navigation-3’).prepend(‘<div class=”plus”>+</div>’);
a když to nezafungovalo, tak ještě následující řádek:
$(‘#yith-woo-ajax-navigation-3’).parent().find(‘> *:not(h3)’).slideToggle();
ale ani to nepomohlo.

Můžu ještě poprosit o příklad, jak ty selektory použít?

Díky.

[HiLowParticipant Web]

Chybí tam .widget h3
celkově tedy
$('#yith-woo-ajax-navigation-3 .widget h3').prepend('<div class="plus">+</div>');

Další věci je, že tam máte nějaké divné apostrofy – používá se ' a " a ne ‘ a ”.

[PetrParticipant Web]

Díky za postřeh, ty divné apostrofy se tam nějak dostaly při kopírování…

Upravil jsem dle Vašich instrukcí, nicméně to nezafungovalo, bude v tom ještě něco, co nutí při načtení stránky tyto widgety zůstat expandované…

Řádky kódu, které se týkají shop sidebarů vypadají po úpravě takto:

//shop sidebar
$(‘#sidebar-shop-sidebar .widget h3’).prepend(‘<div class=”minus”>-</div>’);
$(‘#yith-woo-ajax-navigation-3 .widget h3’).prepend(‘<div class=”plus”>+</div>’);
$(‘#yith-woo-ajax-navigation-3 .widget h3’).parent().find(‘> *:not(h3)’).slideToggle();
$(‘#yith-woo-ajax-navigation-4 .widget h3’).prepend(‘<div class=”plus”>+</div>’);
$(‘#yith-woo-ajax-navigation-4 .widget h3’).parent().find(‘> *:not(h3)’).slideToggle();
$(‘#sidebar-shop-sidebar .widget’).on(‘click’, ‘h3’, function(){
$(this).parent().find(‘> *:not(h3)’).slideToggle();

if( $(this).find(‘div’).hasClass(‘minus’) ) {
$(this).find(‘div’).removeClass(‘minus’).addClass(‘plus’).text(‘+’);
} else {
$(this).find(‘div’).removeClass(‘plus’).addClass(‘minus’).text(‘-‘);
}
});

Díky.

[HiLowParticipant Web]

Dobrý den,
kam ten kód píšete, případně kde ho upravujete?

Protože u expand/colapse se mění jen style u <ul class="yith-wcan-list yith-wcan " style="display: block;">

style="display: block;" nebo style="display: none;"

Ten Váš script se nikde nenačítá.

[PetrParticipant Web]

Ten kód píšu do souboru woocommerce.js, který se nachází v adresáři webové šablony \theme\assets\js\

Myslel jsem si, že by zde stačila nějaká menší úprava kódu, aby to fungovalo, protože když jsem nahradil řádek kódu:
$(‘#sidebar-shop-sidebar .widget h3’).prepend(‘<div class=”minus”>-</div>’);
těmito dvěma řádky:
$(‘#sidebar-shop-sidebar .widget h3’).prepend(‘<div class=”plus”>+</div>’);
$(‘#sidebar-shop-sidebar .widget h3’).parent().find(‘> *:not(h3)’).slideToggle();
tak se všechny widgety v shopu defaultně sbalili.

Ale je možné, že tudy cesta nevede, že bude třeba nějaký větší programátorský zásah, který umožní parametr expand/collapse nastavit přímo na každém widgetu. Nebo bude třeba řádky kódu pro #yith-woo-ajax-navigation-3 a 4 vložit někam jinam.

[PetrParticipant Web]

Vyřešeno jednoduchým custom pluginem, který po načtení stránky vybrané widgety zabalí.

Díky za pomoc.

[Autor]

Příspěvky