forked from brooksbingham/theme-elegance
Merge pull request 'refactor: udpate product's page' (#1) from abhisheks/theme-elegance:main into main
Reviewed-on: brooksbingham/theme-elegance#1staging
commit
587c9ce147
|
@ -0,0 +1,43 @@
|
|||
|
||||
{**
|
||||
* Copyright since 2007 PrestaShop SA and Contributors
|
||||
* PrestaShop is an International Registered Trademark & Property of PrestaShop SA
|
||||
*
|
||||
* NOTICE OF LICENSE
|
||||
*
|
||||
* This source file is subject to the Academic Free License version 3.0
|
||||
* that is bundled with this package in the file LICENSE.md.
|
||||
* It is also available through the world-wide-web at this URL:
|
||||
* https://opensource.org/licenses/AFL-3.0
|
||||
* If you did not receive a copy of the license and are unable to
|
||||
* obtain it through the world-wide-web, please send an email
|
||||
* to license@prestashop.com so we can send you a copy immediately.
|
||||
*
|
||||
* @author PrestaShop SA and Contributors <contact@prestashop.com>
|
||||
* @copyright Since 2007 PrestaShop SA and Contributors
|
||||
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
|
||||
*}
|
||||
|
||||
<div class="w-full flex justify-around">
|
||||
{foreach from=$blocks item=$block key=$key}
|
||||
<div{if $block['type_link'] !== $LINK_TYPE_NONE && !empty($block['link'])} style="cursor:pointer;" onclick="window.open('{$block['link']}')"{/if} class='flex flex-wrap md:flex-nowrap gap-2 items-center justify-center'>
|
||||
<span class="item-product w-5 h-5">
|
||||
{if $block['icon'] != 'undefined'}
|
||||
{if $block['custom_icon']}
|
||||
<img {if $block['is_svg']}class="svg" {/if}src="{$block['custom_icon']}">
|
||||
{elseif $block['icon']}
|
||||
<img class="svg" src="{$block['icon']}">
|
||||
{/if}
|
||||
{/if}
|
||||
</span>
|
||||
{if empty($block['description'])}
|
||||
<p class="block-title text-sm" >{$block['title']}</p>
|
||||
{else}
|
||||
<div class='flex flex-col items-center md:items-start'>
|
||||
<span class="block-title text-sm" >{$block['title']}</span>
|
||||
<p class='text-xs'>{$block['description'] nofilter}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
|
@ -22,14 +22,50 @@
|
|||
* @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">
|
||||
<div class="product-add-to-cart flex flex-col gap-4 mt-12 mb-4">
|
||||
{if !$configuration.is_catalog}
|
||||
|
||||
{block name='product_availability'}
|
||||
<span id="product-availability" class='flex w-full justify-center items-center gap-1 text-xl'>
|
||||
{if $product.show_availability && $product.availability_message}
|
||||
{if $product.availability == 'available'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-box-seam" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5"></path>
|
||||
<path d="M12 12l8 -4.5"></path>
|
||||
<path d="M8.2 9.8l7.6 -4.6"></path>
|
||||
<path d="M12 12v9"></path>
|
||||
<path d="M12 12l-8 -4.5"></path>
|
||||
</svg>
|
||||
{elseif $product.availability == 'last_remaining_items'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-hourglass" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M6.5 7h11"></path>
|
||||
<path d="M6.5 17h11"></path>
|
||||
<path d="M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1z"></path>
|
||||
<path d="M6 4v2a6 6 0 1 0 12 0v-2a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1z"></path>
|
||||
</svg>
|
||||
{else}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-package-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M8.812 4.793l3.188 -1.793l8 4.5v8.5m-2.282 1.784l-5.718 3.216l-8 -4.5v-9l2.223 -1.25"></path>
|
||||
<path d="M14.543 10.57l5.457 -3.07"></path>
|
||||
<path d="M12 12v9"></path>
|
||||
<path d="M12 12l-8 -4.5"></path>
|
||||
<path d="M16 5.25l-4.35 2.447m-2.564 1.442l-1.086 .611"></path>
|
||||
<path d="M3 3l18 18"></path>
|
||||
</svg>
|
||||
{/if}
|
||||
{$product.availability_message}
|
||||
{/if}
|
||||
</span>
|
||||
{/block}
|
||||
|
||||
{block name='product_quantity'}
|
||||
<div class="flex flex-col gap-4 my-12">
|
||||
<div class="flex w-full flex-col gap-4">
|
||||
<div class="add">
|
||||
<button
|
||||
class="add-to-cart w-full h-12 bg-blue-950 text-white text-base font-light"
|
||||
class="add-to-cart w-full h-12 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light"
|
||||
data-button-action="add-to-cart"
|
||||
type="submit"
|
||||
{if !$product.add_to_cart_url}
|
||||
|
@ -54,21 +90,6 @@
|
|||
</div>
|
||||
{/block}
|
||||
|
||||
{block name='product_availability'}
|
||||
<span id="product-availability">
|
||||
{if $product.show_availability && $product.availability_message}
|
||||
{if $product.availability == 'available'}
|
||||
<i class="material-icons rtl-no-flip product-available"></i>
|
||||
{elseif $product.availability == 'last_remaining_items'}
|
||||
<i class="material-icons product-last-items"></i>
|
||||
{else}
|
||||
<i class="material-icons product-unavailable"></i>
|
||||
{/if}
|
||||
{$product.availability_message}
|
||||
{/if}
|
||||
</span>
|
||||
{/block}
|
||||
|
||||
{block name='product_minimal_quantity'}
|
||||
<p class="product-minimal-quantity">
|
||||
{if $product.minimal_quantity > 1}
|
||||
|
|
|
@ -23,12 +23,12 @@
|
|||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
{if $product.show_price}
|
||||
<div class="product-prices">
|
||||
<div class="product-prices flex flex-col mt-2">
|
||||
{block name='product_discount'}
|
||||
{if $product.has_discount}
|
||||
<div class="product-discount">
|
||||
{hook h='displayProductPriceBlock' product=$product type="old_price"}
|
||||
<span class="regular-price ">{$product.regular_price}</span>
|
||||
<span class="regular-price line-through text-red-700/50 leading-none">{$product.regular_price}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
@ -43,14 +43,14 @@
|
|||
<link itemprop="availability" href="{$product.seo_availability}"/>
|
||||
<meta itemprop="priceCurrency" content="{$currency.iso_code}">
|
||||
|
||||
<div class="current-price">
|
||||
<div class="current-price flex gap-2 items-baseline">
|
||||
<span itemprop="price" class="text-2xl font-normal" content="{$product.price_amount}">{$product.price}</span>
|
||||
|
||||
{if $product.has_discount}
|
||||
{if $product.discount_type === 'percentage'}
|
||||
<span class="discount discount-percentage">{l s='Save %percentage%' d='Shop.Theme.Catalog' sprintf=['%percentage%' => $product.discount_percentage_absolute]}</span>
|
||||
{else}
|
||||
<span class="discount discount-amount">
|
||||
<span class="discount discount-amount text-sm">
|
||||
{l s='Save %amount%' d='Shop.Theme.Catalog' sprintf=['%amount%' => $product.discount_to_display]}
|
||||
</span>
|
||||
{/if}
|
||||
|
|
|
@ -134,7 +134,7 @@
|
|||
{/block}
|
||||
|
||||
{block name='product_tabs'}
|
||||
<div class="tabs flex flex-col gap-4 mt-16 lg:mt-36">
|
||||
<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">
|
||||
|
@ -222,9 +222,9 @@
|
|||
|
||||
{block name='product_accessories'}
|
||||
{if $accessories}
|
||||
<section class="product-accessories mt-24">
|
||||
<section class="product-accessories flex flex-col gap-8 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">
|
||||
<div class="products grid grid-cols-1 md:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
|
||||
{foreach from=$accessories item="product_accessory"}
|
||||
{block name='product_miniature'}
|
||||
{include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
|
||||
|
|
Loading…
Reference in New Issue