diff --git a/templates/catalog/product.tpl b/templates/catalog/product.tpl index 7d374a4..69bbf25 100644 --- a/templates/catalog/product.tpl +++ b/templates/catalog/product.tpl @@ -52,36 +52,24 @@ <section id="main" itemscope itemtype="https://schema.org/Product"> <meta itemprop="url" content="{$product.url}"> - <div class="row product-container"> - <div class="col-md-6"> + <div class="flex gap-8 flex-wrap lg:flex-nowrap"> {block name='page_content_container'} - <section class="page-content" id="content"> + <section class="flex w-full" id="content"> {block name='page_content'} <!-- @todo: use include file='catalog/_partials/product-flags.tpl'} --> {block name='product_flags'} - <ul class="product-flags"> - {foreach from=$product.flags item=flag} - <li class="product-flag {$flag.type}">{$flag.label}</li> - {/foreach} - </ul> {/block} {block name='product_cover_thumbnails'} {include file='catalog/_partials/product-cover-thumbnails.tpl'} {/block} - <div class="scroll-box-arrows"> - <i class="material-icons left"></i> - <i class="material-icons right"></i> - </div> - {/block} </section> {/block} - </div> - <div class="col-md-6"> + <div class="flex flex-col w-full"> {block name='page_header_container'} {block name='page_header'} - <h1 class="h1" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1> + <h1 class="text-2xl font-normal" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1> {/block} {/block} {block name='product_prices'} @@ -90,7 +78,6 @@ <div class="product-information"> {block name='product_description_short'} - <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div> {/block} {if $product.is_customizable && count($product.customizations.fields)} @@ -147,10 +134,10 @@ {/block} {block name='product_tabs'} - <div class="tabs"> - <ul class="nav nav-tabs" role="tablist"> + <div class="tabs flex flex-col gap-4 mt-16 lg:mt-36"> + <ul class="nav nav-tabs flex justify-around" role="tablist"> {if $product.description} - <li class="nav-item"> + <li class="nav-item text-lg font-bold text-blue-950"> <a class="nav-link{if $product.description} active{/if}" data-toggle="tab" @@ -160,7 +147,7 @@ {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a> </li> {/if} - <li class="nav-item"> + <li class="nav-item text-lg font-bold text-gray-500"> <a class="nav-link{if !$product.description} active{/if}" data-toggle="tab" @@ -235,9 +222,9 @@ {block name='product_accessories'} {if $accessories} - <section class="product-accessories clearfix"> - <p class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</p> - <div class="products"> + <section class="product-accessories mt-24"> + <p class="text-2xl font-bold">{l s='Related Products' d='Shop.Theme.Catalog'}</p> + <div class="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> {foreach from=$accessories item="product_accessory"} {block name='product_miniature'} {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory} @@ -253,7 +240,6 @@ {/block} {block name='product_images_modal'} - {include file='catalog/_partials/product-images-modal.tpl'} {/block} {block name='page_footer_container'}