[+] BO : now you can choose type of attribute group (select , color, radio)

git-svn-id: http://dev.prestashop.com/svn/v1/branches/1.5.x@8691 b9a71923-0436-4b27-9f14-aed3839534dd
This commit is contained in:
vAugagneur
2011-09-21 14:29:32 +00:00
parent 5bc5979e2d
commit 8b6ec916e0
15 changed files with 204 additions and 146 deletions
+37
View File
@@ -50,6 +50,7 @@
border: 1px #d0d3d8 solid;
margin-bottom: 1.5em
}
#primary_block #color_to_pick_list li {
display: inline;
float: left;
@@ -62,6 +63,11 @@
border: 1px solid #666;
cursor: pointer
}
#primary_block a.color_pick.selected {
border: 1px red solid;
}
#primary_block a.color_pick.selected:hover { border: 1px red solid; }
#primary_block a.color_pick:hover { border: 1px solid #000 }
#primary_block a#color_all { cursor: pointer }
#primary_block #image-block img#bigpic.jqzoom {
@@ -117,6 +123,37 @@
clear: left;
text-align: center
}
#attributes {
margin-top: 10px;
}
.attribute_list {
width:50%;
float:right;
height:auto
}
#primary_block #buy_block .attribute_label {
font-size: 1.1em;
color: #374853;
float:left;
width:45%;
}
#primary_block #buy_block .attribute_select {
width: 100%;
margin-left: 0;
}
.attribute_fieldset {
padding:0;
border:0;
margin-bottom:10px
}
.attribute_radio {
margin:0 5px 5px 0;
}
/* prices */
#primary_block #buy_block p.price {
+34 -33
View File
@@ -76,7 +76,7 @@ function findCombination(firstTime)
$('#quantity_wanted').val(1);
//create a temporary 'choice' array containing the choices of the customer
var choice = new Array();
$('div#attributes select').each(function(){
$('div#attributes select, div#attributes input[type=hidden], div#attributes input[type=radio]:checked').each(function(){
choice.push($(this).val());
});
@@ -139,21 +139,6 @@ function findCombination(firstTime)
updateDisplay();
}
function updateColorSelect(id_attribute)
{
if (id_attribute == 0)
{
refreshProductImages(0);
return ;
}
// Visual effect
$('#color_'+id_attribute).fadeTo('fast', 1, function(){ $(this).fadeTo('slow', 0, function(){ $(this).fadeTo('slow', 1, function(){}); }); });
// Attribute selection
$('#group_'+id_color_default+' option[value='+id_attribute+']').attr('selected', 'selected');
$('#group_'+id_color_default+' option[value!='+id_attribute+']').removeAttr('selected');
findCombination();
}
//update display of the availability of the product AND the prices of the product
function updateDisplay()
{
@@ -243,24 +228,26 @@ function updateDisplay()
$('#availability_statut:hidden').show();
//display availability date
var available_date = selectedCombination['available_date'];
tab_date = available_date.split('-');
var time_available = new Date(tab_date[2], tab_date[1], tab_date[0]);
time_available.setMonth(time_available.getMonth()-1);
var now = new Date();
// date displayed only if time_available
if (now.getTime() < time_available.getTime())
if (selectedCombination.length)
{
$('#availability_date_value').text(selectedCombination['available_date']);
$('#availability_date_label').show();
$('#availability_date_value').show();
var available_date = selectedCombination['available_date'];
tab_date = available_date.split('-');
var time_available = new Date(tab_date[2], tab_date[1], tab_date[0]);
time_available.setMonth(time_available.getMonth()-1);
var now = new Date();
// date displayed only if time_available
if (now.getTime() < time_available.getTime())
{
$('#availability_date_value').text(selectedCombination['available_date']);
$('#availability_date_label').show();
$('#availability_date_value').show();
}
else
{
$('#availability_date_label').hide();
$('#availability_date_value').hide();
}
}
else
{
$('#availability_date_label').hide();
$('#availability_date_value').hide();
}
//show the 'add to cart' button ONLY IF it's possible to buy when out of stock AND if it was previously invisible
if (allowBuyWhenOutOfStock && !selectedCombination['unavailable'] && productAvailableForOrder == 1)
{
@@ -501,7 +488,7 @@ $(document).ready(function()
//
$('a#resetImages').click(function() {
updateColorSelect(0);
refreshProductImages(0);
});
$('.thickbox').fancybox({
@@ -552,3 +539,17 @@ function checkMinimalQuantity(minimal_quantity)
}
}
function colorPickerClick(elt)
{
id_attribute = $(elt).attr('id').replace('color_', '');
$('.color_pick').removeClass('selected');
$(elt).fadeTo('fast', 1, function(){
$(this).fadeTo('slow', 0, function(){
$(this).fadeTo('slow', 1, function(){
$(this).addClass('selected');
});
});
});
$('#color_pick_hidden').val(id_attribute);
findCombination();
}
+1 -7
View File
@@ -57,8 +57,6 @@ $_LANG['authentication_dc647eb65e6711e155375218212b3964'] = 'Mot de passe';
$_LANG['authentication_01a569ddc6cf67ddec2a683f0a5f5956'] = 'Mot de passe oublié ?';
$_LANG['authentication_766d4aaf3e045538be23f9a9e17a1593'] = 'Commande express';
$_LANG['authentication_b78a3223503896721cca1303f776159b'] = 'Civilité';
$_LANG['authentication_127469a6b4253ebb77adccc0dd48461e'] = 'M.';
$_LANG['authentication_29e32764941c30d1bb41c601014fbdbd'] = 'Mme';
$_LANG['authentication_20db0bfeecd8fe60533206a2b5e9891a'] = 'Prénom';
$_LANG['authentication_8d3f5eff9c40ee315d452392bed5309b'] = 'Nom';
$_LANG['authentication_10803b83a68db8f7e7a33e3b41e184d0'] = 'Date de naissance';
@@ -203,8 +201,6 @@ $_LANG['identity_8514d6418c5a503c4accac47e764ce11'] = 'Votre mot de passe a ét
$_LANG['identity_91724108825d34f1636cda352524df67'] = 'N\'hésitez pas à modifier vos informations personnelles si celles-ci ont changé.';
$_LANG['identity_19f823c6453c2b1ffd09cb715214813d'] = 'Champs requis';
$_LANG['identity_b78a3223503896721cca1303f776159b'] = 'Civilité';
$_LANG['identity_127469a6b4253ebb77adccc0dd48461e'] = 'M.';
$_LANG['identity_29e32764941c30d1bb41c601014fbdbd'] = 'Mme';
$_LANG['identity_20db0bfeecd8fe60533206a2b5e9891a'] = 'Prénom';
$_LANG['identity_8d3f5eff9c40ee315d452392bed5309b'] = 'Nom';
$_LANG['identity_1e884e3078d9978e216a027ecd57fb34'] = 'E-mail';
@@ -349,6 +345,7 @@ $_LANG['order-detail_07213a0161f52846ab198be103b5ab43'] = 'erreurs';
$_LANG['order-detail_cb5e100e5a9a3e7f6d1fd97512215282'] = 'erreur';
$_LANG['order-detail_37c06f5486d3068a0a9604552c7e081f'] = 'Ajouter un message :';
$_LANG['order-detail_617096c86d35478132502be00e12e016'] = 'Si vous voulez nous laisser un message à propos de votre commande, merci de l\'écrire ici.';
$_LANG['order-detail_7bc873cba11f035df692c3549366c722'] = '- Choisissez -';
$_LANG['order-detail_94966d90747b97d1f0f206c98a8b1ac3'] = 'Envoyer';
$_LANG['order-detail_a9979df9e349275e2d86f7af03e24d14'] = 'Vous ne pouvez pas faire de retour de marchandise avec un compte invité';
$_LANG['order-follow_d95cf4ab2cbf1dfb63f066b50558b07d'] = 'Mon compte';
@@ -387,8 +384,6 @@ $_LANG['order-opc-new-account_2fdfd506efea08144c0794c32ca8250a'] = 'Créer un co
$_LANG['order-opc-new-account_1e884e3078d9978e216a027ecd57fb34'] = 'E-mail';
$_LANG['order-opc-new-account_bf2957630c4209f61a388a08c2154915'] = '(Min 5 caractères.)';
$_LANG['order-opc-new-account_b78a3223503896721cca1303f776159b'] = 'Titre';
$_LANG['order-opc-new-account_127469a6b4253ebb77adccc0dd48461e'] = 'M.';
$_LANG['order-opc-new-account_29e32764941c30d1bb41c601014fbdbd'] = 'Mme';
$_LANG['order-opc-new-account_20db0bfeecd8fe60533206a2b5e9891a'] = 'Prénom';
$_LANG['order-opc-new-account_8d3f5eff9c40ee315d452392bed5309b'] = 'Nom';
$_LANG['order-opc-new-account_10803b83a68db8f7e7a33e3b41e184d0'] = 'Date de naissance';
@@ -544,7 +539,6 @@ $_LANG['product_13dba24862cf9128167a59100e154c8d'] = 'Imprimer';
$_LANG['product_c6beb9157a0e29e604ad5ec484488608'] = 'Agrandir';
$_LANG['product_2b56b60f878922093facd42284848a0c'] = 'Plus de détails';
$_LANG['product_e54a973d0c3342dac6ee7d9e145c6f83'] = 'Contenu du pack';
$_LANG['product_98b0a68a7e4c7b265a5ca9a0b733d96e'] = 'Choisissez un coloris :';
$_LANG['product_588907ab2d492aca0b07b5bf9c931eea'] = 'En solde';
$_LANG['product_800e90e940e7f1fb938b0fda5137f38c'] = 'En solde !';
$_LANG['product_ca2bf12169883f4982d8fe34b7e3c618'] = 'Prix réduit !';
+50 -42
View File
@@ -110,10 +110,6 @@ var fieldRequired = '{l s='Please fill in all required fields, then save the cus
{foreach from=$combinations key=idCombination item=combination}
addCombination({$idCombination|intval}, new Array({$combination.list}), {$combination.quantity}, {$combination.price}, {$combination.ecotax}, {$combination.id_image}, '{$combination.reference|addslashes}', {$combination.unit_impact}, {$combination.minimal_quantity}, '{$combination.available_date}');
{/foreach}
// Colors
{if $colors|@count > 0}
{if $product->id_color_default}var id_color_default = {$product->id_color_default|intval};{/if}
{/if}
{/if}
//]]>
</script>
@@ -206,21 +202,7 @@ var fieldRequired = '{l s='Please fill in all required fields, then save the cus
{/if}
</div>
{/if}
{if isset($colors) && $colors}
<!-- colors -->
<div id="color_picker">
<p>{l s='Pick a color:' js=1}</p>
<div class="clear"></div>
<ul id="color_to_pick_list">
{foreach from=$colors key='id_attribute' item='color'}
<li><a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" width="20" height="20" />{/if}</a></li>
{/foreach}
</ul>
<div class="clear"></div>
</div>
{/if}
{if ($product->show_price AND !isset($restricted_country_mode)) OR isset($groups) OR $product->reference OR (isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS)}
<!-- add to cart form-->
<form id="buy_block" {if $PS_CATALOG_MODE AND !isset($groups) AND $product->quantity > 0}class="hidden"{/if} action="{$link->getPageLink('cart')}" method="post">
@@ -298,42 +280,68 @@ var fieldRequired = '{l s='Please fill in all required fields, then save the cus
{/if}
{*close if for show price*}
{/if}
{if isset($groups)}
<!-- attributes -->
<div id="attributes">
{foreach from=$groups key=id_attribute_group item=group}
{if $group.attributes|@count}
<p>
<label for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} :</label>
{assign var="groupName" value="group_$id_attribute_group"}
<select name="{$groupName}" id="group_{$id_attribute_group|intval}" onchange="javascript:findCombination();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
{/foreach}
</select>
<!-- attributes -->
<div id="attributes">
{foreach from=$groups key=id_attribute_group item=group}
{if $group.attributes|@count}
<fieldset class="attribute_fieldset">
<label class="attribute_label" for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} :</label>
{assign var="groupName" value="group_$id_attribute_group"}
<div class="attribute_list">
{if ($group.group_type == 'select')}
<select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select" onchange="findCombination();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
{/foreach}
</select>
{elseif ($group.group_type == 'color')}
<ul id="color_to_pick_list">
{assign var="default_colorpicker" value=""}
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li>
<a id="color_{$id_attribute|intval}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}" style="background: {$colors.$id_attribute.value};" title="{$colors.$id_attribute.name}" onclick="colorPickerClick(this);{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="20" height="20" /><br>
{/if}
</a>
</li>
{if ($group.default == $id_attribute)}
{$default_colorpicker = $id_attribute}
{/if}
{/foreach}
</ul>
<input type="hidden" id="color_pick_hidden" name="{$groupName}" value="{$default_colorpicker}" >
{elseif ($group.group_type == 'radio')}
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<input type="radio" class="attribute_radio" name="{$groupName}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} onclick="findCombination();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
{$group_attribute|escape:'htmlall':'UTF-8'}<br/>
{/foreach}
{/if}
</div>
</fieldset>
{/if}
{/foreach}
</div>
{/if}
<p id="product_reference" {if isset($groups) OR !$product->reference}style="display: none;"{/if}>
<label for="product_reference">{l s='Reference :'} </label>
<span class="editable">{$product->reference|escape:'htmlall':'UTF-8'}</span>
</p>
{/if}
{/foreach}
</div>
{/if}
<p id="product_reference" {if isset($groups) OR !$product->reference}style="display: none;"{/if}><label for="product_reference">{l s='Reference :'} </label><span class="editable">{$product->reference|escape:'htmlall':'UTF-8'}</span></p>
<!-- quantity wanted -->
<p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) OR $virtual OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
<label>{l s='Quantity :'}</label>
<input type="text" name="qty" id="quantity_wanted" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" size="2" maxlength="3" {if $product->minimal_quantity > 1}onkeyup="checkMinimalQuantity({$product->minimal_quantity});"{/if} />
</p>
<!-- minimal quantity wanted -->
<p id="minimal_quantity_wanted_p"{if $product->minimal_quantity <= 1 OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>{l s='You must add '}<b id="minimal_quantity_label">{$product->minimal_quantity}</b>{l s=' as a minimum quantity to buy this product.'}</p>
<p id="minimal_quantity_wanted_p"{if $product->minimal_quantity <= 1 OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
{l s='You must add '}<b id="minimal_quantity_label">{$product->minimal_quantity}</b>{l s=' as a minimum quantity to buy this product.'}
</p>
{if $product->minimal_quantity > 1}
<script type="text/javascript">
checkMinimalQuantity();
</script>
{/if}
<!-- availability -->
<p id="availability_statut"{if ($product->quantity <= 0 && !$product->available_later && $allow_oosp) OR ($product->quantity > 0 && !$product->available_now) OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
<span id="availability_label">{l s='Availability:'}</span>