ROZWIĄZANE Umiejscowienie modułu z językami na górze sklepu

Przed chwilą spróbowałem dodać taki przykładowy moduł do swojego sklepu testowego. Zrobiłem to przez "Konfiguracja" -> "Wygląd" -> "Aktywny styl graficzny". Przeszedłem do edycji odpowiedniego szablonu, w moim przypadku dodałem nowy moduł na stronie głównej i wkleiłem do jego treści kod translatora Google. Podczas wklejania kodu do modułu musiałem wyłączyć edytor wizualny. Po umieszczeniu modułu z kodem w odpowiednim miejscu, efekt był następujący:


Podczas generowania kodu tłumacza Google wybrałem następujące opcje przed pobraniem właściwego kodu:


@djmauro wystarczy Ci takie rozwiązanie?

 

Nie do konca o takie rozwiązanie mi chodzilo, chociaż mogłoby mi wystarczyc jednak nie do konca mi to działa..troszke sie rozjezdza ten moduł. Dla mnie najlepiej gdyby udało sie go umiejscowic na samej górze strony po lewej stronie..tylko proszę o pomoc kjak to ogarnąć ;-)

 

We własnym kodzie JS wpisz:

Kod:

function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'pl', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}

lub

Kod:

function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'pl', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}

pierwszy pokazuje w linii informację, że to tłumacz google drugi nie.

następnie wykonaj edycję zaawansowaną i wybierz plik: body_head.tpl
i w nim za kodem

Kod:

<div class="row container">

dopisz:

Kod:

  <div style="width:200px;float:left;background:transparent;width:250px;padding:5px;font-size:16px;color:white;line-height:1;margin-top:0px;margin-left:0px;border:0;border-radius:0;height:37px;-webkit-appearance: none;">
  
  <div id="google_translate_element"> 
  </div>  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></div>

 

@djmauro sprawdź proszę czy rozwiązanie, które zaproponował powyżej @TheL Cię satysfakcjonuje.

@TheL to nasz fachowiec pełną gębą, dla którego chyba nie ma rzeczy niemożliwych Dziękuję!

 

popieram ze jest to fachowiec pełną gębą. Pomaga mi od wczoraj i jest niesamowity;-) Oczywiscie rozwiązanie powyższe to jest to o co mi chodziło i działaj jednak mam prośbe o jeszcze drobną korekte i info co mam zrobic jezeli chozi o ten skrypt..mianowicie prosze wejdz na gregorfurnitures.eu i zobacz jak to wygląda, chciałbym aby wyglądało to tak jak po najechaniu myszką lub zeby chociaż teks "wybierz język" był biały widoczny bo teraz nie widac co to jest ;-) Wiem, ze ogarniesz ;-)

 

Jutro napiszę jak zmienić kolor. Dodam tylko, że przy drugim kodzie działa to dobrze jeśli chodzi o responsywność przy tym który wybrałeś niestety napis, że to tłumacz Google jest nieco przykryty choć i na to znajdę rozwiązanie.

 

oki to powiedz mi na tą chwilę jak podmienic ten kod na ten drugi skrypt, który radzisz mi ze bedzie lepszy ;-)

 

@TheL a ja mam do Ciebie jeszcze jedną prośbę odnośnie head chciałabym ustawić górny pasek, jak w załączniku: zamiast flag - PL / EN, wyrzucić zarejestruj, by było tylko zaloguj i umieścić tam koszyk. Czy mógłbyś w tym mi także pomóc?

 

Dziś postaram się Wam wszystko opisać, wczoraj niestety mnie nie było

 

Jedziemy "dalej" @Gosia_Emandes . Postaram się odciążyć eksperta, w miarę w swoich możliwości, gdyż widzę, iż "kolejka" rośnie.

1) Usuwamy "Zarejestruj się". W templatce, o której rozmawiamy usuwasz fragment kodu:

Kod:

<a href="{route key='register'}" title="{translate key='Create an account'}" class="register">
<img src="{baseDir}/public/images/1px.gif" alt="" class="px1" >
<span>{translate key='Create an account'}</span>
</a>

Zostanie wówczas "coś" takiego:

Kod:

{if $enable_register}
<li class="register">
</li>
{/if}

Dla lepszej orientacji - proponowałbym na ten moment pozostawić w takiej postaci.

2) Językowe "sprawy".
Kod odpowiedzialny za języki, aby spełnił Twoje oczekiwania może wyglądać np. tak:

Kod:

<ul class="links right inline">
<li>
<a href="/pl/index" title="polski / Polska" class="pl_PL" style="line-height:21px; padding-right:5px;">PL
</a>
<a style="padding-right:0px; padding-left:0px;"> / </a>
<a href="/en_US/index" title="angielski / Stany Zjednoczone" class="en_US" style="line-height:21px; padding-left:5px;"> EN
</a>
</li>

Podmieniasz i gotowe.

 

Zrobione! SUPER! DZIĘKI
jeszcze został koszyk

 

@TheL przypominam się z prośbą o pomoc odnośnie skryptu tłumacza ;-) Chodziło o uwidocznienie napisu, zmianę koloru Pomożesz ??

 

Wrzuć to we 'Własny styl CSS'.

Kod:

[id=":0.targetLanguage"] > select {

color: #FFF;
background: #E01212 url("http://gregorfurnitures.eu/skins/user/rwd_clickshop_2/images/ico_arrow_down_light.png") no-repeat scroll 95% 50%;
border-color: #E01212;

}

Coś nie mogłem przy użyciu # wywołać ID - być może przez to nazewnictwo dziwaczne z ":" na początku.

---------------------------

Jeśli mogę doradzić - "boli" mnie ta zieleń po najechaniu na opcje w menu sklepowym. Rzuć okiem:
https://forum.home.pl/threads/zmiana-koloru-menu-nawigacji-w-skorce-rwd.141/

---------------------------------------------------------------------------------------

Koszyk dobrze mi działa "na górze" tylko jak jest pusty . Po "zapełnieniu" - "najechaniu" - "rozwinięciu" -wszystko, póki co, rozjeżdża się niemiłosiernie. Trzeba "poprawić" CSS. Później rzucę okiem.

 

Stau, a nie działa:

Kod:

.goog-te-combo, .goog-te-banner *, .goog-te-ftab *, .goog-te-menu *, .goog-te-menu2 *, .goog-te-balloon * {
background: #ffffff none repeat scroll 0 0;
font-family: arial;
font-size: 10pt;
}

u mnie bez problemu to ruszyło nadpisuje googlowy styl

 

Aby koszyk był na górze skasowałbym kod:

Kod:

  {if 1 == $skin_settings->header->basket}
  {dynamic}
  <div class="basket right{if 0 == $user->basket->countProducts()} empty-basket{/if}">
  <a href="{route key='basket'}" title="{translate key='Cart'}" class="count">
  <img src="{baseDir}/public/images/1px.gif" alt="" class="px1">
  <span class="countlabel">
  <span>{translate key="Cart"}:</span>
  <b>
  {if 0 == $user->basket->countProducts()}
  ({translate key="empty"})
  {else}
  <b class="sum">{currency value=$user->basket->sumProducts(false)}</b>
  <b class="count">(<span>{$user->basket->countProducts()}</span>)</b>
  {/if}
  </b>
  </span>
  </a>
  </div>

  <div class="basket-contain">
  <div class="basket-products">
  <ul class="basket-product-list">
  {foreach from=$user->basket item=basket_product}
  <li>
  <img src="{imageUrl type='productGfx' width=150 height=150 image=$basket_product->stock->mainImageName() overlay=1}" alt="{$basket_product->product->translation->name|escape}" />

  <a class="product-name" href="{route function='product' key=$basket_product->product->product->product_id productName=$basket_product->product->translation->name productId=$basket_product->product->product->product_id}" title="{$basket_product->product->translation->name|escape}">
  {$basket_product->product->translation->name|escape}
 
  {if $basket_product->getName()}
  <span class="product-variant">{$basket_product->getName()|escape}</span>
  {/if}
  </a>

  <span class="product-info">
  <span class="product-amount">{float precision=$QUANTITY_PRECISION value=$basket_product->basket->quantity trim=true}</span> x <span class="product-price">{currency value=$basket_product->getPrice()}</span>
  </span>

  <span class="remove-product"><a href="{route key='basketRemove' basketId=$basket_product->getIdentifier()}">{translate key="remove"}</a></span>
  </li>
  {/foreach}
  </ul>
  </div>
 
  <div class="basket-summery">
  <a href="{route key='basket'}">{translate key="to checkout"}</a>
  <span class="basket-price{if $user->basket->sumProducts(false) !== $user->basket->sumProducts()} basket-price-discount{/if}">
  <span class="price-total">
  <span>{translate key="total"}:</span>
  <strong class="price-products">{currency value=$user->basket->sumProducts(false)}</strong>
  </span>
  {if $user->basket->sumProducts(false) !== $user->basket->sumProducts()}
  <span class="price-total-discount">
  <span>{translate key="total (after discount)"}:</span>
  <strong class="price-total">{currency value=$user->basket->sumProducts()}</strong>
  </span>
  {/if}
  </span>
  </div>
  </div>
  {/dynamic}
  {/if}

a za wstawione flagi dodał:

Kod:

{if 1 == $skin_settings->header->basket}
  {dynamic}
  <div class="basket right{if 0 == $user->basket->countProducts()} empty-basket{/if}">
  <a href="{route key='basket'}" title="{translate key='Cart'}" class="count">
  <img src="{baseDir}/public/images/1px.gif" alt="" class="px1">
  <span class="countlabel">
  <span>{translate key="Cart"}:</span>
  <b>
  {if 0 == $user->basket->countProducts()}
  ({translate key="empty"})
  {else}
  <b class="sum">{currency value=$user->basket->sumProducts(false)}</b>
  <b class="count">(<span>{$user->basket->countProducts()}</span>)</b>
  {/if}
  </b>
  </span>
  </a>
  </div>
  {/dynamic}
  {/if}

dlaczego tak? dlatego, że nie będziemy w stanie umieścić w rozwijalnym koszyku produktów tak aby np weszło ze 20, będzie to ogromna lista i nieczytelna dla klienta, a tak klika sobie na koszyk i wchodzi do niego.


Będzie to wyglądało tak.

 

Po klasach pojechałeś . Ja próbuję z reguły odwoływać się do selektorów, jeśli nad nimi jest ID to dla "jednorazowości" stosuję operatory hierarchii (childy). Ten kod, co zaproponowałem działa jak trzeba, natomiast odwołanie do właściwości ID "skrótem", czyli #:0.targetLanguage nie hulało, zatem nieco archaicznie zastosowałem
[id=":0.targetLanguage"] i poszło - choć w teorii oba wyrażenia są dokładnie równoznaczne.

------------------------

Dlatego też, że skopiowanie dalszej części templatki odpowiadającej za koszyk "rozjedzie" cały CSS, a dokładnie część po rozwinięciu koszyka . Być może przez "złe" dziedziczenie w CSS-ie, być może z innych względów. Jeśli chcesz dodatkowo ikonkę koszyka dorzucić/zostawić, dodaj kod:

Kod:

.basket > a img {
    background: url('https://shop.emandes.pl/skins/user/rwd_clickshop_1/images/cart-white.png') no-repeat;
    width: 24px;
    height: 22px;
    display: inline-block;
    margin-right: 5px;

}

 

ja robię tak aby było najszybciej Sam wiesz, że teoria teorią, a praktyka praktyką ja staram się robić wszystko w taki sposób aby nieszczęsny IE i EDGE nie miały problemów, a wiem, że często gubią się przy krótkich zapisach.

 

@TheL mam kolejną prośbe.. w swoim sklepie gregorfurniters musiałem dokonać małych zmian i przywróciłem plik body_head.tpl po wprowadzeniu od nowa kodów które mi wskazałeś odnośnie translatora google, mam go teraz podwójne a kod wpisany jest raz..rzuc proszę okiem...i mam jeszcze team odnośnie pogrubienia czcionki w kategoriach produktów?? Pozdrawiam

 

Wyczyść cache templatki sklepu w panelu

 

niestety nie pomogło :-(