Jump to content
Flashmaster82

Need help to output flag icon in drop down (multi language)

Recommended Posts

Don't know if this helps, and sorry I don't have time to dig into exactly what you are doing, but if you are on the url for one of these subpages with the servicearea template then the data for that page is in $page without you doing anything in the servicearea template.  The $page variable contains all the field data for the subpage (like "carpenter") that you are on. 

Share this post


Link to post
Share on other sites

Hi, yes i know that but when i have a required section over the "Carpenter" section for example it wont work because in the nav section i have like

<?php $page = $pages->get("/misc/footer/");?>

dont mind that it is footer in the nav its because i want to have the same navigation as in the footer copied. But that code makes it so that the carpenter section fail.

Share this post


Link to post
Share on other sites

Ok i think i know what the problem is. in nav.php this code is making it not work in section1.php

	<?php $page = $pages->get("/misc/footer/");?>
				<?php foreach($page->navigation as $page ): ?>
				<div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
				<ul>
				<div class="bold purple bmar2 h5">
				<?=$page->heading;?>
				</div>
				<?php foreach($page->navlinks as $item) {
				echo "<li class='footer_links_selected'><a href='$item->url' class='black footer_links '>$item->title</a></li>";
				}?>
				</ul>
				</div>
				<?php endforeach;?>
										
				<?php $page = $pages->get("/misc/footer/");?>
				<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 text-right">
											
				<div class="footer_phone">
				<?=$page->phone;?>
				</div>
				<div class="footer_email">
				<?=$page->email;?>
				</div>

<?php $page = $pages->get("/misc/footer/");?> is the problem can i code it in another way?

Share this post


Link to post
Share on other sites

Avoid using ProcessWire keywords as variable name. You are also redefining $page in your foreach loop.

$page is a reserved word, instead, use :

<?php $footer = $pages->get("/misc/footer/");?>

then :

<?php foreach($footer->navigation as $p ): ?>

    <?php echo $p->myfield; ?>

    [...]
<?php endforeach; ?>

then :

<?=$footer->heading;?>
<?=$footer->phone;?>
// etc

 

  • Like 1

Share this post


Link to post
Share on other sites

Wow, I forgot to post my suggestion and now this thread gone wild 😉 

Didn't read everything but semantic's dropdown component might be a good fit. You don't need the whole framework, just the component and it even comes with a filter feature (might be unnecessary in your case). But at least it looks nice: https://semantic-ui.com/modules/dropdown.html

Share this post


Link to post
Share on other sites

Hi Flydev and bernhard and thanks for helping a beginner 🙂

 

Flydev, thanks for learning me about the variable names.

Is this more correct of should i use for example <?=$p->phone;?> whats the different? can i use $p for universal of the whole site?

<?php $footer = $pages->get("/misc/footer/");?>
<?php foreach($footer->navigation as $footer ): ?>
<div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
<ul>
<div class="bold purple bmar2 h5">
<?=$footer->heading;?>
</div>
<?php foreach($footer->navlinks as $footer) {
echo "<li class='footer_links_selected'><a href='$footer->url' class='black footer_links '>$footer->title</a></li>";
}	
?>
</ul>
</div>
<?php endforeach;?>										
										
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 text-right">
<?php $footer = $pages->get("/misc/footer/");?>
<div class="footer_phone">
<?=$footer->phone;?>
</div>
<div class="footer_email">
<?=$footer->email;?>
</div>
											 
</div>

 

 

About the multi language dropdown.

I tried to just replace my code with yours, but it then gave me error (see attachment)

 

	<div class="navbar_language_wrapper">
			
	
<?php
$langswitch = '';
foreach($languages as $language) {
    if(!$page->viewable($language)) continue; // is page viewable in this language?
    if($language->id == $user->language->id) { // current user language
        $langswitch .= "<li class='current'>";
    } else {
        $langswitch .= "<li>";
    }
    $url = $page->localUrl($language);
    $hreflang = $homepage->getLanguageValue($language, 'name');
    $langswitch .= "<a hreflang='$hreflang' href='$url'>$language->title<b class='gf-if gspr {$language->name}'></b></a></li>";
}

echo "<ul class='langswitch'>{$langswitch}</ul>";
?>

			
		</div>

 

 

Thanks for helping me!

12.jpg

Share this post


Link to post
Share on other sites
45 minutes ago, Flashmaster82 said:

Is this more correct of should i use for example <?=$p->phone;?> whats the different? can i use $p for universal of the whole site?

If you are using a variables to hold a page, then you should avoid using this same variable name in your loops. eg: foreach($footer->navigation as $subnav) instead of foreach($footer->navigation as $footer) // redefinition

Now that you don't override the $footer variable in the loop, you don't even need to re-declare it, you can use it in the whole template file (not the website!). The variable $p  was only available in the scope of the loop; Please have read this page: https://www.w3schools.com/php/php_variables.asp and this doc: https://processwire.com/api/variables/pages/

 

45 minutes ago, Flashmaster82 said:

I tried to just replace my code with yours, but it then gave me error (see attachment)

You are calling getLanguageValue() on a null variable ($homepage).

To avoid this error, you have three way :

  1. define $homepage in the _init.php file $homepage = $pages->get('/'); // globally available to the website
  2. define $homepage at the begining of your template file $homepage = $pages->get('/');
  3. call getLanguageValue() on $pages->get() :  $hreflang = $pages->get('/')->getLanguageValue($language, 'name);

Then the magic should happen... after you define some CSS or you will not see a dropdown and flags.

There are the CSS attached to the code I give you earlier, you could try to paste it in your CSS file to see what happen and tweak it for your needs :

Spoiler

/*
 * Dropdown
 */
.upper-links {
    display: inline-block;
    padding: 0 11px;
    line-height: 23px;
    letter-spacing: 0;
    color: inherit;
    border: none;
    outline: none;
    font-size: 12px;
}

.dropdown {
    position: relative;
    display: inline-block;
    margin-bottom: 0px;
}

.dropdown:hover #gf-f {
    display: block !important;
}

.dropdown .dropdown-menubar {
    position: absolute;
    top: 100%;
    display: none;
    background-color: #fff;
    color: #333;
    left: 0px;
    border: 0;
    border-radius: 0;
    box-shadow: 0 4px 8px -3px #555454;
    margin: 0;
    padding: 0px;
}

#gf-fbtn {
    position: relative;
    display: block;
    width: 160px;
    height: 30px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    cursor: pointer;
    text-indent: 50px;
    color: #707070 !important;
    *left: -50px;
    line-height: 29px;
}

.gf-ful li {
    height: 22px;
}

.gf-if {
    width: 24px;
    height: 18px;
    position: absolute;
    top: 6px;
    left: 15px;
}
#glbfooter a {
    font-size: 12px;
}
#gf-fbtn {
    cursor: pointer;
    text-indent: 50px;
    color: #707070 !important;
    line-height: 29px;
}

#gf-fbtn-arr {
    position: absolute;
    right: 10px;
    top: 13px;
    height: 4px;
    width: 8px;
}

.gh-spr, .gh-sprRetina {
    background-image: url('../images/sprd-arrows.png');
    background-repeat: no-repeat;
}
#glbfooter a {
    font-size: 12px;
}
#gf-fbtn {
    cursor: pointer;
    text-indent: 50px;
    color: #707070 !important;
    line-height: 29px;
}
#gf-fbtn:hover > #gf-f {
    display: block;
}

#gf-f {
    position: absolute;
    width: 160px;
    background: #f5f5f5;
    border-left: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    z-index: 9;
}

#gf-f .gf-if {
    display: block !important;
    position: relative;
    left: -28px;
    top: -21px;
}

/*
 * Flags
 */
.ad, .br, .cn, .de, .es,
.french, .it, .ru, .default
{ display: inline-block; background: url('../images/sprd-langs.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }

.ad { background-position: -2px -0px; width: 24px; height: 17px; }
.br { background-position: -28px -0px; width: 24px; height: 17px; }
.cn { background-position: -54px -0px; width: 24px; height: 16px; }
.de { background-position: -54px -18px; width: 24px; height: 14px; }
.es { background-position: -2px -19px; width: 24px; height: 16px; }
.french { background-position: -28px -19px; width: 24px; height: 16px; }
.it { background-position: -54px -34px; width: 24px; height: 16px; }
.ru { background-position: -2px -37px; width: 24px; height: 16px; }
.default { background-position: -28px -37px; width: 24px; height: 13px; }

.down-blue, .down, .down-s-b, .down-s
{ display: inline-block; background: url('../images/sprd-arrows.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }

.down-blue { background-position: -2px -0px; width: 24px; height: 12px; }
.down { background-position: -2px -14px; width: 24px; height: 12px; }
.down-s-b { background-position: -2px -28px; width: 8px; height: 4px; }
.down-s { background-position: -12px -28px; width: 8px; height: 4px; }

 

The flags sprite is attached to this post.

sprd-arrows.png.0d220c6d0f77e7e531529705959853e8.png      sprd-flags.png.bb88520768a400bc1dd94e4823bbc28a.png

 

Some links you should read , everything is fine with basic PHP knowledge, and speaking about that, after some hours, your skills will grow ✌️

 

 

And please, install this module - https://modules.processwire.com/modules/tracy-debugger/ -so it will be a lot easier to help you, and it will help you to understand PHP and ProcessWire by debugging each vars! be curious 🙂

Edited by flydev
CSS and flags sprite
  • Like 2

Share this post


Link to post
Share on other sites

Thanks Flydev for the reply, i will try to read more about basic php 🙂

I didnt have a _init.php or other files that make some codingthings with the language, so i defined it in the beginning like you sad.

<?php $homepage = $pages->get('/'); ?>

		<div class="navbar_language_wrapper">			
		
<?php
$langswitch = '';
foreach($languages as $language) {
    if(!$page->viewable($language)) continue; // is page viewable in this language?
    if($language->id == $user->language->id) { // current user language
        $langswitch .= "<li class='current'>";
    } else {
        $langswitch .= "<li>";
    }
    $url = $page->localUrl($language);
    $hreflang = $homepage->getLanguageValue($language, 'name');
    $langswitch .= "<a hreflang='$hreflang' href='$url'>$language->title<b class='gf-if gspr {$language->name}'></b></a></li>";
}

echo "<ul class='langswitch'>{$langswitch}</ul>";
?>

Now i have the language in a list so i guess its one step closer to the finish 🙂 Did you have some css for that?

13.jpg

Share this post


Link to post
Share on other sites

Thanks for the css,

i put that in the bottom of the nav.php

<link rel="stylesheet" href="<?=$config->urls->templates;?>css/dropdown.css">

and changed the paths to the images that you attached. See my attachment for the current result.

/thanks

14.jpg

Share this post


Link to post
Share on other sites

I can see a flag on the dropdown, now if you understand how it work, you can go to https://www.flag-sprites.com/ to build your own flag sprite, its shipped with the CSS file, include it and you have to build relation between your language title (in processwire) and the CSS class. After that it will work, but you have to do some work now 🙂

 

It seem that the framework Bootstrap is overriding some CSS. For more facility, follow this blog post : http://favbulous.com/post/1006/create-custom-icons-for-twitter-bootstrap-easily

 

Share this post


Link to post
Share on other sites

You could also try this before going further ( I made a small mistake on the markup) :

<?php 

$homepage = $pages->get('/');
	
$langswitch = '';
foreach($languages as $language) {
    if(!$page->viewable($language)) continue; // is page viewable in this language?
    if($language->id == $user->language->id) { // current user language
        $langswitch .= "<li class='current'>";
    } else {
        $langswitch .= "<li>";
    }
    $url = $page->localUrl($language);
    $hreflang = $homepage->getLanguageValue($language, 'name');
    $langswitch .= "<a hreflang='$hreflang' href='$url'>$language->title<b class='gf-if gspr {$language->name}'></b></a></li>";
}

echo "<div class='gf-flags-wpr'>
    <a role='button' class='thrd' title='Language' href='#' id='gf-fbtn'>
        {$user->language->title}
        <b class='gf-if gspr {$user->language->name}'></b>
        <b id='gf-fbtn-arr' class='down-s-b'></b>
    </a>
    <div id='gf-f' style='display: none;'>
        <ul class='gf-ful' role='navigation'>
            {$langswitch}
        </ul>
    </div>
</div>";

 

  • Like 1

Share this post


Link to post
Share on other sites

Ok now the dropdown showed up! Yaay 🙂

I replaced the sprite icons with 3 of my svg icons that i wanted for the site. Replaced the code with the one you sent me but the dropdown menu wont open?

16.jpg

Share this post


Link to post
Share on other sites

This is my css now

.upper-links {
    display: inline-block;
    padding: 0 11px;
    line-height: 23px;
    letter-spacing: 0;
    color: inherit;
    border: none;
    outline: none;
    font-size: 12px;
}
.dropdown {
    position: relative;
    display: inline-block;
    margin-bottom: 0px;
}
.dropdown:hover #gf-f {
    display: block !important;
}
.dropdown .dropdown-menubar {
    position: absolute;
    top: 100%;
    display: none;
    background-color: #fff;
    color: #333;
    left: 0px;
    border: 0;
    border-radius: 0;
    box-shadow: 0 4px 8px -3px #555454;
    margin: 0;
    padding: 0px;
}
#gf-fbtn {
    position: relative;
    display: block;
    width: 160px;
    height: 30px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    cursor: pointer;
    text-indent: 50px;
    color: #707070 !important;
    left: 0px;
    line-height: 29px;
}
.gf-ful li {
    height: 22px;
}
.gf-if {
    width: 24px;
    height: 18px;
    position: absolute;
    top: 6px;
    left: 15px;
}
#glbfooter a {
    font-size: 12px;
}
#gf-fbtn {
    cursor: pointer;
    text-indent: 50px;
    color: #707070 !important;
    line-height: 29px;
}
#gf-fbtn-arr {
    position: absolute;
    right: 10px;
    top: 13px;
    height: 4px;
    width: 8px;
}
.gh-spr, .gh-sprRetina {
    background-image: url('../assets/misc/nav/img/sprd-arrows.png');
    background-repeat: no-repeat;
}
#glbfooter a {
    font-size: 12px;
}
#gf-fbtn {
    cursor: pointer;
    text-indent: 50px;
    color: #707070 !important;
    line-height: 29px;
}
#gf-fbtn:hover > #gf-f {
    display: block;
}
#gf-f {
    position: absolute;
    width: 160px;
    background: #f5f5f5;
    border-left: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    z-index: 9;
}
#gf-f .gf-if {
    display: block !important;
    position: relative;
    left: -28px;
    top: -21px;
}
.default {
    display: inline-block;
    background: url('../assets/misc/nav/img/se.svg') no-repeat;
    text-indent: -9999px;
    text-align: left;
    background-position: center;
    top: 8px;
    left: 10px;
    width: 20px;
    height: 12.5px;
}
.english {
    display: inline-block;
    background: url('../assets/misc/nav/img/gb.svg') no-repeat;
    text-indent: -9999px;
    text-align: left;
    background-position: center;
    top: 30px;
    left: 10px;
    width: 20px;
    height: 10px;
}
.sinhalese {
    display: inline-block;
    background: url('../assets/misc/nav/img/lk.svg') no-repeat;
    text-indent: -9999px;
    text-align: left;
    background-position: center;
    top: 50px;
    left: 10px;
    width: 20px;
    height: 10px;
}
.down-blue, .down, .down-s-b, .down-s {
    display: inline-block;
    background: url('../assets/misc/nav/img/sprd-arrows.png') no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    text-align: left;
}
.down-blue {
    background-position: -2px -0px;
    width: 24px;
    height: 12px;
}
.down {
    background-position: -2px -14px;
    width: 24px;
    height: 12px;
}
.down-s-b {
    background-position: -2px -28px;
    width: 8px;
    height: 4px;
}
.down-s {
    background-position: -12px -28px;
    width: 8px;
    height: 4px;
}

 

Share this post


Link to post
Share on other sites

This is how it looks like now, when i go over with the mouse the cursor will show upp but when i click on it it wont open?

17.jpg

Edited by Flashmaster82

Share this post


Link to post
Share on other sites

Damn the <div class="dropdown"> is missing.

echo "<div class='dropdown'>
          <div class'gf-flags-wpr'>
             ...
          </div>
      </div>";

It should work now, if not, then rename the class .dropdown to .lang-dropdown and replace each occurrence in the CSS code I give you.

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...