Jump to content

[Rozwiązany]Block Social i Allegro


 Share

Recommended Posts

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)
sprite_pict_social_block.png
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 by xdtgs (see edit history)

Share this post


Link to post
Share on other sites

"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 by xdtgs (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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');
}
  • Like 1

Share this post


Link to post
Share on other sites

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 by xdtgs (see edit history)

Share this post


Link to post
Share on other sites

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;
}
  • Like 1

Share this post


Link to post
Share on other sites

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 by endriu107 (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More