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
  #1  
Old 11-09-2014, 02:34 PM
Chris Burns3's Avatar
Chris Burns3 is offline
 
Join Date: Jun 2013
Posts: 5
Default


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

Last edited by Wendy; 11-11-2014 at 11:23 AM.
The Following User Says Thank You to Chris Burns3 For This Useful Post:
Contragel Natural (05-02-2017)
  #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)
  #3  
Old 11-13-2014, 02:56 AM
Allanah Price's Avatar
Allanah Price Allanah Price is offline
Junior Member
 
Join Date: Nov 2014
Posts: 1
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.
Hi Wendy, I am using ecwid through my Crazy domains site, i don't have an advanced settings area to put the query code into... can you please help?
  #4  
Old 11-14-2014, 01:56 PM
Chris Burns3's Avatar
Chris Burns3 Chris Burns3 is offline
 
Join Date: Jun 2013
Posts: 5
Default

Awesome! Thanks Wendy!
I didn't know there was a place to add code in the advance settings area.
I will give it a try.
Thanks again!
  #5  
Old 11-14-2014, 03:49 PM
Wendy's Avatar
Wendy Wendy is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,123
Default

Quote:
Originally Posted by Allanah Price View Post
Hi Wendy, I am using ecwid through my Crazy domains site, i don't have an advanced settings area to put the query code into... can you please help?
Hello,
I will be glad to help you.

In general, if you'd like to add tabs in product descriptions, you should add these scripts in the source code of your website where Ecwid online store is installed.
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>
In order to add such scripts you should have an access to the source code of your website.

If you use Crazy Domains only as web hosting, an ability to edit pages of your website depends on the software which you use to manage the content of your site. I.e. your hosting is a storage where your site is placed physically.
You can install any CMS (content management system) you like to this storage and manage your site through it (edit pages, create sections, customize design, install plugins to extend a functionality).

In case you use Crazy Domains not only as a web hosting, but also as a site-builder, please contact Crazy Domains’ support to learn whether it is possible to add scripts in the source code of your website.

Also you should modify product description in Ecwid control panel → Catalog → Products → Product detailed page, please follow the instruction given in this article: http://help.ecwid.com/customer/porta...ct-description
__________________
Wendy
Ecwid Customer Care Team
Help Center


⬇ Please click Thanks if my reply helped you.
  #6  
Old 03-17-2016, 02:41 PM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Hi Everyone!

I'm glad to let you know that now it is possible to add tabs into product or category description using simple shortcodes in the description editing area via Tabber application. You can also customize the color and add different icons for each tab to make it look the way you want.

Go ahead and check out more details about the Tabber application!

Also feel free to browse Ecwid App Market for other apps that can help your store grow: https://www.ecwid.com/apps/

Thank you.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
  #7  
Old 03-18-2016, 02:51 PM
Raquel Marinho1's Avatar
Raquel Marinho1 Raquel Marinho1 is offline
Junior Member
 
Join Date: Mar 2016
Posts: 3
Default

That´s a good feature, thanks.

Is there a central point where I can find all of these "special features"? Like the Bag Icon with the minicart style, etc.
  #8  
Old 03-18-2016, 03:16 PM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by Raquel Marinho1 View Post
That´s a good feature, thanks.

Is there a central point where I can find all of these "special features"? Like the Bag Icon with the minicart style, etc.
Hi Raquel,

Glad you like it!

Please see the https://www.ecwid.com/apps/ page (or Ecwid Control Panel > Apps) for more applications to install in your store.

Thank you!
__________________
Ecwid API and App Market Team
Ecwid Developer Website
  #9  
Old 04-06-2016, 04:28 PM
Nicolas Shoes's Avatar
Nicolas Shoes Nicolas Shoes is offline
 
Join Date: Dec 2015
Posts: 1
Default Wix alternative solution

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.
Unfortunately Wix can't install Jquery , or add Jquerycode to the new editor. It's there an alternative solution for this problem?
  #10  
Old 04-12-2016, 01:55 PM
Daria Sh.'s Avatar
Daria Sh. Daria Sh. is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 767
Default

Quote:
Originally Posted by Nicolas Shoes View Post
Unfortunately Wix can't install Jquery , or add Jquerycode to the new editor. It's there an alternative solution for this problem?
Hi,

Thank you for posting your question here.

To add product tabs, you should add the scripts from the post above to "Advanced settings" area in your Wix editor. In the new editor this area exists too, it is just located in another place. Follow this way:

1. Open your Wix Editor > click "Edit site" button.
2. In the list of Pages open the page with your Ecwid store.
3. Double click on the area with the store and there will appear "Settings" button. Click on it.
4. Open “Design” tab and scroll down to Advanced settings.



There you will see a box where you can add the code.

Let us know if you need any further help. Thanks.
__________________
Daria
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
 
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 11:20 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.