Hallo zusammen, seit geraumer Zeit gefällt mir die Produktseite optisch nicht mehr. Ich finde, man könnte auf der Produktseite mehr Informationen horizontal unterbringen bzw. die bereits vorhandenen Informationen besser verteilen. Aktuell ist es so, dass sämtliche Informationen in die Produktinfo-Box gequetscht werden, was meiner Meinung nach überhaupt nicht zeitgemäß ist. Einiges konnte ich selbst bereits umsetzen, für manche Vorhaben benötige ich Hilfe. Vorab: CSS Änderungen gehören natürlich auch dazu, werden im Folgenden aber erstmal nicht mitgegeben, um das Ganze erstmal übersichtlich zu halten. Ich habe dafür ein bischen am Testshop rumgebastelt und stelle mir die neue moderne Produktseite so vor: Was habe ich gemacht? Schritt 1: Eigene HTML Datei erstellt und darin der Galerie 5 Grids gegönnt, statt 8. Im Zuge dessen habe ich auch gleich den Block für das Hersteller-Logo gelöscht. Dieser Block wird im nächsten Schritt im selbst erstellen neuen Block eingefügt. Fertige Datei: Eigene_Datei_Product_Info_Galerie.html Code: {block name="product_info_template_standard_images"} <div class="product-info-stage col-xs-12 col-md-5{if $images|count lt 2} centered{/if}"> <div id="image-collection-container"> {include file="get_usermod:{$tpl_path}product_info_gallery_main.html"} </div> </div> {/block} Bis hierhin alles top, funktioniert! Schritt 2: Ich habe per "append" einen eigenen Block an den in der Datei product_info_gallery.html vorhandenen Block angehangen. Dieser Block, wie auf dem Screenshot ersichtlich, das Herstellerlogo enthalten. Das klappt auch problemlos. Auch soll der Produktname hier Platz finden, siehe Screenshot. Aber genau hier fangen die Probleme an. Egal was ich mache, der Produktname wird im eigenen Block nicht angezeigt. Auf dem Screenshot habe ich in der Entwicklerkonsole gearbeitet. Ich habe den richtigen Block für den Produkt-Titel genommen und in meinem append-Block hinzugefügt. Funktioniert nicht. Original-Block komplett gelöscht, funktioniert nicht. Original-Block nur geleert, funktioniert nicht. Fertige Datei: product_info_gallery.html Code: {block name="product_info_template_standard_images" append} <div class="col-xs-12 col-md-4"> {block name="product_info_template_standard_product_images_manufacturer_ribbon_if"} {product_ribbons showManufacturerImages='SHOW_MANUFACTURER_IMAGE_PRODUCT_DETAILS'|gm_get_conf showProductRibbons='SHOW_PRODUCT_RIBBONS'|gm_get_conf product_id=$productId out=arr_ribbons } {if $arr_ribbons.manufacturer|count > 0} {block name="product_info_template_standard_product_images_manufacturer_ribbon_include"} {include file="get_usermod:{$tpl_path}product_listing_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} {block name="product_info_template_standard_sticky_box_product_title"} <h1 class="product-info-title-desktop {if 'ENABLE_JS_HYPHENATION'|gm_get_conf == 'true'}hyphenate{/if} hidden-xs hidden-sm">{$RICH_SNIPPET_ARRAY.product_itemprop_name_start}{$PRODUCTS_NAME}{$RICH_SNIPPET_ARRAY.product_itemprop_name_end}</h1> {/block} </div> {/block} Die Produktinfo Box bekommt 3 Grids. Fertige Datei: product_info_template_standard.html Code: {block name="product_info_template_standard_sticky_box"} {assign var="stickybox" value={template_setting name="gx-product-info-details-sticky"}} <div class="product-info-details col-xs-12 col-md-3" data-gambio-widget="{if $stickybox}stickybox {/if}product_min_height_fix"> {block name="product_info_template_standard_sticky_box_overlays"} <div class="loading-overlay"></div> <div class="magnifier-overlay"></div> <div class="magnifier-target"> <div class="preloader"></div> </div> {/block} {block name="product_info_template_standard_sticky_box_ribbon_if"} {if $arr_ribbons.ribbons} {block name="product_info_template_standard_sticky_box_ribbon_include"} {include file="get_usermod:{$tpl_path}product_listing_ribbon.html" ribbons=$arr_ribbons} {/block} {/if} {/block} {block name="product_info_template_standard_sticky_box_ts_rating"} {$TS_PRODUCT_RATING} {/block} {block name="product_info_template_standard_sticky_box_form"} <form action="{$FORM_ACTION_URL}" class="form-horizontal js-product-form{if $GM_GPRINT} customizer{/if} product-info"> <input type="hidden" id="update-gallery-hash" name="galleryHash" value=""> {block name="product_info_template_standard_sticky_box_rating"} <div class="hidden-xs hidden-sm ribbon-spacing"> {block name="product_info_template_standard_sticky_box_rating_if"} {if $showRating && $AGGREGATE_REVIEW_DATA.averageRating && $AGGREGATE_REVIEW_DATA.averageRating != 0} {block name="product_info_template_standard_sticky_box_rating2"} <span> <span style="display: none">{$AGGREGATE_REVIEW_DATA.averageRating}</span> <span style="display: none">{$AGGREGATE_REVIEW_DATA.count}</span> </span> <a href="#product-ratings"{if 'SHOW_RATING_AS_TAB'|gm_get_conf === 'true'} onclick="document.getElementById('reviews-tab').click()"{/if}> {include file="get_usermod:{$tpl_path}rating_stars.html" rating_rounded=$AGGREGATE_REVIEW_DATA.averageRating rating_count=$AGGREGATE_REVIEW_DATA.count } </a> {/block} {/if} {/block} </div> {/block} {block name="product_info_template_standard_sticky_box_product_options_if"} {if ($SHOW_PRODUCTS_MODEL && trim($PRODUCTS_MODEL) != '') || $SHIPPING_NAME || $SHOW_SHIPPING_TIME || $PRODUCTS_QUANTITY || $SHOW_PRODUCTS_QUANTITY || $additional_fields} {block name="product_info_template_standard_sticky_box_product_options"} <dl class="dl-horizontal"> {block name="product_info_template_standard_sticky_box_model_include"} {include file="get_usermod:{$tpl_path}product_info_model.html"} {/block} {block name="product_info_template_standard_sticky_box_shipping_time_include"} {include file="get_usermod:{$tpl_path}product_info_shipping_time.html"} {/block} {block name="product_info_template_standard_sticky_box_stock_include"} {include file="get_usermod:{$tpl_path}product_info_stock.html"} {/block} {block name="product_info_template_standard_sticky_box_additional_fields"} {$additional_fields} {/block} {block name="product_info_template_standard_sticky_box_weight_if"} {if $SHOW_PRODUCTS_WEIGHT} {block name="product_info_template_standard_sticky_box_weight"} <dt>{$txt.text_weight}</dt> <dd class="products-details-weight-container"><span>{$PRODUCTS_WEIGHT}</span> {$txt.text_weight_unit} {if $PRODUCTS_QUANTITY_UNIT}{$PRODUCTS_QUANTITY_UNIT}{else}{$txt.text_weight_qty_unit}{/if}</dd> {/block} {/if} {/block} {block name="product_info_template_standard_sticky_box_min_order_if"} {if $GM_MIN_ORDER} {block name="product_info_template_standard_sticky_box_min_order"} <dt class="product-details-order-min">{$txt.text_min_order}</dt> <dd class="product-details-order-min">{$GM_MIN_ORDER}</dd> {/block} {/if} {/block} </dl> {/block} {/if} {/block} {block name="product_info_template_standard_sticky_box_properties_selection_form"} {$properties_selection_form} {/block} {block name="product_info_template_standard_sticky_box_modifier_groups_selection_form"} {$MODULE_modifier_groups} {/block} {block name="product_info_template_standard_sticky_box_module_product_options"} {$MODULE_product_options} {/block} {block name="product_info_template_standard_sticky_box_customizer"} {include file="get_usermod:{$tpl_path}product_info_customizer_position.html" position=3} {/block} {block name="product_info_template_standard_sticky_box_legal_age"} {include file="get_usermod:{$tpl_path}product_info_legal_age.html"} {/block} {block name="product_info_template_standard_sticky_box_graduated_price_if"} {if $MODULE_graduated_price != '' && $QUANTITY} {block name="product_info_template_standard_sticky_box_graduated_price"} {$MODULE_graduated_price} {/block} {/if} {/block} {block name="product_info_template_standard_sticky_box_cart_error_message"} {if $ERROR_MESSAGES != ''} <div class="cart-error-msg alert alert-danger" role="alert" style="display: block;">{$ERROR_MESSAGES}</div> {else} <div class="cart-error-msg alert alert-danger" role="alert"></div> {/if} {/block} {block name="product_info_template_standard_sticky_box_price_container"} <div class="price-container"> {block name="product_info_template_standard_sticky_box_price_calc_container"} <div class="price-calc-container" id="attributes-calc-price"> {block name="product_info_template_standard_sticky_box_price_include"} {include file="get_usermod:{$tpl_path}product_info_price.html"} {/block} {block name="product_info_template_standard_sticky_box_quantity_if"} {if $QUANTITY} {block name="product_info_template_standard_sticky_box_quantity_unit_if"} {if $PRODUCTS_QUANTITY_UNIT} {block name="product_info_template_standard_sticky_box_quantity_unit"} <label class="quantity-unit-label"> {$PRODUCTS_QUANTITY_UNIT}: </label> {/block} {/if} {/block} {else} {block name="product_info_template_standard_sticky_box_quantity_unit_else"}{/block} {/if} {block name="product_info_template_standard_sticky_box_product_box_bottom"} {include file="get_usermod:{$tpl_path}product_info_product_box_bottom.html"} {/block} {/block} </div> {/block} </div> {/block} </form> {/block} </div> {/block} Wieso wird der Produktname nicht im eigenen Block angezeigt? Hier geht es zum Testshop mit dem bisherigen Stand. (Link nur für registrierte Nutzer sichtbar.) Ich hoffe sehr auf Hilfe und danke im Voraus!
Weil die Variable an der Stelle leider nicht zur Verfügung steht. Du kannst Dir immer die verfügbaren Variablen anzeigen lassen, indem Du {debug} an beliebiger Stelle in die Datei einfügst, Cache für die Seitenausgabe leerst und die Seite neu lädst. Die Debug-Infos öffnen in einem Popup, also Popups zulassen Das liest sich jetzt crazy, aber der Produktname scheint in der Datei tatsächlich im Bilder-Array zu hängen. Ersetze mal Code: {$PRODUCTS_NAME} durch Code: {$images.0.PRODUCTS_NAME}
Ich danke dir herzlichst! Funktioniert tadellos. Jetzt muss ich das Gleiche mit den Bewertungssternen hinbekommen. Da gibt es nämlich das selbe Problem. Offenbar lässt sich nichts aus der Infobox per Copy Paste übernehmen. Wenn ich nicht klarkomme, melde ich mich hier nochmal. Vielen Dank nochmal.
Weil die Bewertungssterne nicht in meinem Block angezeigt werden konnten, habe ich jetzt eine "Kleinigkeit" geändert. Ich habe meinen Block nicht mit Append hinter der Gallery, sondern mit Prepend vor der Infobox, weil ja hier die Variablen bereits vorhanden sind. Klappt deutlich besser. Gleiches Feld, neues Spiel. Jetzt gibt es aber ein neues Problem. Und zwar verschwindet der Wishlist Button, sobald ich den Artikeltitel aus der ursprünglichen Box entferne. Das Herz soll aber eigentlich dort bleiben. Irgendwie hängt das zusammen, obwohl in der Originaldatei nichts von Wishlist oder so steht. Weil ich den Artikeltitel aber in meiner eigenen Box anzeigen lasse, taucht der Wishlist Button jetzt dort auf. Nur leider ohne jede Funktion. Wenn man draufklickt, landet man auf der Startseite. Hast Du eine Idee, was ich da tun könnte? Danke im Voraus.
Den Block {product_info_template_standard_sticky_box_product_title} gibt's 2x: themes/Malibu/html/system/product_info_template_standard.html themes/Malibu/variants/product-variant/classic/html/custom/product_info_template_standard.html Letzterer packt den Merkzettel-Link vor die Überschrift.
Da wird also ein Block für zwei verschiedene Dinge verwendet. Ich habe jetzt den Block aus der Originaldatei nicht gelöscht sondern nur geleert. Und in meinem eigenen Bereich habe ich nicht den ganzen Block verwendet, sondern nur ab der h1 Class. Ergebnis ist zielführend und super. Jetzt habe ich das Herz weiterhin in der Infobox und den Artikelnamen in meinem eigenen Block. Vielen lieben Dank für deine Hinweise. Dein Tipp mit dem "debug" hat übrigens Fragen aufgeworfen, die jetzt nicht essentiell sind, aber mich doch irritieren. Denn am Aritkeltitel hängt noch eine Variable wie $RICH_SNIPPET_ARRAY, die aber im Debug gar nicht angezeigt wird. "Rich" ist denke ich mal für SEO, aber wieso die Variable dort überhaupt eingesetzt, wenn diese gar nicht verwendet wird?
Soweit ich sehen kann, ist das $RICH_SNIPPET_ARRAY tatsächlich komplett überflüssig. Vermutlich ist es aus historischen Gründen drin, sprich: vergessen worden zu löschen.