https://www.pierrecardinuk.com/wp-content/themes/storefront-child/…?ver=e1865a9e0769a779105054ffe525b9d0

1jQuery(document).ready(function($){
2$("#refills-tool").hide();
3
4//Hide pen-checkout-block EXCEPT THE COLOR CHOICE
5$("#pen-checkout-block").hide();
6$("#adjust-qty-block").hide();
7
8	$(".color-picker").on( "click", function(color){
9		pickColor($(this), $(this).data("colorlabel"));
10		var isSinglePen=true;
11		isSinglePen=(!$(this).hasClass("family-pic")) && (!$(this).hasClass("case-pic"))  && (!$(this).hasClass("gallery-pic")) ;
12		if(!isSinglePen){
13			return;
14		}
15
16		if(!updatePreviewTimer){
17			var updatePreviewTimer=setInterval(updatePreview, 300);
18		}
19	});
20	
21	//If only one colour, auto-select it
22	var countColours=$(".color-form.prod-col-form").eq(0).find(".radio-option.color-btn").length;
23	if(countColours==1){
24		//wait maybe one second...
25		setTimeout(function(){
26			$(".color-form.prod-col-form").eq(0).find(".radio-option.color-btn .color-picker").click();
27		},1000);
28	}
29
30});
31
32		
33//Color swatches handler
34function pickColor(color, colorLabel){
35	console.log("pick color function triggered with color " + colorLabel);
36	jQuery(".color-picker").removeClass("selected-pic");
37	jQuery(color).addClass("selected-pic");
38	
39	var isFamily=jQuery(color).hasClass("family-pic");
40	var isGallery=jQuery(color).hasClass("gallery-pic");
41	var isCase=jQuery(color).hasClass("case-pic");
42	var isPenInCase=jQuery(color).hasClass("penincase-pic");
43	var childCaseLocation=thumbnailsPath+"cases/with_pens/"+ jQuery(color).data("childsku")+".jpg";
44	var childCaseZoomLocation=basePath+"cases/with_pens/"+ jQuery(color).data("childsku")+".jpg";
45	
46	//Make sure the personnalised checbox is UNCHECKED
47	var childId=jQuery(color).data("childid");
48	//Add selected attribute
49	jQuery(".color-picker").removeClass("selected");
50
51	//Add selected class ONLY if it's a color...
52	jQuery(".color-picker[data-childsku='"+jQuery(color).data("childsku")+"']").addClass("selected");
53	var childSku=jQuery(color).data("childsku");
54	
55	var isCustomizable=jQuery(".product-customisation-option#engraving-opt").length;
56	
57	//Update gallery with the new images... Hide the parent images ONLY if it's been selected outside of the gallery
58	var prodName=jQuery(".prod-name .prodname-label").html();
59	var prodNamePrefix=prodName.replace(/\s/g,'-');
60 
61	prodNamePrefix=prodNamePrefix.toLowerCase()+"-";
62	var baseImagesFolder="https://www.pierrecardinuk.com/wp-content/uploads/base_images/";
63
64	if(!isFamily && !isCase && !isPenInCase && !isGallery){
65		// Not a family pic, neither in case, neither penincase, neither gallery pic. So we must HIDE THEM ALL
66		
67		jQuery("#product-gallery li").hide();
68		
69		//SHOW ONLY THE selected child
70		
71		jQuery("#product-gallery li[data-childsku='"+childSku+"']").show();
72		
73		var newImage=baseImagesFolder+prodNamePrefix+ jQuery(color).data("childsku") +".jpg";
74		var newImageArtwork=baseImagesFolder+"Cropped/"+ jQuery(color).data("childsku") +".png";
75		
76	}
77	else{
78		//New Image has a different value if it's a family image
79		if(isFamily){
80			var newImage=baseImagesFolder+prodNamePrefix+jQuery(color).data("familysku")+".jpg";
81		}
82		if(isGallery){
83			var galleryPicId=jQuery(color).data("galleryid");
84			var newImage=baseImagesFolder+"gallery/"+galleryPicId+".jpg";
85		}
86		else if(isCase){
87			var casePrefix="Case-";
88			var newImage=baseImagesFolder+"cases/"+casePrefix+jQuery(color).data("familysku")+".jpg";
89		}
90		else if(isPenInCase){
91			var casePrefix="giftbox-";
92			var newImage=baseImagesFolder+"cases/with_pens/"+prodNamePrefix+casePrefix+jQuery(color).data("childsku")+".jpg";
93			var newImageArtwork=baseImagesFolder+"Cropped/"+jQuery(color).data("childsku") +".png";
94		}
95		
96	}
97	
98	//Update image for main container
99	jQuery("#zoompic > img").attr("src", newImage);
100	jQuery("#zoompic > img").attr("alt", newImage);
101	jQuery("#zoompic > img").attr("data-zoom", newImage);
102		
103	
104	if(isFamily || isCase || isGallery){
105		return;
106	}
107	
108	//Show price tag (but no the "personalisation" and "giftwarp " checkboxes)
109	jQuery("#pen-checkout-block").show();
110	
111	//Show Quantity picker box to make adjustments
112	var priceTag=jQuery(color).data("price");
113	jQuery("#adjust-qty-block #prod-price #pricetag").attr("data-unitprice", priceTag);
114	jQuery("#adjust-qty-block  #pen-qty").attr("data-unitprice", priceTag);
115	jQuery("#adjust-qty-block #prod-price #pricetag").html("£"+priceTag);
116
117		
118	jQuery("#adjust-qty-block").show();
119	jQuery("#pen-checkout-block .customcharge-box").hide();
120	jQuery("#pen-checkout-block #pen-name-tag").attr("data-color", colorLabel);
121	jQuery("#pen-checkout-block #pen-name-tag").attr("data-unitprice", priceTag);
122	
123	//Take quantity from 
124	var penQuantity=jQuery("#adjust-qty-block #quantity-select .input-group .input-number").val();
125	jQuery("#pen-checkout-block #pen-name-tag").attr("data-quantity", penQuantity);
126	
127	//Update price tag
128	jQuery("#pen-name-tag #penname-label").html(jQuery(color).data("c

128olorlabel"));
129	updateTotal();	
130	
131	//If the product can not be personalised with engraving or refills, do not go further
132	if(!isCustomizable){
133		return;
134	}
135
136	
137	//Update the zoom two ONLY with the single image
138	jQuery("#zoompic-two > img").attr("src", newImageArtwork);
139	jQuery("#zoompic-two > img").attr("alt", newImageArtwork);
140	
141	
142	
143	var chosenText=jQuery("#custom-message-block .text-line-block input").val();
144	var messageLineOne= jQuery("#custom-message-block #text-line-one-block input").val();
145	var messageLineTwo= jQuery("#custom-message-block #text-line-two-block input").val();
146
147	//Update prevew ONLY if the text field is not empty, otherwise it will show strange result, like very dark image for the Tournier Fountain Pen
148	if(messageLineOne !="" || messageLineTwo !=""){
149		updatePreview();
150	}
151	
152}
153