How to Create Your Own Detailed View Page in Shopware 5Bay20 Software

Als erstes müssen Sie ein benutzerdefiniertes Thema erstellen. Um ein benutzerdefiniertes Thema zu erstellen, klicken Sie auf diesen Link

Different ways of creating shopware 5 theme ?

Um Ihre eigene Detailansicht in shopware 5 zu erstellen, gehen Sie wie folgt vor:-

Unsere detaillierte Seite sieht wie folgt aus.

Create your own detailed view page in Shopware 5

Hinweis: Wir werden die Eltern tpl-Dateien in unser benutzerdefiniertes Thema erweitern. Benutzerdefinierte Verzeichnis ist Thema, das ich bereits erstellt.

Schritt 1: Zuerst definieren wir unser eigenes Layout im Backend. Dazu gehen wir in die Konfiguration>Grundeinstellungen und das Frontend. Dort wählen wir Warenkorb/Artikeldetails aus und fügen unter „Verfügbare Vorlagen für Detailseite“: unsere so ein:

:Standard;bay20.tpl:emzFullpic;

Schritt 2: Wir müssen die Vorlagendatei bay20Fullpic.tpl in diesem Verzeichnis erstellen:“themes/Frontend/Custom/ frontend/detail/index.tpl“

und leiten Sie zunächst von der ursprünglichen index.tpl ab

{extends file='parent:frontend/detail/index.tpl'}

Schritt 3: Schreiben Sie diesen Code in die Datei index.tpl.

{extends file='parent:frontend/detail/index.tpl'}
{* Main content *}
{block name='frontend_index_content'}
<div class="bay20--detail-fullpic">
<div class="content product--details" itemscope itemtype="http://schema.org/Product"{if !{config name=disableArticleNavigation}} data-product-navigation="{url module="widgets" controller="listing" action="productNavigation"}" data-category-id="{$sArticle.categoryID}" data-main-ordernumber="{$sArticle.mainVariantNumber}"{/if} data-ajax-wishlist="true" data-compare-ajax="true"{if $theme.ajaxVariantSwitch} data-ajax-variants-container="true"{/if}>
{* The configurator selection is checked at this early point
to use it in different included files in the detail template. *}
{block name='frontend_detail_index_configurator_settings'}
{* Variable for tracking active user variant selection *}
{$activeConfiguratorSelection = true}
{if $sArticle.sConfigurator && ($sArticle.sConfiguratorSettings.type == 1 || $sArticle.sConfiguratorSettings.type == 2)}
{* If user has no selection in this group set it to false *}
{foreach $sArticle.sConfigurator as $configuratorGroup}
{if !$configuratorGroup.selected_value}
{$activeConfiguratorSelection = false}
{/if}
{/foreach}
{/if}
{/block}
<div class="product--detail-upper block-group">
{* Product image *}
{block name='frontend_detail_index_image_container'}
<div class="product--image-container image-slider{if $sArticle.image && {config name=sUSEZOOMPLUS}} product--image-zoom{/if}"
{if $sArticle.image}
data-image-slider="true"
data-image-gallery="true"
data-maxZoom="{$theme.lightboxZoomFactor}"
data-thumbnails=".image--thumbnails"
{/if}>
{include file="frontend/detail/image.tpl"}
</div>
{/block}
{* "Buy now" box container *}
{block name='frontend_detail_index_buy_container'}
<div class="product--buybox block{if $sArticle.sConfigurator && $sArticle.sConfiguratorSettings.type==2} is--wide{/if}">
{block name="frontend_detail_rich_snippets_brand"}
<meta itemprop="brand" content="{$sArticle.supplierName|escape}"/>
{/block}
{block name="frontend_detail_rich_snippets_weight"}
{if $sArticle.weight}
<meta itemprop="weight" content="{$sArticle.weight} kg"/>
{/if}
{/block}
{block name="frontend_detail_rich_snippets_height"}
{if $sArticle.height}
<meta itemprop="height" content="{$sArticle.height} cm"/>
{/if}
{/block}
{block name="frontend_detail_rich_snippets_width"}
{if $sArticle.width}
<meta itemprop="width" content="{$sArticle.width} cm"/>
{/if}
{/block}
{block name="frontend_detail_rich_snippets_depth"}
{if $sArticle.length}
<meta itemprop="depth" content="{$sArticle.length} cm"/>
{/if}
{/block}
{block name="frontend_detail_rich_snippets_release_date"}
{if $sArticle.sReleasedate}
<meta itemprop="releaseDate" content="{$sArticle.sReleasedate}"/>
{/if}
{/block}
{block name='frontend_detail_buy_laststock'}
{if !$sArticle.isAvailable && ($sArticle.isSelectionSpecified || !$sArticle.sConfigurator)}
{include file="frontend/_includes/messages.tpl" type="error" content="{s name='DetailBuyInfoNotAvailable' namespace='frontend/detail/buy'}{/s}"}
{/if}
{/block}
{* Product email notification *}
{block name="frontend_detail_index_notification"}
{if $sArticle.notification && $sArticle.instock <= 0 && $ShowNotification}
{include file="frontend/plugins/notification/index.tpl"}
{/if}
{/block}
{* Product data *}
{block name='frontend_detail_index_buy_container_inner'}
<div itemprop="offers" itemscope itemtype="{if $sArticle.sBlockPrices}http://schema.org/AggregateOffer{else}http://schema.org/Offer{/if}" class="buybox--inner">
{block name='frontend_detail_index_data'}
{if $sArticle.sBlockPrices}
{$lowestPrice=false}
{$highestPrice=false}
{foreach $sArticle.sBlockPrices as $blockPrice}
{if $lowestPrice === false || $blockPrice.price < $lowestPrice}
{$lowestPrice=$blockPrice.price}
{/if}
{if $highestPrice === false || $blockPrice.price > $highestPrice}
{$highestPrice=$blockPrice.price}
{/if}
{/foreach}
<meta itemprop="lowPrice" content="{$lowestPrice}" />
<meta itemprop="highPrice" content="{$highestPrice}" />
<meta itemprop="offerCount" content="{$sArticle.sBlockPrices|count}" />
{else}
<meta itemprop="priceCurrency" content="{$Shop->getCurrency()->getCurrency()}"/>
{/if}
{include file="frontend/detail/data.tpl" sArticle=$sArticle sView=1}
{/block}
{block name='frontend_detail_index_after_data'}{/block}
{* Configurator drop down menu's *}
{block name="frontend_detail_index_configurator"}
<div class="product--configurator">
{if $sArticle.sConfigurator}
{if $sArticle.sConfiguratorSettings.type == 1}
{include file="frontend/detail/config_step.tpl"}
{elseif $sArticle.sConfiguratorSettings.type == 2}
{include file="frontend/detail/config_variant.tpl"}
{else}
{include file="frontend/detail/config_upprice.tpl"}
{/if}
{/if}
</div>
{/block}
{* Include buy button and quantity box *}
{block name="frontend_detail_index_buybox"}
{include file="frontend/detail/buy.tpl"}
{/block}
{* Product actions *}
{block name="frontend_detail_index_actions"}
<nav class="product--actions">
{include file="frontend/detail/actions.tpl"}
</nav>
{/block}
</div>
{/block}
{* Product - Base information *}
{block name='frontend_detail_index_buy_container_base_info'}
<ul class="product--base-info list--unstyled">
{* Product SKU *}
{block name='frontend_detail_data_ordernumber'}
<li class="base-info--entry entry--sku">
{* Product SKU - Label *}
{block name='frontend_detail_data_ordernumber_label'}
<strong class="entry--label">
{s name="DetailDataId" namespace="frontend/detail/data"}{/s}
</strong>
{/block}
{* Product SKU - Content *}
{block name='frontend_detail_data_ordernumber_content'}
<meta itemprop="productID" content="{$sArticle.articleDetailsID}"/>
<span class="entry--content" itemprop="sku">
{$sArticle.ordernumber}
</span>
{/block}
</li>
{/block}
{* Product attributes fields *}
{block name='frontend_detail_data_attributes'}
{* Product attribute 1 *}
{block name='frontend_detail_data_attributes_attr1'}
{if $sArticle.attr1}
<li class="base-info--entry entry-attribute">
<strong class="entry--label">
{s namespace="frontend/detail/index" name="DetailAttributeField1Label"}{/s}:
</strong>
<span class="entry--content">
{$sArticle.attr1|escape}
</span>
</li>
{/if}
{/block}
{* Product attribute 2 *}
{block name='frontend_detail_data_attributes_attr2'}
{if $sArticle.attr2}
<li class="base-info--entry entry-attribute">
<strong class="entry--label">
{s namespace="frontend/detail/index" name="DetailAttributeField2Label"}{/s}:
</strong>
<span class="entry--content">
{$sArticle.attr2|escape}
</span>
</li>
{/if}
{/block}
{/block}
</ul>
{/block}
</div>
{/block}
</div>
{* Product bundle hook point *}
{block name="frontend_detail_index_bundle"}{/block}
{block name="frontend_detail_index_detail"}
{* Tab navigation *}
{block name="frontend_detail_index_tabs"}
{include file="frontend/detail/tabs.tpl"}
{/block}
{/block}
{* Crossselling tab panel *}
{block name="frontend_detail_index_tabs_cross_selling"}
{$showAlsoViewed = {config name=similarViewedShow}}
{$showAlsoBought = {config name=alsoBoughtShow}}
<div class="tab-menu--cross-selling"{if $sArticle.relatedProductStreams} data-scrollable="true"{/if}>
{* Tab navigation *}
{block name="frontend_detail_index_tabs_navigation"}
<div class="tab--navigation">
{block name="frontend_detail_index_tabs_navigation_inner"}
{block name="frontend_detail_index_related_similiar_tabs"}
{* Tab navigation - Accessory products *}
{block name="frontend_detail_tabs_entry_related"}
{if $sArticle.sRelatedArticles && !$sArticle.crossbundlelook}
<a href="#content--related-products" title="{s namespace="frontend/detail/tabs" name='DetailTabsAccessories'}{/s}" class="tab--link">
{s namespace="frontend/detail/tabs" name='DetailTabsAccessories'}{/s}
<span class="product--rating-count-wrapper">
<span class="product--rating-count">{$sArticle.sRelatedArticles|@count}</span>
</span>
</a>
{/if}
{/block}
{* Similar products *}
{block name="frontend_detail_index_recommendation_tabs_entry_similar_products"}
{if count($sArticle.sSimilarArticles) > 0}
<a href="#content--similar-products" title="{s namespace="frontend/detail/index" name="DetailRecommendationSimilarLabel"}{/s}" class="tab--link">{s namespace="frontend/detail/index" name="DetailRecommendationSimilarLabel"}{/s}</a>
{/if}
{/block}
{/block}
{* Customer also bought *}
{block name="frontend_detail_index_tabs_entry_also_bought"}
{if $showAlsoBought}
<a href="#content--also-bought" title="{s namespace="frontend/detail/index" name="DetailRecommendationAlsoBoughtLabel"}{/s}" class="tab--link">{s namespace="frontend/detail/index" name="DetailRecommendationAlsoBoughtLabel"}{/s}</a>
{/if}
{/block}
{* Customer also viewed *}
{block name="frontend_detail_index_tabs_entry_also_viewed"}
{if $showAlsoViewed}
<a href="#content--customer-viewed" title="{s namespace="frontend/detail/index" name="DetailRecommendationAlsoViewedLabel"}{/s}" class="tab--link">{s namespace="frontend/detail/index" name="DetailRecommendationAlsoViewedLabel"}{/s}</a>
{/if}
{/block}
{* Related product streams *}
{block name="frontend_detail_index_tabs_entry_related_product_streams"}
{foreach $sArticle.relatedProductStreams as $key => $relatedProductStream}
<a href="#content--related-product-streams-{$key}" title="{$relatedProductStream.name}" class="tab--link">{$relatedProductStream.name}</a>
{/foreach}
{/block}
{/block}
</div>
{/block}
{* Tab content container *}
{block name="frontend_detail_index_outer_tabs"}
<div class="tab--container-list">
{block name="frontend_detail_index_inner_tabs"}
{block name='frontend_detail_index_before_tabs'}{/block}
{* Accessory articles *}
{block name="frontend_detail_index_tabs_related"}
{if $sArticle.sRelatedArticles && !$sArticle.crossbundlelook}
<div class="tab--container">
{block name="frontend_detail_index_tabs_related_inner"}
<div class="tab--header">
<a href="#" class="tab--title" title="{s namespace="frontend/detail/tabs" name='DetailTabsAccessories'}{/s}">
{s namespace="frontend/detail/tabs" name='DetailTabsAccessories'}{/s}
<span class="product--rating-count-wrapper">
<span class="product--rating-count">{$sArticle.sRelatedArticles|@count}</span>
</span>
</a>
</div>
<div class="tab--content content--related">{include file="frontend/detail/tabs/related.tpl"}</div>
{/block}
</div>
{/if}
{/block}
{* Similar products slider *}
{if $sArticle.sSimilarArticles}
{block name="frontend_detail_index_tabs_similar"}
<div class="tab--container">
{block name="frontend_detail_index_tabs_similar_inner"}
<div class="tab--header">
<a href="#" class="tab--title" title="{s namespace="frontend/detail/index" name="DetailRecommendationSimilarLabel"}{/s}">{s namespace="frontend/detail/index" name="DetailRecommendationSimilarLabel"}{/s}</a>
</div>
<div class="tab--content content--similar">{include file='frontend/detail/tabs/similar.tpl'}</div>
{/block}
</div>
{/block}
{/if}
{* "Customers bought also" slider *}
{if $showAlsoBought}
{block name="frontend_detail_index_tabs_also_bought"}
<div class="tab--container">
{block name="frontend_detail_index_tabs_also_bought_inner"}
<div class="tab--header">
<a href="#" class="tab--title" title="{s namespace="frontend/detail/index" name='DetailRecommendationAlsoBoughtLabel'}{/s}">{s namespace="frontend/detail/index" name='DetailRecommendationAlsoBoughtLabel'}{/s}</a>
</div>
<div class="tab--content content--also-bought">{action module=widgets controller=recommendation action=bought articleId=$sArticle.articleID}</div>
{/block}
</div>
{/block}
{/if}
{* "Customers similar viewed" slider *}
{if $showAlsoViewed}
{block name="frontend_detail_index_tabs_also_viewed"}
<div class="tab--container">
{block name="frontend_detail_index_tabs_also_viewed_inner"}
<div class="tab--header">
<a href="#" class="tab--title" title="{s namespace="frontend/detail/index" name='DetailRecommendationAlsoViewedLabel'}{/s}">{s namespace="frontend/detail/index" name='DetailRecommendationAlsoViewedLabel'}{/s}</a>
</div>
<div class="tab--content content--also-viewed">{action module=widgets controller=recommendation action=viewed articleId=$sArticle.articleID}</div>
{/block}
</div>
{/block}
{/if}
{* Related product streams *}
{foreach $sArticle.relatedProductStreams as $key => $relatedProductStream}
{block name="frontend_detail_index_tabs_related_product_streams"}
<div class="tab--container" data-tab-id="productStreamSliderId-{$relatedProductStream.id}">
{block name="frontend_detail_index_tabs_related_product_streams_inner"}
<div class="tab--header">
<a href="#" class="tab--title" title="{$relatedProductStream.name}">{$relatedProductStream.name}</a>
</div>
<div class="tab--content content--related-product-streams-{$key}">
{include file='frontend/detail/tabs/product_streams.tpl'}
</div>
{/block}
</div>
{/block}
{/foreach}
{block name='frontend_detail_index_after_tabs'}{/block}
{/block}
</div>
{/block}
</div>
{/block}
</div>
</div>
{/block}

Schritt 4: Erstellen Sie die Datei image.tpl im Detailverzeichnis.

Schreiben Sie diesen Code in die Datei image.tpl.

{extends file='parent:frontend/detail/image.tpl'}
{block name="frontend_detail_image"}
{if $sArticle.template == "bay20Fullpic.tpl"}
{* Product image - Gallery *}
{block name="frontend_detail_image_box"}
{strip}
<div class="image-slider--container{if !$sArticle.image} no--image{/if}{if !count($sArticle.images)} no--thumbnails{/if}">
<div class="image-slider--slide">
{block name='frontend_detail_image_default_image_slider_item'}
<div class="image--box image-slider--item">
{block name='frontend_detail_image_default_image_element'}
{$alt = $sArticle.articleName|escape}
{if $sArticle.image.description}
{$alt = $sArticle.image.description|escape}
{/if}
<span class="image--element"
{if $sArticle.image}
data-img-large="{$sArticle.image.thumbnails[2].source}"
data-img-small="{$sArticle.image.thumbnails[0].source}"
data-img-original="{$sArticle.image.source}"
{/if}
data-alt="{$alt}">
{block name='frontend_detail_image_default_image_media'}
<span class="image--media">
{if isset($sArticle.image.thumbnails)}
{block name='frontend_detail_image_default_picture_element'}
<img srcset="{$sArticle.image.thumbnails[1].sourceSet}" alt="{$alt}" itemprop="image" />
{/block}
{else}
{block name='frontend_detail_image_fallback'}
<img src="{link file='frontend/_public/src/img/no-picture.jpg'}" alt="{$alt}" itemprop="image" />
{/block}
{/if}
</span>
{/block}
</span>
{/block}
</div>
{/block}
{foreach $sArticle.images as $image}
{block name='frontend_detail_images_image_slider_item'}
<div class="image--box image-slider--item">
{block name='frontend_detail_images_image_element'}
{$alt = $sArticle.articleName|escape}
{if $image.description}
{$alt = $image.description|escape}
{/if}
<span class="image--element"
data-img-large="{$image.thumbnails[2].source}"
data-img-small="{$image.thumbnails[0].source}"
data-img-original="{$image.source}"
data-alt="{$alt}">
{block name='frontend_detail_images_image_media'}
<span class="image--media">
{if isset($image.thumbnails)}
{block name='frontend_detail_images_picture_element'}
<img srcset="{$image.thumbnails[1].sourceSet}" alt="{$alt}" itemprop="image" />
{/block}
{else}
{block name='frontend_detail_images_fallback'}
<img src="{link file='frontend/_public/src/img/no-picture.jpg'}" alt="{$alt}" itemprop="image" />
{/block}
{/if}
</span>
{/block}
</span>
{/block}
</div>
{/block}
{/foreach}
</div>
</div>
{/strip}
{/block}
{* Product image - Dot navigation *}
{block name='frontend_detail_image_box_dots'}
{if $sArticle.images}
<div class="image--dots image-slider--dots panel--dot-nav">
<a href="#" class="dot--link"> </a>
{foreach $sArticle.images as $image}
<a href="#" class="dot--link"> </a>
{/foreach}
</div>
{/if}
{/block}
{* Product image - Thumbnails *}
{block name='frontend_detail_image_thumbs'}
{include file="frontend/detail/images.tpl"}
{/block}
{else}
{$smarty.block.parent}
{/if}
{/block}

Schritt 5: Erstellen Sie die Datei detail.less im Verzeichnis less>_modules.

Schreiben Sie diesen Code in die Datei detail.less.

   .bay20--detail-fullpic{
.product--detail-upper.block-group{
text-align: -webkit-center;
.product--image-container.image-slider.product--image-zoom{
width: 100%;
margin:4%;
margin-left: 0;
.js--img-zoom--flyout{
display: none !important;
}
.js--img-zoom--lens{
display: none !important;
}
.image--thumbnails.image-slider--thumbnails{
width: 100%;
height: 70px;
margin: 10px;
text-align: -webkit-center;
.image-slider--thumbnails-slide{
right: 0px;
height: 70px;
.thumbnail--link{
margin-right: 20px;
margin-bottom: 0;
display: inline-block;
}
}
}
.image-slider--slide{
.image--element{
span img{
height: 100%;
}
}
}
.image--dots.image-slider--dots.panel--dot-nav{
padding: 0;
margin-top: 10px;
}
.image-slider--container{
width: 100%;
}
}
.product--buybox.block{
float: inherit;
.product--price.price--unit{
display: none;
}
.product--tax{
display: none;
}
.product--delivery{
display: none;
}
.product--actions{
text-align: -webkit-center;
.action--form{
float:none;
display: inline-block;
}
}
.base-info--entry{
text-align: -webkit-center;
&.entry--sku{
left: -5%;
position: relative;
}
}
}
}
}

Schritt 6: Importieren Sie die Datei detail.less in die Datei all.less.

Schreiben Sie dies in all.less.

@import "_modules/detail";

Hinweis: Speichern Sie die Codes, löschen Sie den Cache, kompilieren Sie das Theme und schon können wir unser neues Design betrachten.

Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns unter +91-8800519180 an, wenn Sie Unterstützung in Bezug auf Shopware 5 und Shopware 6 benötigen. Sie können auch die Shopware 5 Entwicklungsseite besuchen, um die von uns angebotenen Dienstleistungen zu überprüfen.

Cookie	Dauer	Beschreibung
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Wie kann man in Shopware 5 eine eigene Seite mit einer Detailansicht erstellen?

Lassen Sie uns reden

Kundengeschichten

UNSERE ARBEITEN

Telefon :

E-Mail :