Product_info anpassen - Grid Warenkorb / Bilder - Vorschau horizontal

Guten Morgen,

ich bin gerade am Anpassen der product_info/standard.html (USERMOD).
Drei Änderungen möchte ich vornehmen:

1. Grid-Breite der Bilder (8 -> 7) und des Warenkorbs (4 -> 5) ändern
2. Die Vorschau-Bilder (product-info-thumbnails) anstatt vertikal, horizontal unter dem Hauptbild anzeigen lassen (swiper-vertical),
   
3. Eine Überlagerung der Tabs und Beschreibung vom Warenkorb verhindern.

zu 1. ist soweit kein Problem, die Änderung habe ich entsprechend vorgenommen:

HTML:

{if $images}
     <div class="product-info-stage col-xs-12 col-md-7{if $images|count lt 2} centered{/if}">

und

HTML:

<div class="product-info-details col-xs-12 col-md-5" ...

zu 2. Habe ich durch das Löschen des <div class="...swiper-vertial"> geschafft. (siehe auch Gambio Testshop 2): snippets / product_info / images / product_images-USERMOD.html

HTML:

{if $images|@count > 0}
    <div class="product-info-image {if 'SHOW_ZOOM'|gm_get_conf === 'true'}has-zoom{/if}" {if 'SHOW_ZOOM'|gm_get_conf === 'true'}data-gambio-widget="image_gallery magnifier" data-magnifier-target=".magnifier-target"{/if}>
        <div class="product-info-image-inside">
            {include file="get_usermod:{$tpl_path}snippets/product_info/images/swiper.html" swiperId="product_image_swiper" startWidget="true" swiperImages=$images itemProp=$RICH_SNIPPET_ARRAY.product_itemprop_image swiperControls="#product_thumbnail_swiper, #product_thumbnail_swiper_mobile" swiperOptions=", \"effect\": \"fade\", \"autoplay\": null"}
        </div>
    </div>
{/if}

{if $thumbnails|@count > 1}
    <div class="product-info-thumbnails-mobile col-xs-12">
        {include file="get_usermod:{$tpl_path}snippets/product_info/images/swiper.html" swiperId="product_thumbnail_swiper_mobile" startWidget="true" swiperImages=$thumbnails itemProp=$RICH_SNIPPET_ARRAY.product_itemprop_image swiperTarget="#product_image_swiper" swiperOptions=", \"spaceBetween\": 10, \"loop\": false, \"direction\": \"horizontal\", \"slidesPerView\": 4, \"autoplay\": null" additionalData="data-swiper-breakpoints=\"[]\""}
    </div>
{/if}

Allerdings ist jetzt links vom Hauptbild der Platz frei und der Swiper überlagert die Beschreibung (Tabs)


zu 3. Clearfix oder ähnliches funktioniert nicht, oder wird von mir nicht richtig angewandt.

HTML:

<div class="product-info-description col-md-12" data-gambio-widget="tabs">
     {include file="get_usermod:{$tpl_path}snippets/product_info/product_description.html"}
</div>

Jede Hilfe ist willkommen

Viele Grüße
Cedric

 

Hallo Barbara,

um das Rätselraten etwas zu vereinfachen, einmal der Link zum Testshop.

Den Abstand nach Links konnte ich mit deiner Hilfe etwas verkleiner, durch Setzen von "Breite der Thumbnails" auf 0px.
Wie ich den Abstand einstellen muss, damit die Tab-Leiste nicht überdeckt wird, habe ich noch nicht herausgefunden.


Viele Grüße
Cedric

 

Hallo Barbara,

danke für den Hinweis. Dies ist jedoch leider nur bei dem entsprechenden Artikel die Lösung.
Bei anderen Artikeln, wo ich keinen GX-Customizer hinterlegt habe, klafft jetzt ein riesen Abstand zwischen Beschreibung und Warenkorb.

Deswegen suche ich eine Art "Sicherheitsabstand", der sich flexibel anpasst.
So eine Art "Clearfix" die verhindert, dass der Produkt-Beschreibungs-Leiste überlagert wird.

Hast du eine Idee wie ich das realisiere?

Viele Grüße
Cedric

Edit: gelöst durch andere Verschachtelung der <div>-Container.