Jump to content

Javascript i jQuery na stronach CMS

pbpo

By pbpo
in Forum ogólne

 Share

Recommended Posts

pbpo Newbie

pbpo

Posted
Posted (edited)

Witajcie, 
Potrzebuję umieścić na stronie CMS 10 boxów które będą rozwijalne i chowały się tylko i wyłącznie za pomocą przycisku show/hide.

Przygotowałem w tym celu ja JSFIDDLE kobie roboczą i ona tam chodzi i pięknie działa

http://jsfiddle.net/1n46qnf9/1/

 

W cms.tpl w theme dodałem 

 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	  
<script type="text/javascript">
$(document).ready(function() {
		  $('.nav-toggle').click(function(){
			//get collapse content selector
			var collapse_content_selector = $(this).attr('href');					
					
			//make the collapse content to be shown or hide
			var toggle_switch = $(this);
			$(collapse_content_selector).toggle(function(){
			  if($(this).css('display')=='none'){}
			});
		  });
				
		});	 
  </script>

Jednak po odświeżeniu strony tak jakby jQuery nie ładowało się ( w kodzie strony widnieje to co wpisałem w pliku tpl, ale to nie działa. 
Dodawałem też znaczniki "{literal}" , ale bez efektu.

Jak zmusić preste by uzyła jQuery który podaje mu w pliku cms.tpl ? 

Edited by pbpo (see edit history)
Link to comment
Share on other sites
pbpo Newbie

pbpo

Posted
  • Author
Posted

Dzięki za odpowiedź :) 

Dlatego ładuję ją w pliku cms.tpl bo bez tego też nie działało. Stąd moja ingerencja i wklepanie na sztywno kodu do "cms.tpl" 
Poza tym ładuje najnowszą możliwą wersję i to w tym konkretnym przypadku, więc nie powinno się "gryźć" tylko stary (ten odgórnie ładowany) powinien ustąpić miejsca temu. 
 

Link to comment
Share on other sites
korni Newbie

korni

Posted
Posted

No dobra, a po co się w ogóle pakować w skrypty? Lepiej unikaj ich jak ognia, zostawiając tylko te konieczne zamiast dokładać nowych.

 

rozwijane boksy zrobisz za pomocą input chceckbox i wszystko ładnie i szybko będzie chodzić

Link to comment
Share on other sites
AlwinKolano Newbie

AlwinKolano

Posted
Posted (edited)

Nie wiem czy na temat ale ostatnio przerabiałem podobny temat, chcąc umieścić na wybranej stronie podobne box'y.
Zrobiłem to na zasadzie zmodyfikowania (dodania) do pliku CmsController.php w funkcji public function setMedia()
 

if ((int)Tools::getValue('id_cms') == 15) {
   $this->addJS(_THEME_JS_DIR_.'faq.js');
   $this->addCSS(_THEME_CSS_DIR_.'faq.css')
}

przegrałem skrypty i działało.

 

Ale ostatecznie skończyłem na fajnym darmowym module do FAQ, który wygląda i działa tak jak to zrobiłeś w http://jsfiddle.net/1n46qnf9/1/

Edited by AlwinKolano (see edit history)
Link to comment
Share on other sites
pbpo Newbie

pbpo

Posted
  • Author
Posted (edited)

blackflow no BS ma fajną możliwość zrobienia takich boxów.

Działa to fajnie kiedy próbuję na jsfiddle: TEST
 
Jednak po wrzuceniu tego do nowej strony cms. A nawet Po dodaniu nawet do cmsController

b7vhs5.jpg
(dodaje zdjęcie bo przy kodzie nie chce mi zapisać zmian) 

I tak nic nie dzieje się.

Edited by pbpo (see edit history)
Link to comment
Share on other sites
pbpo Newbie

pbpo

Posted
  • Author
Posted

Dobra rozwiązałem problem.
Co prawda domyślam się że to pokrętna droga więc jeśli widzicie błędy proszę poprawcie.

Do pliku cms.tpl dodałem:

 

{literal}<script type="text/javascript" src="/js/jquery/jquery-1.11.0.min.js"></script>
{/literal}
{literal}
<script>$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.panel-heading').toggleClass('inactive-header');


//Set The Accordion Content Width
var contentwidth = $('.panel-heading').width();
$('.panel-collapse').css({'width' : contentwidth });


//Open The First Accordion Section When Page Loads
$('.panel-heading').first().toggleClass('active-header').toggleClass('inactive-header');
$('.panel-collapse').first().slideDown().toggleClass('open-content');


// The Accordion Effect
$('.panel-heading').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}


else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});
return false;
});</script>
{/literal}

Do pliku cms.css

.panel-heading a:after {
    font-family: "FontAwesome";
    content: "\f054";
    float: right;
    margin-left: 15px;
}
.panel-heading a.collapsed:after {
    content:"\f078";
}

#accordion-container {
	font-size: 13px;
	background: #ffffff;
	padding: 5px 10px 10px 10px;
	border: 1px solid #cccccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 5px 15px #cccccc;
	-webkit-box-shadow: 0 5px 15px #cccccc;
	box-shadow: 0 5px 15px #cccccc;
}

.accordion-header {
	font-size: 16px;
	background: #ebebeb;
	margin: 5px 0 0 0;
	padding: 5px 20px;
	border: 1px solid #cccccc;
	cursor: pointer;
	color: #666666;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.active-header {
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.active-header:hover {
	background-repeat: no-repeat;
	background-position: right 50%;
}

.inactive-header {
	background-repeat: no-repeat;
	background-position: right 50%;
}

.inactive-header:hover {
	background-repeat: no-repeat;
	background-position: right 50%;
}

.accordion-content {
	display: none;
	padding: 20px;
	background: none;
	border: 1px solid #cccccc;
	border-top: 0;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

a sam content wygląda tak:
 

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapse1">Collapsible Group 1</a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body"><span style="color: #070707;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapse2">Collapsible Group 2</a></h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body"><span style="color: #070707;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapse3">Collapsible Group 3</a></h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body"><span style="color: #070707;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
</div>
</div>
</div>


Po tej operacji działa. (Wykorzystałem pomysł Vekii z tematu o FAQ z małymi modyfikacjami) 

Link to comment
Share on other sites
AlwinKolano Newbie

AlwinKolano

Posted
Posted (edited)

po co sobie utrudniać życie, wyżej podawałem darmowy moduł do faq, zarządzanie masz z BO dodawanie pytań i odpowiedzi poprzez zintegrowany edytor, do wyboru kilka formatowań css + kilka bajerów ;) https://www.prestashop.com/forums/topic/306420-faq-module-for-prestashop-15-16-versions-updated/

Edited by AlwinKolano (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
pbpo Newbie

pbpo

Posted
  • Author
Posted

Moduł fajny tylko jak mam ustawić by np FAQ był jako strona CMS ?

Chciałem dać taki wyjątek:

 

	{if Module::isEnabled('faq')}
	<li><a href="{$link->getModuleLink('faq')|escape:'html'}" title="{l s='Frequently ask questions' mod='blockcms'}">{l s='FAQ' mod='blockcms'}</a></li>
	{/if}

ale to zadziała na każdej stronie cms.

Jak zrobić warunek który by umożliwiał mi coś w stylu:

Jeżeli faq jest włączone >> wstaw do ('id_cms') == 99 

Ja bym sobie ustawił wtedy np przez bazę danych id cms 99 i umieścił w menu link do tej strony.


 

Link to comment
Share on other sites
AlwinKolano Newbie

AlwinKolano

Posted
Posted (edited)

instalujesz moduł, robisz przyjazny url dla strony faq-default (tak jak w załączonym obrazku).

Po zrobieniu URL'a otwieranie faq może wyglądać np. tak: 

www.adressklepu.pl/FAQ

jeżeli chcesz mieć link w bloku CMS to modyfikujesz widoki w odpowiednich modułach np. jak używasz na stronie "blockcms" to do blockcms.tpl dodajasze tam gdzie trzeba np. taki link:

{if Module::isEnabled('faq')}
<li><a href="{$link->getPageLink('module-faq-default')|escape:'html':'UTF-8'}">Częste pytania (FAQ)</a></li>
{/if}

post-970729-0-96119900-1442039383_thumb.png

Edited by AlwinKolano (see edit history)
Link to comment
Share on other sites
jangor Newbie

jangor

Posted
Posted

To ja się może podłączę pod tą szlachetną dyskusję... Ponieważ

 

Znalazłem takie cudo oparte na jQuery http://www.smoothdivscroll.com/index.html#toc i zmodyfikowałem do swoich potrzeb, w sumie wygląda to prawie tak: http://new2.doormat4u.pl/scroll (obrazki i URLe im przypisane sobie później podmienię).

 

Chcąc umieścić cudo na pierwszej stronie Presty 1.6.0.11 postanowiłem na wariackich papierach wrzucić kod z index.html do .... modułu HTML BOX od Vekii, ale jak się domyślacie ten kozacki sposób nie działa. Jakieś podpowiedzi...?

 

Nie znalazłem jak narazie modułu do Presty który by mi tak ładnie pracował jak owe "cudo" :D i chyba nie chcę go znaleźć.

Link to comment
Share on other sites
IgorDev Newbie

IgorDev

Posted
Posted

Nie działa bo możliwe, że mimo wrzucenia kod poprawnie do boxu html mogą blokować się biblioteki (jedna blokuje drugą) tak jak to zostało opisane u góry ("gryzą się"). 
Najlepiej sprawdź czy jQuery w 1.6.0.11 nie zawiera pluginu do wyświetlania tego cudeńka scroll'a i po prostu przy kodzie w module odwołaj się do niego. 

Najlepiej to pokaż kod który wklejasz i w jaki sposób to robisz. Wtedy można coś więcej powiedzieć.

Link to comment
Share on other sites
  • 1 month later...
jangor Newbie

jangor

Posted
Posted

Wyłączyłem purifiera, zaktualizowałem HTMLbox, zamocowałem hooka na głównej stronie oraz podmieniłem za powyższą radą Vekii $ na jquery i otrzymałem takie coś:
 
http://new3.doormat4u.pl/pl/
 
czyli sam slider został wrzucony, trochę źle sformatowany, bo wychodzi poza stronę i funkcja mouseover działa, co więcej otwiera do nowego linki, ale nie działa sam scrolling. Użyty kod w HTMLboxie:

 

        <!-- the CSS for Smooth Div Scroll -->
        <link rel="Stylesheet" type="text/css" href="/scroll/css/smoothDivScroll.css" />

        <!-- Styles for my specific scrolling content -->
        <style type="text/css">

                #logoParade
        {
                width: 1265px;
                height: 200px;
                position: relative;
        }
                /* Replace the last selector for the type of element you have in
                   your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
                   if you have links use #makeMeScrollable div.scrollableArea a and so on. */
                #logoParade div.scrollableArea a
        {
                display: block;
                float: left;
                padding-left: 10px;
        }
/* If you don't want the images in the scroller to be selectable, try the following
                           block of code. It's just a nice feature that prevent the images from
                           accidentally becoming selected/inverted when the user interacts with the scroller. */
                        -webkit-user-select: none;
                        -khtml-user-select: none;
                        -moz-user-select: none;
                        -o-user-select: none;
                        user-select: none;
                }
        </style>

        <div id="logoParade">

                 <a target="_blank" href="http://www.onet.pl"><img src="/scroll/images/field.jpg" alt="Demo image" id="field" />
                 <a target="_blank" href="http://www.wp.pl"><img src="/scroll/images/gnome.jpg" alt="Demo image" id="gnome" />
                 <a target="_blank" href="http://www.gazeta.pl"><img src="/scroll/images/pencils.jpg" alt="Demo image" id="pencils" />
                 <a target="_blank" href="http://www.interia.pl"><img src="/scroll/images/golf.jpg" alt="Demo image" id="golf" />
                 <a target="_blank" href="http://www.tvn.pl"><img src="/scroll/images/river.jpg" alt="Demo image" id="river" />
                 <a target="_blank" href="http://www.fakt.pl"><img src="/scroll/images/train.jpg" alt="Demo image" id="train" />
                 <a target="_blank" href="http://www.o2.pl"><img src="/scroll/images/leaf.jpg" alt="Demo image" id="leaf" />
                 <a target="_blank" href="http://www.facebook.com"><img src="/scroll/images/dog.jpg" alt="Demo image" id="dog" />
        </div>

        <!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG
             That way the browser will have loaded the images
                 and will know the width of the images. No need to
                 specify the width in the CSS or inline. -->

        <!-- jQuery library - Please load it from Google API's -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

        <!-- jQuery UI (Custom Download containing only Widget and Effects Core) -->
        <script src="/scroll/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>

        <!-- Latest version (3.1.4) of jQuery Mouse Wheel by Brandon Aaron -->
        <script src="/scroll/js/jquery.mousewheel.min.js" type="text/javascript"></script>

        <!-- jQuery Kinectic (1.8.2) used for touch scrolling -->
        <script src="/scroll/js/jquery.kinetic.min.js" type="text/javascript"></script>

        <!-- Smooth Div Scroll 1.3 minified-->
        <script src="/scroll/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>


        <!-- Plugin initialization -->
        <script type="text/javascript">
        var jquery = $.noConflict(true);

        jquery(document).ready(function() {
        jquery("#logoParade").smoothDivScroll({
                autoScrollingMode: "always",
                autoScrollingDirection: "endlessLoopRight",
                autoScrollingStep: 1,
                autoScrollingInterval: 25
        });

        // Logo parade event handlers
        jquery("#logoParade").bind("mouseover", function() {
                jquery(this).smoothDivScroll("stopAutoScrolling");
        }).bind("mouseout", function() {
                jquery(this).smoothDivScroll("startAutoScrolling");
        });

        });

        </script>

 

Pomysły jak to doprowadzić do porządku mile widziane. :)

Link to comment
Share on other sites
jangor Newbie

jangor

Posted
Posted

Zaktualizowałem HTMLbox, wyłączyłem purifiera, zawiesiłem na głównej hooka, wkleiłem do niego kod, za powyższą radą Vekii podmieniłem $ na jquery i wygląda to tak:

 

http://new3.doormat4u.pl/pl/

 

Zatem coś się dziele, bo obrazki slidera się wyświetlają, wprawdzie wychodzą poza stronę, są niesformatowane, ale powinno się to dać css'em opanować. Dzała też funkcja overmoiuse i otwiera się nowe okno z linkiem. Nie działa niestety sam scrolling.

 

        <!-- the CSS for Smooth Div Scroll -->
        <link rel="Stylesheet" type="text/css" href="/scroll/css/smoothDivScroll.css" />

        <!-- Styles for my specific scrolling content -->
        <style type="text/css">

                #logoParade
        {
                width: 1265px;
                height: 200px;
                position: relative;
        }
                /* Replace the last selector for the type of element you have in
                   your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
                   if you have links use #makeMeScrollable div.scrollableArea a and so on. */
                #logoParade div.scrollableArea a
        {
                display: block;
                float: left;
                padding-left: 10px;
        }
/* If you don't want the images in the scroller to be selectable, try the following
                           block of code. It's just a nice feature that prevent the images from
                           accidentally becoming selected/inverted when the user interacts with the scroller. */
                        -webkit-user-select: none;
                        -khtml-user-select: none;
                        -moz-user-select: none;
                        -o-user-select: none;
                        user-select: none;
                }
        </style>

        <div id="logoParade">

                 <a target="_blank" href="http://www.onet.pl"><img src="/scroll/images/field.jpg" alt="Demo image" id="field" />
                 <a target="_blank" href="http://www.wp.pl"><img src="/scroll/images/gnome.jpg" alt="Demo image" id="gnome" />
                 <a target="_blank" href="http://www.gazeta.pl"><img src="/scroll/images/pencils.jpg" alt="Demo image" id="pencils" />
                 <a target="_blank" href="http://www.interia.pl"><img src="/scroll/images/golf.jpg" alt="Demo image" id="golf" />
                 <a target="_blank" href="http://www.tvn.pl"><img src="/scroll/images/river.jpg" alt="Demo image" id="river" />
                 <a target="_blank" href="http://www.fakt.pl"><img src="/scroll/images/train.jpg" alt="Demo image" id="train" />
                 <a target="_blank" href="http://www.o2.pl"><img src="/scroll/images/leaf.jpg" alt="Demo image" id="leaf" />
                 <a target="_blank" href="http://www.facebook.com"><img src="/scroll/images/dog.jpg" alt="Demo image" id="dog" />
        </div>

        <!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG
             That way the browser will have loaded the images
                 and will know the width of the images. No need to
                 specify the width in the CSS or inline. -->

        <!-- jQuery library - Please load it from Google API's -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

        <!-- jQuery UI (Custom Download containing only Widget and Effects Core) -->
        <script src="/scroll/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>

        <!-- Latest version (3.1.4) of jQuery Mouse Wheel by Brandon Aaron -->
        <script src="/scroll/js/jquery.mousewheel.min.js" type="text/javascript"></script>

        <!-- jQuery Kinectic (1.8.2) used for touch scrolling -->
        <script src="/scroll/js/jquery.kinetic.min.js" type="text/javascript"></script>

        <!-- Smooth Div Scroll 1.3 minified-->
        <script src="/scroll/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>


        <!-- Plugin initialization -->
        <script type="text/javascript">
        var jquery = $.noConflict(true);

        jquery(document).ready(function() {
        jquery("#logoParade").smoothDivScroll({
                autoScrollingMode: "always",
                autoScrollingDirection: "endlessLoopRight",
                autoScrollingStep: 1,
                autoScrollingInterval: 25
        });

        // Logo parade event handlers
        jquery("#logoParade").bind("mouseover", function() {
                jquery(this).smoothDivScroll("stopAutoScrolling");
        }).bind("mouseout", function() {
                jquery(this).smoothDivScroll("startAutoScrolling");
        });

        });

        </script>
 

Pomysły co dalej mile widziane... :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...