ROZWIĄZANE RWD zmiana wyglądu listy produktów

Proszę o pomoc w zmianie wyglądu wyświetlania się listy produktów z:





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

WARIANT 1​

WARIANT 2​

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.

 

@piklop adres sklepu poprosimy

 

Sklep jeszcze jest na starym motywie, nie RWD dopiero przymierzam się do zmiany.
www.fullsklep.pl

 

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.

 

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 ?

 

Zapomniałem dopisać, że styl jest z Galeria stylów - "RWD - Clilckshop"

 

W dalszym ciągu jestem zainteresowany wszelką pomocą - co mam zrobić, gdzie kliknąć, co zmodyfikować .... ?

 

ok już wszystko wiem, biorę się za pisanie modyfikacji
ale pamiętajmy, że modyfikacja będzie dla RWD

 

Wariant 1
w pliku product/tableofproducts.tpl znajdujemy:

Code:

 <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:

Code:

.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:

Code:

 <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:

Code:

.products.viewphot .product .productname {
    margin-bottom: 0 !important;
}

nie ma za co

 

dodatkowo jeśli chcesz to do lewej to:
własny css:

Code:

.products.viewphot .product .productname {
    float: left !important;
}
.product .price em {
    float: left !important;
}

 

W ciągu 2-4 dni zabiorę się za wprowadzenie zmian i dam znać czy się udało. WIELKIE DZIĘKI .

 

to nie ma prawa nie działać

 

Witam ponownie. Miał Pan rację DZIAŁA

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

EFEKT PO ZMIANACH​

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

 

Przypominajka

 

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ść):

Code:

.products.viewphot .product .productname {
font-size: 2em;}

Zmiana wielkości czcionki dla ceny (zamiast 2em umieszczamy własną wartość):

Code:

.products.viewphot .product .price {
font-size: 2em;
}

Przestawienie elementów (zmniejszenie odstępów między nimi):

Code:

.products.viewphot .product {
height: 250px !important;
padding-top: 0px;
margin-top: 0px;
}
.viewphot .product {
margin-top: 0px;
}

Code:

.products.viewphot .product .productname {
    margin-bottom: 0em;
    height: 30px;
}

 

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.