Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

How to display color name when swatch is chosen

 
Reply
   X-Cart forums > X-Cart 5 > Dev Questions (X-Cart 5)
 
Thread Tools Search this Thread
  #1  
Old 12-21-2018, 12:13 PM
 
rct rct is offline
 

Advanced Member
  
Join Date: Dec 2004
Posts: 89
 

Default How to display color name when swatch is chosen

I already owned the color swatch mod for xcart 5, however I have a question, how do I display color name when swatch is chosen so that it will show next to the "color" attribute? See attachment for sample

When it is in mobile, people cannot see the selected color from the "popover" .

Do I change the CSS file or the js script?

Any suggestions? Thanks
Attached Thumbnails
Click image for larger version

Name:	RlRLq.png
Views:	406
Size:	188.3 KB
ID:	5267  
__________________
JOHN - v.5.3.X biz, X-payment 3.X
Reply With Quote
  #2  
Old 12-22-2018, 11:16 AM
  qualiteam's Avatar 
qualiteam qualiteam is offline
 

X-Guru
  
Join Date: Dec 2010
Posts: 6,373
 

Default Re: How to display color name when swatch is chosen

You could use 'Custom JS', perfectly suits this task.
__________________
Alex Solovev,
Qualiteam

---

User manual Video tutorials X-Cart FAQ

You are welcome to press "Thanks" button
if you find this post useful

Click here to learn how to apply patches

X-Cart Extensions
Reply With Quote
  #3  
Old 01-02-2019, 12:27 PM
 
rct rct is offline
 

Advanced Member
  
Join Date: Dec 2004
Posts: 89
 

Default Re: How to display color name when swatch is chosen

Quote:
Originally Posted by qualiteam
You could use 'Custom JS', perfectly suits this task.
Found a script which might work , however I am not very sure which variable to use. Please help!

I put this in the colorswatch/controller.js


jQuery(function(){
$(".color-swatches input[type=radio]:").change(function(){
jQuery('.active-color').text($(".color-swatches input[name^="attribute_values"]:checked").val());
})
})

the following in colorswatch/body.twig
<span class ="active-color"></label>
__________________
JOHN - v.5.3.X biz, X-payment 3.X
Reply With Quote
  #4  
Old 01-02-2019, 08:14 PM
 
rct rct is offline
 

Advanced Member
  
Join Date: Dec 2004
Posts: 89
 

Default Re: How to display color name when swatch is chosen

Or if there's any other solutions , basically user complains about not able to see the color option when using mobile. See the attached pic.

If we can use tooltips or if there's a way to enlarge the "caption box"? I cannot find anything from the css file and the xcart techsupport will not help without any payment.

Thanks.
Attached Thumbnails
Click image for larger version

Name:	swatch.jpg
Views:	402
Size:	395.3 KB
ID:	5276  
__________________
JOHN - v.5.3.X biz, X-payment 3.X
Reply With Quote
  #5  
Old 01-05-2019, 12:22 PM
  qualiteam's Avatar 
qualiteam qualiteam is offline
 

X-Guru
  
Join Date: Dec 2010
Posts: 6,373
 

Default Re: How to display color name when swatch is chosen

Ok, I've done the following (the better way than JS).


1. Added the following method to XLite/Module/QSL/ColorSwatches/View/Product/AttributeValue/Customer/Select.php


PHP Code:
protected function getSwatchName(\XLite\Model\AttributeValue\AttributeValueSelect $value)
    {
        return 
$this->getOptionTitle($value);
      } 
2. In template customer/modules/QSL/ColorSwatches/product/attribute_value/select/body.twig added the following line

Code:
<h6> {{ this.getSwatchName(v)|raw }} </h6>


just after this line


Code:
</li> {% endfor %}


And I got the following (screenshot attached).
You can play with CSS a bit to make it look different, but the idea is here.
Attached Thumbnails
Click image for larger version

Name:	swatches.png
Views:	391
Size:	81.4 KB
ID:	5278  
__________________
Alex Solovev,
Qualiteam

---

User manual Video tutorials X-Cart FAQ

You are welcome to press "Thanks" button
if you find this post useful

Click here to learn how to apply patches

X-Cart Extensions
Reply With Quote
  #6  
Old 01-07-2019, 09:05 AM
 
rct rct is offline
 

Advanced Member
  
Join Date: Dec 2004
Posts: 89
 

Default Re: How to display color name when swatch is chosen

Thank you very much for your help. The <h6> tag should be right after

{{ this.getModifierTitle(v)|raw }}
__________________
JOHN - v.5.3.X biz, X-payment 3.X
Reply With Quote
  #7  
Old 01-09-2019, 11:54 AM
  qualiteam's Avatar 
qualiteam qualiteam is offline
 

X-Guru
  
Join Date: Dec 2010
Posts: 6,373
 

Default Re: How to display color name when swatch is chosen

Quote:
Originally Posted by rct
Thank you very much for your help. The <h6> tag should be right after

{{ this.getModifierTitle(v)|raw }}

That's correct.
But please remember that you should apply any changes to PHP code as a module, otherwise it will be overwritten during the next update of the cart (or the module in this particular case).
What I posted is just an example.
__________________
Alex Solovev,
Qualiteam

---

User manual Video tutorials X-Cart FAQ

You are welcome to press "Thanks" button
if you find this post useful

Click here to learn how to apply patches

X-Cart Extensions
Reply With Quote
Reply
   X-Cart forums > X-Cart 5 > Dev Questions (X-Cart 5)


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 12:18 PM.

   

 
X-Cart forums © 2001-2020