The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
Closed Thread
 
Thread Tools Display Modes
  #1  
Old 03-05-2012, 02:38 AM
kevin moore's Avatar
kevin moore is offline
 
Join Date: Feb 2012
Posts: 2
Default

Change Gallery Appearance/Layout?


Hello,

My products have a lot of options (over 200). And, I currently have a picture in my gallery corresponding to each. So, my problem is this: Currently, my gallery-layout is only 4 pictures across (which is even thinner than the box containing my options) and with so many pictures in my gallery, my gallery's appearance is pretty lousy. It appears as a long, thin strip of pictures running way too far way from my product.

So, Is there a way to change my gallery's layout, so that I could have, say, 10 thumbnail images per line...without making my product image smaller?

Also, a related question (so it seems to me): Is there a way to center my product/options/gallery on product page? It is currently aligned on the left side of the page with a large blank margin just right of my option choices.

Thank you in advance!
  #2  
Old 03-06-2012, 05:16 PM
Kess's Avatar
Kess Kess is offline
Senior Member
 
Join Date: Feb 2012
Posts: 2,071
Default

First of all I should say that the wide white area to the right can be removed in your Worldpress themes - please go to the the Worldpress admin panel -> Pages ->Page attributes and check, if the you can select the layout without sidebar for your template.


After the sidebar is disabled, you can make the right column (with the options) wider by adding the following CSS rules in your Ecwid control panel -> System Settings -> Design tab:

[QUOTE]
div.ecwid-productBrowser-details-rightPanel div.ecwid-productBrowser-backgroundedPanel{
max-width: none;
}

Quote:
div.ecwid-productBrowser-details-GalleryPanel {
width: auto;
}
And if you would like the whole column with the options to be moved under the product description - this can be achieved by creating a custom script with the help of JavaScript API, that will move the content of the right column under the product description. Please refer to the following thread for solution:
http://www.ecwid.com/forums/showthread.php?p=43661
__________________
Ksenia Lukacher
The Following User Says Thank You to Kess For This Useful Post:
kevin moore (03-17-2012)
  #3  
Old 03-11-2012, 09:46 PM
kevin moore's Avatar
kevin moore kevin moore is offline
 
Join Date: Feb 2012
Posts: 2
Default

Thank you so much, Kess.

Very helpful. I know how to update the CSS rules (thank you for the rules I needed). However, I am pretty clueless on how to add a custom script with JavaScript API and jquery. Is this something that is easy to do? And, if so, would you be so kind to tell me how to do this or direct me where I can learn how? (I would need some pretty simple/plain directions--I will not feel insulted if you talk to me like I am a 10 year old).

I looked at the links that you provided for how to do this; but, I didn't see how to add custom script, where it goes, what I need to do it, etc.

This may be too far over my head to try to explain it. And, if that is the case, I understand. But, I am pretty ambitious if I can get some direction.

Blessings,

Kevin
  #4  
Old 03-13-2012, 12:47 PM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,878
Default

In order to move gallery thumbnails under product description you should use following javascript code, which should be inserted in the end of HTML page where Ecwid was installed:
Code:
<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page) {
    if (page.type == "PRODUCT") {       jQuery("div.ecwid-productBrowser-details-GalleryPanel").insertAfter(".ecwid-productBrowser-details-descr");
    }
})
</script>
In this simple script I used Javascript API in order to detect that Ecwid page has been loaded (Ecwid.OnPageLoaded.add) and in order to define that loaded page is product details page (if (page.type == "PRODUCT")). When product detailed page is opened, script finds the block, where gallery thumbnails is placed (this is the element with ecwid-productBrowser-details-GalleryPanel CSS class ) and moves this block using insertAfter jQuery function after product description container (this element has ecwid-productBrowser-details-descr CSS class). In the same manner you can move gallery thumbnails block under main image container (you should use ecwid-productBrowser-details-thumbnail CSS class in insertAfter function).

Once you add this code the page gallery thumbnails will be moved under product description block.

If you have any questions, please, feel free to ask.
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
The Following 7 Users Say Thank You to Maya For This Useful Post:
Bay Medical Pty Ltd (03-25-2013), info1812 (07-25-2013), kevin moore (03-17-2012), Minerva.us (11-08-2018), Nicki Traikos (02-20-2013), qutefashion (05-02-2012), undefined8734 (08-06-2015)
  #5  
Old 07-11-2012, 04:26 PM
Karl Kemp's Avatar
Karl Kemp Karl Kemp is offline
Junior Member
 
Join Date: Apr 2011
Posts: 15
Default How to do this in Joomla

I could use some guidance -how does this get done in Joomla? I have tried adding the code into nearly every php file I can find that is com_ecwid.

Much thanks
  #6  
Old 07-11-2012, 05:32 PM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,766
Default

Quote:
Originally Posted by Karl Kemp View Post
I could use some guidance -how does this get done in Joomla? I have tried adding the code into nearly every php file I can find that is com_ecwid.

Much thanks
You do not need to put that code into php files. Please, refer to this article: http://kb.ecwid.com/w/page/22978888/...lationinJoomla (it refers to custom translations, but the custom translations rely on using a bit of specific JavaScript, so that advice basically tells how to publish your own custom script in Joomla RokEcwid-based page)
__________________
Eugene Efimochkin, Team
_________________________
Shipping methods are not showing up? Here is how to set it up properly!
Have a question? Look up the answer at our help portal!

⬇ Click Thanks, please, if this reply helped you.
  #7  
Old 07-15-2012, 11:11 PM
Karl Kemp's Avatar
Karl Kemp Karl Kemp is offline
Junior Member
 
Join Date: Apr 2011
Posts: 15
Default

I gave this a shot and I cannot get it to work - I went so far as to try all the custom html module tricks listed - a little help? The site is karlkemp.com

Thanks
  #8  
Old 07-16-2012, 07:55 AM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,878
Default

Quote:
Originally Posted by Karl Kemp View Post
I gave this a shot and I cannot get it to work - I went so far as to try all the custom html module tricks listed - a little help? The site is karlkemp.com

Thanks
Please, refer to this article for details: http://kb.ecwid.com/w/page/51601760/...%20in%20Joomla

Also, could you give me a screenshot of your custom HTML module settings and link to the page, where it should be shown? Thank you in advance.
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
  #9  
Old 08-13-2012, 06:01 PM
Karl Kemp's Avatar
Karl Kemp Karl Kemp is offline
Junior Member
 
Join Date: Apr 2011
Posts: 15
Default

Hi Maya - I did read through to that article and it did not followed accordingly but it did not help. I tried two different modules. Screencaps of each attached.
Attached Thumbnails
Click image for larger version

Name:	jtricks custom module.jpg
Views:	220
Size:	68.1 KB
ID:	1375   Click image for larger version

Name:	standard custom module.jpg
Views:	213
Size:	85.5 KB
ID:	1376  
  #10  
Old 08-14-2012, 08:13 AM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,878
Default

Quote:
Originally Posted by Karl Kemp View Post
Hi Maya - I did read through to that article and it did not followed accordingly but it did not help. I tried two different modules. Screencaps of each attached.
Thank you for provided screenshots.

I have checked your site and as far as I can see the script is placed properly there. The reason why this script doesn't work is that you haven't installed Jquery library, which is required for script work.

Please, refer to this post for details how to install Jquery on your site: http://www.ecwid.com/forums/showthread.php?t=12982#4
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
Closed Thread
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

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 03:05 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.