Commit 1bbdde10 authored by Nahla Shiri's avatar Nahla Shiri

correction js + css + fiche technique

parent 43366f80
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -63,6 +63,14 @@
padding: 0px;
color: #182566;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.product-details .list {overflow: -moz-scrollbars-none;}
@keyframes fadein {
from {
opacity:0;
......@@ -700,10 +708,10 @@ nav ul ul{
display: none;
width: 190px;
}
nav ul ul li:before{
/*nav ul ul li:before{
content: "•";
padding-right: 5px;
}
}*/
nav ul ul li {
font-size: 14px;
font-weight: 300;
......@@ -791,6 +799,10 @@ VII/ Pages...............ALL pages
========================================================================== */
/* --------------*/ /* ---------->>> HOME <<<-----------*/ /* --------------*/
#home {
background: rgba(7,17,48,0.5);
}
.img-wrapper{
height: 100vh;
background-size: cover;
......@@ -865,20 +877,36 @@ aside.news-wrapper {
height: 100%;
}
.product-images{
width: 59%;
width: 59% !important;
padding: 39px;
opacity: 0;
text-align: center;
position: relative;
}
.product-slides{
width: 80%;
margin: 0 auto;
position: relative;
padding-left: 60px;
.product-images .close-panel{
position: absolute;
left: 5%;
}
.woocommerce-product-details__short-description {
display: none;
}
.product-slides .product-header {
text-align: left;
margin-left: 35px;
}
.product-slides {
width: 580px;
margin: 0 auto;
position: relative;
padding-left: 25px;
}
.product-header{
color: #182566;
padding-bottom: 33px;
padding-top: 22px;
padding: 22px 30px 33px;
}
.product-header h3{
font-size: 25px;
......@@ -889,8 +917,8 @@ aside.news-wrapper {
position: relative;
}
#slides{
/* width: 80%;*/
width: 500px;
width: 415px;
/*width: 500px;*/
height: 100%;
margin: 0 auto;
}
......@@ -900,7 +928,7 @@ aside.news-wrapper {
margin: 0 auto;
}
.element-slider{
height: 500px;
height: 415px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
......@@ -970,7 +998,7 @@ aside.news-wrapper {
margin-bottom: 12px;
border-radius: 20px;
position: relative;
padding: 3px 0px;
//padding: 3px 0px;
/*padding: 3px 10px 4px 3px; */
cursor: pointer;
text-align: center;
......@@ -979,6 +1007,7 @@ aside.news-wrapper {
width: 25px;
display: block;
height: 25px;
line-height: 25px;
}
.nav-slider ul li.active{
background: #FF6A5F;
......@@ -989,8 +1018,8 @@ aside.news-wrapper {
}
.nav-slider ul li:hover{
background: #FF6A5F;
width: 100%;
padding-right: 13px;
width: 150%;
padding-right: 10px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
......@@ -1059,14 +1088,21 @@ aside.news-wrapper {
}
.product-details .list{
width: 50%;
padding: 40px 30px;
padding: 40px 0px;
position: relative;
height: 100%;
background: #fff;
overflow-y: auto;
overflow-y: hidden;
opacity: 0;
border-left: 1px solid rgba(26,26,26,0.1);
}
.product-details .list ul {
overflow-y: scroll;
max-height: 560px;
margin-right: -17px;
}
.border-l:before{
content: '';
display: block;
......@@ -1101,10 +1137,31 @@ aside.news-wrapper {
margin: 0 auto;
position: relative;
}
.pa_format ul li{
text-align: center;
margin-bottom: 25px;
color: #313D7A;
.pa_format ul li {
text-align: center;
color: #313D7A;
max-width: 85%;
}
.pa_format ul li label {
overflow: hidden;
display: block;
vertical-align: text-top;
}
label.chevron.bottom {
display: block;
width: 120%;
}
.pa_format ul li img {
vertical-align: top;
margin-top: -50px;
}
.pa_format ul li:last-of-type{
margin-bottom: 20px;
}
.pa_format li.disabled{
color: rgba(26,26,26,0.2);
......@@ -1165,7 +1222,7 @@ aside.news-wrapper {
.product-info .info-content h2{
font-size: 20px;
line-height: 24px;
letter-spacing: 2px;
letter-spacing: 1px;
text-transform: uppercase;
}
.product-info .info-content h3{
......@@ -1184,6 +1241,11 @@ aside.news-wrapper {
.product-info .details p{
padding-bottom: 6px;
}
.entry-summary .price {
font-size: 0;
}
.product-info .price{
font-size: 20px;
line-height: 24px;
......@@ -1340,6 +1402,7 @@ aside.news-wrapper {
-moz-appearance:none;
appearance:none;
position: relative;
margin-left: -15px;
}
.reset_variations, .quantity{
display: none !important;
......@@ -1592,6 +1655,44 @@ aside.news-wrapper {
display: none;
}
.filter-bloc .bloc-content ul {
overflow-y: auto;
max-height: 300px;
overflow-x: hidden;
}
.filter-bloc .list-color-filter li {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
cursor: pointer;
text-align: center;
margin-bottom: 4px;
margin-right: 3px;
}
.filter-bloc .list-color-filter li.selected:before {
content: '\2713';
color: #fff;
margin: 0 auto;
font-size: 9px;
margin-bottom: 0px;
}
.filter-bloc .list-color-filter li:before {
content: '';
}
.filter-bloc .list-color-filter li:last-child {
width: 100%;
margin-top: 8px;
text-align: center;
font-size: 9px;
letter-spacing: 0.2px;
}
.filter-bloc ul li {
display: block;
padding-bottom: 2px;
......@@ -1629,6 +1730,10 @@ aside.news-wrapper {
cursor: pointer;
letter-spacing: 0.2px;
}
/******NS***********/
/*******************/
.cover-wrapper{
position: absolute;
left: 0;
......@@ -1689,7 +1794,7 @@ aside.news-wrapper {
.right-container .right-panel{
position: absolute;
right: 0;
padding: 0px 17px;
padding: 0px 15px;
padding-bottom: 100px;
}
.panel section > h2{
......
......@@ -157,9 +157,11 @@ $(function(){
$this.addClass('active');
$('.filter-bloc .bloc-content').slideUp('slow');
$this.find('.bloc-content').slideDown('slow');
$('.commercial').slideUp('slow');
}else{
$this.removeClass('active');
$this.find('.bloc-content').slideUp('slow');
//$('.commercial').slideDown('slow');
}
}).on('click','.filter-bloc li:not(.disabled,.reinit)',function(e){
......
jQuery( document ).ready( function() {
jQuery( document ).on('click',".download_file", function() {
var id ;
var download_link = jQuery( '.download_file_link' ).attr('href');
var current_var = jQuery( '.download_file_link' ).attr('id');
var variation_id = jQuery( 'input[name="variation_id"]' ).val();
if(variation_id == 0)
jQuery(document).ready(function() {
jQuery(document).on('click', ".download_file", function() {
var id;
var download_link = jQuery('.download_file_link').attr('href');
var current_var = jQuery('.download_file_link').attr('id');
var variation_id = jQuery('input[name="variation_id"]').val();
if (variation_id == 0)
id = current_var;
else
id = variation_id;
var link = download_link+'?variation_id='+id;
window.open(link, '_blank');
var link = download_link + 'variation_id=' + id;
window.open(link, '_blank');
return false;
return false;
});
jQuery(document ).on('change','.color-list input,.format-list input ', function() {
var varID = jQuery( 'input[name="variation_id"]' ).val();
if(varID != 0 ){
var price = jQuery('.woocommerce-variation-price .woocommerce-Price-amount').text();
var pq = jQuery('.woocommerce-variation-description').text();
jQuery('.price .crete').text(price);
jQuery('.pq').text(pq);
}
var name= jQuery(this).attr('name');
if (jQuery(this).is(':checked') && name =='attribute_pa_couleur'){
jQuery('.info-color').text(jQuery(this).attr('value'));
jQuery(document).on('change', '.color-list input,.format-list input ', function() {
var varID = jQuery('input[name="variation_id"]').val();
if (varID != 0) {
var price = jQuery('.woocommerce-variation-price .woocommerce-Price-amount').text();
var pq = jQuery('.woocommerce-variation-description').text();
jQuery('.price .crete').text(price);
jQuery('.pq').text(pq);
}
var name = jQuery(this).attr('name');
if (jQuery(this).is(':checked') && name == 'attribute_pa_couleur') {
jQuery('.info-color').text(jQuery(this).attr('value'));
}
if (jQuery(this).is(':checked') && name == 'attribute_pa_format') {
jQuery('.info-format').text(jQuery(this).attr('value'));
jQuery('.info-format-txt').text(jQuery(this).attr('value'));
}
});
jQuery("#search-btn").on('click', function() {
jQuery('article').show();
jQuery('.list-animation section').show();
jQuery('article').removeClass('in_search');
//filtre couleur
var tabcolor = [];
i = 0;
jQuery(".list-color-filter .selected").each(function() {
tabcolor[i++] = jQuery(this).attr('data-color');
});
//console.log(tabcolor);
jQuery(".product-list article li").each(function() {
var product_color = jQuery(this).attr('data-color');
if (jQuery.inArray(product_color, tabcolor) >= 0) {
jQuery(this).closest('article').addClass('in_search');
}
if (jQuery(this).is(':checked') && name =='attribute_pa_format'){
jQuery('.info-format').text(jQuery(this).attr('value'));
jQuery('.info-format-txt').text(jQuery(this).attr('value'));
});
if (tabcolor.length > 0)
{
jQuery('article:not(.in_search)').hide();
jQuery('.list-animation section').each(function() {
if (jQuery(this).find('article.in_search').length == 0) {
jQuery(this).hide();
}
});
}
});
});
\ No newline at end of file
......@@ -47,12 +47,16 @@ $(function(){
}
})
}
$.fn.selectFormat = function(){
$(this).on('click',function(){
var actifImage = $(this).find('img').data('img-active'),
initialImage = $(this).find('img').data('img');
$(this).parent().parent().find('li').each(function(){
img = $(this).find('img');
img.attr('src',img.data('img'));
})
$(this).parent().parent().find('li').removeClass('selected');
......@@ -88,11 +92,13 @@ $(function(){
tl = new TimelineMax()
tl.staggerFromTo('.slides-wrapper .gallery article',0.3,{opacity:0,y:100},{opacity:1,y:0},0.1,0);
tl.fromTo('.gallery',0.5,{opacity:0,visibility:"hidden"},{opacity:1,visibility:"visible"},0);
tl.fromTo('#slides',0.5,{opacity:1},{opacity:0},0);
tl.fromTo('.nav-slider',0.5,{opacity:1},{opacity:0},0);
tl.fromTo('.nav-slider',0.1,{opacity:1},{opacity:0},0);
tl.fromTo('#slides',0.5,{opacity:1},{opacity:0},0);
});
$('.gallery').on('click','.close-btn,article',function(){
tl.reverse();
$('.gallery').fadeTo( "slow", 0).css('visibility','hidden');
$('#slides,.nav-slider').fadeTo( "slow", 1);
})
}
$.fn.showRightPanelAnimation = function(removeClass,addClass){
......@@ -119,16 +125,23 @@ $(function(){
})
}
$.fn.productAnimation = function(){
//first format Actif
var activeImg = $('.format-label #format_0').data('img-active');
$('.format-label #format_0').attr('src',activeImg);
tlProduct = new TimelineMax();
tlProduct.fromTo('.product-images',1,{autoAlpha:0, marginLeft:"-10%"},{autoAlpha:1, marginLeft:"0"},0);
tlProduct.staggerFromTo('.product-details .list',0.7,{opacity:0, marginLeft:"-10%"},{opacity:1, marginLeft:"0"},0.4,0.5);
tlProduct.fromTo('.product-info',1,{autoAlpha:0, marginLeft:"-10%"},{autoAlpha:1, marginLeft:"0"},1.2);
tlProduct.fromTo('.product-images',0.2,{autoAlpha:0, marginLeft:"-10%"},{autoAlpha:1, marginLeft:"0"},0);
tlProduct.staggerFromTo('.product-details .list',0.2,{opacity:0, marginLeft:"-10%"},{opacity:1, marginLeft:"0"},0.4,0.5);
tlProduct.fromTo('.product-info',0.2,{autoAlpha:0, marginLeft:"-10%"},{autoAlpha:1, marginLeft:"0"},1.2);
}
$('.product-list article img, .product-list article ul li').on('click', function() {
$('head').append($('.header-shop'));
var toLink = $(this).data('link');
$('.load-page').parent().addClass('active');
$('.load-page').load(toLink,function(){
//alert('here');
sizeProductDetails = $('.product-details .list').length;
if (sizeProductDetails < 2) {
$('.product-info').outerWidth('78.3%');
......@@ -151,7 +164,7 @@ $(function(){
$('.pa_couleur li').selectColor();
$('.pa_format li').selectFormat();
$('.color-list.selected').selectSlide($('#slides'));
},500)
},100)
$('.download-btn:not(.download_file)').click(function(e){
e.stopPropagation();
});
......
......@@ -4,7 +4,7 @@
* Template Name: Fiche technique
*
*/
$nfiles = glob("devis/[!\\.]*");
$nfiles = glob("fiches-techniques/[!\\.]*");
if ($nfiles !== FALSE) {
......@@ -15,26 +15,41 @@ if ($nfiles !== FALSE) {
}
$fiche_num = str_pad($nb_fiche, 6, "0", STR_PAD_LEFT);
$product_id = $_GET['product_id'];
$variation_id = $_GET['variation_id'];
$code_variation = nap_load_variation_settings_fields($variation_id);
$fiche_id = $code_variation['var_fiche'];
$variable_product = wc_get_product($variation_id);
$product_title = $variable_product->get_title();
$product_infos = get_page_by_title($product_title, OBJECT, 'product');
// titre = Catégorie + sous catégorie + format + tag
$file_title = "";
$product_cats = array_reverse(wp_get_post_terms($product_infos->ID, 'product_cat'));
$product_cats = wp_get_post_terms($product_id, 'product_cat');
$file_title.=$product_cats[1]->name;
//fiche variable
if($variation_id !='undefined'){
$code_variation = nap_load_variation_settings_fields($variation_id);
$fiche_id = $code_variation['var_fiche'];
$sku = nap_variable_meta($variation_id, 'sku');
$gencod = $code_variation['var_gencod'];
$itf14 = $code_variation['var_itf14'] ;
$variable_product = wc_get_product($variation_id);
$thumb_image = get_the_post_thumbnail($variation_id, 'medium');
$file_title.="<br/>" . $variable_product->get_attribute('format') . " " . get_the_title($product_id);
$color="<span class='variation_color'><strong><em>Couleur </em>: " . $variable_product->get_attribute('couleur') . "</strong></span>";
}
$file_title.=$product_cats[1]->name;
//fiche simple
else {
$fiche_id = get_post_meta($product_id, '_fiche_simple', true);
$sku = get_post_meta($product_id, '_sku',true);
$gencod = get_post_meta($product_id, '_gencod_simple', true);
$itf14 = get_post_meta($product_id,'_itf14_simple', true);
$thumb_image = get_the_post_thumbnail($product_id, 'medium');
$file_title.="<br/>" . get_the_title($product_id);
}
$product = wc_get_product($product_infos->ID);
$tags = $product->get_tag_ids();
$file_title.="<br/>" . $variable_product->get_attribute('format') . " " . get_tag($tags[0])->name;
$icones = "";
if (get_field('fiche_icones', $fiche_id)):
......@@ -45,7 +60,7 @@ if (get_field('fiche_icones', $fiche_id)):
endwhile;
endif;
echo $file_content = "<html>
$file_content = "<html>
<head><title>" . $file_title . "</title>
<style>
.html,body {
......@@ -106,10 +121,9 @@ echo $file_content = "<html>
.thumb_var img {
max-width: 400px !important;
max-height: 400px !important;
padding-right: 100px;
float: right;
}
.gallery-item {
......@@ -157,21 +171,21 @@ echo $file_content = "<html>
</head>
<body><div class='file_content'>
<div class='file_header'>
<div class='half_width thumb_var'>
" . $thumb_image = get_the_post_thumbnail($variation_id, 'shop_catalog') . "
<div class='half_width thumb_var' style='text-align:center'>
" . $thumb_image. "
</div>
<div class='half_width'>
<div class='half_width' style='margin-left:20px;'>
<h1>" . $file_title . "</h1>
<span class='variation_color'><strong><em>Couleur </em>: " . $variable_product->get_attribute('couleur') . "</strong></span>
".$color."
" . nap_get_content($fiche_id) . "
<div>" . $icones . "</div>
</div>
</div>
<div class='bleu_zone'>
<div class='half_width' style='position:relative; padding-left:30px'>
<p>Code article : " . $code_variation['var_code'] . "</p>
<p>Gencod : " . $code_variation['var_gencod'] . "</p>
<p>ITF 14 : " . $code_variation['var_itf14'] . "</p>
<p>Code article : " . $sku . "</p>
<p>Gencod : " . $gencod. "</p>
<p>ITF 14 : " . $itf14 . "</p>
</div>
......@@ -193,8 +207,10 @@ echo $file_content = "<html>
<th>L (cm)</th>
<th>l (cm)</th>
<th>H (cm)</th>
<th>Ø (cm)</th>
<th>Épaisseur (cm)</th>
<th>Capacité (cm)</th>
<th>Taille</th>
<th>Poids (g)</th>
</tr>
</thead>
......@@ -203,8 +219,10 @@ echo $file_content = "<html>
<td>" . get_field('ft_unite_L1', $fiche_id) . "</td>
<td>" . get_field('ft_unite_l2', $fiche_id) . "</td>
<td>" . get_field('ft_unite_H', $fiche_id) . "</td>
<td>" . get_field('ft_unite_diametre', $fiche_id) . "</td>
<td>" . get_field('ft_unite_epaisseur', $fiche_id) . "</td>
<td>" . get_field('ft_unite_capacite', $fiche_id) . "</td>
<td>" . get_field('ft_unite_taille', $fiche_id) . "</td>
<td>" . get_field('ft_unite_poids', $fiche_id) . "</td>
</tr>
</tbody>
......
This diff is collapsed.
......@@ -3,7 +3,7 @@
<nav class="row">
<div class="main-nav nav-wrapper animated slideInLeft">
<div class="nav-header">
<a href="<?php echo get_home_url(); ?>" title="nap by CGMP"><h1 class="logo" style="background: url('<?php echo home_url('wp-content/themes/nap/assets/css/img/naplogo.svg')?>')">nap by CGMP</h1></a>
<a href="<?php echo get_home_url(); ?>" title="nap by CGMP"><h1 class="logo" >nap by CGMP</h1></a>
</div>
<?php get_template_part( 'nav-list' );?>
</div>
......
......@@ -20,11 +20,12 @@ if (!defined('ABSPATH')) {
}
$current_page = 'catalogue';
get_header();
$product;
$cate = get_queried_object();
$cateID = $cate->term_id;
//SubCats
$child_category = get_terms('product_cat', array('parent'=>$cateID, 'child_of' => the_category_ID(), 'exclude' => $cateID, 'orderby' => 'id', 'order' => 'ASC'));
$child_category = get_terms('product_cat', array('parent' => $cateID, 'child_of' => the_category_ID(), 'exclude' => $cateID, 'orderby' => 'id', 'order' => 'ASC'));
?>
<div class="container clearfix" id="catalogue" data-page = "<?php echo $cateID; ?>">
......@@ -42,71 +43,55 @@ $child_category = get_terms('product_cat', array('parent'=>$cateID, 'child_of' =
<span>Filtres</span>
<span class="close-btn"></span>
</div>
<div class="filter-bloc">
<div class="header">
<p><span>Univers</span></p>
</div>
<div class="bloc-content">
<ul>
<li>Nouveautés</li>
<li>Noël</li>
<li class = "disabled">Printemps</li>
</ul>
</div>
<?php
$attributes = array('Univers' => 'pa_univers', 'Matiére' => 'pa_matiere', 'Format' => 'pa_format', 'Couleurs' => 'pa_couleur');
foreach ($attributes as $key => $value) :
?>
<div class="filter-bloc">
<div class="header">
<p><span><?php echo $key ?></span></p>
</div>
</div>
<div class="filter-bloc">
<div class="header">
<p><span>Matiére</span></p>
</div>
<div class="bloc-content">
<ul>
<li>Nouveautés</li>
<li>Noël</li>
<li class = "disabled">Printemps</li>
</ul>
</div>
</div>
<div class="filter-bloc">
<div class="header">
<p><span>Format</span></p>
</div>
<div class="bloc-content">
<ul>
<li>Nouveautés</li>
<li>Noël</li>
<li class = "disabled">Printemps</li>
</ul>
</div>
</div>
<div class="filter-bloc">
<div class="header">
<p><span>Couleurs</span></p>
</div>
<div class="bloc-content">
<ul class = "list-color-filter clearfix">
<li data-color = "#7A3853"></li>
<li data-color = "#fff"></li>
<li data-color = "#7A3853"></li>
<li data-color = "#E8A380"></li>
<li data-color = "#fff"></li>
<li data-color = "#7A3853"></li>
<li data-color = "#E8A380"></li>
<li data-color = "#fff"></li>
<li data-color = "#7A3853"></li>
<li data-color = "#7A3853"></li>
<li data-color = "#fff"></li>
<li data-color = "#7A3853"></li>
<li data-color = "#E8A380"></li>
<li data-color = "#fff"></li>
<li data-color = "#7A3853"></li>
<li class="reinit">Tout déselectionner</li>
</ul>
<?php
$terms = get_terms($value);
if (!empty($terms) && !is_wp_error($terms)):
?>
<div class="bloc-content">
<ul <?php if ($value == 'pa_couleur') echo 'class = "list-color-filter clearfix"'; ?>>
<?php
foreach ($terms as $term) :
if ($value == 'pa_couleur'):
$color = get_field('couleurs', 'pa_couleur_' . $term->term_id);
if (isset($color) && strlen($color) > 0):
?>
<li data-color = "<?php echo $color; ?>" class="<?php echo $term->name; ?>"></li>
<?php
endif;
else :
?>
<li><?php echo $term->name; ?></li>
<?php
endif;
endforeach;
if ($value == 'pa_couleur'):
?>
<li class="reinit">Tout déselectionner</li>
<?php endif; ?>
</ul>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
<div class="center filter-btn-list">
<div class="btn pink-btn rounded">Rechercher</div>
<div class="btn pink-btn rounded" id="search-btn">Rechercher</div>
<span class = "reinit-all">Effacer les filtres</span>
</div>
</div>
......@@ -132,13 +117,13 @@ $child_category = get_terms('product_cat', array('parent'=>$cateID, 'child_of' =
$args = array('post_type' => 'product', 'stock' => 1, 'posts_per_page' => -1, 'product_cat' => $value->name);
$naps_posts = new WP_Query($args);
$options = array();
while ($naps_posts->have_posts()) : $naps_posts->the_post();
$id = get_the_ID();
$options['size'] = (get_field('produit_affichage',$id ))? get_field('produit_affichage',$id ):'small';
$options['size'] = (get_field('produit_affichage', $id)) ? get_field('produit_affichage', $id) : 'small';
$args = array(
'post_type' => 'product_variation',
'post_type' => array('product', 'product_variation'),
'post_status' => array('private', 'publish'),
'numberposts' => -1,
'orderby' => 'menu_order',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment