Skip to content

N
NAP-wordpress
Commit 4180106a authored by imac's avatar imac
Browse files
Options

[Bugfix]Add radio button style to variation && select color slide

parent ac261a42
Hide whitespace changes
Inline Side-by-side
Showing with 94 additions and 85 deletions
wp-content/themes/nap/assets/css/img/login.svg 0 → 100644
View file @ 4180106a
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 11 12" style="enable-background:new 0 0 11 12;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g transform="translate(0,-952.36218)">
<path class="st0" d="M5.9,953.2c-1.3,0-2.3,1-2.3,2.3s1,2.3,2.3,2.3s2.3-1,2.3-2.3S7.1,953.2,5.9,953.2z M5.9,953.7
c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8s-1.8-0.8-1.8-1.8S4.9,953.7,5.9,953.7z M5.9,958.3c-1.2,0-2.2,0.3-3,0.8s-1.3,1.3-1.3,2.1
v1.6c0,0.1,0.1,0.3,0.3,0.3h8.1c0.1,0,0.3-0.1,0.3-0.3v-1.6c0-0.8-0.5-1.6-1.3-2.1S7.1,958.3,5.9,958.3L5.9,958.3z M5.9,958.9
c1.1,0,2,0.3,2.7,0.8c0.7,0.5,1.1,1.1,1.1,1.7v1.4H2.1v-1.4c0-0.6,0.4-1.2,1.1-1.7C3.8,959.2,4.8,958.9,5.9,958.9L5.9,958.9z"/>
</g>
</svg>
wp-content/themes/nap/assets/css/main.css
View file @ 4180106a
......@@ -859,6 +859,9 @@ aside.news-wrapper {
#product{
overflow: hidden;
}
.variations{
height: 100%;
}
.product-images{
width: 59%;
padding: 39px;
......@@ -1037,9 +1040,9 @@ aside.news-wrapper {
background: #fff;
}
.product-details form {
width: 43.4%;
overflow: auto;
height: 100%;
width: 43.4%;
overflow: hidden;
height: 100%;
}
.product-details .list{
width: 50%;
......@@ -1067,13 +1070,17 @@ aside.news-wrapper {
position: relative;
cursor: pointer;
}
.list-color li{
.list li input{
cursor: pointer;
}
.pa_couleur li{
margin-bottom: 15px;
}
.list-color li.selected >span:first-child{
.pa_couleur li.selected >span:first-child,
.pa_couleur li.selected >span:first-child{
border : 1px solid;
}
.list-color li span{
.pa_couleur li span{
height: 36px;
width: 36px;
display: block;
......@@ -1081,19 +1088,20 @@ aside.news-wrapper {
margin: 0 auto;
position: relative;
}
.list-format ul li{
.pa_format ul li{
text-align: center;
margin-bottom: 25px;
color: #313D7A;
}
.list-format li.disabled{
.pa_format li.disabled{
color: rgba(26,26,26,0.2);
}
.list-format li.disabled img{
.pa_format li.disabled img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.4;
}
.pa_couleur li.selected >input:first-child::before,
.list li.selected >span:first-child::after{
content:'';
height: 14px;
......@@ -1111,17 +1119,18 @@ aside.news-wrapper {
margin: 0 auto;
left: 0;
right: 0;
z-index: 99;
}
.list-format li.selected .format-img{
.pa_format li.selected .format-img{
background : rgba(26,26,26,0.2);
}
.list-format li .format-img{
.pa_format li .format-img{
display: block;
border: 1px solid;
margin: 0 auto;
position: relative;
}
.list-format li .format-desc{
.pa_format li .format-desc{
font-size: 9px;
line-height: 12px;
margin-top: 4px;
......@@ -1293,7 +1302,35 @@ aside.news-wrapper {
width: 100%;
height: 100%;
}
/** WORDPRESS VARIATION PLUGUIN RADIO **/
.color-list input[type='radio']:after {
position: relative;
background-color: #d1d3d1;
content: '';
height: 36px;
width: 36px;
display: inline-block;
border-radius: 50%;
visibility: visible;
border: 1px solid transparent;
}
.color-list input[type='radio']{
text-align: center;
margin-bottom: 20px;
}
.color-list input[type='radio']:checked:after {
border: 1px solid #071D3D;
}
.format-list input[type='radio'],.color-list input[type='radio'] {
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
position: relative;
}
.reset_variations, .quantity{
display: none !important;
}
/* --------------*/ /* ---------->>> Phototheque <<<-----------*/ /* --------------*/
.phototheque-content{
position: relative;
......@@ -1550,7 +1587,7 @@ aside.news-wrapper {
.filter-bloc ul li.disabled{
opacity: 0.4;
}
.filter-bloc .list-color-filter li:last-child:before,
.filter-bloc .pa_couleur-filter li:last-child:before,
.filter-btn-list span:before,
.filter-bloc ul li:before{
content: 'x';
......@@ -1722,7 +1759,7 @@ aside.news-wrapper {
margin-right: -3px;
margin-bottom: 3px;
}
.filter-bloc .list-color-filter li{
.filter-bloc .pa_couleur-filter li{
display: inline-block;
height: 15px;
width: 15px;
......@@ -1732,17 +1769,17 @@ aside.news-wrapper {
margin-bottom: 4px;
margin-right: 3px;
}
.filter-bloc .list-color-filter li:last-child{
.filter-bloc .pa_couleur-filter li:last-child{
width: 100%;
margin-top: 8px;
text-align: center;
font-size: 9px;
letter-spacing: 0.2px;
}
.filter-bloc .list-color-filter li:before{
.filter-bloc .pa_couleur-filter li:before{
content:'';
}
.filter-bloc .list-color-filter li.selected:before{
.filter-bloc .pa_couleur-filter li.selected:before{
content: '\2713';
color: #fff;
margin: 0 auto;
......
wp-content/themes/nap/assets/js/main.js
View file @ 4180106a
......@@ -48,6 +48,7 @@ $(function(){
$(document).on('click','.close-panel',function(e){
$('.load-page').parent().removeClass('active');
$('html').css('overflow','auto');
tlProduct.reverse();
//$('.load-page').removeClass('fadeInUp').addClass('animated fadeOutUp');
});
$(document).on('click','.acces li',function(e){
......
wp-content/themes/nap/assets/js/product.js
View file @ 4180106a
......@@ -78,13 +78,10 @@ $(function(){
});
}
$.fn.selectSlide = function(slide){
$(this).click(function(e) {
e.preventDefault();
var data = $(this).data("color"),
dataIndex = slide.find("[data-color="+data+"]").data("slick-index"),
slideno = $(this).data('color');
slide.slick('slickGoTo', dataIndex);
});
}
$.fn.open_gallery = function(){
$(this).on('click',function(){
......@@ -137,13 +134,13 @@ $(function(){
$('.product-info').outerWidth('78.3%');
console.log(sizeProductDetails);
}
$('.list-color li').getListColors();
$('.list-color li').selectColor();
$('.list-format li').selectFormat();
$('.pa_couleur li').getListColors();
$('.pa_couleur li').selectColor();
$('.pa_format li').selectFormat();
$('#zoom').zoom();
$('article[data-color], .list-color li span').selectSlide($('#slides'));
$('article[data-color], .pa_couleur li').click(function(e) {
$(this).selectSlide($('#slides'));
});
$('#mozaique').open_gallery();
initFunction();
$.fn.responsive();
......@@ -152,8 +149,9 @@ $(function(){
$.fn.productAnimation();
$('#product .product-list').showRightPanel();
$.fn.slider_product();
$('.list-color li').selectColor();
$('.list-format li').selectFormat();
$('.pa_couleur li').selectColor();
$('.pa_format li').selectFormat();
$('.color-list.selected').selectSlide($('#slides'));
},900)
$('.download-btn:not(.download_file)').click(function(e){
e.stopPropagation();
......
wp-content/themes/nap/woocommerce/single-product/add-to-cart/variable.php
View file @ 4180106a
<style>
.color-list input[type='radio']:after {
position: relative;
background-color: #d1d3d1;
content: '';
bottom: 14px;
margin-bottom: 50px;
height: 36px;
width: 36px;
display: inline-block;
border-radius: 50%;
visibility: visible;
border: 1px solid transparent;
}
.color-list input[type='radio']{
text-align: center;
margin-bottom: 20px;
}
.color-list input[type='radio']:checked:after {
border: 1px solid #071D3D;
}
.format-list input[type='radio'],.color-list input[type='radio'] {
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.format-label {
cursor:pointer;
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
width:100px;
height:70px;
}
.reset_variations, .quantity{
display: none !important;
}
</style>
<?php
print_r($_GET);
//print_r($_GET);
/**
* Variable product add to cart
*
......@@ -81,9 +32,12 @@ if (!function_exists('print_attribute_radio')) {
function print_attribute_radio($checked_value, $value, $label, $name) {
$current_color = $_GET['attribute_couleur'];
$default_checked = "";
if ($value == strtolower($current_color))
$selected = $default_checked = "";
if ($value == strtolower($current_color)){
$default_checked = "checked";
$selected = "selected";
}
$checked = sanitize_title($checked_value) === $checked_value ? checked($checked_value, sanitize_title($value), false) : checked($checked_value, $value, false);
$input_name = 'attribute_' . esc_attr($name);
......@@ -95,11 +49,16 @@ if (!function_exists('print_attribute_radio')) {
$filtered_label = apply_filters('woocommerce_variation_option_name', $label);
printf(' <style>
#' . $id . ':after { background-color: ' . $hexa . '; }
</style><li class="color-list" data-color="' . $hexa . '"><input data-color="' . $hexa . '" type="radio" name="%1$s" value="%2$s" id="%3$s" %4$s ' . $default_checked . '><span data-color="' . $hexa . '"></span></li>', $input_name, $esc_value, $id, $checked, $filtered_label);
</style><li class="color-list '.$selected.' " data-color="' . $hexa . '">
<input data-color="' . $hexa . '" type="radio" name="%1$s" value="%2$s" id="%3$s" %4$s ' . $default_checked . '></li>', $input_name, $esc_value, $id, $checked, $filtered_label);
} else {
$icons = nap_icon_format($value);
$filtered_label = apply_filters('woocommerce_variation_option_name', $label);
printf('<li class="format-list"><input type="radio" name="%1$s" value="%2$s" id="%3$s" %4$s><label class="format-label" style="background:url(' . $icons['inactive'] . ')" for="%3$s"></label></li>', $input_name, $esc_value, $id, $checked, $filtered_label);
printf('<li class="format-list"><input type="radio" name="%1$s" value="%2$s" id="%3$s" %4$s>
<label class="format-label" for="%3$s"><img src="'.$icons['inactive'].'" data-img = "'.$icons['inactive'].'" data-img-active = "'.$icons['active'].'"></label>
<div class="format-desc">'.$value.'</span>
</li>', $input_name, $esc_value, $id, $checked, $filtered_label); //<label class="format-label" style="background:url(' . $icons['inactive'] . ')" for="%3$s"></label>
}
}
......@@ -209,7 +168,7 @@ do_action('woocommerce_before_add_to_cart_form');
<div class="variations" cellspacing="0">
<?php foreach ($attributes as $name => $options) : ?>
<div class="list row list-color left border-l">
<div class="list row <?php echo $name;?> left border-l center">
<div class="product-header center font-small label">
<label for="<?php echo sanitize_title($name); ?>" class = "chevron bottom">Choix de la <?php echo wc_attribute_label($name); ?></label>
......@@ -283,7 +242,7 @@ do_action('woocommerce_before_add_to_cart_form');
</ul>
</div>
<div class="list row list-format left border-l">
<div class="list row pa_format left border-l">
<div class="product-header center font-small">
<span class = "chevron bottom">Choix du format</span>
</div>
......
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