Hulp gevraagd javascript / wordpress
Ik had een vraag over javascript i.c.m. wordpress. Ik heb een script dat ik moet installeren op mijn website, maar heb geen idee hoe dit moet aanpakken. Wie zou hiermee kunnen helpen, uiteraard tegen betaling. Groet Leon
Wat voor script?
Wat zijn eventueel de stappen die je moet uitvoeren?
Als je echt iemand zoekt die het voor jou gaat maken, dan kan je een vacature aanmaken in het Vacature-forum op onze website. Lees ook vooraf de regels van dat forum.
Gewijzigd op 02/03/2017 12:59:46 door - Ariën -
Bedankt voor je bericht.
Via de volgende pagina kan je de uitleg vinden: http://spreadshirt.github.io/apps/tablomat .Ik moet dit verwerken op mijn website.
Ik denk dat een vacature wat overdreven is in dit geval. Ik hoop dat er iemand mij kan helpen. Ik hoor het heel graag.
Gr L.
Gewijzigd op 02/03/2017 13:07:23 door - Ariën -
Je kan die JavaScripts in de templates van Wordpress plaatsen. Heb je daar ervaring mee?
Anders kan je eventueel kijken of je wat kan met deze Wordpress plugin:
https://nl.wordpress.org/plugins/wp-spreadplugin/
Gewijzigd op 02/03/2017 13:06:59 door - Ariën -
Moet ik deze tekst in de header.php zetten:
<script type="text/javascript" src="//spreadshirt.github.io/apps/spreadshirt.min.js"></script>
<script type="text/javascript">
spreadshirt.create("tablomat", {
shopId: 123456, // your shop id
platform: "EU" // or NA
// ... additional parameter (see below)
}, function(err, app) {
if (err) {
// something went wrong
console.log(err);
} else {
// cool I can control the application (see below)
app.setProductTypeId(6);
}
});
</script>
Ik weet dan verder niet wat ik doen om de javascript aan te zetten. Nogmaals ik heb even hulp nodig om dit op te zetten.
Verder weet ik niet waar je JavaScript aan wilt zetten want JavaScript is al beschikbaar in elke browser. Je kan tegenwoordig niet meer zonder dat.
Het beste kun je hem toevoegen via een plugin, die je zelf maakt.
Hiervoor maak je in je plugins directory een map aan met de naam 'spreadshirt' (om maar iets te noemen, die naam kies je zelf) In die map zet je een bestand 'index.php' en een map 'js'.
In de map 'js' zet je een bestand met de naam 'spreadshirt.js' en daar zet je deze code in:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
spreadshirt.create("tablomat", {
shopId: 123456, // your shop id
platform: "EU" // or NA
// ... additional parameter (see below)
}, function(err, app) {
if (err) {
// something went wrong
console.log(err);
} else {
// cool I can control the application (see below)
app.setProductTypeId(6);
}
});
shopId: 123456, // your shop id
platform: "EU" // or NA
// ... additional parameter (see below)
}, function(err, app) {
if (err) {
// something went wrong
console.log(err);
} else {
// cool I can control the application (see below)
app.setProductTypeId(6);
}
});
Je ziet dat dat de code is de je in je header moet plaatsen.
In je index.php bestand zet je dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
/*
Plugin Name: Tablomat
Plugin URI: -
Description: Tablomat
Version: 1.0
Author: Jij zelf
Author URI: http://spreadshirt.github.io/apps/tablomat
License: GPLv2 or later
*/
function spreadshirt_scripts()
{
// Register the script:
wp_register_script( 'spreadshirt', plugins_url( '/js/spreadshirt.js', __FILE__ ) );
wp_register_script( 'spreadshirt2', '//spreadshirt.github.io/apps/spreadshirt.min.js' );
wp_enqueue_script( 'spreadshirt' );
wp_enqueue_script( 'spreadshirt2' );
}
add_action( 'wp_enqueue_scripts', 'spreadshirt_scripts' );
?>
/*
Plugin Name: Tablomat
Plugin URI: -
Description: Tablomat
Version: 1.0
Author: Jij zelf
Author URI: http://spreadshirt.github.io/apps/tablomat
License: GPLv2 or later
*/
function spreadshirt_scripts()
{
// Register the script:
wp_register_script( 'spreadshirt', plugins_url( '/js/spreadshirt.js', __FILE__ ) );
wp_register_script( 'spreadshirt2', '//spreadshirt.github.io/apps/spreadshirt.min.js' );
wp_enqueue_script( 'spreadshirt' );
wp_enqueue_script( 'spreadshirt2' );
}
add_action( 'wp_enqueue_scripts', 'spreadshirt_scripts' );
?>
ALs je nu in je dasboard de plugin activeert zullen de scripts op je pagina's geinclude worden...
Gewijzigd op 02/03/2017 15:06:10 door Marlies Maalderink
- Ariën - op 02/03/2017 15:05:39:
Een child-template zou toch ook kunnen?
Op zich wel maar waarom zou je een functionaliteit die los staat van je opmaak in een theme zetten? Dan kun je later niet meer van theme wisselen zonder die functionaliteit kwijt te raken...
Marlies Maalderink op 02/03/2017 15:07:02:
Op zich wel maar waarom zou je een functionaliteit die los staat van je opmaak in een theme zetten? Dan kun je later niet meer van theme wisselen zonder die functionaliteit kwijt te raken...
- Ariën - op 02/03/2017 15:05:39:
Een child-template zou toch ook kunnen?
Op zich wel maar waarom zou je een functionaliteit die los staat van je opmaak in een theme zetten? Dan kun je later niet meer van theme wisselen zonder die functionaliteit kwijt te raken...
Touché!
Ik heb mijn shop ID al goed gezet. Ik maak gebruik van Visual Composer en Elementor.
Parameters
The parameter shopId and platform should be present. You'll find your shopId in the user area of spreadshirt. The platform decided if you like to speak with the European (EU) or the North American (NA) platform.
var requiredParameter = {
// required parameter
shopId: 123456, // your own shopId
platform: "EU", // the spreadshirt platform: "EU", "NA"
};
To change the look and feel of the application you can use the following parameter. By default the iframe will use 100% of the width and 700px in height and attaches to the document.body.
var layoutParameter = {
// iframe size
width: "100%", // width in px or %
height: "700px", // height in px or %
// render target
target: document.getElementById("someDiv"),
shareUrlTemplate: "https://example.com/create#productId={PRODUCT_ID}&viewId={VIEW_ID}"
};
Deeplinks
All other parameters are optional and change the initialization of the application. E.g. you could deeplink a specific productType (iPhone: 776) or add an image to the product. The list of product types id, available appearances and designs you get from the API.
There is also the possibility to automatically parse the deeplinks form the query parameters of the URL by using the option parseDeeplinks: true.
var possibleParameter = {
// optional design deeplinks
designUrl: null, /* an URL to an image, it will be uploaded.
* **You agree that you will have the rights to use this image**
*/
designId: null, // the id of an exisitng design
designColor1: null, // the printColor Id for layer 1
designColor2: null, // layer 2
designColor3: null, // layer 3
designColorRgb1: null, // or if you like RGB codes for the following layers
designColorRgb2: null,
designColorRgb3: null,
// product relevant deeplinks
productId: null, // id of an existing product
appearanceId: null, // load the appearance (color) for the product type
sizeId: null, // preselect the product type size in combination with quantity
quantity: null, // speficies the quantity, used in combination with sizeId
viewId: null, // show this view of the product
// product type
productTypeId: null, // start with the product type - cannot be used in combination with productId
// text deeplinks, the won't work without deeplinking a productType || product || basketItem
tx1: null, // first line of text
tx2: null, // second line of text ...
tx3: null, // ... and guess, the third line
fontFamilyName: null, // Cutter, Arial, ...
fontFamilyWeight: null, // normal, bold
fontFamilyStyle: null, // normal, italic
isExample: false, // a boolean flag indicating if the text configuration from tx1= deeplinks is removed or not
textColorRgb: null, // you can specify colors either as rgb value
textColor: null, // or as id of an print type
// independent
departmentId: null, // load this product type department
productTypeCategoryId: null, // or this product type category
// also independent, but for designs
designCategoryId: null, // open this designCategory
designSearch: null, // or perform a search for designs with the term
panel: null, // show the following panel first - "productTypes", "designs", "upload", "imageNetwork"
basketId: null // the id of the api basket to use
safeSearch: null // available values "strict" or "off". By default "off
En maak eens dit aan in je templates:
Code (php)
1
<div id="SpreadShirtShop"> </div>
Dan zal er als het goed gaat iets spannends gerenderd worden.
Ik heb nog nooit met SpreadShirt gewerkt, dus ik hoop dat dit werkt of een stap in de goede richting is.
Gewijzigd op 02/03/2017 15:54:15 door - Ariën -
Maar moet eerlijk zeggen dat ik niet zoveel verstand van javascript heb. Als ik de documentatie lees lijkt me dat hij het gewoon moet doen, maar dat het wel belangerijk is dat het platform (land) goed ingesteld wordt.