Artikelbeschreibung neben das Artikelbild platzieren

Thema wurde von Katsugo, 20. September 2018 erstellt.

  1. Katsugo
    Katsugo Mitglied
    Registriert seit:
    19. August 2012
    Beiträge:
    11
    Danke erhalten:
    4
    Danke vergeben:
    2
    Hallo liebe Gemeinde!

    Ich würde gerne auf der Produktdetailseite die Artikelbeschreibung rechts neben dem Artikelbild platzieren.
    Also: Links: Bild, Mitte: Beschreibung, Rechts: Artikeldetail-Box

    Ich freue mich über jeden Tipp!

    Gambio 3.10.0.4
     
  2. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Mag sein, dass das auf einem großen Monitor bei Nutzung der ganzen Breite toll aussieht, aber bei einem
    17" - 19" Gerät, ohne Breitbild (ja, die gibt es noch) muss man entweder recht-links scrollen, oder es wird alles verkleinert und zusammengequetscht.
    Auch auf einem Notebook oder Tablet könnte das Probleme bei der Darstellung geben.
    Das würde ich mir sehr gut überlegen, bevor ich da das Template umbaue.

    Die Datei ist
    templates/Honeygrid/module/product_info/standard.html
    die muss entsprechend umgebaut werden.
    gegebenenfalls muss der Slider für mehrere Artikelbilder anders dargestellt werden,
    die zusätzlichen Dateien im snippets-Ordner sind z.T. sicher auch betroffen,
    dann muss das css abgeändert werden.....
     
  3. Katsugo
    Katsugo Mitglied
    Registriert seit:
    19. August 2012
    Beiträge:
    11
    Danke erhalten:
    4
    Danke vergeben:
    2
    Hallo Barbara, danke für deine Antwort.
    Du hast schon recht mit den verschiedenen Monitorgrößen. Ich würde es trotzdem gerne testen.
    An die standard.html habe ich mich schon rangetraut. Ich denke mal, es geht um den Block "module_product_info_standard_description". Egal, wo ich den hinschiebe, die Beschreibung steht entweder über oder unter dem Bild. Kannst du mir sagen, wo genau der hin muss?
     
  4. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Genau kann ich es Dir nicht sagen, aber ich denke es muss hinter diesen Block:
    HTML:
    {block name="module_product_info_standard_product_images_if"}
                                {if $images}
                                    {block name="module_product_info_standard_images"}
                                        <div class="product-info-stage col-xs-12 col-md-8{if $images|count lt 2} centered{/if}">
    
                                            {block name="module_product_info_standard_product_images_snippet_include"}
                                                {include file="get_usermod:{$tpl_path}snippets/product_info/images/product_images.html"}
                                            {/block}
    
                                            {block name="module_product_info_standard_product_images_manufacturer_ribbon_if"}
                                                {if $arr_ribbons.manufacturer|count > 0}
                                                    {block name="module_product_info_standard_product_images_manufacturer_ribbon_include"}
                                                        {include file="get_usermod:{$tpl_path}snippets/ribbon/ribbon_manufacturer.html"
                                                        ribbon="manufacturer"
                                                        id=$arr_ribbons.manufacturer.0.ID
                                                        text=$arr_ribbons.manufacturer.0.IMAGE_ALT
                                                        img=$arr_ribbons.manufacturer.0.IMAGE
                                                        url=$arr_ribbons.manufacturer.0.URL
                                                        }
                                                    {/block}
                                                {/if}
                                            {/block}
                       
                                        </div>
                                    {/block}
                                {/if}
                            {/block}
    Und dann muss das hier:
    <div class="product-info-stage col-xs-12 col-md-8{if $images|count lt 2} centered{/if}">

    geändert werden, da hier die Breite des Bildbereiches (col-md-8 = 8 Gridspalten) festgelegt wird.
    Das selbe gilt für diese Zeile:
    <div class="product-info-description col-md-8" data-gambio-widget="tabs">
     
  5. Katsugo
    Katsugo Mitglied
    Registriert seit:
    19. August 2012
    Beiträge:
    11
    Danke erhalten:
    4
    Danke vergeben:
    2
    #5 Katsugo, 22. September 2018
    Zuletzt bearbeitet: 22. September 2018
    Den Block habe ich verschoben und die Gridspalten erfolgreich geändert. Leider ist die Beschreibung immer noch unter dem Bild.
    Gibt es da irgendwo noch ein <br> von dem ich nichts weiß?
     
  6. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Hast Du mal einen Link?
     
  7. Katsugo
    Katsugo Mitglied
    Registriert seit:
    19. August 2012
    Beiträge:
    11
    Danke erhalten:
    4
    Danke vergeben:
    2
    Hier der Link zum Shop. Allerdings habe ich die Änderungen rückgängig gemacht, da der Shop produktiv geschaltet ist.
     
  8. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Das nützt dann nichts.
    Für solche "Basteleien" sollte man sich aber einen Testshop (Kopie des Shops) zulegen
    Da kann an in Ruhe ausprobieren, ohne das man sich den Shop kaputt machen kann.
     
  9. Katsugo
    Katsugo Mitglied
    Registriert seit:
    19. August 2012
    Beiträge:
    11
    Danke erhalten:
    4
    Danke vergeben:
    2
    Ich habe mal die Änderungen bis auf Weiteres wieder eingetragen.
     
  10. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    26. November 2015
    Beiträge:
    2.514
    Danke erhalten:
    416
    Danke vergeben:
    1.239
    Auf meinem 17 Zoll Monitor sieht das so aus, ganz schön merkwürdig. Willst du das wirklich? Und auf dem 15 Zoll sieht das nicht anders aus.

    17 Zoll.JPG
     
  11. Katsugo
    Katsugo Mitglied
    Registriert seit:
    19. August 2012
    Beiträge:
    11
    Danke erhalten:
    4
    Danke vergeben:
    2
    So sieht es auch auf einem großen Monitor aus. Das ist ja das Merkwürdige.
     
  12. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    26. November 2015
    Beiträge:
    2.514
    Danke erhalten:
    416
    Danke vergeben:
    1.239
    Achso? Ich dachte das ist so gewollt ;)
     
  13. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Dein Artikelbild hat nur 205 x 300px, deshalb sieht das so verloren aus :)

    Sehe ich so leider auch nicht...
    ich teste das nachher mal in meinem Testshop und sage Dir hier was du machen müsstest.
     
  14. Katsugo
    Katsugo Mitglied
    Registriert seit:
    19. August 2012
    Beiträge:
    11
    Danke erhalten:
    4
    Danke vergeben:
    2
    Das Artikelbild habe ich im Zuge der "Neuordnung" kleiner eingestellt, damit das passt.

    Jetzt ist erstmal Sonntag. Danke, dass du dir überhaupt die Zeit nimmst. ;-)
     
  15. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Ich habe mir das gerade angesehen.

    Setze in der standard-USERMOD.html den Block für die Beschreibung unter das Bild:
    HTML:
                            {block name="module_product_info_standard_product_images_if"}
                                {if $images}
                                    {block name="module_product_info_standard_images"}
                                        <div class="product-info-stage col-xs-12 col-md-4{if $images|count lt 2} centered{/if}">
    
                                            {block name="module_product_info_standard_product_images_snippet_include"}
                                                {include file="get_usermod:{$tpl_path}snippets/product_info/images/product_images.html"}
                                            {/block}
    
                                            {block name="module_product_info_standard_product_images_manufacturer_ribbon_if"}
                                                {if $arr_ribbons.manufacturer|count > 0}
                                                    {block name="module_product_info_standard_product_images_manufacturer_ribbon_include"}
                                                        {include file="get_usermod:{$tpl_path}snippets/ribbon/ribbon_manufacturer.html"
                                                        ribbon="manufacturer"
                                                        id=$arr_ribbons.manufacturer.0.ID
                                                        text=$arr_ribbons.manufacturer.0.IMAGE_ALT
                                                        img=$arr_ribbons.manufacturer.0.IMAGE
                                                        url=$arr_ribbons.manufacturer.0.URL
                                                        }
                                                    {/block}
                                                {/if}
                                            {/block}
                       
                                        </div>
                                    {/block}
                                {/if}
                            {/block}
                            <!--Beschreibung verschoben-->
                            {block name="module_product_info_standard_description"}
                                <div class="product-info-description col-md-4" data-gambio-widget="tabs">
                                    {include file="get_usermod:{$tpl_path}snippets/product_info/product_description.html"}
                                </div>
                            {/block}
    Und gib im eigenen css das ein:
    Code:
    @media (min-width: 992px){
    .product-info .product-info-description {
        clear: right;
    }}
    .product-info-share {
        clear: left;
    }
    Das erste setzt die Beschreibung rechts neben das bild, das andere schiebt die Social-share-Button und Rezensionen wieder nach links (sonst ist das halb unter der rechten Box)

    Cache leeren nciht vergessen :)
     
  16. Katsugo
    Katsugo Mitglied
    Registriert seit:
    19. August 2012
    Beiträge:
    11
    Danke erhalten:
    4
    Danke vergeben:
    2
    Super! Hat geklappt und sieht auch gut aus. Vielen Dank! :)

    Aber:
    - Wo muss die standard-USERMOD.html hin? Ich habe das erstmal in der richtigen standard.html geändert, so ist es ja nicht updatesicher. Die eigene css habe ich gefunden.

    - Wie bekomme ich das Herstellerlogo (module_product_info_standard_product_images_manufacturer_ribbon) kleiner? Ich habe es zunächst ganz ausgeblendet, da es nun viel zu groß scheint.
     
  17. Anonymous
    Anonymous Beta-Held
    Registriert seit:
    6. September 2011
    Beiträge:
    1.981
    Danke erhalten:
    478
    Danke vergeben:
    471
    im selben wo die Standard ist.
     
  18. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Ich meine, dass wird in der Größe angezeigt, die Du hochgeladen hast.