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 RWD zmiana wyglądu listy produktów

Dyskusja w 'Sklep internetowy eSklep' rozpoczęta przez użytkownika piklop, 29 Marzec 2017.

  1. piklop

    piklop Bywalec

    Wiadomości:
    18
    Docenione treści:
    1
    Proszę o pomoc w zmianie wyglądu wyświetlania się listy produktów z:


    [​IMG]


    Poniżej dwa warianty jakie chciałbym uzyskać po wprowadzeniu zmian w kodzie:

    WARIANT 1


    [​IMG]


    WARIANT 2


    [​IMG]


    Na forum home znalazłem 2 wątki w których był zawarty kod:

    .products.viewphot .product .product-inner-wrap .productname {
    display: block;
    font-size: 1.4em;
    }
    .box .product { padding: 0!important; }

    .products.viewphot .product .buttons form {
    display:none;
    }


    Po zastosowaniu w/w kodu pozostał przycisk ZOBACZ WIĘCEJ i dość duży odstęp między zdjęciem na przyciskiem.

    Proszę o pomoc w jaki sposób mogę się pozbyć napisu "zobacz więcej" oraz zmienić położenie napisu NAZWY PRODUKTU tak, aby znajdował się nad zdjęciem z wyrównaniem do lewej strony zdjęcia a pod zdjęciem chciałbym mieć cenę (brutto) lub tuż pod nazwą produktu.

    Z góry dziękuję za wszelką pomoc w rozwiązaniu problemu.
     

    Załączone pliki:

    • 1.jpg
      1.jpg
      Rozmiar pliku:
      199,7 KB
      Wyświetleń:
      468
    • 2.jpg
      2.jpg
      Rozmiar pliku:
      210,2 KB
      Wyświetleń:
      399
    • 3.jpg
      3.jpg
      Rozmiar pliku:
      214,5 KB
      Wyświetleń:
      448
  2. Grzesiek

    Grzesiek Centrum Pomocy home.pl

    Wiadomości:
    3 660
    Docenione treści:
    333
    @piklop adres sklepu poprosimy :)
     
  3. piklop

    piklop Bywalec

    Wiadomości:
    18
    Docenione treści:
    1
    Sklep jeszcze jest na starym motywie, nie RWD dopiero przymierzam się do zmiany.
    www.fullsklep.pl
     
  4. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    ciężko pomóc nie widząc stylu w działaniu, nie wiemy jakie będziesz tam miał modyfikacje. Ale w sumie temat jest prosty.
     
  5. piklop

    piklop Bywalec

    Wiadomości:
    18
    Docenione treści:
    1
    Nie wprowadziłem żadnych modyfikacji i nie planuję wprowadzać więcej jak te, które powyżej wymieniłem.
    Styl został tylko skopiowany w celu nanoszenia zmian nic w nim nie modyfikowałem poza dodaniem kodu

    .products.viewphot .product .product-inner-wrap .productname {
    display: block;
    font-size: 1.4em;
    }
    .box .product { padding: 0!important; }

    .products.viewphot .product .buttons form {
    display:none;
    }


    Nie uruchomiłem stylu ponieważ nie spełnia moich oczekiwań.

    Mogę skasować w/w kod i uruchomić styl, jest taka potrzeba ?
     
  6. piklop

    piklop Bywalec

    Wiadomości:
    18
    Docenione treści:
    1
    Zapomniałem dopisać, że styl jest z Galeria stylów - "RWD - Clilckshop"
     
  7. piklop

    piklop Bywalec

    Wiadomości:
    18
    Docenione treści:
    1
    W dalszym ciągu jestem zainteresowany wszelką pomocą ;) - co mam zrobić, gdzie kliknąć, co zmodyfikować .... ?
     
  8. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    ok już wszystko wiem, biorę się za pisanie modyfikacji :D
    ale pamiętajmy, że modyfikacja będzie dla RWD :)
     
    Mariusz lubi to.
  9. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Wariant 1
    w pliku product/tableofproducts.tpl znajdujemy:
    Kod:
     <a class="prodname f-row" href="{route function=$productRoute key=$product->product->product_id productName=$product->translation->name
                                    productId=$product->product->product_id}" title="{$product->translation->name|escape}">
                                <span class="productname">{$product->translation->name|escape}</span>
                            </a>
    wycinamy i wklejamy zaraz po <div class="product-inner-wrap">



    własny css:
    Kod:
    .products.viewphot .product .buttons form {
        display: none !important;
    }                       
    .products.viewphot .product .buttons .quickview span {
        display: none !important;
        margin-top: 0 !important;
    }
    .products.viewphot .product {
        height: 300px !important;
    }
    
    Wariant 2:
    znajdujemy:
    Kod:
     <div class="price f-row">
                                {if $loyalty_exchange}
                                    <span>{translate key="Price"}:</span>
                                    <em>{float precision=0 value=$product->defaultStock->loyaltyPointsPrice(true)}</em>
                                {else}
                                    {if $showprices}
                                        {if $price_mode == '1' || $price_mode == '3'}
                                            <span>{translate key="Price"}:</span>
                                            {if $product->specialOffer}
                                                <em>{currency value=$product->defaultStock->getSpecialOfferPrice()}</em>
                                                <del>{currency value=$product->defaultStock->getPrice()}</del>
                                                {if $product->currency and $currency->getIdentifier() != $product->currency->getIdentifier()}
                                                    <em class="default-currency">({currency id=$product->product->currency_id rate=1 value=$product->defaultStock->getCurrencySpecialOfferPrice()})</em>
                                                {/if}
                                            {else}
                                                <em>{currency value=$product->defaultStock->getPrice()}</em>
                                                {if $product->currency and $currency->getIdentifier() != $product->currency->getIdentifier()}
                                                    <em class="default-currency">({currency id=$product->product->currency_id rate=1 value=$product->defaultStock->getCurrencyPrice()})</em>
                                                {/if}
                                            {/if}
                                        {/if}
    
                                        {if $price_mode == '1' || $price_mode == '2'}
                                            {if $price_mode == '1'}
                                                <i class="price-netto">({translate key="net"}:
                                            {/if}
                                                {if $product->specialOffer}
                                                    <em>{currency value=$product->defaultStock->getSpecialOfferPrice(true)}</em>
                                                    <del>{currency value=$product->defaultStock->getPrice(true)}</del>
                                                    {if $product->currency and $currency->getIdentifier() != $product->currency->getIdentifier()}
                                                        <em class="default-currency">({currency id=$product->product->currency_id rate=1 value=$product->defaultStock->getCurrencySpecialOfferPrice(true)})</em>
                                                    {/if}
                                                {else}
                                                    <em>{currency value=$product->defaultStock->getPrice(true)}</em>
                                                    {if $product->currency and $currency->getIdentifier() != $product->currency->getIdentifier()}
                                                        <em class="default-currency">({currency id=$product->product->currency_id rate=1 value=$product->defaultStock->getCurrencyPrice(true)})</em>
                                                    {/if}
                                                {/if}
                                            {if $price_mode == '1'}
                                                )</i>
                                            {/if}
                                        {/if}
    
                                        {if $product->product->unit_price_calculation}
                                            {assign var=unit value=$product->defaultStock->getUnitPriceCalculationUnit()}
                                            <div class="unit-price-container">
                                                {if $price_mode == '1' || $price_mode == '3'}
                                                    <i class="default-currency">
                                                        ( 1 {$unit->translation->name} =
                                                        {if $product->specialOffer}
                                                            {currency value=$product->defaultStock->getUnitPriceCalculationSpecialOfferPrice()}
                                                        {else}
                                                            {currency value=$product->defaultStock->getUnitPriceCalculationPrice()}
                                                        {/if}
                                                        )
                                                    </i>
                                                {elseif $price_mode == '2'}
                                                    <i class="default-currency">
                                                        ( 1 {$unit->translation->name} =
                                                        {if $product->specialOffer}
                                                            {currency value=$product->defaultStock->getUnitPriceCalculationSpecialOfferPrice(true)}
                                                        {else}
                                                            {currency value=$product->defaultStock->getUnitPriceCalculationPrice(true)}
                                                        {/if}
                                                        )
                                                    </i>
                                                {/if}
                                            </div>
                                        {/if}
                                    {/if}
    
                                    {if $additional_tax_info == '1'}
                                        {assign var=productTax value=$product->getTax()}
                                        <div class="tax-additional-info">
                                            {if ($price_mode == '1' || $price_mode == '3') && $product->defaultStock->getPrice() != $product->defaultStock->getPrice(true)}
                                                {translate key="incl. %s TAX, excl. shipping costs" s1=$productTax->taxValue->name}
                                            {elseif $price_mode == '2' && $product->defaultStock->getPrice() != $product->defaultStock->getPrice(true)}
                                                {translate key="excl. %s TAX, excl. shipping costs" s1=$productTax->taxValue->name}
                                            {else}
                                                {translate key="excl. shipping costs"}
                                            {/if}
                                        </div>
                                    {/if}
                                {/if}
                            </div>
    
    wycinamy i wklejamy po punkcie 1 z pierwszego wariantu.

    dodatkowo we własnym css dodajemy:
    Kod:
    .products.viewphot .product .productname {
        margin-bottom: 0 !important;
    }
    
    nie ma za co :D
     
    Mariusz lubi to.
  10. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    dodatkowo jeśli chcesz to do lewej to:
    własny css:
    Kod:
    .products.viewphot .product .productname {
        float: left !important;
    }
    .product .price em {
        float: left !important;
    }
    
     
    Mariusz lubi to.
  11. piklop

    piklop Bywalec

    Wiadomości:
    18
    Docenione treści:
    1
    W ciągu 2-4 dni zabiorę się za wprowadzenie zmian i dam znać czy się udało. WIELKIE DZIĘKI :).
     
  12. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    to nie ma prawa nie działać :D
     
  13. piklop

    piklop Bywalec

    Wiadomości:
    18
    Docenione treści:
    1
    Witam ponownie. Miał Pan rację DZIAŁA :cool:

    Jeszcze poproszę o pomoc w zmniejszeniu odstępów między nazwą produktu a ceną i przybliżenie zdjęcia produktu do cent, tak jak zobrazowałem to na zdjęciach
    1) przed zmianami
    2) po zmianach

    [​IMG]

    EFEKT PO ZMIANACH

    [​IMG]
    Proszę też o informację gdzie można modyfikować wielkość czcionki: nazwy produktu i ceny.
     

    Załączone pliki:

  14. piklop

    piklop Bywalec

    Wiadomości:
    18
    Docenione treści:
    1
    Przypominajka o_O
     
  15. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    Spróbuj z poniższymi zmianami w CSS (przygotowałem na szybko, jakby coś było nie tak, daj proszę znać):

    Zmiana wielkości czcionki dla nazwy produktu (zamiast 2em umieszczamy własną wartość):
    Kod:
    .products.viewphot .product .productname {
    font-size: 2em;}
    Zmiana wielkości czcionki dla ceny (zamiast 2em umieszczamy własną wartość):
    Kod:
    .products.viewphot .product .price {
    font-size: 2em;
    }
    Przestawienie elementów (zmniejszenie odstępów między nimi):
    Kod:
    .products.viewphot .product {
    height: 250px !important;
    padding-top: 0px;
    margin-top: 0px;
    }
    .viewphot .product {
    margin-top: 0px;
    }
    
    Kod:
    .products.viewphot .product .productname {
        margin-bottom: 0em;
        height: 30px;
    }
     
  16. piklop

    piklop Bywalec

    Wiadomości:
    18
    Docenione treści:
    1
    Witam, dziękuję za kod. Na komputerze kod działa poprawnie (odstępy zmalały i można ustawić wielkość czcionki) natomiast w wersji na komórce już nie :(, w dalszym ciągu są duże odstępy między produktami. Oczywiście wyczyściłem dane z przeglądarki (od początku).

    Dodatkowo mam pytanie czy jest możliwość ustawienia szablonu RWD tak, aby wersji na komórce od razu wyświetlał się KLASYCZNA STRONA SKLEPU. Obecnie jest tak - wpisuję w przeglądarce adres strony fullsklep.pl i pojawia się "stare menu wyboru" a nie nowy styl RWD.
     

Poleć forum znajomym