Création du module HookProduitsSaison

This commit is contained in:
2021-04-21 17:18:14 +02:00
parent f418229316
commit 678dce5e18
10 changed files with 128 additions and 51 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 MiB

View File

@@ -6,8 +6,12 @@
<hooks>
<hook id="hookproduitssaison.hook.front">
<tag name="hook.event_listener" event="main.head-bottom" templates="css:assets/css/styles.css"/>
<tag name="hook.event_listener" event="home.body" templates="render:home-body.html" />
</hook>
<hook id="hookproduitssaison.hook.js" class="HookProduitsSaison\Hook\FrontHook" scope="request">
<tag name="hook.event_listener" event="main.javascript-initialization" type="front"/>
</hook>
</hooks>
</config>

View File

@@ -0,0 +1,22 @@
<?php
namespace HookProduitsSaison\Hook;
use Thelia\Core\Event\Hook\HookRenderEvent;
use Thelia\Core\Hook\BaseHook;
/**
* Class FrontHook
* @package HookProduitsSaison\Hook
*/
class FrontHook extends BaseHook
{
public function onMainJavascriptInitialization(HookRenderEvent $event)
{
$event->add(
$this->render('home-body-js.html')
);
}
}

View File

@@ -1,4 +1,5 @@
<?php
return array(
// 'an english string' => 'La traduction française de la chaine',
'Our selection' => 'Notre sélection de produits',
);

View File

@@ -0,0 +1,34 @@
#section-produits-saison {
width: 95%;
text-align: center;
margin: auto;
}
div.category-choice {
display: flex;
justify-content: center;
margin-top: 10px;
margin-bottom: 20px;
}
div.category-choice > ul {
list-style: none;
display: inline-flex;
padding-inline-start: 0px !important;
}
div.category-choice > ul li {
width: auto;
margin: 2px;
padding: 5px 20px;
border: 1px solid #95c11e;
border-radius: 5px;
cursor: pointer;
background-color: white;
color: #95c11e;
}
div.category-choice > ul li.active {
background-color: #95c11e;
color: white;
}

View File

@@ -0,0 +1,19 @@
<script>
$(document).ready(function() {
$("div.category-choice ul li:first").addClass('active');
$("#section-produits-saison div.products-content:not(:first)").hide();
});
$("div.category-choice ul li").click(function() {
var self = this.id;
$("div.category-choice ul li").siblings().removeClass('active');
$(this).addClass('active');
$("#section-produits-saison div.products-content").hide();
$("#section-produits-saison div.products-content[id="+ self +"]").show();
});
</script>

View File

@@ -1,56 +1,43 @@
{ifloop rel="produits_saison"}
<section id="produits-saison">
<section id="section-produits-saison" class="grid">
<div class="products-heading">
<h2>{intl l="Our selection" d="hookproduitssaison"}</h2>
</div>
<div class="products-content">
<ul class="list-unstyled products-grid row">
{loop name="produits_saison" type="selection_container" code="fruits"}
<li class="item col-md-3 col-sm-4">
<article itemscope itemtype="http://schema.org/Product">
COUNT = {$SELECTION_COUNT}
{*
{loop type="image" name="selection_image" lang="$edit_language_id" source="selection" source_id=$SELECTION_CONTAINER_ID width="70" height="50" resize_mode="borders" limit="1" visible="true"}
<img class="img-thumbnail" src="{$IMAGE_URL nofilter}" href="">
<div class="category-choice">
<ul>
{loop name="categories_loop" type="category" visible="yes"}
{loop name="pre_selection_$TITLE" type="selection_list" code="$TITLE" without_container="true"}
{if $LOOP_COUNT > 0}
<li id="{$TITLE}">{$TITLE}</li>
{/if}
{/loop}
*}
<!-- -->
<!-- <a href="{$URL}" itemprop="url" tabindex="-1" class="product-image overlay">-->
<!-- {ifloop rel="image_product_new" }-->
<!-- <img itemprop="image" class="img-responsive center-block"-->
<!-- {loop name="image_product_new" type="image" limit="1" product="{$ID}" force_return="true" width="280" height="196" resize_mode="borders"}-->
<!-- src="{$IMAGE_URL}"-->
<!-- {/loop}-->
<!-- alt="Product #{$LOOP_COUNT}" >-->
<!-- {/ifloop}-->
<!-- {elseloop rel="image_product_new"}-->
<!-- <img itemprop="image" class="img-responsive center-block" src="{image file='assets/dist/img/280x196.png'}" alt="Product #{$LOOP_COUNT}">-->
<!-- {/elseloop}-->
<!-- </a>-->
<!-- <a href="{$URL}" class="product-info">-->
<!-- <h3 class="name"><span itemprop="name">{$TITLE}</span></h3>-->
<!-- <div class="short-description" itemprop="description">{$CHAPO}</div>-->
<!-- <div class="product-price">-->
<!-- <div class="price-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">-->
<!-- {loop type="category" name="category_tag" id=$DEFAULT_CATEGORY}-->
<!-- <meta itemprop="category" content="{$TITLE}">-->
<!-- {/loop}-->
<!-- <meta itemprop="itemCondition" itemscope itemtype="http://schema.org/NewCondition">-->
<!-- <meta itemprop="priceCurrency" content="{currency attr="code"}">-->
<!-- <link itemprop="availability" href="http://schema.org/InStock" content="in_stock" />-->
<!-- <span class="regular-price"><span itemprop="price" class="price">{format_money number=$BEST_TAXED_PRICE}</span></span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </a>-->
</article>
</li>
{/loop}
</ul>
</div>
{loop name="categories_loop" type="category" visible="yes"}
{ifloop rel="selection_$TITLE"}
{loop name="selection_$TITLE" type="selection_list" code="$TITLE" without_container="true"}
<div class="products-content" id="{$TITLE}">
<ul class="products-grid list-unstyled row">
{loop type="selection_product_related" name="selection_products" selection_id=$SELECTION_ID}
{loop name="product_loop" type="product" id=$PRODUCT_ID limit="1"}
{include file="includes/single-product.html" colClass="col-md-3 col-sm-4" product_id=$PRODUCT_ID hasBtn=false hasDescription=false width="218" height="146"}
{/loop}
{/loop}
</ul>
</div>
{/loop}
{/ifloop}
{/loop}
{*
{loop name="selection_cont1" type="selection_container" code="cont-1" without_container="false"}
{loop name="selection_loop" type="selection_list" container_id=$SELECTION_CONTAINER_ID}
<a href="{$SELECTION_URL}">{$SELECTION_TITLE}</a>
{/loop}
{/loop}
*}
</section>
{/ifloop}

View File

@@ -1 +1 @@
@font-face{font-family:sofia_prolight;src:url(../fonts/sofiapro/sofiapro-light-webfont.woff2) format('woff2'),url(../fonts/sofiapro/sofiapro-light-webfont.woff) format('woff');font-weight:400;font-style:normal}aside.col-left,div.product-options,footer.footer-info,section.category-description,ul.pager{display:none}html{font-family:sofia_prolight,sans-serif!important}#products-new .overlay:after,#products-offer .overlay:after,#products-upsell .overlay:after,body{font-family:sofia_prolight,'Open Sans',sans-serif!important}div.container{width:90%!important}@media (min-width:992px){.header__main{width:90%}}@media (min-width:768px){.header__content{flex-direction:column}}.header__content{display:flex}.header__main{align-items:center;display:flex;flex-direction:row;justify-content:space-between}.header__secondary{display:inline-flex}.overlay:before{background-color:rgba(128,189,138,.4)}.navbar-default{background-color:transparent}.navbar li>a.home:before{display:none}.nav>li{text-transform:uppercase;font-size:1.72rem}.navbar-customer{display:flex;flex-direction:column;text-align:center}.navbar-customer>li>a{text-transform:none}.header__content .container-fluid{padding-left:0;padding-right:0}.navbar-form .form-control{width:150px}.logo-boutique{width:160px}.navbar{margin-bottom:0}.glyphicon,a{color:#95c11e}.btn{border-radius:5px;border-color:#95c11e;border-left:1px solid #95c11e}.btn-default{color:#3c3c3b;background-color:#fff}.btn-default:active,.btn-default:focus,.btn-default:hover{color:#fff;background-color:#3c3c3b;text-decoration:none}.btn-primary{background-color:#95c11e;color:#fff}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background-color:#fff;border-color:#95c11e;color:#95c11e}.btn-primary[disabled]:focus,.btn-primary[disabled]:hover{background-color:#95c11e;border-color:#95c11e;color:#fff}.btn-link:focus,.btn-link:hover{color:#95c11e}.navbar-default .navbar-nav>li>a{color:#3c3c3b}.nav>li>a:focus,.nav>li>a:hover,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{background-color:#95c11e;color:#fff}.breadcrumb{text-align:center;font-size:large;margin-bottom:30px}.checkout-progress .btn-step.active{background:#95c11e}.toolbar .amount{color:#95c11e}.grid #category-products .item>article .product-info .name{height:1.5em}.product-title,.product-title:active,.product-title:hover{text-decoration:none;color:#3c3c3b}.price,.table-cart tbody td.subprice .price,.table-cart thead th.subprice,.table-order tbody td.subprice .price,.table-order thead th.subprice{color:#95c11e}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{background-color:#95c11e;border-color:#95c11e}#search-button{padding-top:15px;padding-bottom:0}#search-button>input[type=search]{display:none}#search-button:hover>input[type=search]{display:inline-flex}
@font-face{font-family:sofia_prolight;src:url(../fonts/sofiapro/sofiapro-light-webfont.woff2) format('woff2'),url(../fonts/sofiapro/sofiapro-light-webfont.woff) format('woff');font-weight:400;font-style:normal}aside.col-left,div.product-options,footer.footer-info,section.category-description,ul.pager{display:none}html{font-family:sofia_prolight,sans-serif!important}#products-new .overlay:after,#products-offer .overlay:after,#products-upsell .overlay:after,body{font-family:sofia_prolight,'Open Sans',sans-serif!important}div.container{width:90%!important}@media (min-width:992px){.header__main{width:90%}}@media (min-width:768px){.header__content{flex-direction:column}}.header__content{display:flex}.header__main{align-items:center;display:flex;flex-direction:row;justify-content:space-between}.header__secondary{display:inline-flex}.overlay:before{background-color:rgba(128,189,138,.4)}.navbar-default{background-color:transparent}.navbar li>a.home:before{display:none}.navbar li{font-size:1.72rem}.nav>li{text-transform:uppercase}.navbar-customer{display:flex;flex-direction:column;text-align:center}.navbar-customer>li>a{text-transform:none}.header__content .container-fluid{padding-left:0;padding-right:0}.navbar-form .form-control{width:150px}.logo-boutique{width:160px}.navbar{margin-bottom:0}.glyphicon,a{color:#95c11e}.btn{border-radius:5px;border-color:#95c11e;border-left:1px solid #95c11e}.btn-default{color:#3c3c3b;background-color:#fff}.btn-default:active,.btn-default:focus,.btn-default:hover{color:#fff;background-color:#3c3c3b;text-decoration:none}.btn-primary{background-color:#95c11e;color:#fff}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background-color:#fff;border-color:#95c11e;color:#95c11e}.btn-primary[disabled]:focus,.btn-primary[disabled]:hover{background-color:#95c11e;border-color:#95c11e;color:#fff}.btn-link:focus,.btn-link:hover{color:#95c11e}.navbar-default .navbar-nav>li>a{color:#3c3c3b}.nav>li>a:focus,.nav>li>a:hover,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{background-color:#95c11e;color:#fff}.breadcrumb{text-align:center;font-size:large;margin-bottom:30px}.checkout-progress .btn-step.active{background:#95c11e}.toolbar .amount{color:#95c11e}.grid #category-products .item>article .product-info .name{height:1.5em}.product-title,.product-title:active,.product-title:hover{text-decoration:none;color:#3c3c3b}.price,.table-cart tbody td.subprice .price,.table-cart thead th.subprice,.table-order tbody td.subprice .price,.table-order thead th.subprice{color:#95c11e}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{background-color:#95c11e;border-color:#95c11e}.products-heading{text-transform:uppercase;text-align:center}.products-heading>h2{color:#3c3c3b;font-weight:900}#search-button{padding-top:15px;padding-bottom:0}#search-button>input[type=search]{display:none}#search-button:hover>input[type=search]{display:inline-flex}

View File

@@ -72,9 +72,12 @@ div.container {
.navbar li>a.home:before {
display: none;
}
.navbar li {
font-size: 1.72rem;
}
.nav>li {
text-transform: uppercase;
font-size: 1.72rem;
}
.navbar-customer {
display: flex;
@@ -183,6 +186,14 @@ div.container {
color : #95c11e;
}
.products-heading {
text-transform: uppercase;
text-align: center;
}
.products-heading > h2{
color: #3c3c3b;
font-weight: 900;
}
#search-button {
padding-top: 15px;

View File

@@ -19,7 +19,6 @@
<img itemprop="image" src="{image file='assets/dist/img/218x146.png'}" class="img-responsive" alt="{$productTitle}">
{/elseloop}
</a>
<div class="product-info col-sm-6">
<a href="{$URL nofilter}" class="product-title"><h2 class="name"><span itemprop="name">{$productTitle}</span></h2></a>
{if $hasDescription}