Anzeige und Anpassung der Artikelnummer abhängig der Auswahl der Produktvariante im Webshop

Der nachfolgende Artikel beschreibt, wie man mit Hilfe der Scriptsprache JavaScript, die Anzeige der Artikelnummern im Webshop dynamisch zur Auswahl der Produktvariante geändert anzeigen lassen kann (siehe nachfolgende Abbildungen):

Um die angedachte Anforderung im Frontend des Open Source ERP System Odoo zu ermöglichen, muss man Anpassungen/ Erweiterungen 

• in der .xml Datei
• im Controller
• sowie in der JavaScript-Datei 

vornehmen bzw. tätigen. Nachfolgend werden die aufgezeigten Codeausschnitte das Vorgehen erläutern, um das oben aufgeführte und angedeutete Erscheinungsbild bzw. Verhalten zu ermöglichen. 

.xml Datei:

Die .xml-Datei gibt lediglich die Position wieder, an der die Artikelnummer (eqDefaultCode) angezeigt werden soll. Mit Hilfe von <t t-if="show_article_no"> ... </t> wird das allgemeine Anzeigen der Artikelnummer geregelt. Ist in diesem Fall das show_article_no Flag auf der Konfigurationsseite gesetzt, so wird die Artikelnummer angezeigt. Ist dies nicht der Fall so wird die Artikelnummer ausgeblendet. Das Tag <t t-esc .... /> signalisiert lediglich der Oberfläche die Ausgabe der Produktvarianten spezifische Artikelnummer im Webshop.

			<!-- show also article no -->
			<xpath expr="//h1[@itemprop='name']" position="before">
				<t t-if="show_article_no">
					<strong name="eqDefaultCode">
						<t t-esc="product.default_code" id="txtDefaultCode" />
					</strong>
				</t>
			</xpath>

Controller.py:

Grundsätzlich dient der Controller zur Steuerung und ist dabei für die Verarbeitung der Eingaben des Benutzers zuständig. Die nachfolgende Funktion des Controllers dient zur Ermittlung der verschiedenen Artikelnummern der verschiedenen Produktvarianten. 

	@http.route(['/get_default_code_json'], type='json', auth="public", website=True)
    def get_default_code_json(self, product_id):
        """
            Get default code of the various variants.
            @product_id: actual product_id 
            @return: the default code of the variant
        """
        
        print "------- product_id: ", product_id
        cr, uid, context, pool = request.cr, SUPERUSER_ID, request.context, request.registry
        product_obj = http.request.env['product.product']
        product_record = product_obj.browse(product_id)                
        if product_record:
            return product_record.default_code
        return -1

JavaScript-Datei:

Mit Hilfe von JavaScript soll nun bei dieser Auswahl der jeweiligen Produktvariante, die jeweiligen dazugehörige Artikelnummer ausgegeben werden. Nachfolgend wird die in der Controller.py Datei definierte Funktion aufgerufen und das Ergebnis an der vorher in der .xml Datei festgelegten Stelle ausgegeben. Hierbei wird die bereits vorhandene JavaScript Funktion für das Change-Event der Radio-Buttons mit dem unten aufgeführten Codeabschnitt erweitert. JavaScript wird hier außerdem auch dafür genutzt, dass kein erneutes Laden der Webseite notwendig ist.

					// get_default_code_json
	            	openerp.jsonRpc("/get_default_code_json", 'call', {product_id}).then(function (result) {
	            		//console.log("result: " + result);
	            		
	            			// set result on ui
	            			$("strong[name='eqDefaultCode']").text(result);
	        		});

Zusammenfassung:

Dieser Artikel sollte verdeutlichen wie man mit Hilfe von den oben genannten Werkzeugen auf das Ändern des Zustands der Radio-Buttons reagieren kann, um so die gewollte Ausgabe abhängig von der Auswahl des Radio-Buttons zu bekommen und so in unserem Fall bei einer geänderten Auswahl der Produktvariante auch die Artikelnummer der Produktvariante anzupassen..