[Rozwiązany]Block Social i Allegro

xdtgs · September 4, 2014

Witam mam problem zrobiłem dokładnie to co tutaj:

Nothing comes easy here, as you have to hard code it. But if you can copy/paste and edit a graphic it's very simple.
Edit file:
/modules/blocksocial/blocksocial.php

and change these funtions (red text is example change. I added googleplus as example):

public function install()
{
return (parent::install() AND Configuration::updateValue('blocksocial_facebook', '') && Configuration::updateValue('blocksocial_twitter', '') && Configuration::updateValue('blocksocial_googleplus', '') && Configuration::updateValue('blocksocial_rss', '') && $this->registerHook('displayHeader') && $this->registerHook('displayFooter'));
}

public function uninstall()
{
//Delete configuration
return (Configuration::deleteByName('blocksocial_facebook') AND Configuration::deleteByName('blocksocial_twitter') AND Configuration::deleteByName('blocksocial_googleplus') AND Configuration::deleteByName('blocksocial_rss') AND parent::uninstall());
}

then edit function:

public function getContent()
{
...
if (isset($_POST['submitModule']))
{
Configuration::updateValue('blocksocial_facebook', (($_POST['facebook_url'] != '') ? $_POST['facebook_url']: ''));
Configuration::updateValue('blocksocial_twitter', (($_POST['twitter_url'] != '') ? $_POST['twitter_url']: ''));
Configuration::updateValue('blocksocial_googleplus', (($_POST['googleplus_url'] != '') ? $_POST['googleplus_url']: ''));
Configuration::updateValue('blocksocial_rss', (($_POST['rss_url'] != '') ? $_POST['rss_url']: ''));
$output = '<div class="conf confirm">'.$this->l('Configuration updated').'</div>';
}

...
...

<div class="clear"> </div>
<label for="twitter_url">'.$this->l('Twitter URL: ').'</label>
<input type="text" id="twitter_url" name="twitter_url" value="'.Tools::safeOutput((Configuration::get('blocksocial_twitter') != "") ? Configuration::get('blocksocial_twitter') : "").'" />
<div class="clear"> </div> // just copy from twitter above
<label for="googleplus_url">'.$this->l('Google+ URL: ').'</label>
<input type="text" id="googleplus_url" name="googleplus_url" value="'.Tools::safeOutput((Configuration::get('blocksocial_googleplus') != "") ? Configuration::get('blocksocial_googleplus') : "").'" />
<div class="clear"> </div>
<label for="rss_url">'.$this->l('RSS URL: ').'</label>

the last thing in this file:

public function hookDisplayFooter()
{
global $smarty;

$smarty->assign(array(
'facebook_url' => Configuration::get('blocksocial_facebook'),
'twitter_url' => Configuration::get('blocksocial_twitter'),
'googleplus_url' => Configuration::get('blocksocial_googleplus'),
'rss_url' => Configuration::get('blocksocial_rss')
));
return $this->display(__FILE__, 'blocksocial.tpl');
}

Then edit file: themes/default/modules/blocksocial/blocksocial.tpl
and add the following:

<div id="social_block">
<p class="title_block">{l s='Follow us' mod='blocksocial'}</p>
<ul>
{if $facebook_url != ''}<li class="facebook"><a href="{$facebook_url|escape:html:'UTF-8'}">{l s='Facebook' mod='blocksocial'}</a></li>{/if}
{if $twitter_url != ''}<li class="twitter"><a href="{$twitter_url|escape:html:'UTF-8'}">{l s='Twitter' mod='blocksocial'}</a></li>{/if}
{if $googleplus_url != ''}<li class="googleplus"><a href="{$googleplus_url|escape:html:'UTF-8'}">{l s='Google+' mod='blocksocial'}</a></li>{/if}
{if $rss_url != ''}<li class="rss"><a href="{$rss_url|escape:html:'UTF-8'}">{l s='RSS' mod='blocksocial'}</a></li>{/if}
</ul>
</div>

finally edit the file themes//css/global.css
and find this block (around line 2030 I think):

/*************** Block SOCIAL ***************/

/*************** Block SOCIAL ***************/
#social_block {padding:15px 10px;}
#social_block li {padding-left:22px !important;}
#social_block li.facebook {background:url(../../../modules/blocksocial/img/sprite_pict_social_block.png) no-repeat 0 6px;}
#social_block li.twitter {background:url(../../../modules/blocksocial/img/sprite_pict_social_block.png) no-repeat 0 -26px;}
#social_block li.rss {background:url(../../../modules/blocksocial/img/sprite_pict_social_block.png) no-repeat 0 -56px;}
#social_block li.googleplus {background:url(../../../modules/blocksocial/img/sprite_pict_social_block.png) no-repeat 0 -86px;}

The last thing to do is to (make a backup of and) edit the graphic:
/modules/blocksocial/img/sprite_pict_social_block.png
This is a sprite, i.e. a graphic file that combines more pictures in one file
Edit this file and copy the part from just below twitter, to just below rss, and add this cart below the rss picture: (see example file)

then change the new circle to the social place you want to add (I made a simple G+)
save the file and replace with the original one.

In short this should do the trick. Go to modules and 'reset' the social block module. then go to configure and add a googleplus URL. Go to your front office, reload page and see if it works.

Hope this helps. Questions/Errors, please let me know.
Pascal

Prócz tego co podkreśliłem na zielono, ponieważ... zwyczajnie w świecie czegoś takiego nie ma u mnie w theme/../css/global.css.

Jedyne co jest związane z social blockiem:

.footer-container #footer #social_block {
      float: left;
      width: 50%;
      padding: 22px 15px 0 15px; }
      @media (max-width: 767px) {
        .footer-container #footer #social_block {
          width: 100%;
          float: left;
          padding-top: 5px; } }
      .footer-container #footer #social_block ul {
        float: right; }
        @media (max-width: 767px) {
          .footer-container #footer #social_block ul {
            float: none; } }
        .footer-container #footer #social_block ul li {
          float: left;
          width: 40px;
          text-align: center; }
          @media (min-width: 768px) and (max-width: 991px) {
            .footer-container #footer #social_block ul li {
              width: 30px; } }
          .footer-container #footer #social_block ul li a {
            display: inline-block;
            color: #908f8f;
            font-size: 28px; }
            @media (min-width: 768px) and (max-width: 991px) {
              .footer-container #footer #social_block ul li a {
                font-size: 20px; } }
            .footer-container #footer #social_block ul li a span {
              display: none; }
            .footer-container #footer #social_block ul li a:before {
              display: inline-block;
              font-family: "FontAwesome";
              vertical-align: -5px;
              font-weight: normal;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale; }
            .footer-container #footer #social_block ul li a:hover {
              color: white; }
          .footer-container #footer #social_block ul li.facebook a:before {
            content: "\f09a"; }
          .footer-container #footer #social_block ul li.twitter a:before {
            content: "\f099"; }
          .footer-container #footer #social_block ul li.rss a:before {
            content: "\f09e"; }
          .footer-container #footer #social_block ul li.youtube a:before {
            content: "\f167"; }
          .footer-container #footer #social_block ul li.google-plus a:before {
            content: "\f0d5"; }
          .footer-container #footer #social_block ul li.pinterest a:before {
            content: "\f0d2"; }
      .footer-container #footer #social_block h4 {
        float: right;
        margin-bottom: 0;
        font-size: 21px;
        line-height: 25px;
        text-transform: none;
        padding: 0 10px 0 0; }
        @media (max-width: 767px) {
          .footer-container #footer #social_block h4 {
            display: none;
            text-align: center; } }
    .footer-container #footer .bottom-footer {
      position: absolute;
      bottom: -55px;
      left: 0; }
      .footer-container #footer .bottom-footer div {
        padding: 15px 0 0 0;
        border-top: 1px solid #515151;
        width: 100%; }

Wszystko ogólnie wyświetla się w porządku w Panelu admina, aczkolwiek na stronie głównej zamiast ikonki obok Facebooka, pokazuje się poniżej napis z kropką i napisem "Allegro".

Theme defaultowe, Presta 1.6.0.9

Edited September 9, 2014 by xdtgs (see edit history)

endriu107 · September 4, 2014

Przeczytałem pobieżnie więc mogłem coś pominąć ale...

Czyli pominąłeś to co na zielono? Więc pominąłeś część odpowiadającą za wyświetlanie się i oczekujesz że mimo to się wyświetli?

xdtgs · September 4, 2014

Nie, właśnie chodzi o to że tego nigdzie nie było. Dlatego dodałem na dole posta funkcje które odpowiadają za ten blok w przypadku mojego pliku css.

endriu107 · September 5, 2014

Tak tylko to co na zielono masz dodać do pliku i jeszcze tam są miniaturki w poscie które należy wgrać do odpowiedniego folderu.

xdtgs · September 5, 2014

"finally edit the file themes//css/global.css
and find this block (around line 2030 I think):"

Wychodzi na to że te funkcje powinny już być w tym pliku. No nic dodam i sprawdzę.

//edit:

Mam takie pytanie, otóż chciałbym po prostu podmienić facebooka z allegro (do FB mam już inny moduł) i teraz pytanie brzmi jak podmienić ikonkę na tą z allegro?

Edited September 5, 2014 by xdtgs (see edit history)

vekia · September 5, 2014

rozwiązanie jest dla prestashop 1.5,

w preście 1.6 są inne style css, stąd różnica.

te style które są zasugerowane do wykorzystania nie będą działać poprawnie, trzeba dodać własne kompatybilne z rozwiązaniem z ps 1.6

xdtgs · September 5, 2014

rozwiązanie jest dla prestashop 1.5,

w preście 1.6 są inne style css, stąd różnica.

te style które są zasugerowane do wykorzystania nie będą działać poprawnie, trzeba dodać własne kompatybilne z rozwiązaniem z ps 1.6

Tak podejrzewałem że to wina innej wersji. Jest jakiś sposób na moje pytanie w powyższym poście?

vekia · September 5, 2014

prestashop nie wykorzystuje ikon w formie obrazka tak jak prestashop 1.5

prestashop 1.6 korzysta z ikon zawartych w fontAwesome

dostępne ikony i ich nazwy są tutaj: http://fortawesome.github.io/Font-Awesome/icons/

pozostaje zmiana klasy:

.footer-container #footer #social_block ul li.facebook a:before {
content: "\f09a";
}

w /themes/default-bootstrap/css/global.css

przytoczony kod odpowiada ikonie: http://fortawesome.github.io/Font-Awesome/icon/facebook/

więc, albo wybierasz ikonę z listy którą podałem i podmieniasz parametr content (w przytoczonych cssach) albo usuwasz wspomniany kod i definiujesz swój własny kod css odpowiedzialny za wyświetlenie obrazka zamiast ikony

np.

.footer-container #footer #social_block ul li {
float: left;
width: 40px;
height:40px;
display:inline-block;
text-align: center;
backgrund:url('http://link.do.ikony/allegro.png');
}

xdtgs · September 5, 2014

Dzięki wielkie działa

Jeszcze mam pytanie, teraz obrazek działa, lecz niestety nie jest "linkowany" tj, obecnie jest sam obrazek (w BO moduł ustawiony prawidłowo). Co z tym zrobić?

Obecnie wygląda to tak:

.footer-container #footer #social_block ul li.facebook {
	float: left;
	width: 60px;
	height: 25px;
	display:inline-block;
	text-align: center;
	background:url('http://limitless24.pl/img/allegro.png'); 
	}
          .footer-container #footer #social_block ul li.twitter a:before {
            content: "\f099"; }
          .footer-container #footer #social_block ul li.rss a:before {
            content: "\f09e"; }
          .footer-container #footer #social_block ul li.youtube a:before {
            content: "\f167"; }
          .footer-container #footer #social_block ul li.google-plus a:before {
            content: "\f0d5"; }
          .footer-container #footer #social_block ul li.pinterest a:before {
            content: "\f0d2"; }

Edited September 5, 2014 by xdtgs (see edit history)

vekia · September 6, 2014

spróbuj jeszcze elementowi <a> nadać width, height i ewentualnie jeszcze display:inline-block;

np.

.footer-container #footer #social_block ul li.facebook a {
height: 20px;
width: 20px;
display:block;
}

xdtgs · September 9, 2014

Niestety nadal nic. Można obejrzeć problem na dole strony (http://limitless24.pl/). Obrazek allegro jest, linku nie ma..

endriu107 · September 9, 2014

Problem polega na tym że nie masz tam zdefiniowanej wielkości przycisku i w chwili obecnej jest 0px na 0px czyli fizycznie nie jesteś w stanie dostrzec łącza i na niego kliknąć, do klasy musisz dodać width:60px i height:25px; żeby łącze obejmowało całą grafikę.

Jest to dokładnie ta klasa:

.footer-container #footer #social_block ul li a

Edited September 9, 2014 by endriu107 (see edit history)

xdtgs · September 9, 2014

Ok działa, dzięki wielkie Panowie!

[Rozwiązany]Block Social i Allegro

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites