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

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="">
{/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>
<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}
{/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}