mohitj
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

Merge pull request 'refactor: udpate product's page styles' (#5) from abhisheks/theme-elegance:main into main 

Reviewed-on: brooksbingham/theme-elegance#5
pagebuilder
dineshsalunke 2023-11-22 11:12:17 +00:00
parent c0aad51432 1d6f7e98f3
commit 293367ba11
5 changed files with 31 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_dev/elegance.css
View File

@ -28,3 +28,7 @@ a:hover {
a:hover .icon-tabler {
@apply stroke-blue-900;
}
ul {
@apply !list-inside;
}

2
templates/catalog/_partials/product-add-to-cart.tpl
View File

@ -22,7 +22,7 @@
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
<div class="product-add-to-cart flex flex-col gap-4 mt-12 mb-4">
<div class="product-add-to-cart flex flex-col gap-3 mt-12 mb-4">
{if !$configuration.is_catalog}
{block name='product_availability'}

80
templates/catalog/_partials/product-details.tpl
View File

@ -1,81 +1,15 @@
<div class="tab-pane hidden fade{if !$product.description} in active{/if}"
id="product-details"
data-product="{$product.embedded_attributes|json_encode}"
role="tabpanel"
>
{block name='product_reference'}
{if isset($product_manufacturer->id)}
<div class="product-manufacturer">
{if isset($manufacturer_image_url)}
<a href="{$product_brand_url}">
<img src="{$manufacturer_image_url}" class="img img-thumbnail manufacturer-logo" alt="{$product_manufacturer->name}">
</a>
{else}
<label class="label">{l s='Brand' d='Shop.Theme.Catalog'}</label>
<span>
<a href="{$product_brand_url}">{$product_manufacturer->name}</a>
</span>
{/if}
</div>
{/if}
{if isset($product.reference_to_display) && $product.reference_to_display neq ''}
<div class="product-reference">
<label class="label">{l s='Reference' d='Shop.Theme.Catalog'} </label>
<span itemprop="sku">{$product.reference_to_display}</span>
</div>
{/if}
{/block}
{block name='product_quantities'}
{if $product.show_quantities}
<div class="product-quantities">
<label class="label">{l s='In stock' d='Shop.Theme.Catalog'}</label>
<span data-stock="{$product.quantity}" data-allow-oosp="{$product.allow_oosp}">{$product.quantity} {$product.quantity_label}</span>
</div>
{/if}
{/block}
{block name='product_availability_date'}
{if $product.availability_date}
<div class="product-availability-date">
<label>{l s='Availability date:' d='Shop.Theme.Catalog'} </label>
<span>{$product.availability_date}</span>
</div>
{/if}
{/block}
{block name='product_out_of_stock'}
<div class="product-out-of-stock">
{hook h='actionProductOutOfStock' product=$product}
</div>
{/block}
<div class="w-full" id="product-details">
{block name='product_features'}
{if $product.grouped_features}
<section class="product-features">
<p class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</p>
<dl class="data-sheet">
<ul class="product-features list-[square] w-full">
{foreach from=$product.grouped_features item=feature}
<dt class="name">{$feature.name}</dt>
<dd class="value">{$feature.value|escape:'htmlall'|nl2br nofilter}</dd>
<li>
<span class="name inline-flex w-16 font-semibold">{$feature.name}</span>
<span class="value">{$feature.value|escape:'htmlall'|nl2br nofilter}</span>
</li>
{/foreach}
</dl>
</section>
{/if}
{/block}
{* if product have specific references, a table will be added to product details section *}
{block name='product_specific_references'}
{if !empty($product.specific_references)}
<section class="product-features">
<p class="h6">{l s='Specific References' d='Shop.Theme.Catalog'}</p>
<dl class="data-sheet">
{foreach from=$product.specific_references item=reference key=key}
<dt class="name">{$key}</dt>
<dd class="value">{$reference}</dd>
{/foreach}
</dl>
</section>
</ul>
{/if}
{/block}

2
templates/catalog/_partials/product-prices.tpl
View File

@ -23,7 +23,7 @@
* International Registered Trademark & Property of PrestaShop SA
*}
{if $product.show_price}
<div class="product-prices flex flex-col mt-2">
<div class="product-prices flex flex-col">
{block name='product_discount'}
{if $product.has_discount}
<div class="product-discount">

107
templates/catalog/product.tpl
View File

@ -66,10 +66,15 @@
{/block}
</section>
{/block}
<div class="flex flex-col w-full">
<div class="flex flex-col w-full gap-2">
{block name='page_header_container'}
{block name='page_header'}
<h1 class="text-2xl font-normal" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
<div class='flex flex-col'>
<h1 class="text-2xl font-normal" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
{if $product.description_short}
<span class='text-sm'>{$product.description_short nofilter}</span>
{/if}
</div>
{/block}
{/block}
{block name='product_prices'}
@ -77,9 +82,6 @@
{/block}
<div class="product-information">
{block name='product_description_short'}
{/block}
{if $product.is_customizable && count($product.customizations.fields)}
{block name='product_customization'}
{include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations}
@ -114,14 +116,14 @@
{include file='catalog/_partials/product-discounts.tpl'}
{/block}
{block name='product_add_to_cart'}
{include file='catalog/_partials/product-add-to-cart.tpl'}
{/block}
{block name='product_additional_info'}
{include file='catalog/_partials/product-additional-info.tpl'}
{/block}
{block name='product_add_to_cart'}
{include file='catalog/_partials/product-add-to-cart.tpl'}
{/block}
{* Input to refresh product HTML removed, block kept for compatibility with themes *}
{block name='product_refresh'}{/block}
</form>
@ -134,86 +136,13 @@
{/block}
{block name='product_tabs'}
<div class="tabs flex flex-col gap-4 mt-16">
<ul class="nav nav-tabs flex justify-around" role="tablist">
{if $product.description}
<li class="nav-item text-base font-semibold text-blue-950">
<a
class="nav-link{if $product.description} active{/if}"
data-toggle="tab"
href="#description"
role="tab"
aria-controls="description"
{if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a>
</li>
{/if}
<li class="nav-item text-base font-semibold text-gray-500">
<a
class="nav-link{if !$product.description} active{/if}"
data-toggle="tab"
href="#product-details"
role="tab"
aria-controls="product-details"
{if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a>
</li>
{if $product.attachments}
<li class="nav-item">
<a
class="nav-link"
data-toggle="tab"
href="#attachments"
role="tab"
aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a>
</li>
{/if}
{foreach from=$product.extraContent item=extra key=extraKey}
<li class="nav-item">
<a
class="nav-link"
data-toggle="tab"
href="#extra-{$extraKey}"
role="tab"
aria-controls="extra-{$extraKey}">{$extra.title}</a>
</li>
{/foreach}
</ul>
<div class="tab-content" id="tab-content">
<div class="tab-pane fade in{if $product.description} active{/if}" id="description" role="tabpanel">
{block name='product_description'}
<div class="product-description">{$product.description nofilter}</div>
{/block}
</div>
{block name='product_details'}
{include file='catalog/_partials/product-details.tpl'}
{/block}
{block name='product_attachments'}
{if $product.attachments}
<div class="tab-pane fade in" id="attachments" role="tabpanel">
<section class="product-attachments">
<p class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</p>
{foreach from=$product.attachments item=attachment}
<div class="attachment">
<h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
<p>{$attachment.description}</p
<a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
{l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
</a>
</div>
{/foreach}
</section>
</div>
{/if}
{/block}
{foreach from=$product.extraContent item=extra key=extraKey}
<div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" role="tabpanel" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
{$extra.content nofilter}
</div>
{/foreach}
</div>
<div class='w-full flex items-center flex-col mt-12'>
<h1 class='text-base font-semibold text-gray-600'>
Description
</h1>
{block name='product_details'}
{include file='catalog/_partials/product-details.tpl'}
{/block}
</div>
{/block}
</div>