View Single Post
  #2  
Old 11-11-2014, 11:59 AM
Wendy's Avatar
Wendy Wendy is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,123
Default

Quote:
Originally Posted by Chris Burns3 View Post
Is this possible to do since we cannot add jQuery libraries to our site. Any other work around's or is Ecwid planning to implement this any time soon?

bump
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.
__________________
Wendy
Ecwid Customer Care Team
Help Center


⬇ Please click Thanks if my reply helped you.
The Following 3 Users Say Thank You to Wendy For This Useful Post:
Chris Burns3 (11-14-2014), Raquel Marinho1 (03-18-2016), smartMart (05-22-2016)