importare codice javascript nella pagina personalizzata

Ciao Fabrizio,
non e' assolutamente possibile operare in questo modo.
Non si possono creare con Dreamweaver dei menu e poi fare un semplice copia/incolla su un altro ecommerce (non parlo solo di Ready, non puoi fare una cosa del genere con nessun sistema generalmente)  

Sia il CSS che il codice javascript vanno adattati per tentare di inserirli all'interno del template (cosa tutt'altro che semplice, anzi a dire il vero si farebbe prima a riscrivere tutto completamente).
Io posso darti delle indicazioni su come inserire degli elementi sull'ecommerce di Ready, ma dalle tue domande mi pare di capire che non hai delle buone di CSS e di javascript, quindi dubito che puoi arrivare a qualcosa di funzionante.  

Per inserire del codice CSS aggiuntivo
http://www.readypro.it/manuale/skin_base___personalizzare_alc.htm
Per inserire del codice javascript in pagina
http://www.readypro.it/manuale/inserimento_di_script_in_pagine_web.htm

ciao Fabio,

in che senso "sia il css che il codice javascript va adattato per tentare di inserirli all'interno del template"? come faccio a capire quali regole css vanno in conflitto e quali no? Ci sono delle regole ben precise per "adattarlo"? Avevo già letto comunque la guida in linea e ho già inserito il link del css dove andava messo e il codice javascript dove andava messo. Io credo sia questione di correttezza di sintassi del codice javascript. E il css inoltre sembra andare in conflitto con quello del sito pur mettendo delle classi ben precise a ogni tag html. C'è un metodo per verificare la corretta sintassi del javascript come sta fatto per l'html? Non credo di essere l'unico che vuole integrare un javascript nel proprio sito di ecommerce.

Il fatto che possa dire di fare una cosa del genere xkè non è possibile? è un semplice html, un css e un javascript, cose che il programma permette di integrare in una pagina personalizzata. In che senso non è possibile??  Oppure, perchè al programma si può indicare eventualmente solo il link del file css (come in figura) e di uno javascript no?

Citazione:
in che senso "sia il css che il codice javascript va adattato per tentare di inserirli all'interno del template"?

Citazione:
come faccio a capire quali regole css vanno in conflitto e quali no?

Citazione:
Avevo già letto comunque la guida in linea e ho già inserito il link del css dove andava messo

Citazione:
perchè al programma si può indicare eventualmente solo il link del file css (come in figura) e di uno javascript no?

ok, il discorso del css è assodato. Va studiato quello che viene utilizzato e vedere bene cos'è che va in conflitto. Ma per quanto riguarda il codice javascript, se non si fa copia e incolla nell'elemento Script della pagina personalizzata, come va importato? Scrivendolo a mano? non sarebbe la stessa cosa del copia/incolla? che senso ha? non è molto chiaro l'importazione di un javascript. Mi potrebbe dire come hanno fatto altri utenti a importare un javascript?

Citazione:
Mi potrebbe dire come hanno fatto altri utenti a importare un javascript?

ciao! molto bello il nuovo forum!

comunque il codice javascript me lo ha generato dreamweaver avendo utilizzato il suo menu cossidetto "spry" che genera appunto un css e un javascript...chiaramente il css lo modifico a mio piacimento, ma il file javascript lo lascio ccosì com'è



var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.TabbedPanels = function(element, opts)
{
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.bindings = [];
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover"
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;

Spry.Widget.TabbedPanels.setOptions(this, opts);

// If the defaultTab is expressed as a number/index, convert
// it to an element.

if (typeof (this.defaultTab) == "number")
{
if (this.defaultTab < 0)
this.defaultTab = 0;
else
{
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count)
this.defaultTab = (count > 1) ? (count - 1) : 0;
}

this.defaultTab = this.getTabs()[this.defaultTab];
}

// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.

if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);

this.attachBehaviors();
};

Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
{
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
}

Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
{
var children = [];
var child = element.firstChild;
while (child)
{
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
}
return children;
};

Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
{
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
{
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
if (!optionsObj)
return;
for (var optionName in optionsObj)
{
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
}
};

Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
{
if (this.element)
{
var children = this.getElementChildren(this.element);
if (children.length)
return children[0];
}
return null;
};

Spry.Widget.TabbedPanels.prototype.getTabs = function()
{
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
};

Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
{
if (this.element)
{
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[1];
}
return null;
};

Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
{
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
};

Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
{
ele = this.getElement(ele);
if (ele && arr && arr.length)
{
for (var i = 0; i < arr.length; i++)
{
if (ele == arr)
return i;
}
}
return -1;
};

Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
{
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
};

Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
{
return this.currentTabIndex;
};

Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
{
return Math.min(this.getTabs().length, this.getContentPanels().length);
};

Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
{
try
{
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
}
catch (e) {}
};

Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
{
this.showPanel(tab);
};

Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
{
this.addClassName(tab, this.tabHoverClass);
};

Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
{
this.removeClassName(tab, this.tabHoverClass);
};

Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
{
this.hasFocus = true;
this.addClassName(this.element, this.tabFocusedClass);
};

Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
{
this.hasFocus = false;
this.removeClassName(this.element, this.tabFocusedClass);
};

Spry.Widget.TabbedPanels.ENTER_KEY = 13;
Spry.Widget.TabbedPanels.SPACE_KEY = 32;

Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
{
var key = e.keyCode;
if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))
return true;

this.showPanel(tab);

if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();

return false;
};

Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
{
var stopTraversal = false;
if (root)
{
stopTraversal = func(root);
if (root.hasChildNodes())
{
var child = root.firstChild;
while (!stopTraversal && child)
{
stopTraversal = this.preorderTraversal(child, func);
try { child = child.nextSibling; } catch (e) { child = null; }
}
}
}
return stopTraversal;
};

Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
{
var self = this;
/*Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);*/
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return /*self.onTabMouseOver*/self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);

if (this.enableKeyboardNavigation)
{
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.

// Find the first element within the tab container that has a tabindex or the first
// anchor tag.

var tabIndexEle = null;
var tabAnchorEle = null;

this.preorderTraversal(tab, function(node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
{
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr)
{
tabIndexEle = node;
return true;
}
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
tabAnchorEle = node;
}
return false;
});

if (tabIndexEle)
this.focusElement = tabIndexEle;
else if (tabAnchorEle)
this.focusElement = tabAnchorEle;

if (this.focusElement)
{
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
}
}
};

Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
{
var tpIndex = -1;

if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);

if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;

var tabs = this.getTabs();
var panels = this.getContentPanels();

var numTabbedPanels = Math.max(tabs.length, panels.length);

for (var i = 0; i < numTabbedPanels; i++)
{
if (i != tpIndex)
{
if (tabs)
this.removeClassName(tabs, this.tabHoverClass); /*this.tabSelectedClass);*/
if (panels)
{
this.removeClassName(panels, this.panelVisibleClass);
panels.style.display = "none";
}
}
}

this.addClassName(tabs[tpIndex], this.tabHoverClass); /*this.tabSelectedClass);*/
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";

this.currentTabIndex = tpIndex;
};

Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
{
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();

for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs, panels);

this.showPanel(this.defaultTab);
};

Non è uno script semplice da esaminare, quindi rinnovo quanto scritto sopra da Fabio:

Integrare quel menu fatto con dreamweaver non e' detto che sia possibile, ed anche se fosse secondo me richiede molte modifiche manuali sia al CSS che allo script javascript (e quindi alcune ore di lavoro). Non e' purtroppo un tipo di supporto che possiamo fornire qui sul forum mi dispiace.

d'accordo grazie comunque

Purtroppo script cosi' complessi difficilmente puoi integrarli all'interno di un sistema complesso come Ready Pro. E anche se fosse li potresti inserire al massimo nel corpo pagina e non nel punto dove sarebbe piu' corretto che stiano (ad esempio al posto della barra dei menu in alto)
Puoi usare script come questi se realizzi un sito da zero con Dreamweaver, ma non si possono realizzare dei "pezzi" completi esternamente per poi inserirli dentro un altro sito.
Perche' questi "pezzi" non tengono conto del contesto in cui vengono inseriti, degli elementi gia' presenti, della struttura della pagina, ecc.
Non c'e' una soluzione semplice o alternativa. Devi "accontentarti" dei menu di Ready

ok tutto chiaro! si il posizionamento mi va bene nel corpo pagina anche se andrebbe messo di solito in alto...grazie ancora!

Fabio, avrei risolto il problema modificando però i file javascript e css che utilizza già l'e-commerce. Vi chiedo comunque se la modifica di questi file è permessa da voi e se devo rispettare dei copyright. Se si allora annullo le modifiche e non tocco nulla, altrimenti mi rendereste felice e risolverei il problema attendo notizie!

Il CSS base (red) fornito con l'ecommerce puoi modificarlo usando questo sistema:

http://www.readypro.it/manuale/template_standard___utilizzo_di_un_css_personalizzato.htm

Invece per quanto riguarda il resto non e' permesso modificarlo, non tanto per il copyright quanto per il fatto che ad ogni aggiornamento del template (e ne rilasciamo circa 7-8 all'anno) tutte le tue modifiche verrebbero sovrascritte e perse.
Se devi AGGIUNGERE delle funzioni javascript (non modificare quelle esistenti) puoi usare le apposite opzioni presenti su Ready (senza modificare manualmente nessun file del template)
Come spiegato qui:
http://www.readypro.it/manuale/inserimento_di_script_condivis.htm

si infatti provavo ad aggiungere il codice javascript dal piè di pagina ma a quanto pare bastava solo rispettare la sintassi richiesta, cioè aggiungere  

<script>
//<![CDATA[
.....
//]]>
</script>

così facendo sembra che il javascript funzioni

per il css ho qualche difficoltà perchè il tag ul sembra andare in conflitto con il css che usa il programma, dovrei risolvere comunque utilizzando le classi. Vi farò sapere prossimamente dopo le ferie grazie Fabio!