The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #11  
Old 05-22-2016, 12:42 AM
Eric Weaver's Avatar
Eric Weaver is offline
 
Join Date: May 2016
Posts: 1
Default


I tried it on my Wix site and the tabs don't show up.
  #12  
Old 05-23-2016, 03:16 PM
Bill Watts's Avatar
Bill Watts Bill Watts is offline
 
Join Date: Apr 2016
Location: Littleton, CO, USA
Posts: 46
Default Wix and Tabs

I tried following these instructions but am not able to make it work on my Wix-based website. I like the tab concept but don't want to pay the additional fees for Tabber. If someone has a working Wix-based website using tabs described here (without using Tabber), please send me a link so I can see how it's supposed to work. When I do my customizations, I get a bullets instead of tabs in my product descriptions.
Thanks in advance,
Bill
  #13  
Old 05-23-2016, 04:53 PM
Irene S's Avatar
Irene S Irene S is offline
 
Join Date: Apr 2016
Posts: 52
Default

Quote:
Originally Posted by Eric Weaver View Post
I tried it on my Wix site and the tabs don't show up.
Hello Eric,

I looked at the product descriptions in your control panel and found that you forgot to paste the code into the product description field which Wendy gave in this message.

In order to do it you should go to Ecwid control panel -> Catalog -> Products -> Product detailed page and place the code from Wendy’s message into the product description field using HTML mode:


Hope it is helpful.
  #14  
Old 05-31-2016, 10:22 AM
Irene S's Avatar
Irene S Irene S is offline
 
Join Date: Apr 2016
Posts: 52
Default

Quote:
Originally Posted by Bill Watts View Post
I tried following these instructions but am not able to make it work on my Wix-based website. I like the tab concept but don't want to pay the additional fees for Tabber. If someone has a working Wix-based website using tabs described here (without using Tabber), please send me a link so I can see how it's supposed to work. When I do my customizations, I get a bullets instead of tabs in my product descriptions.
Thanks in advance,
Bill
Hello Bill,

I checked product descriptions in your control panel and found that you didn’t paste the code in product description fields which Wendy gave. Please compare the screenshot below with the code for the description field in Wendy’s message. Follow the above instructions in order to add tubs on your Wix site.



If you have any other questions, I am ready to answer them.
  #15  
Old 12-15-2016, 04:45 PM
BSWC17's Avatar
BSWC17 BSWC17 is offline
 
Join Date: Nov 2016
Posts: 4
Default

Quote:
Originally Posted by Wendy View Post
Hello Chris,

As I understand, you would like to add tabs in the product descriptions in your Ecwid store using this instruction: How to add tabs in product description

At the moment it is absolutely possible to use this scheme on your Wix-based website. In order to setup tabs in the product description you should install jQuery and jQuery libraries to your site. Please place this code in the “Advanced settings” field in the Wix admin area:
Code:
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page){
   if (page.type == "PRODUCT") {
        $( "#tabs" ).tabs();
   }
})
</script>
Where to find the “Advanced settings” field:
- Open your Wix administration area, choose “Edit site”, then open the page where you added Ecwid app.
- Place the cursor on the area with shop and double click. A popup window with app settings will appear.
- Scroll down to advanced settings. There will be a box where you can add the code.
- Add your code to a box. Close this popup. Then save the changes and click “Publish” button.



Then you should slightly modify product description in Ecwid control panel → Catalog → Products → Product detailed page. Place the following code into the product description field (use "HTML" mode):
Code:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab name 1</a></li>
<li><a href="#tabs-2">Tab name 2</a></li>
<li><a href="#tabs-3">Tab name 3</a></li>
</ul>
<div id="tabs-1">
<p>Tab content 1</p>
</div>
<div id="tabs-2">
<p>Tab content 2</p>
</div>
<div id="tabs-3">
<p>Tab content 3</p>
</div>
</div>
Replace "Tab name" with the required name and "Tab content" with the corresponding content. Do not forget to save the changes.

Once you perform these steps, tabs will appear on all products, which has tabs-formatted description.
Thanks for this, however when i do this it shows up like:
  • •Tab name 1
  • •Tab name 2
  • •Tab name 3
Tab Content 1

Is there any way to get it to look like it would if I used the Tabber App (which can't use as I'm using ecwid through the Wix platform)

Thanks in advance

Chris
  #16  
Old 12-15-2016, 04:57 PM
BSWC17's Avatar
BSWC17 BSWC17 is offline
 
Join Date: Nov 2016
Posts: 4
Default

Sorry! I hadn't applied the changes to the Ecwid CSS styles, it works now haha
  #17  
Old 12-16-2016, 01:49 PM
Clara K's Avatar
Clara K Clara K is offline
Ecwid Team
 
Join Date: Nov 2014
Posts: 655
Default

Hi Chris,

Thanks a lot for contacting us!

I am very glad it works now =)

Please do not hesitate to contact us if you need any further help, we will be happy to answer your questions.

Thank you!
__________________
Clara
Ecwid Customer Care Team

Help Center


⬇ Please click Thanks if my reply helped you.
  #18  
Old 02-15-2017, 08:09 AM
Annelisa's Avatar
Annelisa Annelisa is offline
Junior Member
 
Join Date: Dec 2016
Posts: 4
Default

I was able to add tabs previously, however now there appears to be a problem and the tabs do not work properly. Was there an update to wix/ecwid that causes a bug/problem?

I can actually see the tabs in my wix website editor, however when I go to the live website I can't view it at all.
  #19  
Old 02-16-2017, 07:48 PM
Una Q's Avatar
Una Q Una Q is offline
Ecwid Team
 
Join Date: Nov 2016
Posts: 151
Default

Hello, Annelisa!

Thank you for contacting us. I am really sorry you faced difficulties with tabs adding! I will be happy to help.

I’ve checked the way tabs are added to the product description in a Wix website and it works properly. Also, I’ve inspected your product descriptions in your control panel and found out that you didn’t paste the right code in product description fields. I can’t examine your Wix settings, so let me just provide you with a detailed instruction.

In order to add tabs you need to follow the next steps:

1) Go to Wix HTML Editor->Pages->"Online Store” page. Then click “Settings” button, Choose “Design” tab and scroll down to Advanced settings. There is a box where you can add the code.






You need to add the following code there:

Quote:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page){
if (page.type == "PRODUCT") {
$( "#tabs" ).tabs();
}
})
</script>
2) Then go to your Ecwid control panel->Catalog->Products, open a product to edit and paste the below code in the description tab->HTML editor




Once you open HTML editor, add the following code there:

Quote:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab name 1</a></li>
<li><a href="#tabs-2">Tab name 2</a></li>
<li><a href="#tabs-3">Tab name 3</a></li>
</ul>
<div id="tabs-1">
<p>Tab content 1</p>
</div>
<div id="tabs-2">
<p>Tab content 2</p>
</div>
<div id="tabs-3">
<p>Tab content 3</p>
</div>
</div>


Please remember to rename "Tab name" to the titles of your description tabs and replace the "Tab content” with your own description.

3) And the last step — go to your Ecwid control panel> Settings>Design->Edit Theme and add the following code to your current CSS theme (open the link and copy the code): http://pastebin.com/raw/u0sCiQyf Save the changes.


I’ve just added tabs to the product description in my test store on a Wix website and they all are displayed as they should:




That’s it. I really hope this helps! If you have any further questions, please feel free to ask.

Best regards,
Una Q., Ecwid Support Team
The Following 2 Users Say Thank You to Una Q For This Useful Post:
Annelisa (02-17-2017), smartMart (02-17-2017)
  #20  
Old 02-17-2017, 01:20 AM
Annelisa's Avatar
Annelisa Annelisa is offline
Junior Member
 
Join Date: Dec 2016
Posts: 4
Default

Thank you so much for offering help so quickly! The thing is previously my tabs worked, but now it doesn't! Wondering if any of my codes are wrong?

I actually edited the codes for the tabs to customise the look! Not sure if anything went wrong. This is the code I pasted in the CSS theme:
Quote:
.ui-tabs { position: relative; padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { margin: .4em 1em; padding: .2em .2em 0; height:36px;}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px;
border-bottom: 0;
padding: 0;
white-space: nowrap;
border: 1px solid #000000;
background: #FFC67C;
width: 200px;
}

.ui-tabs .ui-tabs-nav li a {
float: left;
padding: .3em 0;
text-decoration: none;
text-align: center;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px;
background: #FF9E21;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
cursor: default;
color: #000000;
border-bottom: 2px solid #000000;
}

.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; }

.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
display: block; border-width: 0; padding: 1em 1.4em; background: none;
}

/* Interaction states -----------*/
.ui-state-default {
border: 1px solid #d3d3d3;
background: #e6e6e6 none;
font-weight: normal;
color: #555555;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
color: #888888;
text-decoration: none;
}
.ui-state-hover, .ui-state-focus {
border: 1px solid #999999;
background: #dadada none;
color: #212121;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
color: #212121;
text-decoration: underline;
border-bottom: 1px solid;
}
.ui-state-active {
border: 1px solid #aaaaaa;
background: #ffffff;
color: #212121;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }

/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/; }

.ui-widget-header {
color: #222222;
font-weight: bold;
}
#tabs {
background: #FFFFFF none;
border: 1px solid #AAAAAA;
color: #222222;
padding: 1px;
width: 100% !important;
}

a.fill-div {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
The last part a.fill-div is my attempt of making the whole div clickable.

This is what I pasted in "1) Go to Wix HTML Editor->Pages->"Online Store” page. Then click “Settings” button, Choose “Design” tab and scroll down to Advanced settings. There is a box where you can add the code."
Quote:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page){
if (page.type == "PRODUCT") {
$( "#tabs" ).tabs();
}
})
</script>
And this is what I paste in the HTML Editor:
Quote:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Description</a></li>
<li><a href="#tabs-2">More Information</a></li>
</ul>
<div id="tabs-1">
<p>Tab Content 1
</p>
</div>
<div id="tabs-2">
<p>Tab content test 2
</p>
</div>
</div>
Also previously I added in a part in the HTML editor that makes the whole div clickable. This is what it looks like:
Quote:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Description</a></li>
<li><a href="#tabs-2">More Information</a></li>
</ul>
<div id="tabs-1" class="fill-div">
<p>Tab Content 1
</p>
</div>
<div id="tabs-2" class="fill-div">
<p>Tab content test 2
</p>
</div>
</div>
But i since then removed the class="fill-div" as i was wondering if it made it not work.

But it still looks like: https://www.dropbox.com/s/ivg5f1gny5...20AM.png?dl=0#


Is any part of my codes messed up?

Last edited by Annelisa; 02-17-2017 at 01:33 AM.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
description, product, tabs, wix

Thread Tools
Display Modes

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

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:49 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.