View Single Post
  #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