(Résolu) Bloc personnalisation

PixGeek · March 1, 2017

Salut a tous,

Je suis confronté a un petit soucis. Pour une boutique qui sera mis en ligne tres prochainement, j'ai mit en place des modif pour le block personnalisation.

par exemple.

pour personnaliser un texte, le client à le choix sur plusieurs fontes(polices). jusque la, pas de soucis

dans le champ, j'ai réussi a mettre que quand le client tape sont texte, il peu voir la police choisie en même temps.

et c'est la mon souci. je n'ai qu'une police qui s'affiche (police 1) alors que le client a choisi la police 2(3,4,5,6

etc...)

j'ai modifié mon product.tpl, product.js et crée un fichier css en plus du global.css

et la je perd pied....

si quelqu'un pouvait me donner un coup de pouce.... merci

version : 1.6.1.11

url : bebe-chaussons.fr

Edited March 5, 2017 by One_Man (see edit history)

YopixelAE · March 2, 2017

si quelqu'un pouvait me donner un coup de pouce.... merci

version : 1.6.1.11

url : ...

Bonjour,

Boutique en maintenance.

Postez le code de vos modifications.

Car sans site et sans code, difficile de vous aider ; )

PixGeek · March 2, 2017

Salut, et merci de me répondre,

Donnez moi votre ip en mp, cela sera plus simple!

Désolé mais ,je peux pas joindre les fichiers ici

Edited March 2, 2017 by One_Man (see edit history)

YopixelAE · March 2, 2017

Désolé mais ,je peux pas joindre les fichiers ici

Bonjour,

Ne les attachez pas au post, copiez/collez leur contenu (les parties pertinentes) dans le message avec l'outil en haut <> "Insérer un extrait de code"

PixGeek · March 2, 2017

ok, voici le product.tpl

{if isset($product) && $product->customizable}
			<!--Customization -->
			<section class="page-product-box">				
				<div class="block-home-title">
			          <div class="wt-out-title"><h3 class="page-product-heading">{l s='Product customization'}</h3></div>
		        </div>
				<!-- Customizable products -->
				<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
					<p class="infoCustomizable">
						{l s='After saving your customized product, remember to add it to your cart.'}
						{if $product->uploadable_files}
						<br />
						{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
					</p>
					{if $product->uploadable_files|intval}
						<div class="customizableProductsFile">
							<h5 class="product-heading-h5">{l s='Pictures'}</h5>
							<ul id="uploadable_files" class="clearfix">
								{counter start=0 assign='customizationField'}
								{foreach from=$customizationFields item='field' name='customizationFields'}
									{if $field.type == 0}
										<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
											{if isset($pictures.$key)}
												<div class="customizationUploadBrowse">
													<img src="{$pic_dir}{$pictures.$key}_small" alt="" />
														<a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html':'UTF-8'}" title="{l s='Delete'}" >
															<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
														</a>
												</div>
											{/if}
											<div class="customizationUploadBrowse form-group">
												<label class="customizationUploadBrowseDescription">
													{if !empty($field.name)}
														{$field.name}
													{else}
														{l s='Please select an image file from your computer'}
													{/if}
													{if $field.required}<sup>*</sup>{/if}
												</label>
												<input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="form-control customization_block_input {if isset($pictures.$key)}filled{/if}" />
											</div>
										</li>
										{counter}
									{/if}
								{/foreach}
							</ul>
						</div>
					{/if}
					{if $product->text_fields|intval}
						<div class="customizableProductsText">
							<h5 class="product-heading-h5">{l s='Text'}</h5>
							<ul id="text_fields">
							{counter start=0 assign='customizationField'}
							{foreach from=$customizationFields item='field' name='customizationFields'}
								{if $field.type == 1}
									<li class="customizationUploadLine{if $field.required} required{/if}">
										<label for ="textField{$customizationField}">
											{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
											{if !empty($field.name)}
												{$field.name}
											{/if}
											{if $field.required}<sup>*</sup>{/if}
										</label>
										<textarea name="textField{$field.id_customization_field}" class="form-control customization_block_input" id="textField{$customizationField}" rows="3" cols="20">{strip}
											{if isset($textFields.$key)}
												{$textFields.$key|stripslashes}
											{/if}
										{/strip}</textarea>
									</li>
									{counter}
								{/if}
							{/foreach}
							</ul>
						</div>
					{/if}
					<p id="customizedDatas">
						<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
						<input type="hidden" name="submitCustomizedDatas" value="1" />
							<input type="hidden" name="policechausson" id="policechausson" value="{if isset($policechausson)}{$policechausson|intval}{/if}" />	
						<button class="button btn btn-default button button-small" name="saveCustomization">
							<span>{l s='Save'}</span>
						</button>
						<span id="ajax-loader" class="unvisible">
							<img src="{$img_ps_dir}loader.gif" alt="loader" />
						</span>
					</p>
				</form>
				<p class="clear required"><sup>*</sup> {l s='required fields'}</p>
			</section>
			<!--end Customization -->
			{/if}

le product.js

var serialScrollNbImagesDisplayed;
var selectedCombination = [];
var globalQuantity = 0;
var colors = [];
var original_url = window.location + '';
var first_url_check = true;
var firstTime = true;
policechausson=19;
/* Retro compat from product.tpl */
if (typeof customizationFields !== 'undefined' && customizationFields)
{
	var customizationFieldsBk = customizationFields;
	customizationFields = [];
	var j = 0;
	for (var i = 0; i < customizationFieldsBk.length; ++i)
	{
		var key = 'pictures_' + parseInt(id_product) + '_' + parseInt(customizationFieldsBk[i]['id_customization_field']);
		customizationFields[i] = [];
		customizationFields[i][0] = (parseInt(customizationFieldsBk[i]['type']) == 0) ? 'img' + i : 'textField' + j++;
		customizationFields[i][1] = (parseInt(customizationFieldsBk[i]['type']) == 0 && customizationFieldsBk[i][key]) ? 2 : parseInt(customizationFieldsBk[i]['required']);
	}
}

if (typeof combinationImages !== 'undefined' && combinationImages)
{
	combinationImagesJS = [];
	combinationImagesJS[0] = [];
	var k = 0;
	for (var i in combinationImages)
	{
		combinationImagesJS[i] = [];
		for (var j in combinationImages[i])
		{
			var id_image = parseInt(combinationImages[i][j]['id_image']);
			if (id_image)
			{
				combinationImagesJS[0][k++] = id_image;
				combinationImagesJS[i][j] = [];
				combinationImagesJS[i][j] = id_image;
			}
		}
	}

	if (typeof combinationImagesJS[0] !== 'undefined' && combinationImagesJS[0])
	{
	   var array_values = [];
	   for (var key in arrayUnique(combinationImagesJS[0]))
		   array_values.push(combinationImagesJS[0][key]);
	   combinationImagesJS[0] = array_values;
	}
	combinationImages = combinationImagesJS;
}

if (typeof combinations !== 'undefined' && combinations)
{
	combinationsJS = [];
	combinationsHashSet = {};
	var k = 0;
	for (var i in combinations)
	{
		globalQuantity += combinations[i]['quantity'];
		combinationsJS[k] = [];
		combinationsJS[k]['idCombination'] = parseInt(i);
		combinationsJS[k]['idsAttributes'] = combinations[i]['attributes'];
		combinationsJS[k]['quantity'] = combinations[i]['quantity'];
		combinationsJS[k]['price'] = combinations[i]['price'];
		combinationsJS[k]['ecotax'] = combinations[i]['ecotax'];
		combinationsJS[k]['image'] = parseInt(combinations[i]['id_image']);
		combinationsJS[k]['reference'] = combinations[i]['reference'];
		combinationsJS[k]['unit_price'] = combinations[i]['unit_impact'];
		combinationsJS[k]['minimal_quantity'] = parseInt(combinations[i]['minimal_quantity']);

		combinationsJS[k]['available_date'] = [];
			combinationsJS[k]['available_date']['date'] = combinations[i]['available_date'];
			combinationsJS[k]['available_date']['date_formatted'] = combinations[i]['date_formatted'];

		combinationsJS[k]['specific_price'] = [];
			combinationsJS[k]['specific_price']['reduction_percent'] = (combinations[i]['specific_price'] && combinations[i]['specific_price']['reduction'] && combinations[i]['specific_price']['reduction_type'] == 'percentage') ? combinations[i]['specific_price']['reduction'] * 100 : 0;
			combinationsJS[k]['specific_price']['reduction_price'] = (combinations[i]['specific_price'] && combinations[i]['specific_price']['reduction'] && combinations[i]['specific_price']['reduction_type'] == 'amount') ? combinations[i]['specific_price']['reduction'] : 0;
			combinationsJS[k]['price'] = (combinations[i]['specific_price'] && combinations[i]['specific_price']['price'] && parseInt(combinations[i]['specific_price']['price']) != -1) ? combinations[i]['specific_price']['price'] :  combinations[i]['price'];

		combinationsJS[k]['reduction_type'] = (combinations[i]['specific_price'] && combinations[i]['specific_price']['reduction_type']) ? combinations[i]['specific_price']['reduction_type'] : '';
		combinationsJS[k]['id_product_attribute'] = (combinations[i]['specific_price'] && combinations[i]['specific_price']['id_product_attribute']) ? combinations[i]['specific_price']['id_product_attribute'] : 0;

		var key = combinationsJS[k]['idsAttributes'].sort().join('-');
		combinationsHashSet[key] = combinationsJS[k];

		k++;
	}
	combinations = combinationsJS;
}
/* */
$(document).ready(function()
{
   policechausson=$("#policechausson").val();
     switch(parseInt(policechausson))
    {
        case 19:      
       $("#textField0").css("font-family","aladdinregular");
         $("#textField1").css("font-family","aladdinregular");
        $("#group_8").css("font-family","aladdinregular");
        $("#prenomStyle").css("font-family","aladdinregular");
     break;
    case 20:
        $("#textField0").css("font-family","albaregular");
          $("#textField1").css("font-family","albaregular");
        $("#group_8").css("font-family","albaregular");
        $("#prenomStyle").css("font-family","albaregular");
      break;
    case 21:
       $("#textField0").css("font-family","allstarregular");
         $("#textField1").css("font-family","allstarregular");
        $("#group_8").css("font-family","allstarregular");
         $("#prenomStyle").css("font-family","allstarregular");
       break;
    case 22:
       $("#textField0").css("font-family","babydollregular");
         $("#textField1").css("font-family","babydollregular");
        $("#group_8").css("font-family","babydollregular");
      break;
    case 23:
       $("#textField0").css("font-family","cheriregular");
         $("#textField1").css("font-family","cheriregular");
        $("#group_8").css("font-family","cheriregular");
       break;
    case 24:
       $("#textField0").css("font-family","fiolex_girlsregular");
         $("#textField1").css("font-family","fiolex_girlsregular");
        $("#group_8").css("font-family","fiolex_girlsregular");
       break;
    case 25:
       $("#textField0").css("font-family","fontdinerdotcom_sparklyRg");
         $("#textField1").css("font-family","fontdinerdotcom_sparklyRg");
        $("#group_8").css("font-family","fontdinerdotcom_sparklyRg");
     break;
    case 26:
       $("#textField0").css("font-family","jesterregular");
         $("#textField1").css("font-family","jesterregular");
        $("#group_8").css("font-family","jesterregular");
       break;
    case 27:
       $("#textField0").css("font-family","mickeyregular");
         $("#textField1").css("font-family","mickeyregular");
        $("#group_8").css("font-family","mickeyregular");
       break;
    case 28:
       $("#textField0").css("font-family","minnieregular");
         $("#textField1").css("font-family","minnieregular");
        $("#group_8").css("font-family","minnieregular");
       break;
    case 29:
       $("#textField0").css("font-family","moonstarregular");
         $("#textField1").css("font-family","moonstarregular");
        $("#group_8").css("font-family","moonstarregular");
        break;
    case 30:
       $("#textField0").css("font-family","pacificoregular");
         $("#textField1").css("font-family","pacificoregular");
        $("#group_8").css("font-family","pacificoregular");
        break;
    case 31:
       $("#textField0").css("font-family","thats_font_folksitalic");
         $("#textField1").css("font-family","thats_font_folksitalic");
        $("#group_8").css("font-family","thats_font_folksitalic");
      break;
    case 32:
       $("#textField0").css("font-family","waltographregular");
         $("#textField1").css("font-family","waltographregular");
        $("#group_8").css("font-family","waltographregular");
        break;
    default:  
         $("#textField0").css("font-family","aladdinregular");
           $("#textField1").css("font-family","aladdinregular");
        $("#group_8").css("font-family","aladdinregular");
        $("#prenomStyle").css("font-family","aladdinregular");
     break;
        
    }

     $("#group_8").change(function (){
         
           $("#policechausson").val(this.value);
              
        if(this.value==19)
        {
       $("#textField0").css("font-family","aladdinregular");
         $("#textField1").css("font-family","aladdinregular");
        $("#group_8").css("font-family","aladdinregular");
        $("#prenomStyle").css("font-family","aladdinregular");
        }
   if(this.value==20)
        {
       $("#textField0").css("font-family","albaregular");
         $("#textField1").css("font-family","albaregular");
        $("#group_8").css("font-family","albaregular");
        $("#prenomStyle").css("font-family","albaregular");
        }
   if(this.value==21)
         {
       $("#textField0").css("font-family","allstarregular");
         $("#textField1").css("font-family","allstarregular");
        $("#group_8").css("font-family","allstarregular");
         $("#prenomStyle").css("font-family","allstarregular");
        }
   if(this.value==22)
        {
       $("#textField0").css("font-family","babydollregular");
         $("#textField1").css("font-family","babydollregular");
        $("#group_8").css("font-family","babydollregular");
        }
   if(this.value==23)
       {
       $("#textField0").css("font-family","cheriregular");
         $("#textField1").css("font-family","cheriregular");
        $("#group_8").css("font-family","cheriregular");
        }
   if(this.value==24)
        {
       $("#textField0").css("font-family","fiolex_girlsregular");
         $("#textField1").css("font-family","fiolex_girlsregular");
        $("#group_8").css("font-family","fiolex_girlsregular");
        }
   if(this.value==25)
        {
       $("#textField0").css("font-family","fontdinerdotcom_sparklyRg");
         $("#textField1").css("font-family","fontdinerdotcom_sparklyRg");
        $("#group_8").css("font-family","fontdinerdotcom_sparklyRg");
        }
   if(this.value==26)
         {
       $("#textField0").css("font-family","jesterregular");
         $("#textField1").css("font-family","jesterregular");
        $("#group_8").css("font-family","jesterregular");
        }
   if(this.value==27)
        {
       $("#textField0").css("font-family","mickeyregular");
         $("#textField1").css("font-family","mickeyregular");
        $("#group_8").css("font-family","mickeyregular");
        }
   if(this.value==28)
         {
       $("#textField0").css("font-family","minnieregular");
         $("#textField1").css("font-family","minnieregular");
        $("#group_8").css("font-family","minnieregular");
        }
   if(this.value==29)
        {
       $("#textField0").css("font-family","moonstarregular");
         $("#textField1").css("font-family","moonstarregular");
        $("#group_8").css("font-family","moonstarregular");
        }
   if(this.value==30)
         {
       $("#textField0").css("font-family","pacificoregular");
         $("#textField1").css("font-family","pacificoregular");
        $("#group_8").css("font-family","pacificoregular");
        }
    if(this.value==31)
         {
       $("#textField0").css("font-family","thats_font_folksitalic");
         $("#textField1").css("font-family","thats_font_folksitalic");
        $("#group_8").css("font-family","thats_font_folksitalic");
        }
     if(this.value==32)
         {
       $("#textField0").css("font-family","waltographregular");
         $("#textField1").css("font-family","waltographregular");
        $("#group_8").css("font-family","waltographregular");
        }    
    });
	
	var url_found = checkUrl();
	//init the price in relation of the selected attributes
	if (!url_found)
	{
		if (typeof productHasAttributes !== 'undefined' && productHasAttributes)
			findCombination();
		else
			refreshProductImages(0);
	}

	initLocationChange();
	serialScrollSetNbImages();

	//init the serialScroll for thumbs
	if (!!$.prototype.serialScroll)
		$('#thumbs_list').serialScroll({
			items:'li:visible',
			prev:'#view_scroll_left',
			next:'#view_scroll_right',
			axis:'x',
			offset:0,
			start:0,
			stop:true,
			onBefore:serialScrollFixLock,
			duration:700,
			step: 2,
			lazy: true,
			lock: false,
			force:false,
			cycle:false
		});

	$('#thumbs_list').trigger('goto', 0);

	//set jqZoom parameters if needed
	if (typeof(jqZoomEnabled) !== 'undefined' && jqZoomEnabled)
	{
		if ($('#thumbs_list .shown img').length)
		{
			var new_src = $('#thumbs_list .shown img').attr('src').replace('cart_', 'large_');
			if ($('.jqzoom img').attr('src')!= new_src)
				$('.jqzoom img').attr('src', new_src).parent().attr('href', new_src);
		}

		$('.jqzoom').jqzoom({
			zoomType: 'standard', //innerzoom/standard/reverse/drag
			zoomWidth: 458, //zooming div default width(default width value is 200)
			zoomHeight: 458, //zooming div default width(default height value is 200)
			xOffset: 21, //zooming div default offset(default offset value is 10)
			yOffset: 0,
			title: false
		});

	}
	if (typeof(contentOnly) !== 'undefined')
	{
		if (!contentOnly && !!$.prototype.fancybox) {
			$('li:visible .fancybox, .fancybox.shown').fancybox({
				'hideOnContentClick': true,
				'openEffect'    : 'elastic',
				'closeEffect'   : 'elastic'
			});
		}
		else if (contentOnly) {
			$('#buy_block').attr('target', '_top');
		}
	}

	if ($('#bxslider li').length && !!$.prototype.bxSlider)
		$('#bxslider').bxSlider({

YopixelAE · March 2, 2017

Le choix de la police se fait via une liste déroulante (un select) ?

Si c'est le cas, la valeur de l'option choisie n'est pas récupérée.

Si c'est un radio non plus d'ailleurs.

policechausson=$("#policechausson").val();

PixGeek · March 2, 2017

liste déroulante

Comment faire alors?

YopixelAE · March 2, 2017

Par exemple :

var selectedOption = $('#MYSELECT option:selected').val();
Mais vous devez également écouter l’événement changement de choix.

Par exemple:

$('#MYSELECT').change(function() {
var selectedOption= $(this).find('option:selected');

// ... Do something
});

PixGeek · March 2, 2017

heuu, je le met ou ce varselected ?

PixGeek · March 2, 2017

hum, j'ai teste vos variables, mais cela ne fonctionne pas.

YopixelAE · March 2, 2017

C'est un code exemple.

Il permet de récupérer la valeur que vous attendez.

Bien sûr remplacez l'ID par votre propre sélecteur. Et ajoutez le gestionnaire d’évènement Change une fois le doc chargé (document ready).

Postez votre code -la partie utile- au fur et à mesure de vos tests, ce sera plus facile de vous guider.

PixGeek · March 2, 2017

Up..... je suis en train de devenir dingue !!!!

(Résolu) Bloc personnalisation

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in