1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

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

Dyskusja w 'Zmiana wyglądu sklepu i edycja zaawansowana' rozpoczęta przez użytkownika Kamil, 12 Sierpień 2015.

  1. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    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:
    translate1212.png

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

    @djmauro wystarczy Ci takie rozwiązanie?
     
  2. djmauro

    djmauro Zaglądacz

    Wiadomości:
    13
    Docenione treści:
    0
    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ąć ;-)
     
  3. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    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>
    
     
    Ostatnia modyfikacja: 30 Wrzesień 2015
    djmauro i Mariusz lubią to.
  4. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    @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ę!
     
  5. djmauro

    djmauro Zaglądacz

    Wiadomości:
    13
    Docenione treści:
    0
    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 ;-)
     
  6. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    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.
     
  7. djmauro

    djmauro Zaglądacz

    Wiadomości:
    13
    Docenione treści:
    0
    oki to powiedz mi na tą chwilę jak podmienic ten kod na ten drugi skrypt, który radzisz mi ze bedzie lepszy ;-)
     
  8. Gosia_Emandes

    Gosia_Emandes Zaglądacz

    Wiadomości:
    13
    Docenione treści:
    0
    @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? head.JPG
     
  9. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Dziś postaram się Wam wszystko opisać, wczoraj niestety mnie nie było :)
     
  10. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    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.
     
    Ostatnia modyfikacja: 3 Październik 2015
    Gosia_Emandes lubi to.
  11. Gosia_Emandes

    Gosia_Emandes Zaglądacz

    Wiadomości:
    13
    Docenione treści:
    0
    Zrobione! SUPER! DZIĘKI ;) head2.JPG
    jeszcze został koszyk ;)
     
  12. djmauro

    djmauro Zaglądacz

    Wiadomości:
    13
    Docenione treści:
    0
    @TheL przypominam się z prośbą o pomoc odnośnie skryptu tłumacza ;-) Chodziło o uwidocznienie napisu, zmianę koloru:) Pomożesz ??
     
  13. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    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.
     
    Ostatnia modyfikacja: 5 Październik 2015
  14. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    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 :)
     
  15. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    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.

    koszyk.png
    Będzie to wyglądało tak.
     
  16. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    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;
    
    }
     
  17. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    ja robię tak aby było najszybciej :D 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.
     
  18. djmauro

    djmauro Zaglądacz

    Wiadomości:
    13
    Docenione treści:
    0
    @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
     
  19. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Wyczyść cache templatki sklepu w panelu :)
     
  20. djmauro

    djmauro Zaglądacz

    Wiadomości:
    13
    Docenione treści:
    0
    niestety nie pomogło :-(
     

Poleć forum znajomym